initial

books/screens/AddBook.tsx

@@ -0,0 +1,136 @@
+
+import React, { useState, useEffect } from 'react';
+import { Book, AppScreen } from '../types';
+
+interface AddBookProps {
+  initialData?: Partial<Book>;
+  onSave: (book: Partial<Book>) => void;
+  onCancel: () => void;
+  onScanClick: () => void;
+}
+
+export const AddBook: React.FC<AddBookProps> = ({ initialData, onSave, onCancel, onScanClick }) => {
+  const [formData, setFormData] = useState<Partial<Book>>({
+    title: '',
+    author: '',
+    genre: '',
+    annotation: '',
+    status: 'want_to_read',
+    pages: 0,
+    language: 'Russian',
+    publishedYear: new Date().getFullYear(),
+    rating: 5,
+    coverUrl: 'https://picsum.photos/seed/newbook/400/600',
+    ...initialData
+  });
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    const { id, value } = e.target;
+    setFormData(prev => ({ ...prev, [id]: value }));
+  };
+
+  return (
+    <div className="flex flex-col h-full bg-background-dark">
+      <header className="sticky top-0 z-50 flex items-center justify-between px-4 py-3 bg-background-dark/90 backdrop-blur-md border-b border-white/5">
+        <button onClick={onCancel} className="flex items-center justify-center size-10 rounded-full hover:bg-surface-dark transition-colors text-gray-300">
+          <span className="material-symbols-outlined">arrow_back_ios_new</span>
+        </button>
+        <h1 className="text-lg font-bold tracking-tight text-center flex-1 pr-10">Добавить книгу</h1>
+      </header>
+
+      <main className="flex-1 flex flex-col p-5 gap-6 overflow-y-auto no-scrollbar pb-32">
+        <div className="flex justify-center w-full">
+          <div 
+            onClick={onScanClick}
+            className="group relative flex flex-col items-center justify-center w-40 h-60 rounded-lg border-2 border-dashed border-border-dark bg-surface-dark transition-all hover:border-primary cursor-pointer overflow-hidden shadow-sm"
+          >
+            {formData.coverUrl && !formData.coverUrl.includes('picsum') ? (
+              <img src={formData.coverUrl} className="absolute inset-0 w-full h-full object-cover" alt="Preview" />
+            ) : (
+              <div className="flex flex-col items-center gap-3 p-4 text-center z-10 transition-transform group-hover:scale-105">
+                <div className="size-12 rounded-full bg-primary/10 flex items-center justify-center text-primary">
+                  <span className="material-symbols-outlined text-[28px]">add_a_photo</span>
+                </div>
+                <p className="text-xs font-medium text-gray-400 group-hover:text-primary transition-colors">Загрузить или отсканировать</p>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <form className="flex flex-col gap-5">
+          <div className="flex flex-col gap-2">
+            <label className="text-sm font-semibold text-gray-200 ml-1" htmlFor="title">Название</label>
+            <input
+              id="title"
+              className="w-full rounded-xl border-border-dark bg-surface-dark px-4 py-3.5 text-base text-white placeholder-gray-500 focus:border-primary focus:ring-1 focus:ring-primary transition-shadow shadow-sm"
+              placeholder="Введите название книги"
+              value={formData.title}
+              onChange={handleChange}
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <label className="text-sm font-semibold text-gray-200 ml-1" htmlFor="author">Автор</label>
+            <input
+              id="author"
+              className="w-full rounded-xl border-border-dark bg-surface-dark px-4 py-3.5 text-base text-white placeholder-gray-500 focus:border-primary focus:ring-1 focus:ring-primary transition-shadow shadow-sm"
+              placeholder="Имя автора"
+              value={formData.author}
+              onChange={handleChange}
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <label className="text-sm font-semibold text-gray-200 ml-1" htmlFor="genre">Жанр</label>
+            <div className="relative">
+              <select
+                id="genre"
+                className="w-full appearance-none rounded-xl border-border-dark bg-surface-dark px-4 py-3.5 text-base text-white focus:border-primary focus:ring-1 focus:ring-primary transition-shadow shadow-sm pr-10 cursor-pointer"
+                value={formData.genre}
+                onChange={handleChange}
+              >
+                <option disabled value="">Выберите жанр</option>
+                <option value="fiction">Фантастика</option>
+                <option value="fantasy">Фэнтези</option>
+                <option value="science">Научпоп</option>
+                <option value="biography">Биография</option>
+                <option value="detective">Детектив</option>
+                <option value="other">Другое</option>
+              </select>
+              <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-4 text-gray-400">
+                <span className="material-symbols-outlined">expand_more</span>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <label className="text-sm font-semibold text-gray-200 ml-1" htmlFor="annotation">Аннотация</label>
+            <textarea
+              id="annotation"
+              rows={4}
+              className="w-full rounded-xl border-border-dark bg-surface-dark px-4 py-3.5 text-base text-white placeholder-gray-500 focus:border-primary focus:ring-1 focus:ring-primary transition-shadow shadow-sm resize-none"
+              placeholder="О чем эта книга? Краткое описание или заметки..."
+              value={formData.annotation}
+              onChange={handleChange}
+            />
+          </div>
+        </form>
+      </main>
+
+      <div className="fixed bottom-0 left-0 right-0 max-w-md mx-auto p-4 bg-background-dark/95 backdrop-blur-sm border-t border-white/5 z-40">
+        <div className="flex gap-3">
+          <button onClick={onCancel} className="flex-1 py-3.5 px-4 rounded-xl font-semibold text-gray-300 bg-surface-dark hover:bg-[#25422e] transition-colors">
+            Отмена
+          </button>
+          <button
+            onClick={() => onSave(formData)}
+            className="flex-[2] py-3.5 px-4 rounded-xl font-bold text-white bg-primary hover:bg-[#14b047] shadow-lg shadow-primary/20 transition-all active:scale-[0.98] flex items-center justify-center gap-2"
+          >
+            <span className="material-symbols-outlined text-[20px]">save</span>
+            Сохранить
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

books/screens/BookDetails.tsx

@@ -0,0 +1,105 @@
+
+import React from 'react';
+import { Book, AppScreen } from '../types';
+
+interface BookDetailsProps {
+  book: Book;
+  onBack: () => void;
+  onDelete: (id: string) => void;
+  onEdit: (book: Book) => void;
+}
+
+export const BookDetails: React.FC<BookDetailsProps> = ({ book, onBack, onDelete, onEdit }) => {
+  return (
+    <div className="relative flex flex-col h-full bg-background-dark overflow-y-auto no-scrollbar">
+      <div className="absolute top-0 left-0 right-0 z-50 p-4 pt-6 flex items-center justify-between">
+        <button onClick={onBack} className="size-10 flex items-center justify-center rounded-full bg-black/20 hover:bg-black/40 text-white backdrop-blur-md border border-white/10">
+          <span className="material-symbols-outlined">arrow_back_ios_new</span>
+        </button>
+        <button className="size-10 flex items-center justify-center rounded-full bg-black/20 hover:bg-black/40 text-white backdrop-blur-md border border-white/10">
+          <span className="material-symbols-outlined">more_horiz</span>
+        </button>
+      </div>
+
+      <div className="relative w-full h-[460px] flex flex-col items-center justify-end pb-8 overflow-hidden shrink-0">
+        <div className="absolute inset-0 z-0">
+          <div 
+            className="absolute inset-0 bg-cover bg-center blur-2xl opacity-40 scale-125 saturate-150" 
+            style={{ backgroundImage: `url(${book.coverUrl})` }}
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-background-dark via-background-dark/80 to-transparent"></div>
+        </div>
+        
+        <div className="relative z-10 mb-4 transform transition-transform duration-500 hover:scale-105">
+          <div className="w-44 h-64 rounded-lg shadow-2xl bg-gray-800 relative overflow-hidden shadow-black/50">
+            <img src={book.coverUrl} className="absolute inset-0 w-full h-full object-cover" alt={book.title} />
+            <div className="absolute inset-0 bg-gradient-to-tr from-black/40 via-transparent to-white/10 pointer-events-none"></div>
+            <div className="absolute left-0 top-0 bottom-0 w-[2px] bg-white/20 blur-[1px]"></div>
+          </div>
+        </div>
+
+        <div className="relative z-20 mb-2">
+          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-black/40 border border-white/10 backdrop-blur-md">
+            <span className="relative flex h-2 w-2">
+              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
+              <span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
+            </span>
+            <span className="text-primary text-xs font-bold tracking-wide uppercase">
+              {book.status === 'reading' ? 'Reading Now' : book.status === 'done' ? 'Completed' : 'Wishlist'}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div className="relative z-20 px-6 -mt-2 space-y-8 pb-10">
+        <div className="text-center space-y-1">
+          <h1 className="text-white text-[28px] font-bold leading-tight tracking-tight">{book.title}</h1>
+          <p className="text-gray-400 text-lg font-medium">{book.author}</p>
+        </div>
+
+        <div className="flex flex-wrap justify-center gap-2">
+          {book.genre.split(',').map((g, i) => (
+            <div key={i} className="px-4 py-2 rounded-lg bg-[#244730] border border-[#386e4b]/50">
+              <p className="text-white text-xs font-semibold uppercase tracking-wider">{g.trim()}</p>
+            </div>
+          ))}
+        </div>
+
+        <div className="grid grid-cols-2 gap-3 pt-2">
+          <button onClick={() => onEdit(book)} className="group flex items-center justify-center gap-2 h-12 bg-primary hover:bg-[#15bd4d] text-background-dark font-bold rounded-xl transition-all active:scale-95 shadow-[0_4px_20px_-5px_rgba(23,207,84,0.4)]">
+            <span className="material-symbols-outlined text-[20px]">edit_square</span>
+            Edit Details
+          </button>
+          <button onClick={() => onDelete(book.id)} className="group flex items-center justify-center gap-2 h-12 bg-white/5 hover:bg-red-500/10 text-gray-300 hover:text-red-400 border border-white/10 hover:border-red-500/30 font-semibold rounded-xl transition-all active:scale-95">
+            <span className="material-symbols-outlined text-[20px]">delete</span>
+            Delete
+          </button>
+        </div>
+
+        <div className="space-y-3 pt-2">
+          <h3 className="text-white text-lg font-bold">About</h3>
+          <div className="relative bg-white/5 rounded-2xl p-4 border border-white/5">
+            <p className="text-gray-300 leading-relaxed text-[15px] font-light">{book.annotation}</p>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-3 pt-4">
+          {[
+            { label: 'Pages', val: book.pages || 'N/A', icon: 'menu_book', color: 'text-blue-400', bg: 'bg-blue-500/20' },
+            { label: 'Language', val: book.language || 'Russian', icon: 'language', color: 'text-purple-400', bg: 'bg-purple-500/20' },
+            { label: 'Published', val: book.publishedYear || 'N/A', icon: 'calendar_month', color: 'text-orange-400', bg: 'bg-orange-500/20' },
+            { label: 'Rating', val: `${book.rating || '0'}/5`, icon: 'star', color: 'text-yellow-400', bg: 'bg-yellow-500/20' },
+          ].map((item, idx) => (
+            <div key={idx} className="glass-panel p-3.5 rounded-xl border border-white/5 flex flex-col gap-1 items-start bg-white/5">
+              <div className={`p-1.5 rounded-md ${item.bg} ${item.color} mb-1`}>
+                <span className="material-symbols-outlined text-[18px]">{item.icon}</span>
+              </div>
+              <span className="text-gray-500 text-[11px] uppercase font-bold tracking-wider">{item.label}</span>
+              <span className="text-white font-semibold text-base">{item.val}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

books/screens/Categories.tsx

@@ -0,0 +1,52 @@
+
+import React from 'react';
+import { CATEGORIES } from '../constants';
+
+export const Categories: React.FC = () => {
+  return (
+    <div className="flex flex-col h-full bg-background-dark">
+      <div className="h-10 w-full"></div>
+      
+      <div className="flex flex-col gap-2 px-4 pb-2 sticky top-0 z-20 bg-background-dark/95 backdrop-blur-md">
+        <div className="flex items-center h-12 justify-between">
+          <span className="text-white/60 text-sm font-medium">Изменить</span>
+          <button className="flex items-center justify-center rounded-full size-10 bg-primary/10 text-primary">
+            <span className="material-symbols-outlined text-[24px]">add</span>
+          </button>
+        </div>
+        <h1 className="text-white tracking-tight text-[32px] font-bold leading-tight">Категории</h1>
+      </div>
+
+      <div className="px-4 py-2 sticky top-[108px] z-10 bg-background-dark pb-4">
+        <div className="flex w-full items-stretch rounded-lg h-10 bg-card-dark overflow-hidden transition-all duration-200">
+          <div className="text-white/40 flex items-center justify-center pl-3 pr-2">
+            <span className="material-symbols-outlined text-[20px]">search</span>
+          </div>
+          <input className="bg-transparent border-none focus:ring-0 placeholder:text-white/40 px-0 text-base text-white flex-1" placeholder="Поиск жанра..." />
+          <div className="flex items-center pr-3">
+            <span className="material-symbols-outlined text-[20px] text-white/40">mic</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 flex flex-col px-4 pb-24 gap-3 overflow-y-auto no-scrollbar">
+        {CATEGORIES.map((cat) => (
+          <button key={cat.id} className="group flex items-center gap-4 bg-card-dark p-4 rounded-xl shadow-sm hover:shadow-md active:scale-[0.98] transition-all border border-white/5">
+            <div className={`flex items-center justify-center rounded-lg ${cat.colorClass} shrink-0 size-12`}>
+              <span className="material-symbols-outlined text-[24px]">{cat.icon}</span>
+            </div>
+            <div className="flex flex-col flex-1 items-start">
+              <p className="text-white text-[17px] font-semibold leading-snug">{cat.name}</p>
+              <p className="text-white/50 text-[13px] font-medium leading-normal">
+                {cat.count > 0 ? `${cat.count} книги` : 'Нет книг'}
+              </p>
+            </div>
+            <div className="shrink-0 text-white/20 group-hover:text-primary transition-colors">
+              <span className="material-symbols-outlined text-[24px]">chevron_right</span>
+            </div>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};

books/screens/Library.tsx

@@ -0,0 +1,108 @@
+
+import React, { useState } from 'react';
+import { Book, AppScreen } from '../types';
+
+interface LibraryProps {
+  books: Book[];
+  onBookClick: (book: Book) => void;
+  onAddClick: () => void;
+}
+
+export const Library: React.FC<LibraryProps> = ({ books, onBookClick, onAddClick }) => {
+  const [search, setSearch] = useState('');
+
+  const filteredBooks = books.filter(b => 
+    b.title.toLowerCase().includes(search.toLowerCase()) || 
+    b.author.toLowerCase().includes(search.toLowerCase())
+  );
+
+  return (
+    <div className="flex flex-col h-full bg-background-dark">
+      <header className="sticky top-0 z-30 bg-background-dark/95 backdrop-blur-md border-b border-white/5 pb-2 pt-4">
+        <div className="flex items-center px-4 py-3 justify-between">
+          <div className="w-10"></div>
+          <h2 className="text-xl font-bold leading-tight tracking-tight flex-1 text-center">Книжная полка</h2>
+          <div className="w-10 flex justify-end">
+            <button className="text-white hover:text-primary transition-colors">
+              <span className="material-symbols-outlined">notifications</span>
+            </button>
+          </div>
+        </div>
+
+        <div className="px-4 pb-2">
+          <div className="flex w-full items-stretch rounded-xl h-12 bg-surface-highlight shadow-sm ring-1 ring-white/5 focus-within:ring-2 focus-within:ring-primary transition-all">
+            <div className="text-text-muted flex items-center justify-center pl-4 pr-2">
+              <span className="material-symbols-outlined text-[20px]">search</span>
+            </div>
+            <input
+              className="flex w-full min-w-0 flex-1 bg-transparent text-white focus:outline-none placeholder:text-text-muted text-base font-normal"
+              placeholder="Поиск по названию или автору..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+            />
+          </div>
+        </div>
+      </header>
+
+      <div className="px-4 pt-2 pb-24 flex-1">
+        <div className="flex flex-col gap-4 mb-6">
+          <div className="flex h-10 w-full items-center justify-center rounded-lg bg-surface-highlight p-1">
+            <button className="flex-1 h-full rounded-md bg-background-dark shadow-sm text-sm font-medium text-white">Все книги</button>
+            <button className="flex-1 h-full text-sm font-medium text-text-muted">Категории</button>
+          </div>
+
+          <div className="flex gap-3 overflow-x-auto no-scrollbar pb-1">
+            <button className="flex h-9 items-center justify-center gap-x-2 rounded-full bg-surface-highlight border border-white/5 px-4">
+              <span className="material-symbols-outlined text-[18px]">sort</span>
+              <span className="text-white text-sm font-medium">Сортировка</span>
+            </button>
+            <button className="flex h-9 items-center justify-center gap-x-2 rounded-full bg-surface-highlight border border-white/5 px-4">
+              <span className="material-symbols-outlined text-[18px]">filter_list</span>
+              <span className="text-white text-sm font-medium">Фильтр</span>
+            </button>
+            <button className="flex h-9 items-center justify-center gap-x-2 rounded-full bg-surface-highlight border border-white/5 px-4 whitespace-nowrap">
+              <span className="text-white text-sm font-medium">Непрочитанные</span>
+            </button>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          {filteredBooks.map((book) => (
+            <div key={book.id} className="flex flex-col gap-2 group cursor-pointer" onClick={() => onBookClick(book)}>
+              <div className="relative w-full aspect-[2/3] rounded-lg overflow-hidden shadow-md group-hover:shadow-xl transition-all duration-300 bg-surface-dark">
+                <img src={book.coverUrl || 'https://picsum.photos/seed/placeholder/400/600'} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" alt={book.title} />
+                
+                {book.status === 'reading' && (
+                  <div className="absolute bottom-0 left-0 right-0 h-1 bg-black/50">
+                    <div className="h-full bg-primary" style={{ width: `${book.progress || 0}%` }}></div>
+                  </div>
+                )}
+                
+                {book.status === 'done' && (
+                  <div className="absolute top-2 left-2 bg-primary/90 text-white text-[10px] font-bold px-2 py-0.5 rounded-full backdrop-blur-sm">DONE</div>
+                )}
+
+                {book.isFavorite && (
+                  <div className="absolute top-2 right-2 bg-black/60 backdrop-blur-sm rounded-full p-1">
+                    <span className="material-symbols-outlined text-white text-[14px] fill-current">favorite</span>
+                  </div>
+                )}
+              </div>
+              <div>
+                <h3 className="text-white text-base font-semibold leading-tight line-clamp-1">{book.title}</h3>
+                <p className="text-text-muted text-sm font-normal leading-normal line-clamp-1">{book.author}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <button
+        onClick={onAddClick}
+        className="fixed bottom-24 right-5 z-40 bg-primary text-white w-14 h-14 rounded-full shadow-lg shadow-primary/40 flex items-center justify-center hover:scale-110 active:scale-95 transition-all"
+      >
+        <span className="material-symbols-outlined text-[28px]">add</span>
+      </button>
+    </div>
+  );
+};

books/screens/Scanner.tsx

@@ -0,0 +1,165 @@
+
+import React, { useRef, useState, useEffect } from 'react';
+import { extractBookData } from '../services/geminiService';
+import { Book } from '../types';
+
+interface ScannerProps {
+  onCancel: () => void;
+  onDetected: (data: Partial<Book>) => void;
+}
+
+export const Scanner: React.FC<ScannerProps> = ({ onCancel, onDetected }) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let stream: MediaStream | null = null;
+    
+    async function startCamera() {
+      try {
+        // Try preferred environment camera first
+        try {
+          stream = await navigator.mediaDevices.getUserMedia({ 
+            video: { facingMode: 'environment' } 
+          });
+        } catch (innerErr) {
+          console.warn("Environment camera not found, falling back to default camera...");
+          // Fallback to any available video source
+          stream = await navigator.mediaDevices.getUserMedia({ 
+            video: true 
+          });
+        }
+
+        if (videoRef.current) {
+          videoRef.current.srcObject = stream;
+        }
+      } catch (err) {
+        setError('Не удалось получить доступ к камере. Убедитесь, что разрешения предоставлены.');
+        console.error("Camera access error:", err);
+      }
+    }
+    
+    startCamera();
+
+    return () => {
+      if (stream) {
+        stream.getTracks().forEach(track => track.stop());
+      }
+    };
+  }, []);
+
+  const handleCapture = async () => {
+    if (!videoRef.current || !canvasRef.current || isProcessing) return;
+
+    // Ensure the video is actually playing and has dimensions
+    if (videoRef.current.readyState < 2 || videoRef.current.videoWidth === 0) {
+      setError('Камера еще не готова. Пожалуйста, подождите.');
+      return;
+    }
+
+    setIsProcessing(true);
+    setError(null);
+
+    const canvas = canvasRef.current;
+    const video = videoRef.current;
+    
+    // Scale down large images to avoid API limits/errors while keeping readability
+    const MAX_WIDTH = 1024;
+    const scale = Math.min(1, MAX_WIDTH / video.videoWidth);
+    canvas.width = video.videoWidth * scale;
+    canvas.height = video.videoHeight * scale;
+    
+    const ctx = canvas.getContext('2d');
+    
+    if (ctx) {
+      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+      // Use standard quality for reliable extraction
+      const base64Image = canvas.toDataURL('image/jpeg', 0.85).split(',')[1];
+
+      try {
+        const bookData = await extractBookData(base64Image);
+        onDetected({
+          ...bookData,
+          coverUrl: canvas.toDataURL('image/jpeg') // Local preview for the form
+        });
+      } catch (err: any) {
+        console.error("OCR Error:", err);
+        setError('Не удалось распознать книгу. Попробуйте еще раз с лучшим освещением.');
+        setIsProcessing(false);
+      }
+    }
+  };
+
+  return (
+    <div className="relative h-screen w-full overflow-hidden bg-black flex flex-col">
+      <video
+        ref={videoRef}
+        autoPlay
+        playsInline
+        muted
+        className="absolute inset-0 w-full h-full object-cover opacity-80"
+      />
+      <canvas ref={canvasRef} className="hidden" />
+
+      <div className="absolute inset-0 flex flex-col justify-between z-10">
+        <div className="flex items-center justify-between p-4 pt-12 bg-gradient-to-b from-black/70 to-transparent">
+          <button onClick={onCancel} className="flex items-center justify-center w-10 h-10 rounded-full bg-black/40 text-white backdrop-blur-md">
+            <span className="material-symbols-outlined text-2xl">close</span>
+          </button>
+          <div className="px-4 py-1.5 rounded-full bg-black/40 backdrop-blur-md border border-white/10">
+            <span className="text-white text-xs font-medium tracking-wide">СКАНЕР</span>
+          </div>
+          <div className="w-10"></div>
+        </div>
+
+        <div className="flex-1 flex flex-col items-center justify-center relative w-full">
+          <div className="relative w-[75%] aspect-[2/3] rounded-2xl border border-white/20 shadow-2xl">
+            <div className="absolute inset-0 rounded-2xl shadow-[0_0_0_9999px_rgba(0,0,0,0.65)] pointer-events-none"></div>
+            
+            <div className="absolute -top-1 -left-1 w-8 h-8 border-t-4 border-l-4 border-primary rounded-tl-xl z-20"></div>
+            <div className="absolute -top-1 -right-1 w-8 h-8 border-t-4 border-r-4 border-primary rounded-tr-xl z-20"></div>
+            <div className="absolute -bottom-1 -left-1 w-8 h-8 border-b-4 border-l-4 border-primary rounded-bl-xl z-20"></div>
+            <div className="absolute -bottom-1 -right-1 w-8 h-8 border-b-4 border-r-4 border-primary rounded-br-xl z-20"></div>
+
+            <div className="absolute inset-0 overflow-hidden rounded-2xl z-10">
+              <div className="w-full h-1/2 bg-gradient-to-b from-transparent via-primary/30 to-transparent opacity-50 absolute top-0 animate-scan"></div>
+              <div className="w-full h-0.5 bg-primary shadow-[0_0_15px_rgba(23,207,84,0.8)] absolute top-1/2 animate-scan"></div>
+            </div>
+          </div>
+
+          <div className="mt-8 text-center px-8">
+            <p className="text-white font-medium drop-shadow-md">
+              Поместите обложку в рамку
+            </p>
+            {isProcessing && (
+              <p className="text-primary text-sm font-medium mt-2 animate-pulse">
+                Распознавание...
+              </p>
+            )}
+            {error && (
+              <p className="text-red-400 text-sm font-medium mt-2 bg-black/50 p-2 rounded-lg backdrop-blur-sm">
+                {error}
+              </p>
+            )}
+          </div>
+        </div>
+
+        <div className="w-full bg-gradient-to-t from-black/90 via-black/80 to-transparent pb-10 pt-12 px-6">
+          <div className="flex items-center justify-center max-w-md mx-auto">
+             <button 
+              disabled={isProcessing}
+              onClick={handleCapture} 
+              className="relative group cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              <div className={`w-20 h-20 rounded-full border-4 ${isProcessing ? 'border-primary' : 'border-white/30'} flex items-center justify-center transition-all duration-300`}>
+                <div className={`w-16 h-16 ${isProcessing ? 'bg-primary animate-pulse' : 'bg-white'} rounded-full transition-all duration-200 group-active:scale-90 shadow-[0_0_20px_rgba(255,255,255,0.3)]`}></div>
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};