Refactor dialog components and styles for improved UI consistency

Updated the dialog components to use a unified class name, replacing 'crt-panel' with 'crt-dialog' for better clarity and consistency across the application. Enhanced the dialog overlay with a denser background and blur effect to improve readability against underlying content. Additionally, modified the UploadSnackbar and ShowsPanel to reflect these changes, ensuring a cohesive user experience.

frontend/src/features/admin/media/UploadSnackbar.tsx

@@ -48,7 +48,7 @@ export function UploadSnackbar() {
   else header = t('admin.media.uploadedCount', { count: done })
 
   return (
-    <div className="crt-panel fixed bottom-4 right-4 z-50 w-96 max-w-[calc(100vw-2rem)] rounded-md shadow-lg">
+    <div className="crt-dialog fixed bottom-4 right-4 z-50 w-96 max-w-[calc(100vw-2rem)] rounded-md">
       <div className="flex items-center gap-2 border-b border-border px-3 py-2 text-sm">
         <span className="truncate font-medium">{header}</span>
         {hasItems && (

frontend/src/features/admin/shows/ShowsPanel.tsx

@@ -359,7 +359,7 @@ function GenreCell({ primary, others }: Readonly<{ primary: string | null; other
       </button>
       {at && (
         <div
-          className="crt-panel fixed z-50 max-w-56 rounded-md border border-border bg-background px-2 py-1.5 text-xs"
+          className="crt-popover fixed z-50 max-w-56 rounded-md px-2 py-1.5 text-xs"
           style={{ left: at.left, top: at.top }}
         >
           <p className="mb-1 text-[10px] uppercase tracking-wide text-muted-foreground">

frontend/src/index.css

@@ -122,6 +122,19 @@
       0 8px 30px rgba(0, 0, 0, 0.25);
   }
 
+  /*
+   * Модальное окно. Тот же оттенок, что у карточки, но фон непрозрачный: диалог висит над сеткой
+   * и таблицами, и сквозь полупрозрачную панель чужой текст читался прямо поверх полей ввода.
+   * Тень глубже, чем у карточки, — окно должно отрываться от страницы, а не лежать на ней.
+   */
+  .crt-dialog {
+    background: color-mix(in srgb, var(--muted) 82%, var(--background));
+    border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
+    box-shadow:
+      0 0 0 1px color-mix(in srgb, var(--primary) 15%, transparent) inset,
+      0 24px 64px rgba(0, 0, 0, 0.7);
+  }
+
   /*
    * Всплывающая панель (поповер, автокомплит). Отдельный класс, а не crt-panel с правкой фона:
    * фон там задан в этом же слое, и утилита вроде bg-muted его не перебивает — выигрывает то,

frontend/src/shared/ui/dialog.tsx

@@ -12,7 +12,9 @@ const DialogOverlay = forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Overlay
     ref={ref}
-    className={cn('fixed inset-0 z-50 bg-black/60', className)}
+    // Затемнение плотнее и с размытием: под диалогом обычно сетка эфира, и её строки
+    // просвечивали сквозь окно, мешая читать поля.
+    className={cn('fixed inset-0 z-50 bg-black/80 backdrop-blur-sm', className)}
     {...props}
   />
 ))
@@ -27,7 +29,7 @@ export const DialogContent = forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'crt-panel fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-md p-6',
+        'crt-dialog fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-md p-6',
         className,
       )}
       {...props}

frontend/src/shared/ui/toaster.tsx

@@ -47,7 +47,7 @@ function ToastItem({
   return (
     <output
       className={cn(
-        'crt-panel pointer-events-auto flex items-start gap-3 rounded-md px-4 py-3 text-sm shadow-lg',
+        'crt-dialog pointer-events-auto flex items-start gap-3 rounded-md px-4 py-3 text-sm',
         variant === 'success' && 'border-primary/60',
         variant === 'error' && 'border-red-700/60 text-red-400',
       )}