novel extensions dont appear on manga entry and viceversa

desktop/server.js

@@ -88,6 +88,7 @@ const start = async () => {
     initDatabase("local_library");
     init();
 
+
     const refreshAll = async () => {
       await refreshTrendingAnime();
       await sleep(300);
@@ -109,9 +110,11 @@ const start = async () => {
 
     await loadExtensions();
     await initHeadless();
-    await refreshAll();
 
     await fastify.listen({ port: 54322, host: "0.0.0.0" });
+    refreshAll().catch(e =>
+        console.error("initial refresh failed", e)
+    );
     console.log(`Server running at http://localhost:54322`);
   } catch (err) {
     fastify.log.error(err);

desktop/src/api/anime/anime.controller.ts

@@ -1,7 +1,16 @@
 import {FastifyReply, FastifyRequest} from 'fastify';
 import * as animeService from './anime.service';
+import { setActivity } from '../rpc/rp.service';
+import { upsertListEntry } from '../list/list.service';
 import {getExtension} from '../../shared/extensions';
+import { getConfig as loadConfig } from '../../shared/config';
 import {Anime, AnimeRequest, SearchRequest, WatchStreamRequest} from '../types';
+import {spawn} from "node:child_process";
+import net from 'net';
+import fs from 'fs';
+import os from 'os';
+import path from 'path';
+import jwt from "jsonwebtoken";
 
 export async function getAnime(req: AnimeRequest, reply: FastifyReply) {
     try {
@@ -105,3 +114,213 @@ export async function getWatchStream(req: WatchStreamRequest, reply: FastifyRepl
         return { error: error.message };
     }
 }
+
+export async function openInMPV(req: any, reply: any) {
+    try {
+        const { title, video, subtitles = [], chapters = [], animeId, episode, entrySource, token } = req.body;
+
+        if (!video?.url) return { error: 'Missing video url' };
+
+        const PORT = 54322;
+        const proxyBase = `http://localhost:${PORT}/api/proxy`;
+        const mediaTitle = title || 'Anime';
+
+        const proxyVideo =
+            `${proxyBase}?url=${encodeURIComponent(video.url)}` +
+            `&referer=${encodeURIComponent(video.headers?.Referer ?? '')}` +
+            `&origin=${encodeURIComponent(video.headers?.Origin ?? '')}` +
+            `&userAgent=${encodeURIComponent(video.headers?.['User-Agent'] ?? '')}`;
+
+        const proxySubs = subtitles.map((s: any) =>
+            `${proxyBase}?url=${encodeURIComponent(s.src)}` +
+            `&referer=${encodeURIComponent(video.headers?.Referer ?? '')}` +
+            `&origin=${encodeURIComponent(video.headers?.Origin ?? '')}` +
+            `&userAgent=${encodeURIComponent(video.headers?.['User-Agent'] ?? '')}`
+        );
+
+        const pipe = `\\\\.\\pipe\\mpv-${Date.now()}`;
+        const { values } = loadConfig();
+
+        const MPV_PATH =
+            values.paths?.mpv || 'mpv';
+
+        let chaptersArg: string[] = [];
+        if (chapters.length) {
+
+            chapters.sort((a: any, b: any) => a.startTime - b.startTime);
+
+            const lines = [';FFMETADATA1'];
+
+            for (let i = 0; i < chapters.length; i++) {
+                const c = chapters[i];
+
+                const start = Math.floor(c.startTime * 1000);
+                const end = Math.floor(c.endTime * 1000);
+
+                const title = (c.type || 'chapter').toUpperCase();
+
+                lines.push(
+                    `[CHAPTER]`, `TIMEBASE=1/1000`, `START=${start}`, `END=${end}`, `title=${title}`
+                );
+
+                if (i < chapters.length - 1) {
+                    const nextStart = Math.floor(chapters[i + 1].startTime * 1000);
+
+                    if (nextStart - end > 1000) {
+                        lines.push(
+                            `[CHAPTER]`, `TIMEBASE=1/1000`, `START=${end}`, `END=${nextStart}`, `title=Episode`
+                        );
+                    }
+                } else {
+                    lines.push(
+                        `[CHAPTER]`, `TIMEBASE=1/1000`, `START=${end}`, `title=Episode`
+                    );
+                }
+            }
+
+            const chaptersFile = path.join(os.tmpdir(), `mpv-chapters-${Date.now()}.txt`);
+            fs.writeFileSync(chaptersFile, lines.join('\n'));
+            chaptersArg = [`--chapters-file=${chaptersFile}`];
+        }
+
+        if (!MPV_PATH) {
+            return { error: 'MPV_NOT_CONFIGURED' };
+        }
+
+        spawn(
+            MPV_PATH,
+            [
+                '--force-window=yes',
+                '--idle=yes',
+                '--keep-open=yes',
+                '--no-terminal',
+                '--hwdec=auto',
+                `--force-media-title=Loading...`,
+
+                `--input-ipc-server=${pipe}`,
+                ...chaptersArg
+            ],
+            { stdio: 'ignore', windowsHide: true, detached: true }
+        ).unref();
+
+        await new Promise(r => setTimeout(r, 400));
+        const socket = net.connect(pipe);
+
+        let duration = 0;
+        let currentTime = 0;
+        let isPaused = false;
+        let titleChanged = false;
+        let progressUpdated = false;
+
+        const sendRPC = (paused: boolean) => {
+            let startTimestamp = undefined;
+            let endTimestamp = undefined;
+
+            if (!paused && duration > 0) {
+                const now = Math.floor(Date.now() / 1000);
+                const elapsed = Math.floor(currentTime);
+
+                startTimestamp = now - elapsed;
+                endTimestamp = startTimestamp + Math.floor(duration);
+            }
+            setActivity({
+                details: mediaTitle,
+                state: `Episode ${episode}`,
+                mode: "watching",
+                paused: paused,
+                startTimestamp: startTimestamp,
+                endTimestamp: endTimestamp
+            })
+        };
+
+        const updateProgress = async () => {
+            if (!token || progressUpdated) return;
+            try {
+                const decoded = jwt.verify(token, process.env.JWT_SECRET!) as any;
+                const userId = decoded.id;
+                await upsertListEntry({
+                    user_id: userId,
+                    entry_id: animeId,
+                    source: entrySource,
+                    entry_type: "ANIME",
+                    status: "CURRENT",
+                    progress: episode
+                });
+                progressUpdated = true;
+            } catch (e) { console.error("[MPV] Progress update failed", e); }
+        };
+
+        const loadingTimeout = setTimeout(() => { if (!socket.destroyed) socket.end(); }, 15000);
+
+        socket.on('data', (data) => {
+            const chunks = data.toString().split('\n');
+            for (const chunk of chunks) {
+                if (!chunk.trim()) continue;
+                try {
+                    const json = JSON.parse(chunk);
+
+                    if (json.event === 'property-change' && json.name === 'duration' && typeof json.data === 'number') {
+                        duration = json.data;
+                        if (!titleChanged) {
+                            socket.write(JSON.stringify({ command: ['set_property', 'force-media-title', mediaTitle] }) + '\n');
+
+                            sendRPC(false);
+                            titleChanged = true;
+                            clearTimeout(loadingTimeout);
+                        }
+                    }
+
+                    if (json.event === 'property-change' && json.name === 'time-pos' && typeof json.data === 'number') {
+                        currentTime = json.data;
+
+                        if (duration > 0 && !progressUpdated && (currentTime / duration) >= 0.8) {
+                            updateProgress();
+                        }
+                    }
+
+                    if (json.event === 'property-change' && json.name === 'pause') {
+                        isPaused = json.data === true;
+                        sendRPC(isPaused);
+
+                    }
+
+                    if (json.event === 'seek') {
+
+                        setTimeout(() => sendRPC(isPaused), 100);
+                    }
+
+                    if (json.event === 'end-file' || json.event === 'shutdown') {
+                        sendRPC(true);
+                        if (!socket.destroyed) socket.destroy();
+                    }
+
+                } catch (err) {}
+            }
+        });
+
+        const commands = [
+            { command: ['observe_property', 1, 'duration'] },
+            { command: ['observe_property', 2, 'time-pos'] },
+            { command: ['observe_property', 3, 'pause'] },
+            { command: ['loadfile', proxyVideo, 'replace'] }
+        ];
+
+        commands.forEach(cmd => socket.write(JSON.stringify(cmd) + '\n'));
+
+        subtitles.forEach((s: any, i: number) => {
+            socket.write(JSON.stringify({
+                command: [
+                    'sub-add',
+                    proxySubs[i],
+                    'auto',
+                    s.label || 'Subtitle',
+                    s.srclang || ''
+                ]
+            }) + '\n');
+        });
+
+        return { success: true };
+    } catch (e) {
+        return { error: (e as Error).message };
+    }
+}

desktop/src/api/anime/anime.routes.ts

@@ -9,6 +9,7 @@ async function animeRoutes(fastify: FastifyInstance) {
     fastify.get('/search', controller.search);
     fastify.get('/search/:extension', controller.searchInExtension);
     fastify.get('/watch/stream', controller.getWatchStream);
+    fastify.post('/watch/mpv', controller.openInMPV);
 }
 
 export default animeRoutes;

desktop/src/api/anime/anime.service.ts

@@ -41,17 +41,21 @@ const MEDIA_FIELDS = `
   siteUrl
   tags { id name description category rank isGeneralSpoiler isMediaSpoiler isAdult }
   relations {
-    edges {
-      relationType
-      node {
-        id
-        title { romaji }
-        type
-        format
-        status
+      edges {
+        relationType
+        node {
+          id
+          title { romaji english }
+          type
+          format
+          status
+          coverImage { medium large color }
+          bannerImage
+          season
+          seasonYear
+        }
       }
     }
-  }
   studios {
     edges {
       isMain
@@ -70,12 +74,28 @@ const MEDIA_FIELDS = `
       mediaRecommendation {
         id
         title { romaji }
-        coverImage { medium }
+        coverImage { medium large}
         format
         type
       }
     }
   }
+  characters(perPage: 12, sort: [ROLE, RELEVANCE]) {
+    edges {
+      role
+      node {
+        id
+        name { full native }
+        image { medium large }
+      }
+      voiceActors {
+        id
+        name { full }
+        language
+        image { medium }
+      }
+    }
+  }
 `;
 
 export async function refreshTrendingAnime(): Promise<void> {
@@ -140,7 +160,19 @@ async function fetchAniList(query: string, variables: any) {
 export async function getAnimeById(id: string | number): Promise<Anime | { error: string }> {
     const row = await queryOne("SELECT full_data FROM anime WHERE id = ?", [id]);
 
-    if (row) return JSON.parse(row.full_data);
+    if (row) {
+        const cached = JSON.parse(row.full_data);
+
+        if (cached?.characters?.edges?.length) {
+            return cached;
+        }
+
+        await queryOne(
+            "DELETE FROM anime WHERE id = ?",
+            [id]
+        );
+    }
+
 
     const query = `
     query ($id: Int) {

desktop/src/api/books/books.controller.ts

@@ -101,12 +101,14 @@ export async function getChapterContent(req: any, reply: FastifyReply) {
     try {
         const { bookId, chapter, provider } = req.params;
         const source = req.query.source || 'anilist';
+        const lang = req.query.lang || 'none';
 
         const content = await booksService.getChapterContent(
             bookId,
             chapter,
             provider,
-            source
+            source,
+            lang
         );
 
         return reply.send(content);

desktop/src/api/books/books.service.ts

@@ -67,7 +67,19 @@ export async function getBookById(id: string | number): Promise<Book | { error:
     );
 
     if (row) {
-        return JSON.parse(row.full_data);
+        const parsed = JSON.parse(row.full_data);
+
+        const hasRelationImages =
+            parsed?.relations?.edges?.[0]?.node?.coverImage?.large;
+
+        const hasCharacterImages =
+            parsed?.characters?.nodes?.[0]?.image?.large;
+
+        if (hasRelationImages && hasCharacterImages) {
+            return parsed;
+        }
+
+        console.log(`[Book] Cache outdated for ID ${id}, refetching...`);
     }
 
     try {
@@ -82,8 +94,8 @@ export async function getBookById(id: string | number): Promise<Book | { error:
                 trailer { id site thumbnail } updatedAt coverImage { extraLarge large medium color }
                 bannerImage genres synonyms averageScore meanScore popularity isLocked trending favourites
                 tags { id name description category rank isGeneralSpoiler isMediaSpoiler isAdult userId }
-                relations { edges { relationType node { id title { romaji } } } }
-                characters(page: 1, perPage: 10) { nodes { id name { full } } }
+                relations { edges { relationType node { id title { romaji } coverImage { large medium } } } }
+                characters(page: 1, perPage: 10) { nodes { id name { full } image { large medium } } }
                 studios { nodes { id name isAnimationStudio } }
                 isAdult nextAiringEpisode { airingAt timeUntilAiring episode }
                 externalLinks { url site } 
@@ -406,7 +418,8 @@ async function searchChaptersInExtension(ext: Extension, name: string, searchTit
             title: ch.title,
             date: ch.releaseDate,
             provider: name,
-            index: ch.index
+            index: ch.index,
+            language: ch.language ?? null,
         }));
 
         await setCache(cacheKey, result, CACHE_TTL_MS);
@@ -463,7 +476,7 @@ export async function getChaptersForBook(id: string, ext: Boolean, onlyProvider?
     };
 }
 
-export async function getChapterContent(bookId: string, chapterIndex: string, providerName: string, source: string): Promise<ChapterContent> {
+export async function getChapterContent(bookId: string, chapterId: string, providerName: string, source: string, lang: string): Promise<ChapterContent> {
     const extensions = getAllExtensions();
     const ext = extensions.get(providerName);
 
@@ -471,14 +484,14 @@ export async function getChapterContent(bookId: string, chapterIndex: string, pr
         throw new Error("Provider not found");
     }
 
-    const contentCacheKey = `content:${providerName}:${source}:${bookId}:${chapterIndex}`;
+    const contentCacheKey = `content:${providerName}:${source}:${lang}:${bookId}:${chapterId}`;
     const cachedContent = await getCache(contentCacheKey);
 
     if (cachedContent) {
         const isExpired = Date.now() - cachedContent.created_at > CACHE_TTL_MS;
 
         if (!isExpired) {
-            console.log(`[${providerName}] Content cache hit for Book ID ${bookId}, Index ${chapterIndex}`);
+            console.log(`[${providerName}] Content cache hit for Book ID ${bookId}, Index ${chapterId}`);
             try {
                 return JSON.parse(cachedContent.result) as ChapterContent;
             } catch (e) {
@@ -486,33 +499,14 @@ export async function getChapterContent(bookId: string, chapterIndex: string, pr
 
             }
         } else {
-            console.log(`[${providerName}] Content cache expired for Book ID ${bookId}, Index ${chapterIndex}`);
+            console.log(`[${providerName}] Content cache expired for Book ID ${bookId}, Index ${chapterId}`);
         }
     }
 
-    const isExternal = source !== 'anilist';
-    const chapterList = await getChaptersForBook(bookId, isExternal, providerName);
-
-    if (!chapterList?.chapters || chapterList.chapters.length === 0) {
-        throw new Error("Chapters not found");
-    }
-
-    const providerChapters = chapterList.chapters.filter(c => c.provider === providerName);
-    const index = parseInt(chapterIndex, 10);
-
-    if (Number.isNaN(index)) {
-        throw new Error("Invalid chapter index");
-    }
-
-    if (!providerChapters[index]) {
-        throw new Error("Chapter index out of range");
-    }
-
-    const selectedChapter = providerChapters[index];
-
-    const chapterId = selectedChapter.id;
-    const chapterTitle = selectedChapter.title || null;
-    const chapterNumber = typeof selectedChapter.number === 'number' ? selectedChapter.number : index;
+    const selectedChapter: any = {
+        id: chapterId,
+        provider: providerName
+    };
 
     try {
         if (!ext.findChapterPages) {
@@ -522,12 +516,13 @@ export async function getChapterContent(bookId: string, chapterIndex: string, pr
         let contentResult: ChapterContent;
 
         if (ext.mediaType === "manga") {
+            // Usamos el ID directamente
             const pages = await ext.findChapterPages(chapterId);
             contentResult = {
                 type: "manga",
-                chapterId,
-                title: chapterTitle,
-                number: chapterNumber,
+                chapterId: selectedChapter.id,
+                title: selectedChapter.title,
+                number: selectedChapter.number,
                 provider: providerName,
                 pages
             };
@@ -535,9 +530,9 @@ export async function getChapterContent(bookId: string, chapterIndex: string, pr
             const content = await ext.findChapterPages(chapterId);
             contentResult = {
                 type: "ln",
-                chapterId,
-                title: chapterTitle,
-                number: chapterNumber,
+                chapterId: selectedChapter.id,
+                title: selectedChapter.title,
+                number: selectedChapter.number,
                 provider: providerName,
                 content
             };
@@ -546,7 +541,6 @@ export async function getChapterContent(bookId: string, chapterIndex: string, pr
         }
 
         await setCache(contentCacheKey, contentResult, CACHE_TTL_MS);
-
         return contentResult;
 
     } catch (err) {

desktop/src/api/config/config.controller.ts

@@ -1,43 +1,53 @@
-import {FastifyReply, FastifyRequest} from 'fastify';
-import {getConfig, setConfig} from '../../shared/config';
+import { FastifyReply, FastifyRequest } from 'fastify';
+import { getConfig, setConfig } from '../../shared/config';
 
 export async function getFullConfig(req: FastifyRequest, reply: FastifyReply) {
     try {
-        return getConfig();
-    } catch (err) {
+        const { values, schema } = getConfig();
+        return { values, schema };
+    } catch {
         return { error: "Error loading config" };
     }
 }
 
-export async function getConfigSection(req: FastifyRequest<{ Params: { section: string } }>, reply: FastifyReply) {
+export async function getConfigSection(
+    req: FastifyRequest<{ Params: { section: string } }>,
+    reply: FastifyReply
+) {
     try {
         const { section } = req.params;
-        const config = getConfig();
+        const { values } = getConfig();
 
-        if (config[section] === undefined) {
+        if (values[section] === undefined) {
             return { error: "Section not found" };
         }
 
-        return { [section]: config[section] };
-    } catch (err) {
+        return { [section]: values[section] };
+    } catch {
         return { error: "Error loading config section" };
     }
 }
 
-export async function updateConfig(req: FastifyRequest<{ Body: any }>, reply: FastifyReply) {
+export async function updateConfig(
+    req: FastifyRequest<{ Body: any }>,
+    reply: FastifyReply
+) {
     try {
-        return setConfig(req.body);
-    } catch (err) {
+        return setConfig(req.body); // schema nunca se toca
+    } catch {
         return { error: "Error updating config" };
     }
 }
 
-export async function updateConfigSection(req: FastifyRequest<{ Params: { section: string }, Body: any }>, reply: FastifyReply) {
+export async function updateConfigSection(
+    req: FastifyRequest<{ Params: { section: string }, Body: any }>,
+    reply: FastifyReply
+) {
     try {
         const { section } = req.params;
-        const updatedConfig = setConfig({ [section]: req.body });
-        return { [section]: updatedConfig[section] };
-    } catch (err) {
+        const updatedValues = setConfig({ [section]: req.body });
+        return { [section]: updatedValues[section] };
+    } catch {
         return { error: "Error updating config section" };
     }
 }

desktop/src/api/extensions/extensions.controller.ts

@@ -1,8 +1,6 @@
 import { FastifyReply, FastifyRequest } from 'fastify';
-import { getExtension, getExtensionsList, getGalleryExtensionsMap, getBookExtensionsMap, getAnimeExtensionsMap, saveExtensionFile, deleteExtensionFile } from '../../shared/extensions';
+import { getExtension, getExtensionsList, getGalleryExtensionsMap, getBookExtensionsMap, getMangaExtensionsMap, getNovelExtensionsMap, getAnimeExtensionsMap, saveExtensionFile, deleteExtensionFile } from '../../shared/extensions';
 import { ExtensionNameRequest } from '../types';
-import path from 'path';
-import fs from 'fs/promises';
 
 const TYPE_MAP: Record<string, string> = {
     'anime-board': 'anime',
@@ -69,6 +67,16 @@ export async function getBookExtensions(req: FastifyRequest, reply: FastifyReply
     return { extensions: Array.from(bookExtensions.keys()) };
 }
 
+export async function getMangaExtensions(req: FastifyRequest, reply: FastifyReply) {
+    const bookExtensions = getMangaExtensionsMap();
+    return { extensions: Array.from(bookExtensions.keys()) };
+}
+
+export async function getNovelExtensions(req: FastifyRequest, reply: FastifyReply) {
+    const bookExtensions = getNovelExtensionsMap();
+    return { extensions: Array.from(bookExtensions.keys()) };
+}
+
 export async function getGalleryExtensions(req: FastifyRequest, reply: FastifyReply) {
     const galleryExtensions = getGalleryExtensionsMap();
     return { extensions: Array.from(galleryExtensions.keys()) };

desktop/src/api/extensions/extensions.routes.ts

@@ -6,6 +6,8 @@ async function extensionsRoutes(fastify: FastifyInstance) {
     fastify.get('/extensions/anime', controller.getAnimeExtensions);
     fastify.post('/extensions/update', controller.updateExtensions);
     fastify.get('/extensions/book', controller.getBookExtensions);
+    fastify.get('/extensions/manga', controller.getMangaExtensions);
+    fastify.get('/extensions/novel', controller.getNovelExtensions);
     fastify.get('/extensions/gallery', controller.getGalleryExtensions);
     fastify.get('/extensions/:name/settings', controller.getExtensionSettings);
     fastify.post('/extensions/install', controller.installExtension);

desktop/src/api/local/download.service.ts

@@ -0,0 +1,478 @@
+import { getConfig as loadConfig } from '../../shared/config';
+import { queryOne, queryAll, run } from '../../shared/database';
+import { getAnimeById } from '../anime/anime.service';
+import { getBookById } from '../books/books.service';
+import crypto from 'crypto';
+import fs from 'fs';
+import path from 'path';
+import AdmZip from 'adm-zip';
+import { spawn } from 'child_process';
+const { values } = loadConfig();
+
+const FFMPEG_PATH =
+    values.paths?.ffmpeg || 'ffmpeg';
+
+type AnimeDownloadParams = {
+    anilistId: number;
+    episodeNumber: number;
+    streamUrl: string;
+    headers?: Record<string, string>;
+    quality?: string;
+    subtitles?: Array<{ language: string; url: string }>;
+    chapters?: Array<{ title: string; start_time: number; end_time: number }>;
+};
+
+type BookDownloadParams = {
+    anilistId: number;
+    chapterNumber: number;
+    format: 'manga' | 'novel';
+    content?: string;
+    images?: Array<{ index: number; url: string }>;
+};
+
+async function ensureDirectory(dirPath: string) {
+    if (!fs.existsSync(dirPath)) {
+        fs.mkdirSync(dirPath, { recursive: true });
+    }
+}
+
+async function downloadFile(url: string, outputPath: string): Promise<void> {
+    const res = await fetch(url);
+    if (!res.ok) throw new Error(`HTTP_${res.status}`);
+
+    await ensureDirectory(path.dirname(outputPath));
+    const buf = Buffer.from(await res.arrayBuffer());
+    fs.writeFileSync(outputPath, buf);
+}
+
+async function getOrCreateEntry(
+    anilistId: number,
+    type: 'anime' | 'manga' | 'novels'
+): Promise<{ id: string; path: string; folderName: string }> {
+    const existing = await queryOne(
+        `SELECT id, path, folder_name FROM local_entries
+         WHERE matched_id = ? AND matched_source = 'anilist' AND type = ?`,
+        [anilistId, type],
+        'local_library'
+    );
+
+    if (existing) {
+        return {
+            id: existing.id,
+            path: existing.path,
+            folderName: existing.folder_name
+        };
+    }
+
+    const metadata: any = type === 'anime'
+        ? await getAnimeById(anilistId)
+        : await getBookById(anilistId);
+
+    if (!metadata) {
+        throw new Error('METADATA_NOT_FOUND');
+    }
+
+    const { values } = loadConfig();
+    const basePath = values.library?.[type];
+
+    if (!basePath) {
+        throw new Error(`NO_LIBRARY_PATH_FOR_${type.toUpperCase()}`);
+    }
+
+    const title = metadata.title?.romaji || metadata.title?.english || `ID_${anilistId}`;
+    const safeName = title.replace(/[<>:"/\\|?*]/g, '_');
+    const folderPath = path.join(basePath, safeName);
+
+    await ensureDirectory(folderPath);
+
+    const entryId = crypto
+        .createHash('sha1')
+        .update(`anilist:${type}:${anilistId}`)
+        .digest('hex');
+    const now = Date.now();
+
+    await run(
+        `INSERT OR IGNORE INTO local_entries
+   (id, type, path, folder_name, matched_id, matched_source, last_scan)
+   VALUES (?, ?, ?, ?, ?, 'anilist', ?)`,
+        [entryId, type, folderPath, safeName, anilistId, now],
+        'local_library'
+    );
+
+    return {
+        id: entryId,
+        path: folderPath,
+        folderName: safeName
+    };
+}
+
+export async function downloadAnimeEpisode(params: AnimeDownloadParams) {
+    const { anilistId, episodeNumber, streamUrl, subtitles, chapters } = params;
+
+    const entry = await getOrCreateEntry(anilistId, 'anime');
+
+    const exists = await queryOne(
+        `SELECT id FROM local_files WHERE entry_id = ? AND unit_number = ?`,
+        [entry.id, episodeNumber],
+        'local_library'
+    );
+    if (exists) return { status: 'ALREADY_EXISTS', entry_id: entry.id, episode: episodeNumber };
+
+    const outputPath = path.join(entry.path, `Episode_${episodeNumber.toString().padStart(2, '0')}.mkv`);
+    const tempDir = path.join(entry.path, '.temp');
+    await ensureDirectory(tempDir);
+
+    try {
+        let videoInput = streamUrl;
+        let audioInputs: string[] = [];
+
+        const isMaster = (params as any).is_master === true;
+
+        if (isMaster) {
+
+            const variant = (params as any).variant;
+            const audios = (params as any).audio;
+
+            if (!variant || !variant.playlist_url) {
+                throw new Error('VARIANT_REQUIRED_FOR_MASTER');
+            }
+
+            videoInput = variant.playlist_url;
+
+            if (audios && audios.length > 0) {
+                audioInputs = audios.map((a: any) => a.playlist_url);
+            }
+        }
+
+        const subFiles: string[] = [];
+        if (subtitles?.length) {
+            for (let i = 0; i < subtitles.length; i++) {
+                const ext = subtitles[i].url.endsWith('.vtt') ? 'vtt' : 'srt';
+                const p = path.join(tempDir, `sub_${i}.${ext}`);
+                await downloadFile(subtitles[i].url, p);
+                subFiles.push(p);
+            }
+        }
+
+        const args = [
+            '-protocol_whitelist', 'file,http,https,tcp,tls,crypto',
+            '-allowed_extensions', 'ALL',
+            '-f', 'hls',
+            '-extension_picky', '0',
+            '-i', videoInput
+        ];
+
+        audioInputs.forEach(audioUrl => {
+            args.push(
+                '-protocol_whitelist', 'file,http,https,tcp,tls,crypto',
+                '-allowed_extensions', 'ALL',
+                '-f', 'hls',
+                '-extension_picky', '0',
+                '-i', audioUrl
+            );
+        });
+
+        subFiles.forEach(f => args.push('-i', f));
+
+        let chaptersInputIndex = -1;
+
+        if (chapters?.length) {
+            const meta = path.join(tempDir, 'chapters.txt');
+
+            const sorted = [...chapters].sort((a, b) => a.start_time - b.start_time);
+            const lines: string[] = [';FFMETADATA1'];
+
+            for (let i = 0; i < sorted.length; i++) {
+                const c = sorted[i];
+
+                const start = Math.floor(c.start_time * 1000);
+                const end = Math.floor(c.end_time * 1000);
+                const title = (c.title || 'chapter').toUpperCase();
+
+                lines.push(
+                    '[CHAPTER]',
+                    'TIMEBASE=1/1000',
+                    `START=${start}`,
+                    `END=${end}`,
+                    `title=${title}`
+                );
+
+                if (i < sorted.length - 1) {
+                    const nextStart = Math.floor(sorted[i + 1].start_time * 1000);
+                    if (nextStart - end > 1000) {
+                        lines.push(
+                            '[CHAPTER]',
+                            'TIMEBASE=1/1000',
+                            `START=${end}`,
+                            `END=${nextStart}`,
+                            'title=Episode'
+                        );
+                    }
+                } else {
+                    lines.push(
+                        '[CHAPTER]',
+                        'TIMEBASE=1/1000',
+                        `START=${end}`,
+                        'title=Episode'
+                    );
+                }
+            }
+
+            fs.writeFileSync(meta, lines.join('\n'));
+            args.push('-i', meta);
+
+            // índice correcto del metadata input
+            chaptersInputIndex = 1 + audioInputs.length + subFiles.length;
+        }
+
+        args.push('-map', '0:v:0');
+
+        if (audioInputs.length > 0) {
+
+            audioInputs.forEach((_, i) => {
+                args.push('-map', `${i + 1}:a:0`);
+
+                const audioInfo = (params as any).audio?.[i];
+                if (audioInfo) {
+                    const audioStreamIndex = i;
+                    if (audioInfo.language) {
+                        args.push(`-metadata:s:a:${audioStreamIndex}`, `language=${audioInfo.language}`);
+                    }
+                    if (audioInfo.name) {
+                        args.push(`-metadata:s:a:${audioStreamIndex}`, `title=${audioInfo.name}`);
+                    }
+                }
+            });
+        } else {
+
+            args.push('-map', '0:a:0?');
+        }
+
+        const subtitleStartIndex = 1 + audioInputs.length;
+        subFiles.forEach((_, i) => {
+            args.push('-map', `${subtitleStartIndex + i}:0`);
+            args.push(`-metadata:s:s:${i}`, `language=${subtitles![i].language}`);
+        });
+
+        if (chaptersInputIndex >= 0) {
+            args.push('-map_metadata', `${chaptersInputIndex}`);
+        }
+
+        args.push('-c:v', 'copy');
+
+        args.push('-c:a', 'copy');
+
+        if (subFiles.length) {
+            args.push('-c:s', 'srt');
+
+        }
+
+        args.push('-y');
+
+        args.push(outputPath);
+
+        await new Promise((resolve, reject) => {
+            console.log('🎬 Iniciando descarga con FFmpeg...');
+            console.log('📹 Video:', videoInput);
+            if (audioInputs.length > 0) {
+                console.log('🔊 Audio tracks:', audioInputs.length);
+            }
+            console.log('💾 Output:', outputPath);
+            console.log('Args:', args.join(' '));
+
+            const ff = spawn(FFMPEG_PATH, args, {
+                windowsHide: true,
+                stdio: ['ignore', 'pipe', 'pipe']
+            });
+
+            let lastProgress = '';
+
+            ff.stdout.on('data', (data) => {
+                const text = data.toString();
+                console.log('[stdout]', text);
+            });
+
+            ff.stderr.on('data', (data) => {
+                const text = data.toString();
+
+                if (text.includes('time=') || text.includes('speed=')) {
+                    const timeMatch = text.match(/time=(\S+)/);
+                    const speedMatch = text.match(/speed=(\S+)/);
+                    if (timeMatch || speedMatch) {
+                        lastProgress = `⏱️  Time: ${timeMatch?.[1] || 'N/A'} | Speed: ${speedMatch?.[1] || 'N/A'}`;
+                        console.log(lastProgress);
+                    }
+                } else {
+                    console.log('[ffmpeg]', text);
+                }
+            });
+
+            ff.on('error', (error) => {
+                console.error('❌ Error al iniciar FFmpeg:', error);
+                reject(error);
+            });
+
+            ff.on('close', (code) => {
+                if (code === 0) {
+                    console.log('✅ Descarga completada exitosamente');
+                    resolve(true);
+                } else {
+                    console.error(`❌ FFmpeg terminó con código: ${code}`);
+                    reject(new Error(`FFmpeg exited with code ${code}`));
+                }
+            });
+        });
+
+        fs.rmSync(tempDir, { recursive: true, force: true });
+
+        const fileId = crypto.randomUUID();
+        await run(
+            `INSERT INTO local_files (id, entry_id, file_path, unit_number)
+             VALUES (?, ?, ?, ?)`,
+            [fileId, entry.id, outputPath, episodeNumber],
+            'local_library'
+        );
+
+        await run(
+            `UPDATE local_entries SET last_scan = ? WHERE id = ?`,
+            [Date.now(), entry.id],
+            'local_library'
+        );
+
+        return {
+            status: 'SUCCESS',
+            entry_id: entry.id,
+            file_id: fileId,
+            episode: episodeNumber,
+            path: outputPath
+        };
+
+    } catch (e: any) {
+        fs.rmSync(tempDir, { recursive: true, force: true });
+        if (fs.existsSync(outputPath)) fs.unlinkSync(outputPath);
+        const err = new Error('DOWNLOAD_FAILED');
+        (err as any).details = e.message;
+        throw err;
+    }
+}
+
+export async function downloadBookChapter(params: BookDownloadParams) {
+    const { anilistId, chapterNumber, format, content, images } = params;
+
+    const type = format === 'manga' ? 'manga' : 'novels';
+    const entry = await getOrCreateEntry(anilistId, type);
+
+    const existingFile = await queryOne(
+        `SELECT id FROM local_files WHERE entry_id = ? AND unit_number = ?`,
+        [entry.id, chapterNumber],
+        'local_library'
+    );
+
+    if (existingFile) {
+        return {
+            status: 'ALREADY_EXISTS',
+            message: `Chapter ${chapterNumber} already exists`,
+            entry_id: entry.id,
+            chapter: chapterNumber
+        };
+    }
+
+    try {
+        let outputPath: string;
+        let fileId: string;
+
+        if (format === 'manga') {
+            const chapterName = `Chapter_${chapterNumber.toString().padStart(3, '0')}.cbz`;
+            outputPath = path.join(entry.path, chapterName);
+
+            const zip = new AdmZip();
+            const sortedImages = images!.sort((a, b) => a.index - b.index);
+
+            for (const img of sortedImages) {
+                const res = await fetch(img.url);
+                if (!res.ok) throw new Error(`HTTP_${res.status}`);
+                const buf = Buffer.from(await res.arrayBuffer());
+
+                const ext = path.extname(new URL(img.url).pathname) || '.jpg';
+                const filename = `${img.index.toString().padStart(4, '0')}${ext}`;
+                zip.addFile(filename, buf);
+            }
+
+            zip.writeZip(outputPath);
+
+        } else {
+            const chapterName = `Chapter_${chapterNumber.toString().padStart(3, '0')}.epub`;
+            outputPath = path.join(entry.path, chapterName);
+
+            const zip = new AdmZip();
+
+            zip.addFile('mimetype', Buffer.from('application/epub+zip'), '', 0);
+
+            const containerXml = `<?xml version="1.0" encoding="UTF-8"?>
+<container version="1.0" xmlns="urn:oasis:names:tc:opendocument:xmlns:container">
+  <rootfiles>
+    <rootfile full-path="OEBPS/content.opf" media-type="application/oebps-package+xml"/>
+  </rootfiles>
+</container>`;
+            zip.addFile('META-INF/container.xml', Buffer.from(containerXml));
+
+            const contentOpf = `<?xml version="1.0" encoding="UTF-8"?>
+<package xmlns="http://www.idpf.org/2007/opf" version="3.0" unique-identifier="bookid">
+  <metadata xmlns:dc="http://purl.org/dc/elements/1.1/">
+    <dc:title>Chapter ${chapterNumber}</dc:title>
+    <dc:identifier id="bookid">chapter-${anilistId}-${chapterNumber}</dc:identifier>
+    <dc:language>en</dc:language>
+  </metadata>
+  <manifest>
+    <item id="chapter" href="chapter.xhtml" media-type="application/xhtml+xml"/>
+  </manifest>
+  <spine>
+    <itemref idref="chapter"/>
+  </spine>
+</package>`;
+            zip.addFile('OEBPS/content.opf', Buffer.from(contentOpf));
+
+            const chapterXhtml = `<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>Chapter ${chapterNumber}</title>
+</head>
+<body>
+${content}
+</body>
+</html>`;
+            zip.addFile('OEBPS/chapter.xhtml', Buffer.from(chapterXhtml));
+
+            zip.writeZip(outputPath);
+        }
+
+        fileId = crypto.randomUUID();
+        await run(
+            `INSERT INTO local_files (id, entry_id, file_path, unit_number)
+             VALUES (?, ?, ?, ?)`,
+            [fileId, entry.id, outputPath, chapterNumber],
+            'local_library'
+        );
+
+        await run(
+            `UPDATE local_entries SET last_scan = ? WHERE id = ?`,
+            [Date.now(), entry.id],
+            'local_library'
+        );
+
+        return {
+            status: 'SUCCESS',
+            entry_id: entry.id,
+            file_id: fileId,
+            chapter: chapterNumber,
+            format,
+            path: outputPath
+        };
+
+    } catch (error: any) {
+        const err = new Error('DOWNLOAD_FAILED');
+        (err as any).details = error.message;
+        throw err;
+    }
+}

desktop/src/api/local/local.controller.ts

@@ -1,6 +1,7 @@
 import {FastifyReply, FastifyRequest} from 'fastify';
 import fs from 'fs';
 import * as service from './local.service';
+import * as downloadService from './download.service';
 
 type ScanQuery = {
     mode?: 'full' | 'incremental';
@@ -16,6 +17,65 @@ type MatchBody = {
     matched_id: number | null;
 };
 
+type DownloadAnimeBody =
+    | {
+    anilist_id: number;
+    episode_number: number;
+    stream_url: string; // media playlist FINAL
+    is_master?: false;
+    subtitles?: {
+        language: string;
+        url: string;
+    }[];
+    chapters?: {
+        title: string;
+        start_time: number;
+        end_time: number;
+    }[];
+}
+    | {
+    anilist_id: number;
+    episode_number: number;
+    stream_url: string; // master.m3u8
+    is_master: true;
+
+    variant: {
+        resolution: string;
+        bandwidth?: number;
+        codecs?: string;
+        playlist_url: string;
+    };
+
+    audio?: {
+        group?: string;
+        language?: string;
+        name?: string;
+        playlist_url: string;
+    }[];
+
+    subtitles?: {
+        language: string;
+        url: string;
+    }[];
+
+    chapters?: {
+        title: string;
+        start_time: number;
+        end_time: number;
+    }[];
+};
+
+type DownloadBookBody = {
+    anilist_id: number;
+    chapter_number: number;
+    format: 'manga' | 'novel';
+    content?: string;
+    images?: Array<{
+        index: number;
+        url: string;
+    }>;
+};
+
 export async function scanLibrary(request: FastifyRequest<{ Querystring: ScanQuery }>, reply: FastifyReply) {
     try {
         const mode = request.query.mode || 'incremental';
@@ -183,3 +243,170 @@ export async function getPage(request: FastifyRequest, reply: FastifyReply) {
 
     return reply.status(400).send();
 }
+
+function buildProxyUrl(rawUrl: string, headers: Record<string, string>) {
+    const params = new URLSearchParams({ url: rawUrl });
+
+    for (const [key, value] of Object.entries(headers)) {
+        params.set(key.toLowerCase(), value);
+    }
+
+    return `http://localhost:54322/api/proxy?${params.toString()}`;
+}
+
+export async function downloadAnime(request: FastifyRequest<{ Body: DownloadAnimeBody }>, reply: FastifyReply) {
+    try {
+        const {
+            anilist_id,
+            episode_number,
+            stream_url,
+            is_master,
+            subtitles,
+            chapters
+        } = request.body;
+
+        const clientHeaders = (request.body as any).headers || {};
+
+        // Validación básica
+        if (!anilist_id || !episode_number || !stream_url) {
+            return reply.status(400).send({
+                error: 'MISSING_REQUIRED_FIELDS',
+                required: ['anilist_id', 'episode_number', 'stream_url']
+            });
+        }
+
+        // Proxy del stream URL principal
+        const proxyUrl = buildProxyUrl(stream_url, clientHeaders);
+        console.log('Stream URL:', proxyUrl);
+
+        // Proxy de subtítulos
+        const proxiedSubs = subtitles?.map(sub => ({
+            ...sub,
+            url: buildProxyUrl(sub.url, clientHeaders)
+        }));
+
+        // Preparar parámetros base
+        const downloadParams: any = {
+            anilistId: anilist_id,
+            episodeNumber: episode_number,
+            streamUrl: proxyUrl,
+            subtitles: proxiedSubs,
+            chapters
+        };
+
+        // Si es master playlist, agregar campos adicionales
+        if (is_master === true) {
+            const { variant, audio } = request.body as any;
+
+            if (!variant || !variant.playlist_url) {
+                return reply.status(400).send({
+                    error: 'MISSING_VARIANT',
+                    message: 'variant with playlist_url is required when is_master is true'
+                });
+            }
+
+            downloadParams.is_master = true;
+
+            // Proxy del variant playlist
+            downloadParams.variant = {
+                ...variant,
+                playlist_url: buildProxyUrl(variant.playlist_url, clientHeaders)
+            };
+
+            // Proxy de audio tracks si existen
+            if (audio && audio.length > 0) {
+                downloadParams.audio = audio.map((a: any) => ({
+                    ...a,
+                    playlist_url: buildProxyUrl(a.playlist_url, clientHeaders)
+                }));
+            }
+
+            console.log('Master playlist detected');
+            console.log('Variant:', downloadParams.variant.resolution);
+            console.log('Audio tracks:', downloadParams.audio?.length || 0);
+        }
+
+        const result = await downloadService.downloadAnimeEpisode(downloadParams);
+
+        if (result.status === 'ALREADY_EXISTS') {
+            return reply.status(409).send(result);
+        }
+
+        return result;
+    } catch (err: any) {
+        console.error('Error downloading anime:', err);
+
+        if (err.message === 'METADATA_NOT_FOUND') {
+            return reply.status(404).send({ error: 'ANIME_NOT_FOUND_IN_ANILIST' });
+        }
+
+        if (err.message === 'VARIANT_REQUIRED_FOR_MASTER') {
+            return reply.status(400).send({ error: 'VARIANT_REQUIRED_FOR_MASTER' });
+        }
+
+        if (err.message === 'DOWNLOAD_FAILED') {
+            return reply.status(500).send({ error: 'DOWNLOAD_FAILED', details: err.details });
+        }
+
+        return reply.status(500).send({ error: 'FAILED_TO_DOWNLOAD_ANIME' });
+    }
+}
+
+export async function downloadBook(request: FastifyRequest<{ Body: DownloadBookBody }>, reply: FastifyReply) {
+    try {
+        const {
+            anilist_id,
+            chapter_number,
+            format,
+            content,
+            images
+        } = request.body;
+
+        if (!anilist_id || !chapter_number || !format) {
+            return reply.status(400).send({
+                error: 'MISSING_REQUIRED_FIELDS',
+                required: ['anilist_id', 'chapter_number', 'format']
+            });
+        }
+
+        if (format === 'novel' && !content) {
+            return reply.status(400).send({
+                error: 'MISSING_CONTENT',
+                message: 'content field is required for novels'
+            });
+        }
+
+        if (format === 'manga' && (!images || images.length === 0)) {
+            return reply.status(400).send({
+                error: 'MISSING_IMAGES',
+                message: 'images field is required for manga'
+            });
+        }
+
+        const result = await downloadService.downloadBookChapter({
+            anilistId: anilist_id,
+            chapterNumber: chapter_number,
+            format,
+            content,
+            images
+        });
+
+        if (result.status === 'ALREADY_EXISTS') {
+            return reply.status(409).send(result);
+        }
+
+        return result;
+    } catch (err: any) {
+        console.error('Error downloading book:', err);
+
+        if (err.message === 'METADATA_NOT_FOUND') {
+            return reply.status(404).send({ error: 'BOOK_NOT_FOUND_IN_ANILIST' });
+        }
+
+        if (err.message === 'DOWNLOAD_FAILED') {
+            return reply.status(500).send({ error: 'DOWNLOAD_FAILED', details: err.details });
+        }
+
+        return reply.status(500).send({ error: 'FAILED_TO_DOWNLOAD_BOOK' });
+    }
+}

desktop/src/api/local/local.routes.ts

@@ -10,6 +10,8 @@ async function localRoutes(fastify: FastifyInstance) {
     fastify.get('/library/:id/units', controller.getUnits);
     fastify.get('/library/:unitId/manifest', controller.getManifest);
     fastify.get('/library/:unitId/resource/:resId', controller.getPage);
+    fastify.post('/library/download/anime', controller.downloadAnime);
+    fastify.post('/library/download/book', controller.downloadBook);
 }
 
 export default localRoutes;

desktop/src/api/local/local.service.ts

@@ -7,12 +7,64 @@ import path from "path";
 import { getAnimeById, searchAnimeLocal } from "../anime/anime.service";
 import { getBookById, searchBooksAniList } from "../books/books.service";
 import AdmZip from 'adm-zip';
-import EPub from 'epub';
 
 const MANGA_IMAGE_EXTS = ['.jpg', '.jpeg', '.png', '.webp'];
 const MANGA_ARCHIVES = ['.cbz', '.cbr', '.zip'];
 const NOVEL_EXTS = ['.epub', '.pdf', '.txt', '.md', '.docx', '.mobi'];
 
+function normalize(str: string) {
+    return str
+        .toLowerCase()
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .replace(/[^a-z0-9 ]/g, '')
+        .trim();
+}
+
+function levenshtein(a: string, b: string) {
+    const matrix = Array.from({ length: b.length + 1 }, (_, i) => [i]);
+
+    for (let j = 0; j <= a.length; j++) matrix[0][j] = j;
+
+    for (let i = 1; i <= b.length; i++) {
+        for (let j = 1; j <= a.length; j++) {
+            matrix[i][j] = Math.min(
+                matrix[i - 1][j] + 1,
+                matrix[i][j - 1] + 1,
+                matrix[i - 1][j - 1] + (b[i - 1] === a[j - 1] ? 0 : 1)
+            );
+        }
+    }
+    return matrix[b.length][a.length];
+}
+
+function getTitleVariants(media: any): string[] {
+    const t = media.title || {};
+    return [
+        t.romaji,
+        t.english,
+        t.native,
+        ...(media.synonyms || [])
+    ].filter(Boolean);
+}
+
+function scoreEntry(query: string, media: any) {
+    const q = normalize(query);
+    let best = Infinity;
+
+    for (const title of getTitleVariants(media)) {
+        const t = normalize(title);
+
+        if (t.includes(q) || q.includes(t)) {
+            return 0;
+        }
+
+        best = Math.min(best, levenshtein(q, t));
+    }
+
+    return best;
+}
+
 export async function resolveEntryMetadata(entry: any, type: string) {
     let metadata = null;
     let matchedId = entry.matched_id;
@@ -26,16 +78,26 @@ export async function resolveEntryMetadata(entry: any, type: string) {
 
         let picked = null;
 
+        let candidates = results;
+
         if (type !== 'anime' && Array.isArray(results)) {
-            console.log(type);
             if (entry.type === 'novels') {
-                picked = results.find(r => r.format === 'NOVEL');
+                candidates = results.filter(r => r.format === 'NOVEL');
             } else if (entry.type === 'manga') {
-                picked = results.find(r => r.format !== 'NOVEL');
+                candidates = results.filter(r => r.format !== 'NOVEL');
             }
         }
 
-        picked ??= results?.[0];
+        if (Array.isArray(candidates) && candidates.length) {
+            const scored = candidates
+                .map(r => ({ r, score: scoreEntry(entry.folder_name, r) }))
+                .sort((a, b) => a.score - b.score);
+
+            // cutoff opcional
+            if (scored[0].score <= 10) {
+                picked = scored[0].r;
+            }
+        }
 
         if (picked?.id) {
             matchedId = picked.id;
@@ -65,9 +127,9 @@ export async function resolveEntryMetadata(entry: any, type: string) {
 }
 
 export async function performLibraryScan(mode: 'full' | 'incremental' = 'incremental') {
-    const config = loadConfig();
+    const { values } = loadConfig();
 
-    if (!config.library) {
+    if (!values.library) {
         throw new Error('NO_LIBRARY_CONFIGURED');
     }
 
@@ -76,7 +138,7 @@ export async function performLibraryScan(mode: 'full' | 'incremental' = 'increme
         await run(`DELETE FROM local_entries`, [], 'local_library');
     }
 
-    for (const [type, basePath] of Object.entries(config.library)) {
+    for (const [type, basePath] of Object.entries(values.library)) {
         if (!basePath || !fs.existsSync(<PathLike>basePath)) continue;
 
         const dirs = fs.readdirSync(<string>basePath, { withFileTypes: true }).filter(d => d.isDirectory());
@@ -427,28 +489,10 @@ export async function getUnitResource(unitId: string, resId: string) {
     return null;
 }
 
-function parseEpubToHtml(filePath: string): Promise<string> {
-    return new Promise((resolve, reject) => {
-        const epub = new EPub(filePath);
 
-        epub.on('end', async () => {
-            let html = '';
-
-            for (const id of epub.flow.map(f => f.id)) {
-                const chapter = await new Promise<string>((res, rej) => {
-                    epub.getChapter(id, (err, text) => {
-                        if (err) rej(err);
-                        else res(text);
-                    });
-                });
-
-                html += `<section class="ln-chapter">${chapter}</section>`;
-            }
-
-            resolve(html);
-        });
-
-        epub.on('error', reject);
-        epub.parse();
-    });
+function parseEpubToHtml(filePath: string) {
+    const zip = new AdmZip(filePath);
+    const entry = zip.getEntry('OEBPS/chapter.xhtml');
+    if (!entry) throw new Error('CHAPTER_NOT_FOUND');
+    return entry.getData().toString('utf8');
 }

desktop/src/api/proxy/proxy.controller.ts

@@ -1,6 +1,16 @@
-import {FastifyReply} from 'fastify';
+import {FastifyReply, FastifyRequest} from 'fastify';
 import {processM3U8Content, proxyRequest, streamToReadable} from './proxy.service';
-import {ProxyRequest} from '../types';
+
+interface ProxyQuerystring {
+    url: string;
+    referer?: string;
+    origin?: string;
+    userAgent?: string;
+}
+
+type ProxyRequest = FastifyRequest<{
+    Querystring: ProxyQuerystring
+}>;
 
 export async function handleProxy(req: ProxyRequest, reply: FastifyReply) {
     const { url, referer, origin, userAgent } = req.query;
@@ -10,32 +20,23 @@ export async function handleProxy(req: ProxyRequest, reply: FastifyReply) {
     }
 
     try {
+        const rangeHeader = req.headers.range;
+
         const { response, contentType, isM3U8, contentLength } = await proxyRequest(url, {
             referer,
             origin,
             userAgent
-        });
+        }, rangeHeader);
+
 
         reply.header('Access-Control-Allow-Origin', '*');
         reply.header('Access-Control-Allow-Methods', 'GET, OPTIONS');
         reply.header('Access-Control-Allow-Headers', 'Content-Type, Range');
         reply.header('Access-Control-Expose-Headers', 'Content-Length, Content-Range, Accept-Ranges');
 
-        if (contentType) {
-            reply.header('Content-Type', contentType);
-        }
-
-        if (contentLength) {
-            reply.header('Content-Length', contentLength);
-        }
-
-        if (contentType?.startsWith('image/') || contentType?.startsWith('video/')) {
-            reply.header('Cache-Control', 'public, max-age=31536000, immutable');
-        }
-
-        reply.header('Accept-Ranges', 'bytes');
-
         if (isM3U8) {
+            reply.header('Content-Type', 'application/vnd.apple.mpegurl');
+
             const text = await response.text();
             const baseUrl = new URL(response.url);
 
@@ -48,13 +49,67 @@ export async function handleProxy(req: ProxyRequest, reply: FastifyReply) {
             return reply.send(processedContent);
         }
 
+        const isSubtitle = url.includes('.vtt') || url.includes('.srt') || url.includes('.ass') ||
+            contentType?.includes('text/vtt') || contentType?.includes('text/srt');
+
+        if (isSubtitle) {
+            const text = await response.text();
+
+            let mimeType = 'text/vtt';
+            if (url.includes('.srt') || contentType?.includes('srt')) {
+                mimeType = 'text/plain';
+            } else if (url.includes('.ass')) {
+                mimeType = 'text/plain';
+            }
+
+            reply.header('Content-Type', mimeType);
+            reply.header('Cache-Control', 'public, max-age=3600');
+            return reply.send(text);
+        }
+
+        if (contentType) {
+            reply.header('Content-Type', contentType);
+        }
+
+        if (response.status === 206) {
+            const contentRange = response.headers.get('content-range');
+            if (contentRange) {
+                reply.header('Content-Range', contentRange);
+            }
+            reply.code(206);
+        }
+
+        if (contentLength) {
+            reply.header('Content-Length', contentLength);
+        }
+
+        if (contentType?.startsWith('image/') || contentType?.startsWith('video/')) {
+            reply.header('Cache-Control', 'public, max-age=31536000, immutable');
+        }
+
+        reply.header('Accept-Ranges', 'bytes');
+
         return reply.send(streamToReadable(response.body!));
 
     } catch (err) {
         req.server.log.error(err);
+        console.error('=== PROXY ERROR ===');
+        console.error('URL:', url);
+        console.error('Error:', err);
+        console.error('===================');
 
         if (!reply.sent) {
-            return reply.code(500).send({ error: "Internal Server Error" });
+            return reply.code(500).send({
+                error: "Internal Server Error",
+                details: err instanceof Error ? err.message : String(err)
+            });
         }
     }
 }
+
+export async function handleProxyOptions(req: FastifyRequest, reply: FastifyReply) {
+    reply.header('Access-Control-Allow-Origin', '*');
+    reply.header('Access-Control-Allow-Methods', 'GET, OPTIONS');
+    reply.header('Access-Control-Allow-Headers', 'Content-Type, Range');
+    return reply.code(204).send();
+}

desktop/src/api/proxy/proxy.routes.ts

@@ -1,8 +1,9 @@
 import { FastifyInstance } from 'fastify';
-import { handleProxy } from './proxy.controller';
+import {handleProxy, handleProxyOptions} from './proxy.controller';
 
 async function proxyRoutes(fastify: FastifyInstance) {
     fastify.get('/proxy', handleProxy);
+    fastify.options('/proxy', handleProxyOptions);
 }
 
 export default proxyRoutes;

desktop/src/api/proxy/proxy.service.ts

@@ -1,4 +1,4 @@
-import { Readable } from 'stream';
+import {Readable} from 'stream';
 
 interface ProxyHeaders {
     referer?: string;
@@ -13,25 +13,24 @@ interface ProxyResponse {
     contentLength: string | null;
 }
 
-export async function proxyRequest(url: string, { referer, origin, userAgent }: ProxyHeaders): Promise<ProxyResponse> {
+export async function proxyRequest(url: string, { referer, origin, userAgent }: ProxyHeaders, rangeHeader?: string): Promise<ProxyResponse> {
     const headers: Record<string, string> = {
         'User-Agent': userAgent || "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
         'Accept': '*/*',
         'Accept-Language': 'en-US,en;q=0.9',
         'Accept-Encoding': 'identity',
-
         'Connection': 'keep-alive'
     };
 
     if (referer) headers['Referer'] = referer;
     if (origin) headers['Origin'] = origin;
+    if (rangeHeader) headers['Range'] = rangeHeader;
 
     let lastError: Error | null = null;
     const maxRetries = 2;
 
     for (let attempt = 0; attempt < maxRetries; attempt++) {
         try {
-
             const controller = new AbortController();
             const timeoutId = setTimeout(() => controller.abort(), 60000);
 
@@ -43,8 +42,7 @@ export async function proxyRequest(url: string, { referer, origin, userAgent }:
 
             clearTimeout(timeoutId);
 
-            if (!response.ok) {
-
+            if (!response.ok && response.status !== 206) {
                 if (response.status === 404 || response.status === 403) {
                     throw new Error(`Proxy Error: ${response.status} ${response.statusText}`);
                 }
@@ -57,9 +55,16 @@ export async function proxyRequest(url: string, { referer, origin, userAgent }:
                 throw new Error(`Proxy Error: ${response.status} ${response.statusText}`);
             }
 
-            const contentType = response.headers.get('content-type');
             const contentLength = response.headers.get('content-length');
-            const isM3U8 = (contentType && contentType.includes('mpegurl')) || url.includes('.m3u8');
+            const contentType = response.headers.get('content-type');
+            const ct = contentType?.toLowerCase();
+
+            const isM3U8 =
+                !!ct && (
+                    ct.includes('mpegurl') ||
+                    ct.includes('m3u8')
+                ) ||
+                url.toLowerCase().includes('.m3u8');
 
             return {
                 response,
@@ -83,24 +88,57 @@ export async function proxyRequest(url: string, { referer, origin, userAgent }:
 }
 
 export function processM3U8Content(text: string, baseUrl: URL, { referer, origin, userAgent }: ProxyHeaders): string {
-    return text.replace(/^(?!#)(?!\s*$).+/gm, (line) => {
-        line = line.trim();
-        let absoluteUrl: string;
-
+    const buildProxy = (url: string) => {
         try {
-            absoluteUrl = new URL(line, baseUrl).href;
-        } catch (e) {
-            return line;
+            const params = new URLSearchParams();
+            params.set('url', new URL(url, baseUrl).href);
+            if (referer) params.set('referer', referer);
+            if (origin) params.set('origin', origin);
+            if (userAgent) params.set('userAgent', userAgent);
+            return `/api/proxy?${params.toString()}`;
+        } catch (error) {
+            console.error('Error building proxy URL for:', url, error);
+            return url;
+        }
+    };
+
+    const isMasterPlaylist = text.includes('#EXT-X-STREAM-INF');
+
+
+    let lines = text.split('\n');
+    let result = [];
+
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        const trimmed = line.trim();
+
+        if (!trimmed) {
+            result.push(line);
+            continue;
         }
 
-        const proxyParams = new URLSearchParams();
-        proxyParams.set('url', absoluteUrl);
-        if (referer) proxyParams.set('referer', referer);
-        if (origin) proxyParams.set('origin', origin);
-        if (userAgent) proxyParams.set('userAgent', userAgent);
+        if (trimmed.startsWith('#')) {
+            if (line.includes('URI=')) {
+                const processedLine = line.replace(/URI="([^"]+)"/g, (match, uri) => {
+                    return `URI="${buildProxy(uri)}"`;
+                });
+                result.push(processedLine);
+            } else {
+                result.push(line);
+            }
+            continue;
+        }
 
-        return `/api/proxy?${proxyParams.toString()}`;
-    });
+        try {
+            const proxiedUrl = buildProxy(trimmed);
+            result.push(proxiedUrl);
+        } catch (error) {
+            console.error('Error processing M3U8 URL line:', trimmed, error);
+            result.push(line);
+        }
+    }
+
+    return result.join('\n');
 }
 
 export function streamToReadable(webStream: ReadableStream): Readable {
@@ -110,7 +148,6 @@ export function streamToReadable(webStream: ReadableStream): Readable {
     return new Readable({
         async read() {
             try {
-
                 const timeoutPromise = new Promise((_, reject) => {
                     readTimeout = setTimeout(() => reject(new Error('Stream read timeout')), 10000);
                 });

desktop/src/api/rpc/rp.service.ts

@@ -4,8 +4,6 @@ let rpcClient: Client | null = null;
 let reconnectTimer: NodeJS.Timeout | null = null;
 let connected = false;
 
-type RPCMode = "watching" | "reading" | string;
-
 interface RPCData {
     details?: string;
     state?: string;

desktop/src/api/types.ts

@@ -79,6 +79,7 @@ export interface Episode {
 }
 
 export interface Chapter {
+    language?: string | null;
     index: number;
     id: string;
     number: string | number;

desktop/src/scripts/anime/anime.js

@@ -1,327 +0,0 @@
-let animeData = null;
-let extensionName = null;
-let animeId = null;
-let isLocal = false;
-
-const episodePagination = Object.create(PaginationManager);
-episodePagination.init(12, renderEpisodes);
-
-YouTubePlayerUtils.init('player');
-
-document.addEventListener('DOMContentLoaded', () => {
-    loadAnime();
-    setupDescriptionModal();
-    setupEpisodeSearch();
-});
-
-function markAsLocal() {
-    isLocal = true;
-    const pill = document.getElementById('local-pill');
-    if (!pill) return;
-
-    pill.textContent = 'Local';
-    pill.style.display = 'inline-flex';
-    pill.style.background = 'rgba(34,197,94,.2)';
-    pill.style.color = '#22c55e';
-    pill.style.borderColor = 'rgba(34,197,94,.3)';
-}
-
-async function checkLocalLibraryEntry() {
-    try {
-        const res = await fetch(`/api/library/anime/${animeId}`);
-        if (!res.ok) return;
-
-        markAsLocal();
-
-    } catch (e) {
-    }
-}
-
-
-async function loadAnime() {
-    try {
-
-        const urlData = URLUtils.parseEntityPath('anime');
-        if (!urlData) {
-            showError("Invalid URL");
-            return;
-        }
-
-        extensionName = urlData.extensionName;
-        animeId = urlData.entityId;
-        await checkLocalLibraryEntry();
-
-        const fetchUrl = extensionName
-            ? `/api/anime/${animeId}?source=${extensionName}`
-            : `/api/anime/${animeId}?source=anilist`;
-
-        const res = await fetch(fetchUrl, { headers: AuthUtils.getSimpleAuthHeaders() });
-        const data = await res.json();
-
-        if (data.error) {
-            showError("Anime Not Found");
-            return;
-        }
-
-        animeData = data;
-        animeData.entry_type = 'ANIME';
-        const metadata = MediaMetadataUtils.formatAnimeData(data, !!extensionName);
-
-        updatePageTitle(metadata.title);
-        updateMetadata(metadata);
-        updateDescription(data.description || data.summary);
-        updateCharacters(metadata.characters);
-        updateExtensionPill();
-
-        setupWatchButton();
-
-        const hasTrailer = YouTubePlayerUtils.playTrailer(
-            metadata.trailer,
-            'player',
-            metadata.banner
-        );
-
-        setupEpisodes(metadata.episodes);
-
-        await setupAddToListButton();
-
-    } catch (err) {
-        console.error('Error loading anime:', err);
-        showError("Error loading anime");
-    }
-}
-
-function updatePageTitle(title) {
-    document.title = `${title} | WaifuBoard`;
-    document.getElementById('title').innerText = title;
-}
-
-function updateMetadata(metadata) {
-
-    if (metadata.poster) {
-        document.getElementById('poster').src = metadata.poster;
-    }
-
-    document.getElementById('score').innerText = `${metadata.score}% Score`;
-
-    document.getElementById('year').innerText = metadata.year;
-
-    document.getElementById('genres').innerText = metadata.genres;
-
-    document.getElementById('format').innerText = metadata.format;
-
-    document.getElementById('status').innerText = metadata.status;
-
-    document.getElementById('season').innerText = metadata.season;
-
-    document.getElementById('studio').innerText = metadata.studio;
-
-    document.getElementById('episodes').innerText = metadata.episodes;
-}
-
-function updateDescription(rawDescription) {
-    const desc = MediaMetadataUtils.truncateDescription(rawDescription, 4);
-
-    document.getElementById('description-preview').innerHTML = desc.short;
-    document.getElementById('full-description').innerHTML = desc.full;
-
-    const readMoreBtn = document.getElementById('read-more-btn');
-    if (desc.isTruncated) {
-        readMoreBtn.style.display = 'inline-flex';
-    } else {
-        readMoreBtn.style.display = 'none';
-    }
-}
-
-function updateCharacters(characters) {
-    const container = document.getElementById('char-list');
-    container.innerHTML = '';
-
-    if (characters.length > 0) {
-        characters.forEach(char => {
-            container.innerHTML += `
-                <div class="character-item">
-                    <div class="char-dot"></div> ${char.name}
-                </div>`;
-        });
-    } else {
-        container.innerHTML = `
-            <div class="character-item" style="color: #666;">
-                No character data available
-            </div>`;
-    }
-}
-
-function updateExtensionPill() {
-    const pill = document.getElementById('extension-pill');
-    if (!pill) return;
-
-    if (extensionName) {
-        pill.textContent = extensionName.charAt(0).toUpperCase() + extensionName.slice(1).toLowerCase();
-        pill.style.display = 'inline-flex';
-    } else {
-        pill.style.display = 'none';
-    }
-}
-
-function setupWatchButton() {
-    const watchBtn = document.getElementById('watch-btn');
-    if (watchBtn) {
-        watchBtn.onclick = () => {
-            const source = isLocal ? 'local' : (extensionName || 'anilist');
-            window.location.href = URLUtils.buildWatchUrl(animeId, num, source);
-        };
-    }
-}
-
-async function setupAddToListButton() {
-    const btn = document.getElementById('add-to-list-btn');
-    if (!btn || !animeData) return;
-
-    ListModalManager.currentData = animeData;
-    const entryType = ListModalManager.getEntryType(animeData);
-
-    await ListModalManager.checkIfInList(animeId, extensionName || 'anilist', entryType);
-
-    const tempBtn = document.querySelector('.hero-buttons .btn-blur');
-    if (tempBtn) {
-        ListModalManager.updateButton('.hero-buttons .btn-blur');
-    } else {
-
-        updateCustomAddButton();
-    }
-
-    btn.onclick = () => ListModalManager.open(animeData, extensionName || 'anilist');
-}
-
-function updateCustomAddButton() {
-    const btn = document.getElementById('add-to-list-btn');
-    if (!btn) return;
-
-    if (ListModalManager.isInList) {
-        btn.innerHTML = `
-            <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
-                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
-            </svg>
-            In Your List
-        `;
-        btn.style.background = 'rgba(34, 197, 94, 0.2)';
-        btn.style.color = '#22c55e';
-        btn.style.borderColor = 'rgba(34, 197, 94, 0.3)';
-    } else {
-        btn.innerHTML = '+ Add to List';
-        btn.style.background = null;
-        btn.style.color = null;
-        btn.style.borderColor = null;
-    }
-}
-
-function setupEpisodes(totalEpisodes) {
-
-    const limitedTotal = Math.min(Math.max(totalEpisodes, 1), 5000);
-
-    episodePagination.setTotalItems(limitedTotal);
-    renderEpisodes();
-}
-
-function renderEpisodes() {
-    const grid = document.getElementById('episodes-grid');
-    if (!grid) return;
-
-    grid.innerHTML = '';
-
-    const range = episodePagination.getPageRange();
-    const start = range.start + 1;
-
-    const end = range.end;
-
-    for (let i = start; i <= end; i++) {
-        createEpisodeButton(i, grid);
-    }
-
-    episodePagination.renderControls(
-        'pagination-controls',
-        'page-info',
-        'prev-page',
-        'next-page'
-    );
-}
-
-function createEpisodeButton(num, container) {
-    const btn = document.createElement('div');
-    btn.className = 'episode-btn';
-    btn.innerText = `Ep ${num}`;
-    btn.onclick = () => {
-        const source = isLocal ? 'local' : (extensionName || 'anilist');
-        window.location.href = URLUtils.buildWatchUrl(animeId, num, source);
-    };
-    container.appendChild(btn);
-}
-
-function setupDescriptionModal() {
-    const modal = document.getElementById('desc-modal');
-    if (!modal) return;
-
-    modal.addEventListener('click', (e) => {
-        if (e.target.id === 'desc-modal') {
-            closeDescriptionModal();
-        }
-    });
-}
-
-function openDescriptionModal() {
-    document.getElementById('desc-modal').classList.add('active');
-    document.body.style.overflow = 'hidden';
-}
-
-function closeDescriptionModal() {
-    document.getElementById('desc-modal').classList.remove('active');
-    document.body.style.overflow = '';
-}
-
-function setupEpisodeSearch() {
-    const searchInput = document.getElementById('ep-search');
-    if (!searchInput) return;
-
-    searchInput.addEventListener('input', (e) => {
-        const val = parseInt(e.target.value);
-        const grid = document.getElementById('episodes-grid');
-        const totalEpisodes = episodePagination.totalItems;
-
-        if (val > 0 && val <= totalEpisodes) {
-            grid.innerHTML = '';
-            createEpisodeButton(val, grid);
-            document.getElementById('pagination-controls').style.display = 'none';
-        } else if (!e.target.value) {
-            renderEpisodes();
-        } else {
-            grid.innerHTML = '<div style="color:#666; width:100%; text-align:center;">Episode not found</div>';
-            document.getElementById('pagination-controls').style.display = 'none';
-        }
-    });
-}
-
-function showError(message) {
-    document.getElementById('title').innerText = message;
-}
-
-function saveToList() {
-    if (!animeId) return;
-    ListModalManager.save(animeId, extensionName || 'anilist');
-}
-
-function deleteFromList() {
-    if (!animeId) return;
-    ListModalManager.delete(animeId, extensionName || 'anilist');
-}
-
-function closeAddToListModal() {
-    ListModalManager.close();
-}
-
-window.openDescriptionModal = openDescriptionModal;
-window.closeDescriptionModal = closeDescriptionModal;
-window.changePage = (delta) => {
-    if (delta > 0) episodePagination.nextPage();
-    else episodePagination.prevPage();
-};

desktop/src/scripts/anime/entry.js

@@ -0,0 +1,408 @@
+let animeData = null;
+let extensionName = null;
+
+let animeId = null;
+let isLocal = false;
+
+const episodePagination = Object.create(PaginationManager);
+episodePagination.init(50, renderEpisodes);
+
+document.addEventListener('DOMContentLoaded', () => {
+    loadAnimeData();
+    setupDescriptionModal();
+    setupEpisodeSearch();
+
+    const urlParams = new URLSearchParams(window.location.search);
+    const initialEp = urlParams.get('episode');
+
+    if (initialEp) {
+        setTimeout(() => {
+            if (animeData) {
+
+                const source = isLocal ? 'local' : (extensionName || 'anilist');
+
+                if (typeof AnimePlayer !== 'undefined') {
+                    AnimePlayer.init(animeId, source, isLocal, animeData);
+                    AnimePlayer.playEpisode(parseInt(initialEp));
+                }
+            }
+        }, 800);
+    }
+});
+
+async function loadAnimeData() {
+    try {
+
+        const pathParts = window.location.pathname.split('/');
+
+        const cleanParts = pathParts.filter(p => p.length > 0);
+
+        if (cleanParts.length >= 3 && cleanParts[0] === 'anime') {
+
+            extensionName = cleanParts[1];
+            animeId = cleanParts[2];
+        } else if (cleanParts.length === 2 && cleanParts[0] === 'anime') {
+
+            extensionName = null;
+
+            animeId = cleanParts[1];
+        } else {
+            showError("Invalid URL Format");
+            return;
+        }
+
+        try {
+            const localRes = await fetch(`/api/library/anime/${animeId}`);
+            if (localRes.ok) isLocal = true;
+        } catch {}
+
+        const fetchUrl = extensionName
+            ? `/api/anime/${animeId}?source=${extensionName}`
+            : `/api/anime/${animeId}?source=anilist`;
+
+        const res = await fetch(fetchUrl, { headers: AuthUtils.getSimpleAuthHeaders() });
+        const data = await res.json();
+
+        if (data.error) {
+            showError("Anime Not Found");
+            return;
+        }
+
+        animeData = data;
+        animeData.entry_type = 'ANIME';
+
+        const metadata = MediaMetadataUtils.formatAnimeData(data, !!extensionName);
+
+        document.title = `${metadata.title} | WaifuBoard`;
+        document.getElementById('title').innerText = metadata.title;
+        if (metadata.poster) document.getElementById('poster').src = metadata.poster;
+
+        document.getElementById('score').innerText = `${metadata.score}% Score`;
+        document.getElementById('year').innerText = metadata.year;
+        document.getElementById('genres').innerText = metadata.genres.split(',').join(' • ');
+        document.getElementById('format').innerText = metadata.format;
+        document.getElementById('status').innerText = metadata.status;
+        document.getElementById('season').innerText = metadata.season;
+        document.getElementById('studio').innerText = metadata.studio;
+        document.getElementById('episodes').innerText = `${metadata.episodes} Ep`;
+
+        updateLocalPill();
+        updateDescription(data.description || data.summary);
+        updateRelations(data.relations?.edges);
+        updateCharacters(metadata.characters);
+        updateRecommendations(data.recommendations?.nodes);
+
+        const source = isLocal ? 'local' : (extensionName || 'anilist');
+
+        if (typeof AnimePlayer !== 'undefined') {
+            AnimePlayer.init(animeId, source, isLocal, animeData);
+        }
+
+        YouTubePlayerUtils.init('trailer-player');
+        YouTubePlayerUtils.playTrailer(metadata.trailer, 'trailer-player', metadata.banner);
+
+        const watchBtn = document.getElementById('watch-btn');
+        if (watchBtn) {
+            watchBtn.onclick = () => {
+                if (typeof AnimePlayer !== 'undefined') AnimePlayer.playEpisode(1);
+            };
+        }
+
+        const total = metadata.episodes || 12;
+        setupEpisodes(total);
+
+        setupAddToListButton();
+
+    } catch (err) {
+        console.error('Error loading anime details:', err);
+        showError("Error loading anime");
+    }
+}
+
+function updateLocalPill() {
+    if (isLocal) {
+        const pill = document.getElementById('local-pill');
+        if(pill) pill.style.display = 'inline-flex';
+    }
+    if (extensionName) {
+        const pill = document.getElementById('extension-pill');
+        if(pill) {
+            pill.innerText = extensionName;
+            pill.style.display = 'inline-flex';
+        }
+    }
+}
+
+function updateDescription(rawDescription) {
+    const desc = MediaMetadataUtils.truncateDescription(rawDescription, 3);
+    const previewEl = document.getElementById('description-preview');
+    const fullEl = document.getElementById('full-description');
+
+    if (previewEl) {
+        previewEl.innerHTML = desc.short +
+            (desc.isTruncated ? ' <span onclick="openDescriptionModal()" style="color:white; cursor:pointer; font-weight:700; margin-left:5px;">Read more</span>' : '');
+    }
+    if (fullEl) fullEl.innerHTML = desc.full;
+}
+
+function setupDescriptionModal() {
+    const modal = document.getElementById('desc-modal');
+    if (!modal) return;
+    modal.addEventListener('click', (e) => {
+        if (e.target.id === 'desc-modal') {
+            closeDescriptionModal();
+        }
+    });
+}
+
+function openDescriptionModal() {
+    const modal = document.getElementById('desc-modal');
+    if(modal) modal.classList.add('active');
+}
+
+function closeDescriptionModal() {
+    const modal = document.getElementById('desc-modal');
+    if(modal) modal.classList.remove('active');
+}
+
+function setupEpisodes(totalEpisodes) {
+    const limitedTotal = Math.min(Math.max(totalEpisodes, 1), 5000);
+    episodePagination.setTotalItems(limitedTotal);
+    renderEpisodes();
+}
+
+function renderEpisodes() {
+    const grid = document.getElementById('episodes-grid');
+    if (!grid) return;
+    grid.innerHTML = '';
+
+    const range = episodePagination.getPageRange();
+    const currentEp = (typeof AnimePlayer !== 'undefined') ? AnimePlayer.getCurrentEpisode() : 0;
+
+    for (let i = range.start + 1; i <= range.end; i++) {
+        const btn = document.createElement('div');
+        btn.className = 'episode-btn';
+        if (currentEp === i) btn.classList.add('active-playing');
+
+        btn.innerText = i;
+
+        btn.onclick = () => {
+            if (typeof AnimePlayer !== 'undefined') {
+                AnimePlayer.playEpisode(i);
+                renderEpisodes();
+            }
+        };
+        grid.appendChild(btn);
+    }
+
+    const totalItems = episodePagination.totalItems || 0;
+    const itemsPerPage = episodePagination.itemsPerPage || 50;
+    const safeTotalPages = Math.ceil(totalItems / itemsPerPage) || 1;
+
+    const info = document.getElementById('page-info');
+    if(info) info.innerText = `Page ${episodePagination.currentPage} of ${safeTotalPages}`;
+
+    const prevBtn = document.getElementById('prev-page');
+    const nextBtn = document.getElementById('next-page');
+
+    if(prevBtn) {
+        prevBtn.disabled = episodePagination.currentPage === 1;
+        prevBtn.onclick = () => { episodePagination.prevPage(); };
+    }
+
+    if(nextBtn) {
+
+        nextBtn.disabled = episodePagination.currentPage >= safeTotalPages;
+        nextBtn.onclick = () => { episodePagination.nextPage(); };
+    }
+}
+
+function setupEpisodeSearch() {
+    const searchInput = document.getElementById('ep-search');
+    if (!searchInput) return;
+
+    searchInput.addEventListener('input', (e) => {
+        const val = parseInt(e.target.value);
+        const grid = document.getElementById('episodes-grid');
+        const controls = document.getElementById('pagination-controls');
+
+        if (val > 0) {
+            grid.innerHTML = '';
+            const btn = document.createElement('div');
+            btn.className = 'episode-btn';
+            btn.innerText = `${val}`;
+            btn.onclick = () => { if (typeof AnimePlayer !== 'undefined') AnimePlayer.playEpisode(val); };
+            grid.appendChild(btn);
+            if(controls) controls.style.display = 'none';
+        } else if (!e.target.value) {
+            if(controls) controls.style.display = 'flex';
+            renderEpisodes();
+        }
+    });
+}
+
+function updateCharacters(characters) {
+    const container = document.getElementById('char-list');
+    if (!container) return;
+    container.innerHTML = '';
+    if (!characters || characters.length === 0) return;
+
+    characters.forEach((char, index) => {
+        const img = char.node?.image?.large || char.image;
+        const name = char.node?.name?.full || char.name;
+        const role = char.role || 'Supporting';
+
+        const card = document.createElement('div');
+        card.className = `character-item ${index >= 12 ? 'hidden-char' : ''}`;
+        card.style.display = index >= 12 ? 'none' : 'flex';
+
+        card.innerHTML = `
+            <div class="char-avatar"><img src="${img}" loading="lazy"></div>
+            <div class="char-info"><div class="char-name">${name}</div><div class="char-role">${role}</div></div>
+        `;
+        container.appendChild(card);
+    });
+
+    const showMoreBtn = document.getElementById('show-more-chars');
+    if (showMoreBtn) {
+        if (characters.length > 12) {
+            showMoreBtn.style.display = 'block';
+            showMoreBtn.onclick = () => {
+                document.querySelectorAll('.hidden-char').forEach(el => el.style.display = 'flex');
+                showMoreBtn.style.display = 'none';
+            };
+        } else {
+            showMoreBtn.style.display = 'none';
+        }
+    }
+}
+
+function updateRelations(relations) {
+    const container = document.getElementById('relations-grid');
+    const section = document.getElementById('relations-section');
+
+    if (!container || !relations || relations.length === 0) {
+        if (section) section.style.display = 'none';
+        return;
+    }
+
+    section.style.display = 'block';
+    container.innerHTML = '';
+
+    const priorityMap = {
+        'ADAPTATION': 1,
+        'PREQUEL': 2,
+        'SEQUEL': 3,
+        'PARENT': 4,
+        'SIDE_STORY': 5,
+        'SPIN_OFF': 6,
+        'ALTERNATIVE': 7,
+        'CHARACTER': 8,
+        'OTHER': 99
+    };
+
+    relations.sort((a, b) => {
+        const pA = priorityMap[a.relationType] || 50;
+        const pB = priorityMap[b.relationType] || 50;
+        return pA - pB;
+    });
+
+    relations.forEach(rel => {
+        const media = rel.node;
+        if (!media) return;
+
+        const title = media.title?.romaji || media.title?.english || 'Unknown';
+        const cover = media.coverImage?.large || media.coverImage?.medium || '';
+
+        const typeDisplay = rel.relationType ? rel.relationType.replace(/_/g, ' ') : 'RELATION';
+        const rawType = rel.relationType;
+
+        const el = document.createElement('div');
+        el.className = 'relation-card-horizontal';
+
+        let targetUrl = null;
+
+        if (rawType === 'ADAPTATION') {
+            targetUrl = `/book/${media.id}`;
+
+        } else if (media.type === 'ANIME' && rawType !== 'OTHER') {
+            targetUrl = `/anime/${media.id}`;
+
+        }
+
+        if (targetUrl) {
+            el.onclick = () => { window.location.href = targetUrl; };
+        } else {
+            el.classList.add('no-link');
+
+            el.onclick = null;
+        }
+
+        el.innerHTML = `
+            <img src="${cover}" class="rel-img" alt="${title}" onerror="this.src='/public/assets/placeholder.svg'">
+            <div class="rel-info">
+                <span class="rel-type">${typeDisplay}</span>
+                <span class="rel-title">${title}</span>
+            </div>
+        `;
+        container.appendChild(el);
+    });
+}
+
+function updateRecommendations(recommendations) {
+    const container = document.getElementById('recommendations-grid');
+    if (!container || !recommendations) return;
+    container.innerHTML = '';
+
+    recommendations.forEach(rec => {
+        const media = rec.mediaRecommendation;
+        if (!media) return;
+
+        const title = media.title?.romaji || 'Unknown';
+        const cover = media.coverImage?.large || media.coverImage?.medium || '';
+
+        const el = document.createElement('div');
+        el.className = 'card';
+
+        el.onclick = () => { window.location.href = `/anime/${media.id}`; };
+
+        el.innerHTML = `
+            <div class="card-img-wrap"><img src="${cover}" loading="lazy" onerror="this.src='/public/assets/no-cover.jpg'"></div>
+            <div class="card-content"><h3>${title}</h3></div>
+        `;
+        container.appendChild(el);
+    });
+}
+
+async function setupAddToListButton() {
+    const btn = document.getElementById('add-to-list-btn');
+    if (!btn || !animeData) return;
+
+    ListModalManager.currentData = animeData;
+    const entryType = 'ANIME';
+    await ListModalManager.checkIfInList(animeId, extensionName || 'anilist', entryType);
+    updateCustomAddButton();
+    btn.onclick = () => ListModalManager.open(animeData, extensionName || 'anilist');
+}
+
+function updateCustomAddButton() {
+    const btn = document.getElementById('add-to-list-btn');
+    if (btn && ListModalManager.isInList) {
+        btn.innerHTML = `✓ In Your List`;
+        btn.style.background = 'rgba(34, 197, 94, 0.2)';
+        btn.style.borderColor = '#22c55e';
+        btn.style.color = '#22c55e';
+    }
+}
+
+function showError(msg) {
+    const el = document.getElementById('title');
+    if(el) el.innerText = msg;
+}
+
+window.openDescriptionModal = openDescriptionModal;
+window.closeDescriptionModal = closeDescriptionModal;
+window.scrollRecommendations = (dir) => {
+    const el = document.getElementById('recommendations-grid');
+    if(el) el.scrollBy({ left: 240 * 3 * dir, behavior: 'smooth' });
+};

desktop/src/scripts/books/book.js

@@ -5,25 +5,483 @@ let bookSlug = null;
 
 let allChapters = [];
 let filteredChapters = [];
-
 let availableExtensions = [];
 let isLocal = false;
+
+let currentLanguage = null;
+let uniqueLanguages = [];
+let isSortAscending = true;
+
 const chapterPagination = Object.create(PaginationManager);
-chapterPagination.init(12, () => renderChapterTable());
+chapterPagination.init(6, () => renderChapterList());
 
 document.addEventListener('DOMContentLoaded', () => {
     init();
     setupModalClickOutside();
+    document.getElementById('sort-btn')?.addEventListener('click', toggleSortOrder);
 });
 
+async function init() {
+    try {
+        const urlData = URLUtils.parseEntityPath('book');
+        if (!urlData) { showError("Book Not Found"); return; }
+
+        extensionName = urlData.extensionName;
+        bookId = urlData.entityId;
+        bookSlug = urlData.slug;
+
+        await loadBookMetadata();
+        await checkLocalLibraryEntry();
+        await loadAvailableExtensions();
+        await loadChapters();
+        await setupAddToListButton();
+
+    } catch (err) {
+        console.error("Init Error:", err);
+        showError("Error loading book");
+    }
+}
+
+async function loadBookMetadata() {
+    const source = extensionName || 'anilist';
+    const fetchUrl = `/api/book/${bookId}?source=${source}`;
+
+    try {
+        const res = await fetch(fetchUrl);
+        const data = await res.json();
+
+        if (data.error || !data) { showError("Book Not Found"); return; }
+
+        const raw = Array.isArray(data) ? data[0] : data;
+        bookData = raw;
+
+        const metadata = MediaMetadataUtils.formatBookData(raw, !!extensionName);
+        bookData.entry_type = metadata.format === 'MANGA' ? 'MANGA' : 'NOVEL';
+
+        updatePageTitle(metadata.title);
+        updateMetadata(metadata, raw);
+        updateExtensionPill();
+
+    } catch (e) {
+        console.error(e);
+        showError("Error loading metadata");
+    }
+}
+
+function updatePageTitle(title) {
+    document.title = `${title} | WaifuBoard Books`;
+    const titleEl = document.getElementById('title');
+    if (titleEl) titleEl.innerText = title;
+}
+
+function updateMetadata(metadata, rawData) {
+    // 1. Cabecera (Score, Año, Status, Formato, Caps)
+    const elements = {
+        'description': metadata.description,
+        'published-date': metadata.year,
+        'status': metadata.status,
+        'format': metadata.format,
+        'chapters-count': metadata.chapters ? `${metadata.chapters} Ch` : '?? Ch',
+        'genres': metadata.genres ? metadata.genres.replace(/,/g, ' • ') : '',
+        'poster': metadata.poster,
+        'hero-bg': metadata.banner
+    };
+
+    if(document.getElementById('description')) document.getElementById('description').innerHTML = metadata.description;
+    if(document.getElementById('poster')) document.getElementById('poster').src = metadata.poster;
+    if(document.getElementById('hero-bg')) document.getElementById('hero-bg').src = metadata.banner;
+
+    ['published-date','status','format','chapters-count','genres'].forEach(id => {
+        const el = document.getElementById(id);
+        if(el) el.innerText = elements[id];
+    });
+
+    const scoreEl = document.getElementById('score');
+    if (scoreEl) scoreEl.innerText = extensionName ? `${metadata.score}` : `${metadata.score}% Score`;
+
+    // 2. Sidebar: Sinónimos (Para llenar espacio vacío)
+    if (rawData.synonyms && rawData.synonyms.length > 0) {
+        const sidebarInfo = document.getElementById('sidebar-info');
+        const list = document.getElementById('synonyms-list');
+        if (sidebarInfo && list) {
+            sidebarInfo.style.display = 'block';
+            list.innerHTML = '';
+            // Mostrar máx 5 sinónimos para no alargar demasiado
+            rawData.synonyms.slice(0, 5).forEach(syn => {
+                const li = document.createElement('li');
+                li.innerText = syn;
+                list.appendChild(li);
+            });
+        }
+    }
+
+    // 3. Renderizar Personajes
+    if (rawData.characters && rawData.characters.nodes && rawData.characters.nodes.length > 0) {
+        renderCharacters(rawData.characters.nodes);
+    }
+
+    // 4. Renderizar Relaciones
+    if (rawData.relations && rawData.relations.edges && rawData.relations.edges.length > 0) {
+        renderRelations(rawData.relations.edges);
+    }
+}
+
+function renderCharacters(nodes) {
+    const container = document.getElementById('characters-list');
+    if(!container) return;
+    container.innerHTML = '';
+
+    nodes.forEach(char => {
+        const el = document.createElement('div');
+        el.className = 'character-item';
+
+        const img = char.image?.large || char.image?.medium || '/public/assets/no-image.png';
+        const name = char.name?.full || 'Unknown';
+        const role = char.role || 'Supporting';
+
+        el.innerHTML = `
+            <div class="char-avatar"><img src="${img}" loading="lazy"></div>
+            <div class="char-info">
+                <div class="char-name">${name}</div>
+                <div class="char-role">${role}</div>
+            </div>
+        `;
+        container.appendChild(el);
+    });
+}
+
+function renderRelations(edges) {
+    const container = document.getElementById('relations-list');
+    const section = document.getElementById('relations-section');
+    if(!container || !section) return;
+
+    if (!edges || edges.length === 0) {
+        section.style.display = 'none';
+        return;
+    }
+
+    section.style.display = 'block';
+    container.innerHTML = '';
+
+    edges.forEach(edge => {
+        const node = edge.node;
+        if (!node) return;
+
+        const el = document.createElement('div');
+        el.className = 'relation-card-horizontal';
+
+        const img = node.coverImage?.large || node.coverImage?.medium || '/public/assets/no-image.png';
+        const title = node.title?.romaji || node.title?.english || node.title?.native || 'Unknown';
+        const type = edge.relationType ? edge.relationType.replace(/_/g, ' ') : 'Related';
+
+        el.innerHTML = `
+            <img src="${img}" class="rel-img" alt="${title}" loading="lazy">
+            <div class="rel-info">
+                <span class="rel-type">${type}</span>
+                <span class="rel-title">${title}</span>
+            </div>
+        `;
+
+        el.onclick = () => {
+            const targetType = node.type === 'ANIME' ? 'anime' : 'book';
+            window.location.href = `/${targetType}/${node.id}`;
+        };
+
+        container.appendChild(el);
+    });
+}
+
+function processChaptersData(chaptersData) {
+    allChapters = chaptersData;
+    const langSet = new Set(allChapters.map(ch => ch.language).filter(l => l));
+    uniqueLanguages = Array.from(langSet);
+    setupLanguageSelector();
+    filterAndRenderChapters();
+    setupReadButton();
+}
+
+function buildProxyUrl(url, headers = {}) {
+    const origin = window.location.origin;
+
+    const params = new URLSearchParams({ url });
+    if (headers.Referer || headers.referer)
+        params.append("referer", headers.Referer || headers.referer);
+    if (headers["User-Agent"] || headers["user-agent"])
+        params.append("userAgent", headers["User-Agent"] || headers["user-agent"]);
+    if (headers.Origin || headers.origin)
+        params.append("origin", headers.Origin || headers.origin);
+
+    return `${origin}/api/proxy?${params.toString()}`;
+}
+
+async function downloadChapter(chapterId, chapterNumber, provider, btnElement) {
+    // Validamos que tengamos bookId y un provider válido
+    if (!bookId || !provider) return showError("Error: Faltan datos del capítulo");
+
+    // Feedback visual
+    const originalText = btnElement.innerHTML;
+    btnElement.innerHTML = `<span class="spinner">↻</span>`; // Spinner pequeño
+    btnElement.disabled = true;
+
+    try {
+        // 1. OBTENER CONTENIDO USANDO EL PROVIDER DEL CAPÍTULO
+        // CAMBIO AQUÍ: Usamos 'provider' en lugar de 'extensionName'
+        const fetchUrl = `/api/book/${bookId}/${chapterId}/${provider}?source=${extensionName || 'anilist'}&lang=none`;
+
+        const contentRes = await fetch(fetchUrl);
+
+        if (!contentRes.ok) throw new Error("Error obteniendo contenido del capítulo");
+        const chapterData = await contentRes.json();
+
+        // 2. PREPARAR BODY (Misma lógica)
+        let payload = {
+            anilist_id: parseInt(bookId),
+            chapter_number: parseFloat(chapterNumber),
+            format: "",
+        };
+
+        if (chapterData.pages && Array.isArray(chapterData.pages)) {
+            payload.format = "manga";
+            payload.images = chapterData.pages.map((img, index) => {
+                let finalUrl = img.url;
+                if (img.headers && Object.keys(img.headers).length > 0) {
+                    finalUrl = buildProxyUrl(img.url, img.headers);
+                }
+                return { index: index, url: finalUrl };
+            });
+        }
+        else if (chapterData.content) {
+            payload.format = "novel";
+            payload.content = chapterData.content;
+        } else {
+            throw new Error("Formato desconocido");
+        }
+
+        const downloadRes = await fetch('/api/library/download/book', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload)
+        });
+
+        const downloadData = await downloadRes.json();
+
+        if (downloadRes.status === 200) {
+            btnElement.innerHTML = "✓";
+            btnElement.style.color = "#22c55e"; // Icono verde
+        } else if (downloadRes.status === 409) {
+            btnElement.innerHTML = "✓";
+            btnElement.style.color = "#3b82f6"; // Icono azul (ya existe)
+        } else {
+            throw new Error(downloadData.message || "Error");
+        }
+
+    } catch (err) {
+        console.error("Download Error:", err);
+        btnElement.innerHTML = "✕"; // X roja
+        btnElement.style.color = "#ef4444";
+        btnElement.disabled = false;
+
+        // Restaurar icono original después de 3 seg
+        setTimeout(() => {
+            btnElement.innerHTML = originalText;
+            btnElement.style.color = "";
+        }, 3000);
+    }
+}
+
+async function loadChapters(targetProvider = null) {
+    const listContainer = document.getElementById('chapters-list');
+    const loadingMsg = document.getElementById('loading-msg');
+
+    if(listContainer) listContainer.innerHTML = '';
+    if(loadingMsg) loadingMsg.style.display = 'block';
+
+    if (!targetProvider) {
+        const select = document.getElementById('provider-filter');
+        targetProvider = select ? select.value : (availableExtensions[0] || 'all');
+    }
+
+    try {
+        let fetchUrl;
+        let isLocalRequest = targetProvider === 'local';
+
+        if (isLocalRequest) {
+            fetchUrl = `/api/library/${bookId}/units`;
+        } else {
+            const source = extensionName || 'anilist';
+            fetchUrl = `/api/book/${bookId}/chapters?source=${source}`;
+            if (targetProvider !== 'all') fetchUrl += `&provider=${targetProvider}`;
+        }
+
+        const res = await fetch(fetchUrl);
+        const data = await res.json();
+
+        if(loadingMsg) loadingMsg.style.display = 'none';
+
+        let rawData = [];
+        if (isLocalRequest) {
+            rawData = (data.units || []).map((unit, idx) => ({
+                id: unit.id || idx, number: unit.number, title: unit.name,
+                provider: 'local', index: idx, format: unit.format, language: 'local'
+            }));
+        } else {
+            rawData = data.chapters || [];
+        }
+        processChaptersData(rawData);
+
+    } catch (err) {
+        if(loadingMsg) loadingMsg.style.display = 'none';
+        if(listContainer) listContainer.innerHTML = '<div style="text-align:center; color: #ef4444;">Error loading chapters.</div>';
+        console.error(err);
+    }
+}
+
+function setupLanguageSelector() {
+    const selectorContainer = document.getElementById('language-selector-container');
+    const select = document.getElementById('language-select');
+    if (!selectorContainer || !select) return;
+
+    if (uniqueLanguages.length <= 1) {
+        selectorContainer.classList.add('hidden');
+        currentLanguage = uniqueLanguages[0] || null;
+        return;
+    }
+    selectorContainer.classList.remove('hidden');
+    select.innerHTML = '';
+
+    const langNames = { 'es': 'Español', 'es-419': 'Latino', 'en': 'English', 'pt-br': 'Português', 'ja': '日本語' };
+
+    uniqueLanguages.forEach(lang => {
+        const option = document.createElement('option');
+        option.value = lang;
+        option.textContent = langNames[lang] || lang.toUpperCase();
+        select.appendChild(option);
+    });
+
+    if (uniqueLanguages.includes('es-419')) currentLanguage = 'es-419';
+    else if (uniqueLanguages.includes('es')) currentLanguage = 'es';
+    else currentLanguage = uniqueLanguages[0];
+    select.value = currentLanguage;
+
+    select.onchange = (e) => {
+        currentLanguage = e.target.value;
+        chapterPagination.currentPage = 1;
+        filterAndRenderChapters();
+    };
+}
+
+function filterAndRenderChapters() {
+    let tempChapters = [...allChapters];
+    if (currentLanguage && uniqueLanguages.length > 1) {
+        tempChapters = tempChapters.filter(ch => ch.language === currentLanguage);
+    }
+    const searchQuery = document.getElementById('chapter-search')?.value.toLowerCase();
+    if(searchQuery){
+        tempChapters = tempChapters.filter(ch =>
+            (ch.title && ch.title.toLowerCase().includes(searchQuery)) ||
+            (ch.number && ch.number.toString().includes(searchQuery))
+        );
+    }
+    tempChapters.sort((a, b) => {
+        const numA = parseFloat(a.number) || 0;
+        const numB = parseFloat(b.number) || 0;
+        return isSortAscending ? numA - numB : numB - numA;
+    });
+    filteredChapters = tempChapters;
+    chapterPagination.setTotalItems(filteredChapters.length);
+    renderChapterList();
+}
+
+function renderChapterList() {
+    const container = document.getElementById('chapters-list');
+    if(!container) return;
+    container.innerHTML = '';
+    const itemsToShow = chapterPagination.getCurrentPageItems(filteredChapters);
+
+    if (itemsToShow.length === 0) {
+        container.innerHTML = '<div style="text-align:center; padding:2rem; color:#888;">No chapters found.</div>';
+        return;
+    }
+
+    itemsToShow.forEach(chapter => {
+        const el = document.createElement('div');
+        el.className = 'chapter-item';
+
+        // El clic principal abre el lector
+        el.onclick = () => openReader(chapter.id, chapter.provider);
+
+        const dateStr = chapter.date ? new Date(chapter.date).toLocaleDateString() : '';
+        const providerLabel = chapter.provider !== 'local' ? chapter.provider : '';
+
+        // Definimos el icono SVG de descarga para no ensuciar tanto el template string
+        const downloadIcon = `
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                <polyline points="7 10 12 15 17 10"></polyline>
+                <line x1="12" y1="15" x2="12" y2="3"></line>
+            </svg>`;
+
+        const isLocal = chapter.provider === 'local';
+        const downloadBtnStyle = isLocal ? 'display:none;' : '';
+
+        el.innerHTML = `
+            <div class="chapter-info">
+                <span class="chapter-number">Chapter ${chapter.number}</span>
+                <span class="chapter-title">${chapter.title || ''}</span>
+            </div>
+            
+            <div class="chapter-actions" style="display: flex; align-items: center; gap: 10px;">
+                <div class="chapter-meta">
+                    ${providerLabel ? `<span class="lang-tag">${providerLabel}</span>` : ''}
+                    ${dateStr ? `<span>${dateStr}</span>` : ''}
+                </div>
+        
+                <button class="download-btn" 
+                    style="${downloadBtnStyle}"
+                    onclick="event.stopPropagation(); downloadChapter('${chapter.id}', '${chapter.number}', '${chapter.provider}', this)"
+                    title="Descargar">
+                    ${downloadIcon}
+                </button>
+        
+                <svg class="chapter-play-icon" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M8 5v14l11-7z"/>
+                </svg>
+            </div>
+        `;
+        container.appendChild(el);
+    });
+
+    chapterPagination.renderControls('pagination', 'page-info', 'prev-page', 'next-page');
+}
+
+function toggleSortOrder() {
+    isSortAscending = !isSortAscending;
+    const btn = document.getElementById('sort-btn');
+    if(btn) btn.style.transform = isSortAscending ? 'rotate(180deg)' : 'rotate(0deg)';
+    filterAndRenderChapters();
+}
+
+function setupReadButton() {
+    const readBtn = document.getElementById('read-start-btn');
+    if (!readBtn || allChapters.length === 0) return;
+    const firstChapter = [...allChapters].sort((a,b) => a.index - b.index)[0];
+    if (firstChapter) readBtn.onclick = () =>
+        openReader(firstChapter.index ?? firstChapter.id, firstChapter.provider);
+
+}
+
+function openReader(chapterIndexOrId, provider) {
+    const lang = currentLanguage ?? 'none';
+    window.location.href =
+        URLUtils.buildReadUrl(bookId, chapterIndexOrId, provider, extensionName || 'anilist')
+        + `?lang=${lang}`;
+}
+
 async function checkLocalLibraryEntry() {
     try {
-        const libraryType =
-            bookData?.entry_type === 'NOVEL' ? 'novels' : 'manga';
-
+        const libraryType = bookData?.entry_type === 'NOVEL' ? 'novels' : 'manga';
         const res = await fetch(`/api/library/${libraryType}/${bookId}`);
         if (!res.ok) return;
-
         const data = await res.json();
         if (data.matched) {
             isLocal = true;
@@ -36,255 +494,36 @@ async function checkLocalLibraryEntry() {
                 pill.style.borderColor = 'rgba(34, 197, 94, 0.3)';
             }
         }
-    } catch (e) {
-        console.error("Error checking local status:", e);
-    }
-}
-
-async function init() {
-    try {
-        const urlData = URLUtils.parseEntityPath('book');
-        if (!urlData) {
-            showError("Book Not Found");
-            return;
-        }
-
-        extensionName = urlData.extensionName;
-        bookId = urlData.entityId;
-        bookSlug = urlData.slug;
-        await loadBookMetadata();
-        await checkLocalLibraryEntry();
-
-        await loadAvailableExtensions();
-        await loadChapters();
-
-        await setupAddToListButton();
-
-    } catch (err) {
-        console.error("Metadata Error:", err);
-        showError("Error loading book");
-    }
+    } catch (e) { console.error("Error checking local:", e); }
 }
 
 async function loadAvailableExtensions() {
     try {
-        const res = await fetch('/api/extensions/book');
-        const data = await res.json();
-        availableExtensions = data.extensions || [];
+        if (!bookData?.entry_type) return;
+        console.log(bookData.entry_type)
 
+        const type = bookData.entry_type === 'MANGA' ? 'manga' : 'novel';
+        const res = await fetch(`/api/extensions/${type}`);
+        const data = await res.json();
+
+        availableExtensions = data.extensions || [];
         setupProviderFilter();
     } catch (err) {
-        console.error("Error fetching extensions:", err);
-    }
-}
-
-async function loadBookMetadata() {
-    const source = extensionName || 'anilist';
-    const fetchUrl = `/api/book/${bookId}?source=${source}`;
-
-    const res = await fetch(fetchUrl);
-    const data = await res.json();
-
-    if (data.error || !data) {
-        showError("Book Not Found");
-        return;
-    }
-
-    const raw = Array.isArray(data) ? data[0] : data;
-    bookData = raw;
-
-    const metadata = MediaMetadataUtils.formatBookData(raw, !!extensionName);
-    bookData.entry_type =
-        metadata.format === 'MANGA' ? 'MANGA' : 'NOVEL';
-    updatePageTitle(metadata.title);
-    updateMetadata(metadata);
-    updateExtensionPill();
-}
-
-function updatePageTitle(title) {
-    document.title = `${title} | WaifuBoard Books`;
-    const titleEl = document.getElementById('title');
-    if (titleEl) titleEl.innerText = title;
-}
-
-function updateMetadata(metadata) {
-
-    const descEl = document.getElementById('description');
-    if (descEl) descEl.innerHTML = metadata.description;
-
-    const scoreEl = document.getElementById('score');
-    if (scoreEl) {
-        scoreEl.innerText = extensionName
-            ? `${metadata.score}`
-            : `${metadata.score}% Score`;
-    }
-
-    const pubEl = document.getElementById('published-date');
-    if (pubEl) pubEl.innerText = metadata.year;
-
-    const statusEl = document.getElementById('status');
-    if (statusEl) statusEl.innerText = metadata.status;
-
-    const formatEl = document.getElementById('format');
-    if (formatEl) formatEl.innerText = metadata.format;
-
-    const chaptersEl = document.getElementById('chapters');
-    if (chaptersEl) chaptersEl.innerText = metadata.chapters;
-
-    const genresEl = document.getElementById('genres');
-    if (genresEl) genresEl.innerText = metadata.genres;
-
-    const posterEl = document.getElementById('poster');
-    if (posterEl) posterEl.src = metadata.poster;
-
-    const heroBgEl = document.getElementById('hero-bg');
-    if (heroBgEl) heroBgEl.src = metadata.banner;
-}
-
-function updateExtensionPill() {
-    const pill = document.getElementById('extension-pill');
-    if (!pill) return;
-
-    if (extensionName) {
-        pill.textContent = extensionName.charAt(0).toUpperCase() + extensionName.slice(1).toLowerCase();
-        pill.style.display = 'inline-flex';
-    } else {
-        pill.style.display = 'none';
-    }
-}
-
-async function setupAddToListButton() {
-    const btn = document.getElementById('add-to-list-btn');
-    if (!btn || !bookData) return;
-
-    ListModalManager.currentData = bookData;
-    const entryType = ListModalManager.getEntryType(bookData);
-    const idForCheck = extensionName ? bookSlug : bookId;
-
-    await ListModalManager.checkIfInList(
-        idForCheck,
-        extensionName || 'anilist',
-        entryType
-    );
-
-    updateCustomAddButton();
-
-    btn.onclick = () => ListModalManager.open(bookData, extensionName || 'anilist');
-}
-
-function updateCustomAddButton() {
-    const btn = document.getElementById('add-to-list-btn');
-    if (!btn) return;
-
-    if (ListModalManager.isInList) {
-        btn.innerHTML = `
-            <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
-                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
-            </svg>
-            In Your Library
-        `;
-        btn.style.background = 'rgba(34, 197, 94, 0.2)';
-        btn.style.color = '#22c55e';
-        btn.style.borderColor = 'rgba(34, 197, 94, 0.3)';
-    } else {
-        btn.innerHTML = '+ Add to Library';
-        btn.style.background = null;
-        btn.style.color = null;
-        btn.style.borderColor = null;
-    }
-}
-
-async function loadChapters(targetProvider = null) {
-    const tbody = document.getElementById('chapters-body');
-    if (!tbody) return;
-
-    if (!targetProvider) {
-        const select = document.getElementById('provider-filter');
-        targetProvider = select ? select.value : (availableExtensions[0] || 'all');
-    }
-
-    tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">Loading chapters...</td></tr>';
-
-    try {
-        let fetchUrl;
-        let isLocalRequest = targetProvider === 'local';
-
-        if (isLocalRequest) {
-            // Nuevo endpoint para archivos locales
-            fetchUrl = `/api/library/${bookId}/units`;
-        } else {
-            const source = extensionName || 'anilist';
-            fetchUrl = `/api/book/${bookId}/chapters?source=${source}`;
-            if (targetProvider !== 'all') fetchUrl += `&provider=${targetProvider}`;
-        }
-
-        const res = await fetch(fetchUrl);
-        const data = await res.json();
-
-        // Mapeo de datos: Si es local usamos 'units', si no, usamos 'chapters'
-        if (isLocalRequest) {
-            allChapters = (data.units || []).map((unit, idx) => ({
-                number: unit.number,
-                title: unit.name,
-                provider: 'local',
-                index: idx,           // ✅ índice (0,1,2…)
-                format: unit.format
-            }));
-        } else {
-            allChapters = data.chapters || [];
-        }
-
-        filteredChapters = [...allChapters];
-        applyChapterFilter();
-
-        const totalEl = document.getElementById('total-chapters');
-        if (allChapters.length === 0) {
-            tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">No chapters found.</td></tr>';
-            if (totalEl) totalEl.innerText = "0 Found";
-            return;
-        }
-
-        if (totalEl) totalEl.innerText = `${allChapters.length} Found`;
-
-        setupReadButton();
-        chapterPagination.setTotalItems(filteredChapters.length);
-        chapterPagination.reset();
-        renderChapterTable();
-
-    } catch (err) {
-        tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; color: #ef4444;">Error loading chapters.</td></tr>';
         console.error(err);
     }
 }
 
-function applyChapterFilter() {
-    const chapterParam = URLUtils.getQueryParam('chapter');
-    if (!chapterParam) return;
-
-    const chapterNumber = parseFloat(chapterParam);
-    if (isNaN(chapterNumber)) return;
-
-    filteredChapters = allChapters.filter(
-        ch => parseFloat(ch.number) === chapterNumber
-    );
-
-    chapterPagination.reset();
-}
-
 function setupProviderFilter() {
     const select = document.getElementById('provider-filter');
     if (!select) return;
-
     select.style.display = 'inline-block';
     select.innerHTML = '';
 
-    // Opción para cargar todo
     const allOpt = document.createElement('option');
     allOpt.value = 'all';
-    allOpt.innerText = 'Load All (Slower)';
+    allOpt.innerText = 'All Providers';
     select.appendChild(allOpt);
 
-    // NUEVO: Si es local, añadimos la opción 'local' al principio
     if (isLocal) {
         const localOpt = document.createElement('option');
         localOpt.value = 'local';
@@ -292,7 +531,6 @@ function setupProviderFilter() {
         select.appendChild(localOpt);
     }
 
-    // Añadir extensiones normales
     availableExtensions.forEach(ext => {
         const opt = document.createElement('option');
         opt.value = ext;
@@ -300,90 +538,43 @@ function setupProviderFilter() {
         select.appendChild(opt);
     });
 
-    // Lógica de selección automática
-    if (isLocal) {
-        select.value = 'local'; // Prioridad si es local
-    } else if (extensionName && availableExtensions.includes(extensionName)) {
-        select.value = extensionName;
-    } else if (availableExtensions.length > 0) {
-        select.value = availableExtensions[0];
+    if (isLocal) select.value = 'local';
+    else if (extensionName && availableExtensions.includes(extensionName)) select.value = extensionName;
+    else if (availableExtensions.length > 0) select.value = availableExtensions[0];
+
+    select.onchange = () => loadChapters(select.value);
+}
+
+function updateExtensionPill() {
+    const pill = document.getElementById('extension-pill');
+    if(pill && extensionName) { pill.innerText = extensionName; pill.style.display = 'inline-flex'; }
+}
+
+async function setupAddToListButton() {
+    const btn = document.getElementById('add-to-list-btn');
+    if (!btn || !bookData) return;
+    ListModalManager.currentData = bookData;
+    const entryType = ListModalManager.getEntryType(bookData);
+    const idForCheck = extensionName ? bookSlug : bookId;
+    await ListModalManager.checkIfInList(idForCheck, extensionName || 'anilist', entryType);
+    updateCustomAddButton();
+    btn.onclick = () => ListModalManager.open(bookData, extensionName || 'anilist');
+}
+
+function updateCustomAddButton() {
+    const btn = document.getElementById('add-to-list-btn');
+    if(btn && ListModalManager.isInList) {
+        btn.innerHTML = '✓ In Your List'; btn.style.background = 'rgba(34, 197, 94, 0.2)'; btn.style.color = '#22c55e'; btn.style.borderColor = '#22c55e';
     }
-
-    select.onchange = () => {
-        loadChapters(select.value);
-    };
-}
-
-function setupReadButton() {
-    const readBtn = document.getElementById('read-start-btn');
-    if (!readBtn || filteredChapters.length === 0) return;
-
-    const firstChapter = filteredChapters[0];
-    readBtn.onclick = () => openReader(0, firstChapter.provider);
-}
-
-function renderChapterTable() {
-    const tbody = document.getElementById('chapters-body');
-    if (!tbody) return;
-
-    tbody.innerHTML = '';
-
-    if (filteredChapters.length === 0) {
-        tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">No chapters match this filter.</td></tr>';
-        chapterPagination.renderControls(
-            'pagination',
-            'page-info',
-            'prev-page',
-            'next-page'
-        );
-        return;
-    }
-
-    const pageItems = chapterPagination.getCurrentPageItems(filteredChapters);
-
-    pageItems.forEach((ch) => {
-        const row = document.createElement('tr');
-        row.innerHTML = `
-            <td>${ch.number}</td>
-            <td>${ch.title || 'Chapter ' + ch.number}</td>
-            <td><span class="pill" style="font-size:0.75rem;">${ch.provider}</span></td>
-            <td>
-                <button class="read-btn-small" onclick="openReader('${ch.index}', '${ch.provider}')">
-                    Read
-                </button>
-            </td>
-        `;
-        tbody.appendChild(row);
-    });
-
-    chapterPagination.renderControls(
-        'pagination',
-        'page-info',
-        'prev-page',
-        'next-page'
-    );
-}
-
-function openReader(chapterId, provider) {
-    const effectiveExtension = extensionName || 'anilist';
-
-    window.location.href = URLUtils.buildReadUrl(
-        bookId,          // SIEMPRE anilist
-        chapterId,       // número normal
-        provider,        // 'local' o extensión
-        extensionName || 'anilist'
-    );
 }
 
 function setupModalClickOutside() {
     const modal = document.getElementById('add-list-modal');
-    if (!modal) return;
-
-    modal.addEventListener('click', (e) => {
-        if (e.target.id === 'add-list-modal') {
-            ListModalManager.close();
-        }
-    });
+    if (modal) {
+        modal.addEventListener('click', (e) => {
+            if (e.target.id === 'add-list-modal') ListModalManager.close();
+        });
+    }
 }
 
 function showError(message) {
@@ -391,21 +582,15 @@ function showError(message) {
     if (titleEl) titleEl.innerText = message;
 }
 
-function saveToList() {
+// Exports
+window.openReader = openReader;
+window.saveToList = () => {
     const idToSave = extensionName ? bookSlug : bookId;
     ListModalManager.save(idToSave, extensionName || 'anilist');
-}
-
-function deleteFromList() {
+};
+window.deleteFromList = () => {
     const idToDelete = extensionName ? bookSlug : bookId;
     ListModalManager.delete(idToDelete, extensionName || 'anilist');
-}
-
-function closeAddToListModal() {
-    ListModalManager.close();
-}
-
-window.openReader = openReader;
-window.saveToList = saveToList;
-window.deleteFromList = deleteFromList;
-window.closeAddToListModal = closeAddToListModal;
+};
+window.closeAddToListModal = () => ListModalManager.close();
+window.openAddToListModal = () => ListModalManager.open(bookData, extensionName || 'anilist');

desktop/src/scripts/books/reader.js

@@ -1,3 +1,4 @@
+const urlParams = new URLSearchParams(window.location.search);
 const reader = document.getElementById('reader');
 const panel = document.getElementById('settings-panel');
 const overlay = document.getElementById('overlay');
@@ -10,6 +11,16 @@ const nextBtn = document.getElementById('next-chapter');
 const lnSettings = document.getElementById('ln-settings');
 const mangaSettings = document.getElementById('manga-settings');
 
+
+const rawSource = urlParams.get('source') || 'anilist';
+const sourceParts = rawSource.split('?');
+const source = sourceParts[0];
+
+let lang =
+    urlParams.get('lang') ??
+    new URLSearchParams(sourceParts[1] || '').get('lang') ??
+    'none';
+
 const config = {
     ln: {
         fontSize: 18,
@@ -33,11 +44,12 @@ let currentType = null;
 let currentPages = [];
 let observer = null;
 
+// === CAMBIO: Parseo de URL para obtener ID ===
 const parts = window.location.pathname.split('/');
-
 const bookId = parts[4];
-let chapter = parts[3];
+let currentChapterId = parts[3]; // Ahora es un ID (string)
 let provider = parts[2];
+let chaptersList = []; // Buffer para guardar el orden de capítulos
 
 function loadConfig() {
     try {
@@ -116,6 +128,28 @@ function updateSettingsVisibility() {
     mangaSettings.classList.toggle('hidden', currentType !== 'manga');
 }
 
+// === CAMBIO: Nueva función para traer la lista de capítulos y saber el orden ===
+async function fetchChapterList() {
+    try {
+        // Reusamos el endpoint que lista capítulos
+        const res = await fetch(`/api/book/${bookId}/chapters?source=${source}&provider=${provider}`);
+        const data = await res.json();
+
+        // Ordenamos por número para asegurar navegación correcta
+        let list = data.chapters || [];
+        list.sort((a, b) => Number(a.number) - Number(b.number));
+
+        // Si hay filtro de idioma en la URL, filtramos la navegación también
+        if (lang !== 'none') {
+            list = list.filter(c => c.language === lang);
+        }
+
+        chaptersList = list;
+    } catch (e) {
+        console.error("Error fetching chapter list:", e);
+    }
+}
+
 async function loadChapter() {
     reader.innerHTML = `
         <div class="loading-container">
@@ -124,69 +158,74 @@ async function loadChapter() {
         </div>
     `;
 
-    const urlParams = new URLSearchParams(window.location.search);
-    let source = urlParams.get('source');
-    if (!source) {
-        source = 'anilist';
+    // === CAMBIO: Si no tenemos la lista de capítulos (y no es local), la pedimos ===
+    if (provider !== 'local' && chaptersList.length === 0) {
+        await fetchChapterList();
     }
+
     let newEndpoint;
 
     if (provider === 'local') {
         newEndpoint = `/api/library/${bookId}/units`;
     } else {
-        newEndpoint = `/api/book/${bookId}/${chapter}/${provider}?source=${source}`;
+        // === CAMBIO: Usamos currentChapterId en la URL ===
+        newEndpoint = `/api/book/${bookId}/${currentChapterId}/${provider}?source=${source}&lang=${lang}`;
     }
 
     try {
         const res = await fetch(newEndpoint);
         const data = await res.json();
-        if (provider === 'local') {
-            const unit = data.units[Number(chapter)];
-            if (!unit) return;
 
-            chapterLabel.textContent = unit.name;
-            document.title = unit.name;
+        const chapterMeta = chaptersList.find(
+            c => String(c.id) === String(currentChapterId)
+        );
+
+        if (chapterMeta) {
+            chapterLabel.textContent = `Chapter ${chapterMeta.number} - ${chapterMeta.title}`;
+            document.title = `Chapter ${chapterMeta.number} - ${chapterMeta.title}`;
+        }
+
+        // Lógica específica para contenido LOCAL
+        if (provider === 'local') {
+            const unit = data.units.find(u => String(u.id) === String(currentChapterId));
+
+            if (!unit) {
+                reader.innerHTML = '<div class="loading-container"><span>Chapter not found (Local)</span></div>';
+                return;
+            }
 
             const manifestRes = await fetch(`/api/library/${unit.id}/manifest`);
             const manifest = await manifestRes.json();
 
             reader.innerHTML = '';
 
-            // ===== MANGA =====
+            // Setup navegación manual para local (simple index +/- 1)
+            const unitIndex = data.units.findIndex(
+                u => String(u.id) === String(currentChapterId)
+            );
+            setupLocalNavigation(unitIndex, data.units.length);
+
+
             if (manifest.type === 'manga') {
                 currentType = 'manga';
                 updateSettingsVisibility();
                 applyStyles();
-
                 currentPages = manifest.pages;
-                loadManga(currentPages);
+                await loadManga(currentPages);
                 return;
             }
-
-            // ===== LN =====
             if (manifest.type === 'ln') {
                 currentType = 'ln';
                 updateSettingsVisibility();
                 applyStyles();
-
                 const contentRes = await fetch(manifest.url);
                 const html = await contentRes.text();
-
                 loadLN(html);
                 return;
             }
         }
-
-
-        if (data.title) {
-            chapterLabel.textContent = data.title;
-            document.title = data.title;
-        } else {
-            chapterLabel.textContent = `Chapter ${chapter}`;
-            document.title = `Chapter ${chapter}`;
-        }
-
-        setupProgressTracking(data, source);
+        const rawSource = urlParams.get('source') || 'anilist';
+        const source = rawSource.split('?')[0];
 
         const res2 = await fetch(`/api/book/${bookId}?source=${source}`);
         const data2 = await res2.json();
@@ -200,15 +239,27 @@ async function loadChapter() {
                 mode: "reading"
             })
         });
+
         if (data.error) {
-            reader.innerHTML = `
-                <div class="loading-container">
-                    <span style="color: #ef4444;">Error: ${data.error}</span>
-                </div>
-            `;
+            reader.innerHTML = `<div class="loading-container"><span style="color: #ef4444;">Error: ${data.error}</span></div>`;
             return;
         }
 
+        if (!chapterMeta) {
+            if (data.title) {
+                chapterLabel.textContent = `Chapter ${data.number ?? ''} - ${data.title}`;
+                document.title = chapterLabel.textContent;
+            } else {
+                chapterLabel.textContent = `Chapter ${data.number ?? currentChapterId}`;
+                document.title = chapterLabel.textContent;
+            }
+        }
+
+        setupProgressTracking(data, source);
+
+        // === CAMBIO: Actualizar botones basado en IDs ===
+        updateNavigationButtons();
+
         currentType = data.type;
         updateSettingsVisibility();
         applyStyles();
@@ -216,11 +267,12 @@ async function loadChapter() {
 
         if (data.type === 'manga') {
             currentPages = data.pages || [];
-            loadManga(currentPages);
+            await loadManga(currentPages);
         } else if (data.type === 'ln') {
             loadLN(data.content);
         }
     } catch (error) {
+        console.error(error);
         reader.innerHTML = `
             <div class="loading-container">
                 <span style="color: #ef4444;">Error loading chapter: ${error.message}</span>
@@ -229,7 +281,91 @@ async function loadChapter() {
     }
 }
 
-function loadManga(pages) {
+// === CAMBIO: Lógica de navegación basada en IDs ===
+function updateNavigationButtons() {
+    if (provider === 'local') return; // Se maneja aparte
+
+    // Buscamos el índice actual en la lista completa
+    const currentIndex = chaptersList.findIndex(c => String(c.id) === String(currentChapterId));
+
+    if (currentIndex === -1) {
+        console.warn("Current chapter not found in list, navigation disabled");
+        prevBtn.disabled = true;
+        nextBtn.disabled = true;
+        prevBtn.style.opacity = 0.5;
+        nextBtn.style.opacity = 0.5;
+        return;
+    }
+
+    // Configurar botón ANTERIOR
+    if (currentIndex > 0) {
+        const prevId = chaptersList[currentIndex - 1].id;
+        prevBtn.onclick = () => changeChapter(prevId);
+        prevBtn.disabled = false;
+        prevBtn.style.opacity = 1;
+    } else {
+        prevBtn.onclick = null;
+        prevBtn.disabled = true;
+        prevBtn.style.opacity = 0.5;
+    }
+
+    // Configurar botón SIGUIENTE
+    if (currentIndex < chaptersList.length - 1) {
+        const nextId = chaptersList[currentIndex + 1].id;
+        nextBtn.onclick = () => changeChapter(nextId);
+        nextBtn.disabled = false;
+        nextBtn.style.opacity = 1;
+    } else {
+        nextBtn.onclick = null;
+        nextBtn.disabled = true;
+        nextBtn.style.opacity = 0.5;
+    }
+}
+
+// Fallback para navegación local (basada en índices)
+function setupLocalNavigation(currentIndex, totalUnits) {
+    if (currentIndex > 0) {
+        prevBtn.onclick = () => changeChapter(currentIndex - 1);
+        prevBtn.disabled = false;
+        prevBtn.style.opacity = 1;
+    } else {
+        prevBtn.disabled = true;
+        prevBtn.style.opacity = 0.5;
+    }
+
+    if (currentIndex < totalUnits - 1) {
+        nextBtn.onclick = () => changeChapter(currentIndex + 1);
+        nextBtn.disabled = false;
+        nextBtn.style.opacity = 1;
+    } else {
+        nextBtn.disabled = true;
+        nextBtn.style.opacity = 0.5;
+    }
+}
+
+function changeChapter(newId) {
+    currentChapterId = newId;
+    updateURL(newId);
+    window.scrollTo(0, 0);
+    loadChapter();
+}
+
+function loadLongStrip(container, pages) {
+    pages.forEach((page, index) => {
+        const img = createImageElement(page, index);
+        img.classList.remove('fit-width', 'fit-height', 'fit-screen');
+
+        img.classList.add('longstrip-fit');
+        container.appendChild(img);
+    });
+}
+
+function updateURL(newId) {
+    const newUrl = `/read/${provider}/${newId}/${bookId}?source=${source}&lang=${lang}`;
+    window.history.pushState({}, '', newUrl);
+}
+
+async function loadManga(pages) {
     if (!pages || pages.length === 0) {
         reader.innerHTML = '<div class="loading-container"><span>No pages found</span></div>';
         return;
@@ -238,18 +374,22 @@ function loadManga(pages) {
     const container = document.createElement('div');
     container.className = 'manga-container';
 
-    let isLongStrip = false;
+    const analysis = await analyzePages(pages);
 
-    if (config.manga.mode === 'longstrip') {
-        isLongStrip = true;
-    } else if (config.manga.mode === 'auto' && detectLongStrip(pages)) {
-        isLongStrip = true;
-    }
+    const isLongStrip =
+        config.manga.mode === 'longstrip' ||
+        (config.manga.mode === 'auto' && analysis.tallRatio > 0.3);
 
-    const useDouble = config.manga.mode === 'double' ||
-        (config.manga.mode === 'auto' && !isLongStrip && shouldUseDoublePage(pages));
+    const useDouble =
+        !isLongStrip &&
+        (
+            config.manga.mode === 'double' ||
+            (config.manga.mode === 'auto' && analysis.wideRatio < 0.3)
+        );
 
-    if (useDouble) {
+    if (isLongStrip) {
+        loadLongStrip(container, pages);
+    } else if (useDouble) {
         loadDoublePage(container, pages);
     } else {
         loadSinglePage(container, pages);
@@ -260,20 +400,6 @@ function loadManga(pages) {
     enableMangaPageNavigation();
 }
 
-function shouldUseDoublePage(pages) {
-    if (pages.length <= 5) return false;
-
-    const widePages = pages.filter(p => {
-        if (!p.height || !p.width) return false;
-        const ratio = p.width / p.height;
-        return ratio > 1.3;
-    });
-
-    if (widePages.length > pages.length * 0.3) return false;
-
-    return true;
-}
-
 function loadSinglePage(container, pages) {
     pages.forEach((page, index) => {
         const img = createImageElement(page, index);
@@ -310,7 +436,6 @@ function loadDoublePage(container, pages) {
                     i++;
                 } else {
                     const rightPage = createImageElement(nextPage, i + 1);
-
                     if (config.manga.direction === 'rtl') {
                         doubleContainer.appendChild(rightPage);
                         doubleContainer.appendChild(leftPage);
@@ -318,7 +443,6 @@ function loadDoublePage(container, pages) {
                         doubleContainer.appendChild(leftPage);
                         doubleContainer.appendChild(rightPage);
                     }
-
                     container.appendChild(doubleContainer);
                     i += 2;
                 }
@@ -347,6 +471,18 @@ function createImageElement(page, index) {
         }
     };
 
+    img.onload = () => {
+        const ratio = img.naturalWidth / img.naturalHeight;
+
+        if (ratio > 1.3) {
+            const double = img.closest('.double-container');
+            if (double) {
+                double.replaceWith(img);
+            }
+        }
+    };
+
+
     if (config.manga.mode === 'longstrip' && index > 0) {
         img.classList.add('longstrip-fit');
     } else {
@@ -361,35 +497,60 @@ function createImageElement(page, index) {
         img.dataset.src = url;
         img.loading = 'lazy';
     }
-
     img.alt = `Page ${index + 1}`;
-
     return img;
 }
 
 function buildProxyUrl(url, headers = {}) {
-    const params = new URLSearchParams({
-        url
-    });
-
-    if (headers.referer) params.append('referer', headers.referer);
-    if (headers['user-agent']) params.append('ua', headers['user-agent']);
-    if (headers.cookie) params.append('cookie', headers.cookie);
-
+    const params = new URLSearchParams({ url });
+    if (headers.Referer || headers.referer)
+        params.append("referer", headers.Referer || headers.referer);
+    if (headers["User-Agent"] || headers["user-agent"])
+        params.append("userAgent", headers["User-Agent"] || headers["user-agent"]);
+    if (headers.Origin || headers.origin)
+        params.append("origin", headers.Origin || headers.origin);
     return `/api/proxy?${params.toString()}`;
 }
 
-function detectLongStrip(pages) {
-    if (!pages || pages.length === 0) return false;
+function analyzePages(pages, sample = 6) {
+    return new Promise(resolve => {
+        let tall = 0;
+        let wide = 0;
+        let loaded = 0;
 
-    const relevant = pages.slice(1);
-    const tall = relevant.filter(p => p.height && p.width && (p.height / p.width) > 2);
-    return tall.length >= 2 || (tall.length / relevant.length) > 0.3;
+        const count = Math.min(sample, pages.length);
+
+        for (let i = 0; i < count; i++) {
+            const img = new Image();
+            img.src = provider === 'local'
+                ? pages[i].url
+                : buildProxyUrl(pages[i].url, pages[i].headers);
+
+            img.onload = () => {
+                const ratio = img.naturalWidth / img.naturalHeight;
+                if (ratio < 0.6) tall++;
+                else if (ratio > 1.3) wide++;
+                loaded++;
+                if (loaded === count) finish();
+            };
+
+            img.onerror = () => {
+                loaded++;
+                if (loaded === count) finish();
+            };
+        }
+
+        function finish() {
+            resolve({
+                tallRatio: tall / count,
+                wideRatio: wide / count
+            });
+        }
+    });
 }
 
 function setupLazyLoading() {
     if (observer) observer.disconnect();
-
     observer = new IntersectionObserver((entries) => {
         entries.forEach(entry => {
             if (entry.isIntersecting) {
@@ -401,10 +562,7 @@ function setupLazyLoading() {
                 }
             }
         });
-    }, {
-        rootMargin: '200px'
-    });
-
+    }, { rootMargin: '200px' });
     document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));
 }
 
@@ -415,161 +573,100 @@ function loadLN(html) {
     reader.appendChild(div);
 }
 
+// Listeners de configuración
 document.getElementById('font-size').addEventListener('input', (e) => {
     config.ln.fontSize = parseInt(e.target.value);
     document.getElementById('font-size-value').textContent = e.target.value + 'px';
-    applyStyles();
-    saveConfig();
+    applyStyles(); saveConfig();
 });
-
 document.getElementById('line-height').addEventListener('input', (e) => {
     config.ln.lineHeight = parseFloat(e.target.value);
     document.getElementById('line-height-value').textContent = e.target.value;
-    applyStyles();
-    saveConfig();
+    applyStyles(); saveConfig();
 });
-
 document.getElementById('max-width').addEventListener('input', (e) => {
     config.ln.maxWidth = parseInt(e.target.value);
     document.getElementById('max-width-value').textContent = e.target.value + 'px';
-    applyStyles();
-    saveConfig();
+    applyStyles(); saveConfig();
 });
-
 document.getElementById('font-family').addEventListener('change', (e) => {
     config.ln.fontFamily = e.target.value;
-    applyStyles();
-    saveConfig();
+    applyStyles(); saveConfig();
 });
-
 document.getElementById('text-color').addEventListener('change', (e) => {
     config.ln.textColor = e.target.value;
-    applyStyles();
-    saveConfig();
+    applyStyles(); saveConfig();
 });
-
 document.getElementById('bg-color').addEventListener('change', (e) => {
     config.ln.bg = e.target.value;
-    applyStyles();
-    saveConfig();
+    applyStyles(); saveConfig();
 });
-
 document.querySelectorAll('[data-align]').forEach(btn => {
     btn.addEventListener('click', () => {
         document.querySelectorAll('[data-align]').forEach(b => b.classList.remove('active'));
         btn.classList.add('active');
         config.ln.textAlign = btn.dataset.align;
-        applyStyles();
-        saveConfig();
+        applyStyles(); saveConfig();
     });
 });
-
 document.querySelectorAll('[data-preset]').forEach(btn => {
     btn.addEventListener('click', () => {
         const preset = btn.dataset.preset;
-
         const presets = {
             dark: { bg: '#14141b', textColor: '#e5e7eb' },
             sepia: { bg: '#f4ecd8', textColor: '#5c472d' },
             light: { bg: '#fafafa', textColor: '#1f2937' },
             amoled: { bg: '#000000', textColor: '#ffffff' }
         };
-
         if (presets[preset]) {
             Object.assign(config.ln, presets[preset]);
             document.getElementById('bg-color').value = config.ln.bg;
             document.getElementById('text-color').value = config.ln.textColor;
-            applyStyles();
-            saveConfig();
+            applyStyles(); saveConfig();
         }
     });
 });
-
 document.getElementById('display-mode').addEventListener('change', (e) => {
     config.manga.mode = e.target.value;
-    saveConfig();
-    loadChapter();
+    saveConfig(); loadChapter();
 });
-
 document.getElementById('image-fit').addEventListener('change', (e) => {
     config.manga.imageFit = e.target.value;
-    saveConfig();
-    loadChapter();
+    saveConfig(); loadChapter();
 });
-
 document.getElementById('page-spacing').addEventListener('input', (e) => {
     config.manga.spacing = parseInt(e.target.value);
     document.getElementById('page-spacing-value').textContent = e.target.value + 'px';
-    applyStyles();
-    saveConfig();
+    applyStyles(); saveConfig();
 });
-
 document.getElementById('preload-count').addEventListener('change', (e) => {
     config.manga.preloadCount = parseInt(e.target.value);
     saveConfig();
 });
-
 document.querySelectorAll('[data-direction]').forEach(btn => {
     btn.addEventListener('click', () => {
         document.querySelectorAll('[data-direction]').forEach(b => b.classList.remove('active'));
         btn.classList.add('active');
         config.manga.direction = btn.dataset.direction;
-        saveConfig();
-        loadChapter();
+        saveConfig(); loadChapter();
     });
 });
 
-prevBtn.addEventListener('click', () => {
-    const current = parseInt(chapter);
-    if (current <= 0) return;
-
-    const newChapter = String(current - 1);
-    updateURL(newChapter);
-    window.scrollTo(0, 0);
-    loadChapter();
-});
-
-nextBtn.addEventListener('click', () => {
-    const newChapter = String(parseInt(chapter) + 1);
-    updateURL(newChapter);
-    window.scrollTo(0, 0);
-    loadChapter();
-});
-
-function updateURL(newChapter) {
-    chapter = newChapter;
-    const urlParams = new URLSearchParams(window.location.search);
-    let source = urlParams.get('source');
-
-    let src;
-    if (source === 'anilist') {
-        src= "?source=anilist"
-    } else {
-        src= `?source=${source}`
-    }
-    const newUrl = `/read/${provider}/${chapter}/${bookId}${src}`;
-    window.history.pushState({}, '', newUrl);
-}
-
+// Botón "Atrás"
 document.getElementById('back-btn').addEventListener('click', () => {
-    const parts = window.location.pathname.split('/');
-    const mangaId = parts[4];
 
-    const urlParams = new URLSearchParams(window.location.search);
-    let source = urlParams.get('source');
-
-    if (source === 'anilist') {
-        window.location.href = `/book/${mangaId}`;
+    if (source === 'anilist' || !source) {
+        window.location.href = `/book/${bookId}`;
     } else {
-        window.location.href = `/book/${source}/${mangaId}`;
+        window.location.href = `/book/${source}/${bookId}`;
     }
 });
 
+// Panel de configuración
 settingsBtn.addEventListener('click', () => {
     panel.classList.add('open');
     overlay.classList.add('active');
 });
-
 closePanel.addEventListener('click', closeSettings);
 overlay.addEventListener('click', closeSettings);
 
@@ -577,7 +674,6 @@ function closeSettings() {
     panel.classList.remove('open');
     overlay.classList.remove('active');
 }
-
 document.addEventListener('keydown', (e) => {
     if (e.key === 'Escape' && panel.classList.contains('open')) {
         closeSettings();
@@ -587,37 +683,24 @@ document.addEventListener('keydown', (e) => {
 function enableMangaPageNavigation() {
     if (currentType !== 'manga') return;
     const logicalPages = [];
-
     document.querySelectorAll('.manga-container > *').forEach(el => {
-        if (el.classList.contains('double-container')) {
-            logicalPages.push(el);
-        } else if (el.tagName === 'IMG') {
+        if (el.classList.contains('double-container') || el.tagName === 'IMG') {
             logicalPages.push(el);
         }
     });
-
     if (logicalPages.length === 0) return;
 
     function scrollToLogical(index) {
         if (index < 0 || index >= logicalPages.length) return;
-
         const topBar = document.querySelector('.top-bar');
         const offset = topBar ? -topBar.offsetHeight : 0;
-
-        const y = logicalPages[index].getBoundingClientRect().top
-            + window.pageYOffset
-            + offset;
-
-        window.scrollTo({
-            top: y,
-            behavior: 'smooth'
-        });
+        const y = logicalPages[index].getBoundingClientRect().top + window.pageYOffset + offset;
+        window.scrollTo({ top: y, behavior: 'smooth' });
     }
 
     function getCurrentLogicalIndex() {
         let closest = 0;
         let minDist = Infinity;
-
         logicalPages.forEach((el, i) => {
             const rect = el.getBoundingClientRect();
             const dist = Math.abs(rect.top);
@@ -626,53 +709,36 @@ function enableMangaPageNavigation() {
                 closest = i;
             }
         });
-
         return closest;
     }
-
     const rtl = () => config.manga.direction === 'rtl';
 
     document.addEventListener('keydown', (e) => {
         if (currentType !== 'manga') return;
         if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT') return;
-
         const index = getCurrentLogicalIndex();
-
-        if (e.key === 'ArrowLeft') {
-            scrollToLogical(rtl() ? index + 1 : index - 1);
-        }
-        if (e.key === 'ArrowRight') {
-            scrollToLogical(rtl() ? index - 1 : index + 1);
-        }
+        if (e.key === 'ArrowLeft') scrollToLogical(rtl() ? index + 1 : index - 1);
+        if (e.key === 'ArrowRight') scrollToLogical(rtl() ? index - 1 : index + 1);
     });
 
     reader.addEventListener('click', (e) => {
         if (currentType !== 'manga') return;
-
         const bounds = reader.getBoundingClientRect();
         const x = e.clientX - bounds.left;
         const half = bounds.width / 2;
-
         const index = getCurrentLogicalIndex();
-
-        if (x < half) {
-            scrollToLogical(rtl() ? index + 1 : index - 1);
-        } else {
-            scrollToLogical(rtl() ? index - 1 : index + 1);
-        }
+        if (x < half) scrollToLogical(rtl() ? index + 1 : index - 1);
+        else scrollToLogical(rtl() ? index - 1 : index + 1);
     });
 }
 
 let resizeTimer;
 window.addEventListener('resize', () => {
     clearTimeout(resizeTimer);
-    resizeTimer = setTimeout(() => {
-        applyStyles();
-    }, 250);
+    resizeTimer = setTimeout(() => { applyStyles(); }, 250);
 });
 
 let progressSaved = false;
-
 function setupProgressTracking(data, source) {
     progressSaved = false;
 
@@ -685,25 +751,16 @@ function setupProgressTracking(data, source) {
             source: source,
             entry_type: data.type === 'manga' ? 'MANGA' : 'NOVEL',
             status: 'CURRENT',
-            progress: source === 'anilist'
-                ? Math.floor(chapterNumber)
-
-                : chapterNumber
-
+            progress: source === 'anilist' ? Math.floor(chapterNumber) : chapterNumber
         };
 
         try {
             await fetch('/api/list/entry', {
                 method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'Authorization': `Bearer ${token}`
-                },
+                headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
                 body: JSON.stringify(body)
             });
-        } catch (err) {
-            console.error('Error updating progress:', err);
-        }
+        } catch (err) { console.error('Error updating progress:', err); }
     }
 
     function checkProgress() {
@@ -713,25 +770,22 @@ function setupProgressTracking(data, source) {
 
         if (percent >= 0.8 && !progressSaved) {
             progressSaved = true;
-
             const chapterNumber = (typeof data.number !== 'undefined' && data.number !== null)
                 ? data.number
-                : Number(chapter);
+                : 0; // Fallback si no hay numero
 
             sendProgress(chapterNumber);
-
             window.removeEventListener('scroll', checkProgress);
         }
     }
-
     window.removeEventListener('scroll', checkProgress);
     window.addEventListener('scroll', checkProgress);
 }
 
-if (!bookId || !chapter || !provider) {
+if (!bookId || !currentChapterId || !provider) {
     reader.innerHTML = `
         <div class="loading-container">
-            <span style="color: #ef4444;">Missing required parameters (bookId, chapter, provider)</span>
+            <span style="color: #ef4444;">Missing required parameters (bookId, chapterId, provider)</span>
         </div>
     `;
 } else {

desktop/src/scripts/list.js

@@ -1,380 +0,0 @@
-const API_BASE = '/api';
-let currentList = [];
-let filteredList = [];
-
-document.addEventListener('DOMContentLoaded', async () => {
-    await loadList();
-    setupEventListeners();
-});
-
-function getEntryLink(item) {
-    const isAnime = item.entry_type?.toUpperCase() === 'ANIME';
-    const baseRoute = isAnime ? '/anime' : '/book';
-    const source = item.source || 'anilist';
-
-    if (source === 'anilist') {
-        return `${baseRoute}/${item.entry_id}`;
-    } else {
-        return `${baseRoute}/${source}/${item.entry_id}`;
-    }
-}
-
-async function populateSourceFilter() {
-    const select = document.getElementById('source-filter');
-    if (!select) return;
-
-    select.innerHTML = `
-        <option value="all">All Sources</option>
-        <option value="anilist">AniList</option>
-    `;
-
-    try {
-        const [animeRes, bookRes] = await Promise.all([
-            fetch(`${API_BASE}/extensions/anime`),
-            fetch(`${API_BASE}/extensions/book`)
-        ]);
-
-        const extensions = new Set();
-
-        if (animeRes.ok) {
-            const data = await animeRes.json();
-            (data.extensions || []).forEach(ext => extensions.add(ext));
-        }
-
-        if (bookRes.ok) {
-            const data = await bookRes.json();
-            (data.extensions || []).forEach(ext => extensions.add(ext));
-        }
-
-        extensions.forEach(extName => {
-            const lower = extName.toLowerCase();
-            if (lower !== 'anilist' && lower !== 'local') {
-                const option = document.createElement('option');
-                option.value = extName;
-                option.textContent = extName.charAt(0).toUpperCase() + extName.slice(1);
-                select.appendChild(option);
-            }
-        });
-    } catch (error) {
-        console.error('Error loading extensions:', error);
-    }
-}
-
-function updateLocalList(entryData, action) {
-    const entryId = entryData.entry_id;
-    const source = entryData.source;
-
-    const findIndex = (list) => list.findIndex(e =>
-        e.entry_id === entryId && e.source === source
-    );
-
-    const currentIndex = findIndex(currentList);
-    if (currentIndex !== -1) {
-        if (action === 'update') {
-
-            currentList[currentIndex] = { ...currentList[currentIndex], ...entryData };
-        } else if (action === 'delete') {
-            currentList.splice(currentIndex, 1);
-        }
-    } else if (action === 'update') {
-
-        currentList.push(entryData);
-    }
-
-    filteredList = [...currentList];
-
-    updateStats();
-    applyFilters();
-    window.ListModalManager.close();
-}
-
-function setupEventListeners() {
-
-    document.querySelectorAll('.view-btn').forEach(btn => {
-        btn.addEventListener('click', () => {
-            document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));
-            btn.classList.add('active');
-            const view = btn.dataset.view;
-            const container = document.getElementById('list-container');
-            if (view === 'list') {
-                container.classList.add('list-view');
-            } else {
-                container.classList.remove('list-view');
-            }
-        });
-    });
-
-    document.getElementById('status-filter').addEventListener('change', applyFilters);
-    document.getElementById('source-filter').addEventListener('change', applyFilters);
-    document.getElementById('type-filter').addEventListener('change', applyFilters);
-    document.getElementById('sort-filter').addEventListener('change', applyFilters);
-
-    document.querySelector('.search-input').addEventListener('input', (e) => {
-        const query = e.target.value.toLowerCase();
-        if (query) {
-            filteredList = currentList.filter(item =>
-                item.title?.toLowerCase().includes(query)
-            );
-        } else {
-            filteredList = [...currentList];
-        }
-        applyFilters();
-    });
-
-    document.getElementById('modal-save-btn')?.addEventListener('click', async () => {
-
-        const entryToSave = window.ListModalManager.currentEntry || window.ListModalManager.currentData;
-
-        if (!entryToSave) return;
-
-        const success = await window.ListModalManager.save(entryToSave.entry_id, entryToSave.source);
-
-        if (success) {
-
-            const updatedEntry = window.ListModalManager.currentEntry;
-            updatedEntry.updated_at = new Date().toISOString();
-
-            updateLocalList(updatedEntry, 'update');
-        }
-
-    });
-
-    document.getElementById('modal-delete-btn')?.addEventListener('click', async () => {
-        const entryToDelete = window.ListModalManager.currentEntry || window.ListModalManager.currentData;
-
-        if (!entryToDelete) return;
-
-        const success = await window.ListModalManager.delete(entryToDelete.entry_id, entryToDelete.source);
-
-        if (success) {
-            updateLocalList(entryToDelete, 'delete');
-        }
-
-    });
-
-    document.getElementById('add-list-modal')?.addEventListener('click', (e) => {
-        if (e.target.id === 'add-list-modal') {
-            window.ListModalManager.close();
-        }
-    });
-}
-
-async function loadList() {
-    const loadingState = document.getElementById('loading-state');
-    const emptyState = document.getElementById('empty-state');
-    const container = document.getElementById('list-container');
-
-    await populateSourceFilter();
-
-    try {
-        loadingState.style.display = 'flex';
-        emptyState.style.display = 'none';
-        container.innerHTML = '';
-
-        const response = await fetch(`${API_BASE}/list`, {
-            headers: window.AuthUtils.getSimpleAuthHeaders()
-        });
-
-        if (!response.ok) {
-            throw new Error('Failed to load list');
-        }
-
-        const data = await response.json();
-        currentList = data.results || [];
-        filteredList = [...currentList];
-
-        loadingState.style.display = 'none';
-
-        if (currentList.length === 0) {
-            emptyState.style.display = 'flex';
-        } else {
-            updateStats();
-            applyFilters();
-        }
-    } catch (error) {
-        console.error('Error loading list:', error);
-        loadingState.style.display = 'none';
-        if (window.NotificationUtils) {
-            window.NotificationUtils.error('Failed to load your list. Please try again.');
-        } else {
-            alert('Failed to load your list. Please try again.');
-        }
-    }
-}
-
-function updateStats() {
-
-    const total = currentList.length;
-    const watching = currentList.filter(item => item.status === 'WATCHING').length;
-    const completed = currentList.filter(item => item.status === 'COMPLETED').length;
-    const planning = currentList.filter(item => item.status === 'PLANNING').length;
-
-    document.getElementById('total-count').textContent = total;
-    document.getElementById('watching-count').textContent = watching;
-    document.getElementById('completed-count').textContent = completed;
-    document.getElementById('planned-count').textContent = planning;
-}
-
-function applyFilters() {
-    const statusFilter = document.getElementById('status-filter').value;
-    const sourceFilter = document.getElementById('source-filter').value;
-    const typeFilter = document.getElementById('type-filter').value;
-    const sortFilter = document.getElementById('sort-filter').value;
-
-    let filtered = [...filteredList];
-
-    if (statusFilter !== 'all') {
-        filtered = filtered.filter(item => item.status === statusFilter);
-    }
-
-    if (sourceFilter !== 'all') {
-        filtered = filtered.filter(item => item.source === sourceFilter);
-    }
-
-    if (typeFilter !== 'all') {
-        filtered = filtered.filter(item => item.entry_type === typeFilter);
-    }
-
-    switch (sortFilter) {
-        case 'title':
-            filtered.sort((a, b) => (a.title || '').localeCompare(b.title || ''));
-            break;
-        case 'score':
-            filtered.sort((a, b) => (b.score || 0) - (a.score || 0));
-            break;
-        case 'progress':
-            filtered.sort((a, b) => (b.progress || 0) - (a.progress || 0));
-            break;
-        case 'updated':
-        default:
-
-            filtered.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at));
-            break;
-    }
-
-    renderList(filtered);
-}
-
-function renderList(items) {
-    const container = document.getElementById('list-container');
-    container.innerHTML = '';
-
-    if (items.length === 0) {
-
-        if (currentList.length === 0) {
-            document.getElementById('empty-state').style.display = 'flex';
-        } else {
-
-            container.innerHTML = '<div class="empty-state"><p>No entries match your filters</p></div>';
-        }
-        return;
-    }
-
-    document.getElementById('empty-state').style.display = 'none';
-
-    items.forEach(item => {
-        const element = createListItem(item);
-        container.appendChild(element);
-    });
-}
-
-function createListItem(item) {
-    const div = document.createElement('div');
-    div.className = 'list-item';
-
-    const itemLink = getEntryLink(item);
-
-    const posterUrl = item.poster || '/public/assets/placeholder.svg';
-    const progress = item.progress || 0;
-
-    const totalUnits = item.entry_type === 'ANIME' ?
-        item.total_episodes || 0 :
-        item.total_chapters || 0;
-
-    const progressPercent = totalUnits > 0 ? (progress / totalUnits) * 100 : 0;
-    const score = item.score ? item.score.toFixed(1) : null;
-    const repeatCount = item.repeat_count || 0;
-
-    const entryType = (item.entry_type).toUpperCase();
-    let unitLabel = 'units';
-    if (entryType === 'ANIME') {
-        unitLabel = 'episodes';
-    } else if (entryType === 'MANGA') {
-        unitLabel = 'chapters';
-    } else if (entryType === 'NOVEL') {
-        unitLabel = 'chapters/volumes';
-    }
-
-    const statusLabels = {
-        'CURRENT': entryType === 'ANIME' ? 'Watching' : 'Reading',
-        'COMPLETED': 'Completed',
-        'PLANNING': 'Planning',
-        'PAUSED': 'Paused',
-        'DROPPED': 'Dropped',
-        'REPEATING': entryType === 'ANIME' ? 'Rewatching' : 'Rereading'
-    };
-
-    const extraInfo = [];
-    if (repeatCount > 0) {
-        extraInfo.push(`<span class="meta-pill repeat-pill">🔁 ${repeatCount}</span>`);
-    }
-    if (item.is_private) {
-        extraInfo.push('<span class="meta-pill private-pill">🔒 Private</span>');
-    }
-
-    const entryDataString = JSON.stringify(item).replace(/'/g, '&#39;');
-
-    div.innerHTML = `
-        <a href="${itemLink}" class="item-poster-link">
-            <img src="${posterUrl}" alt="${item.title || 'Entry'}" class="item-poster" onerror="this.src='/public/assets/placeholder.png'">
-        </a>
-        <div class="item-content">
-            <div>
-                <a href="${itemLink}" style="text-decoration:none; color:inherit;">
-                    <h3 class="item-title">${item.title || 'Unknown Title'}</h3>
-                </a>
-                <div class="item-meta">
-                    <span class="meta-pill status-pill">${statusLabels[item.status] || item.status}</span>
-                    <span class="meta-pill type-pill">${entryType}</span> 
-                    <span class="meta-pill source-pill">${item.source.toUpperCase()}</span>
-                    ${extraInfo.join('')}
-                </div>
-            </div>
-
-            <div>
-                <div class="progress-bar-container">
-                    <div class="progress-bar" style="width: ${progressPercent}%"></div>
-                </div>
-                <div class="progress-text">
-                    <span>${progress}${totalUnits > 0 ? ` / ${totalUnits}` : ''} ${unitLabel}</span> ${score ? `<span class="score-badge">⭐ ${score}</span>` : ''}
-                </div>
-            </div>
-        </div>
-
-        <button class="edit-icon-btn" data-entry='${entryDataString}'>
-            <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
-                <path d="M15.232 5.232l3.536 3.536m-2.036-5.808a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.536L15.232 5.232z"/>
-            </svg>
-        </button>
-        `;
-
-    const editBtn = div.querySelector('.edit-icon-btn');
-    editBtn.addEventListener('click', (e) => {
-        try {
-            const entryData = JSON.parse(e.currentTarget.dataset.entry);
-
-            window.ListModalManager.isInList = true;
-            window.ListModalManager.currentEntry = entryData;
-            window.ListModalManager.currentData = entryData;
-
-            window.ListModalManager.open(entryData, entryData.source);
-        } catch (error) {
-            console.error('Error parsing entry data for modal:', error);
-            if (window.NotificationUtils) {
-                window.NotificationUtils.error('Could not open modal. Check HTML form IDs.');
-            }
-        }
-    });
-
-    return div;
-}

desktop/src/scripts/local-library-books.js

@@ -1,106 +0,0 @@
-let activeFilter = 'all';
-let activeSort = 'az';
-let isLocalMode = false;
-let localEntries = [];
-
-function toggleLibraryMode() {
-    isLocalMode = !isLocalMode;
-    const btn = document.getElementById('library-mode-btn');
-    const onlineContent = document.getElementById('online-content');
-    const localContent = document.getElementById('local-content');
-
-    if (isLocalMode) {
-        btn.classList.add('active');
-        onlineContent.classList.add('hidden');
-        localContent.classList.remove('hidden');
-        loadLocalEntries();
-    } else {
-        btn.classList.remove('active');
-        onlineContent.classList.remove('hidden');
-        localContent.classList.add('hidden');
-    }
-}
-
-async function loadLocalEntries() {
-    const grid = document.getElementById('local-entries-grid');
-    grid.innerHTML = '<div class="skeleton-card"></div>'.repeat(6);
-
-    try {
-        const [mangaRes, novelRes] = await Promise.all([
-            fetch('/api/library/manga'),
-            fetch('/api/library/novels')
-        ]);
-
-        const [manga, novel] = await Promise.all([
-            mangaRes.json(),
-            novelRes.json()
-        ]);
-
-        localEntries = [
-            ...manga.map(e => ({ ...e, type: 'manga' })),
-            ...novel.map(e => ({ ...e, type: 'novel' }))
-        ];
-
-        if (localEntries.length === 0) {
-            grid.innerHTML = '<p style="grid-column:1/-1;text-align:center;padding:3rem;">No books found.</p>';
-            return;
-        }
-
-        renderLocalEntries(localEntries);
-    } catch {
-        grid.innerHTML = '<p style="grid-column:1/-1;text-align:center;color:var(--color-danger);padding:3rem;">Error loading library.</p>';
-    }
-}
-
-function filterLocal(type) {
-    if (type === 'all') renderLocalEntries(localEntries);
-    else renderLocalEntries(localEntries.filter(e => e.type === type));
-}
-
-function renderLocalEntries(entries) {
-    const grid = document.getElementById('local-entries-grid');
-    grid.innerHTML = entries.map(entry => {
-        const title = entry.metadata?.title?.romaji || entry.metadata?.title?.english || entry.id;
-        const cover = entry.metadata?.coverImage?.extraLarge || '/public/assets/placeholder.jpg';
-        const chapters = entry.metadata?.chapters || '??';
-
-        return `
-            <div class="local-card" onclick="viewLocalEntry(${entry.metadata?.id || 'null'})">
-                <div class="card-img-wrap">
-                    <img src="${cover}" alt="${title}" loading="lazy">
-                </div>
-                <div class="local-card-info">
-                    <div class="local-card-title">${title}</div>
-                    <p style="font-size: 0.85rem; color: var(--color-text-secondary); margin: 0;">
-                        ${chapters} Chapters
-                    </p>
-                    <div class="badge">${entry.type}</div>
-                    <div class="match-status ${entry.matched ? 'status-linked' : 'status-unlinked'}">
-                        ${entry.matched ? '● Linked' : '○ Unlinked'}
-                    </div>
-                </div>
-            </div>
-        `;
-    }).join('');
-}
-
-async function scanLocalLibrary() {
-    const btnText = document.getElementById('scan-text');
-    btnText.innerText = "Scanning...";
-    try {
-        // Asumiendo que el scan de libros usa este query param
-        const response = await fetch('/api/library/scan?mode=incremental', { method: 'POST' });
-        if (response.ok) {
-            await loadLocalEntries();
-            if (window.NotificationUtils) NotificationUtils.show('Library scanned!', 'success');
-        }
-    } catch (err) {
-        if (window.NotificationUtils) NotificationUtils.show('Scan failed', 'error');
-    } finally {
-        btnText.innerText = "Scan Library";
-    }
-}
-
-function viewLocalEntry(id) {
-    if (id) window.location.href = `/book/${id}`;
-}

desktop/src/scripts/local-library.js

@@ -1,209 +0,0 @@
-let activeFilter = 'all';
-let activeSort = 'az';
-let isLocalMode = false;
-let localEntries = [];
-
-function toggleLibraryMode() {
-    isLocalMode = !isLocalMode;
-
-    const btn = document.getElementById('library-mode-btn');
-    const onlineContent = document.getElementById('online-content');
-    const localContent = document.getElementById('local-content');
-    const svg = btn.querySelector('svg');
-    const label = btn.querySelector('span');
-
-    if (isLocalMode) {
-        // LOCAL MODE
-        btn.classList.add('active');
-        onlineContent.classList.add('hidden');
-        localContent.classList.remove('hidden');
-        loadLocalEntries();
-
-        svg.innerHTML = `
-            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
-            <polyline points="9 22 9 12 15 12 15 22"/>
-        `;
-    } else {
-        // ONLINE MODE
-        btn.classList.remove('active');
-        onlineContent.classList.remove('hidden');
-        localContent.classList.add('hidden');
-
-        svg.innerHTML = `
-            <circle cx="12" cy="12" r="10"/>
-            <line x1="2" y1="12" x2="22" y2="12"/>
-            <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
-        `;
-    }
-}
-
-async function loadLocalEntries() {
-    const grid = document.getElementById('local-entries-grid');
-    grid.innerHTML = '<div class="skeleton-card"></div>'.repeat(8);
-
-    try {
-        const response = await fetch('/api/library/anime');
-        const entries = await response.json();
-        localEntries = entries;
-
-        if (entries.length === 0) {
-            grid.innerHTML = '<p style="grid-column: 1/-1; text-align: center; color: var(--color-text-secondary); padding: 3rem;">No anime found in your local library. Click "Scan Library" to scan your folders.</p>';
-
-            return;
-        }
-
-        // Renderizar grid
-        grid.innerHTML = entries.map(entry => {
-            const title = entry.metadata?.title?.romaji || entry.metadata?.title?.english || entry.id;
-            const cover = entry.metadata?.coverImage?.extraLarge || entry.metadata?.coverImage?.large || '/public/assets/placeholder.jpg';
-            const score = entry.metadata?.averageScore || '--';
-            const episodes = entry.metadata?.episodes || '??';
-
-            return `
-                <div class="local-card" onclick="viewLocalEntry(${entry.metadata?.id || 'null'})">
-                    <div class="card-img-wrap">
-                        <img src="${cover}" alt="${title}" loading="lazy">
-                    </div>
-                    <div class="local-card-info">
-                        <div class="local-card-title">${title}</div>
-                        <p style="font-size: 0.85rem; color: var(--color-text-secondary); margin: 0;">
-                            ${score}% • ${episodes} Eps
-                        </p>
-                        <div class="match-status ${entry.matched ? 'status-linked' : 'status-unlinked'}">
-                            ${entry.matched ? '● Linked' : '○ Unlinked'}
-                        </div>
-                    </div>
-                </div>
-            `;
-        }).join('');
-    } catch (err) {
-        console.error('Error loading local entries:', err);
-        grid.innerHTML = '<p style="grid-column: 1/-1; text-align: center; color: var(--color-danger); padding: 3rem;">Error loading local library. Make sure the backend is running.</p>';
-    }
-}
-
-
-async function scanLocalLibrary() {
-    const btnText = document.getElementById('scan-text');
-    const originalText = btnText.innerText;
-    btnText.innerText = "Scanning...";
-
-    try {
-        const response = await fetch('/api/library/scan?mode=incremental', {
-            method: 'POST'
-        });
-
-        if (response.ok) {
-            await loadLocalEntries();
-            // Mostrar notificación de éxito si tienes sistema de notificaciones
-            if (window.NotificationUtils) {
-                NotificationUtils.show('Library scanned successfully!', 'success');
-            }
-        } else {
-            throw new Error('Scan failed');
-        }
-    } catch (err) {
-        console.error("Scan failed", err);
-        alert("Failed to scan library. Check console for details.");
-
-        // Mostrar notificación de error si tienes sistema de notificaciones
-        if (window.NotificationUtils) {
-            NotificationUtils.show('Failed to scan library', 'error');
-        }
-    } finally {
-        btnText.innerText = originalText;
-    }
-}
-
-function viewLocalEntry(anilistId) {
-    if (!anilistId) {
-        console.warn('Anime not linked');
-        return;
-    }
-    window.location.href = `/anime/${anilistId}`;
-}
-
-function renderLocalEntries(entries) {
-    const grid = document.getElementById('local-entries-grid');
-
-    grid.innerHTML = entries.map(entry => {
-        const title = entry.metadata?.title?.romaji
-            || entry.metadata?.title?.english
-            || entry.id;
-
-        const cover =
-            entry.metadata?.coverImage?.extraLarge
-            || entry.metadata?.coverImage?.large
-            || '/public/assets/placeholder.jpg';
-
-        const score = entry.metadata?.averageScore || '--';
-        const episodes = entry.metadata?.episodes || '??';
-
-        return `
-            <div class="local-card" onclick="viewLocalEntry(${entry.metadata?.id || 'null'})">
-                <div class="card-img-wrap">
-                    <img src="${cover}" alt="${title}" loading="lazy">
-                </div>
-                <div class="local-card-info">
-                    <div class="local-card-title">${title}</div>
-                    <p style="font-size: 0.85rem; color: var(--color-text-secondary); margin: 0;">
-                        ${score}% • ${episodes} Eps
-                    </p>
-                    <div class="match-status ${entry.matched ? 'status-linked' : 'status-unlinked'}">
-                        ${entry.matched ? '● Linked' : '○ Unlinked'}
-                    </div>
-                </div>
-            </div>
-        `;
-    }).join('');
-}
-
-function applyLocalFilters() {
-    let filtered = [...localEntries];
-
-    if (activeFilter === 'linked') {
-        filtered = filtered.filter(e => e.matched);
-    }
-
-    if (activeFilter === 'unlinked') {
-        filtered = filtered.filter(e => !e.matched);
-    }
-
-    if (activeSort === 'az') {
-        filtered.sort((a, b) =>
-            (a.metadata?.title?.romaji || a.id)
-                .localeCompare(b.metadata?.title?.romaji || b.id)
-        );
-    }
-
-    if (activeSort === 'za') {
-        filtered.sort((a, b) =>
-            (b.metadata?.title?.romaji || b.id)
-                .localeCompare(a.metadata?.title?.romaji || a.id)
-        );
-    }
-
-    renderLocalEntries(filtered);
-}
-
-document.addEventListener('click', e => {
-    const btn = e.target.closest('.filter-btn');
-    if (!btn) return;
-
-    if (btn.dataset.filter) {
-        activeFilter = btn.dataset.filter;
-    }
-
-    if (btn.dataset.sort) {
-        activeSort = btn.dataset.sort;
-    }
-
-    btn
-        .closest('.local-filters')
-        .querySelectorAll('.filter-btn')
-        .forEach(b => b.classList.remove('active'));
-
-    btn.classList.add('active');
-
-    applyLocalFilters();
-});

desktop/src/scripts/profile.js

@@ -0,0 +1,585 @@
+const API_BASE = '/api';
+
+const DashboardApp = {
+
+    State: {
+        currentList: [],
+        filteredList: [],
+        localLibraryData: [],
+        currentUserId: null,
+        currentLocalType: 'anime',
+        pagination: {
+            itemsPerPage: 50,
+            visibleCount: 50
+        }
+    },
+
+    init: async function() {
+        console.log('Initializing Dashboard...');
+        await this.User.init();
+        await this.Tracking.load();
+
+        this.UI.setupTabSystem();
+        this.initListeners();
+
+        const localInput = document.getElementById('local-search-input');
+        if(localInput) {
+            localInput.addEventListener('input', (e) => this.Library.filterContent(e.target.value));
+        }
+    },
+
+    initListeners: function() {
+
+        document.getElementById('scan-incremental-btn')?.addEventListener('click', () => this.Library.triggerScan('incremental'));
+        document.getElementById('scan-full-btn')?.addEventListener('click', () => this.Library.triggerScan('full'));
+
+        document.getElementById('profile-form')?.addEventListener('submit', (e) => this.User.updateProfile(e));
+        document.getElementById('password-form')?.addEventListener('submit', (e) => this.User.changePassword(e));
+        document.getElementById('logout-btn')?.addEventListener('click', () => window.AuthUtils.logout());
+
+        const fileInput = document.getElementById('avatar-upload');
+        if (fileInput) {
+            fileInput.addEventListener('change', (e) => {
+                const file = e.target.files[0];
+                if (file) {
+                    const reader = new FileReader();
+                    reader.onload = evt => {
+                        document.getElementById('user-avatar').src = evt.target.result;
+                        const urlInput = document.getElementById('setting-avatar-url');
+                        if(urlInput) urlInput.value = '';
+                    };
+                    reader.readAsDataURL(file);
+                }
+            });
+        }
+
+        const trackingInput = document.getElementById('tracking-search-input');
+        if (trackingInput) trackingInput.addEventListener('input', () => this.Tracking.applyFilters());
+
+        ['status-filter', 'type-filter', 'sort-filter'].forEach(id => {
+            document.getElementById(id)?.addEventListener('change', () => this.Tracking.applyFilters());
+        });
+
+        document.querySelectorAll('.view-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));
+                btn.classList.add('active');
+                const view = btn.dataset.view;
+                const container = document.getElementById('list-container');
+                view === 'list' ? container.classList.add('list-view') : container.classList.remove('list-view');
+            });
+        });
+    },
+
+    User: {
+        init: async function() {
+            try {
+                const headers = window.AuthUtils.getSimpleAuthHeaders();
+                const res = await fetch(`${API_BASE}/me`, { headers });
+
+                if (res.ok) {
+                    const data = await res.json();
+                    document.getElementById('user-username').textContent = data.username;
+                    const settingUsername = document.getElementById('setting-username');
+                    if(settingUsername) settingUsername.value = data.username;
+
+                    if (data.avatar) {
+                        document.getElementById('user-avatar').src = data.avatar;
+                    }
+                }
+
+                const token = localStorage.getItem('token');
+                if (token) {
+                    const payload = JSON.parse(atob(token.split('.')[1]));
+                    DashboardApp.State.currentUserId = payload.id;
+                    await this.checkIntegrations(payload.id);
+                }
+            } catch (err) {
+                console.error("Error loading user profile:", err);
+            }
+        },
+
+        checkIntegrations: async function(userId) {
+            if (!userId) return;
+            try {
+                const res = await fetch(`${API_BASE}/users/${userId}/integration`);
+                let data = { connected: false };
+                if (res.ok) data = await res.json();
+
+                this.updateIntegrationUI(data, userId);
+            } catch (e) { console.error("Integration check error:", e); }
+        },
+
+        updateIntegrationUI: function(data, userId) {
+            const statusEl = document.getElementById('anilist-status');
+            const btn = document.getElementById('anilist-action-btn');
+            const headerBadge = document.getElementById('header-anilist-link');
+
+            if (data.connected) {
+                if (headerBadge) {
+                    headerBadge.style.display = 'flex';
+                    headerBadge.href = `https://anilist.co/user/${data.anilistUserId}`;
+                    headerBadge.title = `Connected as ${data.anilistUserId}`;
+                }
+                if (statusEl) {
+                    statusEl.textContent = `Connected as ID: ${data.anilistUserId}`;
+                    statusEl.style.color = 'var(--color-success)';
+                }
+                if (btn) {
+                    btn.textContent = 'Disconnect';
+                    btn.className = 'btn-stream-outline link-danger';
+
+                    btn.onclick = () => this.disconnectAniList(userId);
+                }
+            } else {
+                if (headerBadge) headerBadge.style.display = 'none';
+                if (statusEl) {
+                    statusEl.textContent = 'Not connected';
+                    statusEl.style.color = 'var(--color-text-secondary)';
+                }
+                if (btn) {
+                    btn.textContent = 'Connect';
+                    btn.className = 'btn-stream-outline';
+                    btn.onclick = () => this.redirectToAniListLogin();
+                }
+            }
+        },
+
+        redirectToAniListLogin: async function() {
+            if (!DashboardApp.State.currentUserId) return;
+            try {
+                const clientId = 32898;
+                const redirectUri = encodeURIComponent(window.location.origin + '/api/anilist');
+                const state = encodeURIComponent(DashboardApp.State.currentUserId);
+                window.location.href = `https://anilist.co/api/v2/oauth/authorize?client_id=${clientId}&response_type=code&redirect_uri=${redirectUri}&state=${state}`;
+            } catch (err) { console.error(err); alert('Error starting AniList login'); }
+        },
+
+        disconnectAniList: async function(userId) {
+            if(!confirm("Disconnect AniList?")) return;
+            try {
+                const token = localStorage.getItem('token');
+                await fetch(`${API_BASE}/users/${userId}/integration`, {
+                    method: 'DELETE',
+                    headers: { 'Authorization': `Bearer ${token}` }
+                });
+                this.checkIntegrations(userId);
+            } catch (e) { alert("Failed to disconnect"); }
+        },
+
+        updateProfile: async function(e) {
+            e.preventDefault();
+            const userId = DashboardApp.State.currentUserId;
+            if (!userId) return;
+
+            const username = document.getElementById('setting-username').value;
+            const urlInput = document.getElementById('setting-avatar-url')?.value || '';
+            const fileInput = document.getElementById('avatar-upload');
+            let finalAvatar = null;
+
+            if (fileInput && fileInput.files && fileInput.files[0]) {
+                try {
+                    finalAvatar = await DashboardApp.Utils.fileToBase64(fileInput.files[0]);
+                } catch (err) { alert("Error reading file"); return; }
+            } else if (urlInput.trim() !== "") {
+                finalAvatar = urlInput.trim();
+            }
+
+            const bodyData = { username };
+            if (finalAvatar) bodyData.profilePictureUrl = finalAvatar;
+
+            try {
+                const res = await fetch(`${API_BASE}/users/${userId}`, {
+                    method: 'PUT',
+                    headers: { ...window.AuthUtils.getSimpleAuthHeaders(), 'Content-Type': 'application/json' },
+                    body: JSON.stringify(bodyData)
+                });
+                if (res.ok) alert('Profile updated successfully!');
+                else { const err = await res.json(); alert(err.error || 'Update failed'); }
+            } catch (e) { console.error(e); }
+        },
+
+        changePassword: async function(e) {
+            e.preventDefault();
+            const userId = DashboardApp.State.currentUserId;
+            if (!userId) return;
+            const currentPassword = document.getElementById('current-password').value;
+            const newPassword = document.getElementById('new-password').value;
+
+            try {
+                const res = await fetch(`${API_BASE}/users/${userId}/password`, {
+                    method: 'PUT',
+                    headers: { ...window.AuthUtils.getSimpleAuthHeaders(), 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ currentPassword, newPassword })
+                });
+                const data = await res.json();
+                if (res.ok) { alert("Password updated successfully"); document.getElementById('password-form').reset(); }
+                else alert(data.error || "Failed to update password");
+            } catch (e) { console.error(e); }
+        }
+    },
+
+    Tracking: {
+        load: async function() {
+            const loadingState = document.getElementById('loading-state');
+            const emptyState = document.getElementById('empty-state');
+            const container = document.getElementById('list-container');
+
+            try {
+                loadingState.style.display = 'flex';
+                emptyState.style.display = 'none';
+                container.innerHTML = '';
+
+                const response = await fetch(`${API_BASE}/list`, { headers: window.AuthUtils.getSimpleAuthHeaders() });
+                if (!response.ok) throw new Error('Failed');
+
+                const data = await response.json();
+                DashboardApp.State.currentList = data.results || [];
+
+                this.updateStats();
+
+                loadingState.style.display = 'none';
+                if (DashboardApp.State.currentList.length === 0) emptyState.style.display = 'flex';
+                else this.applyFilters();
+
+            } catch (error) {
+                console.error(error);
+                loadingState.style.display = 'none';
+            }
+        },
+
+        updateStats: function() {
+            const list = DashboardApp.State.currentList;
+            const animeCount = list.filter(item => item.entry_type === 'ANIME').length;
+            const mangaCount = list.filter(item => item.entry_type === 'MANGA').length;
+
+            document.getElementById('total-stat').textContent = list.length;
+            if (document.getElementById('anime-stat')) document.getElementById('anime-stat').textContent = animeCount;
+            if (document.getElementById('manga-stat')) document.getElementById('manga-stat').textContent = mangaCount;
+        },
+
+        applyFilters: function() {
+            const statusFilter = document.getElementById('status-filter').value;
+            const typeFilter = document.getElementById('type-filter').value;
+            const sortFilter = document.getElementById('sort-filter').value;
+            const searchInput = document.getElementById('tracking-search-input');
+            const searchQuery = searchInput ? searchInput.value.toLowerCase().trim() : '';
+
+            let result = [...DashboardApp.State.currentList];
+
+            if (searchQuery) {
+                result = result.filter(item => (item.title ? item.title.toLowerCase() : '').includes(searchQuery));
+            }
+
+            if (statusFilter !== 'all') result = result.filter(item => item.status === statusFilter);
+            if (typeFilter !== 'all') result = result.filter(item => item.entry_type === typeFilter);
+
+            if (sortFilter === 'title') result.sort((a, b) => (a.title || '').localeCompare(b.title || ''));
+            else if (sortFilter === 'score') result.sort((a, b) => (b.score || 0) - (a.score || 0));
+            else result.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at));
+
+            DashboardApp.State.filteredList = result;
+            DashboardApp.State.pagination.visibleCount = DashboardApp.State.pagination.itemsPerPage;
+            this.render();
+        },
+
+        render: function() {
+            const container = document.getElementById('list-container');
+            container.innerHTML = '';
+            const list = DashboardApp.State.filteredList;
+            const count = DashboardApp.State.pagination.visibleCount;
+
+            if (list.length === 0) {
+                container.innerHTML = '<div class="empty-text" style="grid-column: 1/-1; text-align:center; color: var(--color-text-secondary);">No matches found</div>';
+                return;
+            }
+
+            const itemsToShow = list.slice(0, count);
+            itemsToShow.forEach(item => container.appendChild(this.createItemElement(item)));
+
+            if (count < list.length) {
+                this.renderLoadMoreButton(container, list.length - count);
+            }
+        },
+
+        createItemElement: function(item) {
+            const div = document.createElement('div');
+            div.className = 'list-item';
+
+            const itemLink = this.getEntryLink(item);
+            const posterUrl = item.poster || '/public/assets/placeholder.svg';
+            const progress = item.progress || 0;
+            const totalUnits = item.entry_type === 'ANIME' ? item.total_episodes || 0 : item.total_chapters || 0;
+            const progressPercent = totalUnits > 0 ? (progress / totalUnits) * 100 : 0;
+            const score = item.score ? item.score.toFixed(1) : null;
+            const entryType = (item.entry_type).toUpperCase();
+
+            const statusLabels = {
+                'CURRENT': entryType === 'ANIME' ? 'Watching' : 'Reading',
+                'COMPLETED': 'Completed', 'PLANNING': 'Planning', 'PAUSED': 'Paused',
+                'DROPPED': 'Dropped', 'REPEATING': entryType === 'ANIME' ? 'Rewatching' : 'Rereading'
+            };
+
+            const extraInfo = [];
+            if (item.repeat_count > 0) extraInfo.push(`<span class="meta-pill repeat-pill">🔁 ${item.repeat_count}</span>`);
+            if (item.is_private) extraInfo.push('<span class="meta-pill private-pill">🔒 Private</span>');
+
+            div.innerHTML = `
+                <a href="${itemLink}" class="item-poster-link">
+                    <img src="${posterUrl}" alt="${item.title}" class="item-poster" onerror="this.src='/public/assets/placeholder.svg'">
+                </a>
+                <div class="item-content">
+                    <div>
+                        <a href="${itemLink}" style="text-decoration:none; color:inherit;">
+                            <h3 class="item-title">${item.title || 'Unknown'}</h3>
+                        </a>
+                        <div class="item-meta">
+                            <span class="meta-pill status-pill">${statusLabels[item.status] || item.status}</span>
+                            <span class="meta-pill type-pill">${entryType}</span> 
+                            <span class="meta-pill source-pill">${item.source.toUpperCase()}</span>
+                            ${extraInfo.join('')}
+                        </div>
+                    </div>
+                    <div>
+                        <div class="progress-bar-container"><div class="progress-bar" style="width: ${progressPercent}%"></div></div>
+                        <div class="progress-text">
+                            <span>${progress}${totalUnits > 0 ? ` / ${totalUnits}` : ''}</span> 
+                            ${score ? `<span class="score-badge">⭐ ${score}</span>` : ''}
+                        </div>
+                    </div>
+                </div>
+                <button class="edit-icon-btn">
+                    <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15.232 5.232l3.536 3.536m-2.036-5.808a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.536L15.232 5.232z"/></svg>
+                </button>
+            `;
+
+            div.querySelector('.edit-icon-btn').onclick = (e) => {
+                e.preventDefault(); e.stopPropagation();
+                window.ListModalManager.currentData = item;
+                window.ListModalManager.isInList = true;
+                window.ListModalManager.currentEntry = item;
+                window.ListModalManager.open(item, item.source || 'anilist');
+            };
+
+            return div;
+        },
+
+        renderLoadMoreButton: function(container, remaining) {
+            const btnContainer = document.createElement('div');
+            Object.assign(btnContainer.style, { gridColumn: "1 / -1", display: "flex", justifyContent: "center", padding: "2rem 0" });
+
+            const loadMoreBtn = document.createElement('button');
+            loadMoreBtn.className = "btn-blur";
+            loadMoreBtn.textContent = `Show All (${remaining} more)`;
+            loadMoreBtn.onclick = () => {
+                DashboardApp.State.pagination.visibleCount = DashboardApp.State.filteredList.length;
+                this.render();
+            };
+
+            btnContainer.appendChild(loadMoreBtn);
+            container.appendChild(btnContainer);
+        },
+
+        getEntryLink: function(item) {
+            const baseRoute = (item.entry_type?.toUpperCase() === 'ANIME') ? '/anime' : '/book';
+            return `${baseRoute}/${item.entry_id}`;
+        }
+    },
+
+    Library: {
+        loadStats: async function() {
+            const types = ['anime', 'manga', 'novels'];
+            const elements = { 'anime': 'local-anime-count', 'manga': 'local-manga-count', 'novels': 'local-novel-count' };
+
+            for (const type of types) {
+                try {
+                    const res = await fetch(`${API_BASE}/library/${type}`, { headers: window.AuthUtils.getSimpleAuthHeaders() });
+                    if(res.ok) {
+                        const data = await res.json();
+                        const el = document.getElementById(elements[type]);
+                        if (el) el.textContent = `${data.length} items`;
+                    }
+                } catch (e) { console.error(e); }
+            }
+        },
+
+        loadContent: async function(type) {
+            DashboardApp.State.currentLocalType = type;
+            const container = document.getElementById('local-list-container');
+            const loading = document.getElementById('local-loading');
+            const searchInput = document.getElementById('local-search-input');
+
+            container.innerHTML = '';
+            loading.style.display = 'flex';
+            if(searchInput) searchInput.value = '';
+
+            try {
+                const res = await fetch(`${API_BASE}/library/${type}`, { headers: window.AuthUtils.getSimpleAuthHeaders() });
+                if (!res.ok) throw new Error('Failed to load local content');
+
+                const data = await res.json();
+                DashboardApp.State.localLibraryData = data;
+                this.renderGrid(data, type);
+            } catch (err) {
+                console.error(err);
+                container.innerHTML = `<div class="empty-state"><p>Error loading library</p></div>`;
+            } finally {
+                loading.style.display = 'none';
+            }
+        },
+
+        renderGrid: function(entries, type) {
+            const container = document.getElementById('local-list-container');
+            container.innerHTML = '';
+
+            if (entries.length === 0) {
+                container.innerHTML = `
+                    <div class="empty-state" style="grid-column: 1/-1;">
+                        <p>No ${type} files found.</p>
+                        <button onclick="DashboardApp.Library.triggerScan('incremental')" class="btn-blur">Scan Now</button>
+                    </div>`;
+                return;
+            }
+
+            entries.forEach(entry => {
+                const isMatched = entry.matched && entry.metadata;
+                const meta = entry.metadata || {};
+                let poster = meta.coverImage?.large || '/public/assets/placeholder.svg';
+
+                let title = isMatched ? (meta.title?.english || meta.title?.romaji) : entry.folder_name;
+                if (!isMatched) title = title.replace(/\[.*?\]|\(.*?\)|\.mkv|\.mp4/g, '').trim();
+
+                const url = isMatched ? (type === 'anime' ? `/anime/${meta.id}` : `/book/${meta.id}`) : '#';
+
+                const div = document.createElement('div');
+                div.className = 'list-item';
+                div.innerHTML = `
+                    <div class="item-poster-link" onclick="${isMatched ? `window.location='${url}'` : ''}" style="cursor: ${isMatched ? 'pointer' : 'default'}">
+                        <img src="${poster}" class="item-poster" loading="lazy">
+                        ${!isMatched ? `<div class="unmatched-badge"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg> UNMATCHED</div>` : ''}
+                    </div>
+                    <div class="item-content">
+                        <h3 class="item-title" title="${entry.folder_name}">${title}</h3>
+                        <div class="item-meta">
+                             <span class="meta-pill type-pill">${entry.files ? entry.files.length : 0} FILES</span>
+                             ${isMatched ? '<span class="meta-pill status-pill">MATCHED</span>' : ''}
+                        </div>
+                        <div class="folder-path-tooltip">${entry.folder_name}</div>
+                    </div>
+                    <button class="edit-icon-btn" onclick="DashboardApp.Library.openManualMatch('${entry.id}', '${type}')" title="${isMatched ? 'Rematch' : 'Fix Match'}">
+                        <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
+                    </button>
+                `;
+                container.appendChild(div);
+            });
+        },
+
+        filterContent: function(query) {
+            if (!DashboardApp.State.localLibraryData) return;
+            const lowerQuery = query.toLowerCase();
+            const filtered = DashboardApp.State.localLibraryData.filter(entry => {
+                const metaTitle = entry.metadata?.title?.english || entry.metadata?.title?.romaji || '';
+                const folderName = entry.folder_name || '';
+                return metaTitle.toLowerCase().includes(lowerQuery) || folderName.toLowerCase().includes(lowerQuery);
+            });
+            this.renderGrid(filtered, DashboardApp.State.currentLocalType);
+        },
+
+        triggerScan: async function(mode) {
+            const consoleDiv = document.getElementById('scan-console');
+            const statusText = document.getElementById('scan-status-text');
+            if(consoleDiv) consoleDiv.style.display = 'flex';
+            if(statusText) statusText.textContent = `Starting ${mode} scan...`;
+
+            try {
+                const res = await fetch(`${API_BASE}/library/scan?mode=${mode}`, {
+                    method: 'POST', headers: window.AuthUtils.getSimpleAuthHeaders()
+                });
+                if (res.ok) {
+                    if(statusText) statusText.textContent = "Scan completed successfully!";
+                    setTimeout(() => { if(consoleDiv) consoleDiv.style.display = 'none'; this.loadStats(); }, 3000);
+                } else throw new Error('Scan failed');
+            } catch (e) {
+                if(statusText) { statusText.textContent = "Error during scan."; statusText.style.color = 'var(--color-danger)'; }
+            }
+        },
+
+        openManualMatch: function(id, type) {
+            const newId = prompt("Enter AniList ID to force match:");
+            if (newId) {
+                fetch(`${API_BASE}/library/${type}/${id}/match`, {
+                    method: 'POST',
+                    headers: { ...window.AuthUtils.getSimpleAuthHeaders(), 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ source: 'anilist', matched_id: parseInt(newId) })
+                }).then(res => {
+                    if(res.ok) { alert("Matched! Refreshing..."); this.loadContent(type); }
+                    else { alert("Failed to match."); }
+                });
+            }
+        },
+
+        switchType: function(type, btnElement) {
+            document.querySelectorAll('.type-pill-btn').forEach(b => b.classList.remove('active'));
+            if(btnElement) btnElement.classList.add('active');
+            this.loadContent(type);
+        }
+    },
+
+    UI: {
+        setupTabSystem: function() {
+            const tabs = document.querySelectorAll('.nav-pill');
+            const sections = document.querySelectorAll('.tab-section');
+
+            tabs.forEach(tab => {
+                tab.addEventListener('click', () => {
+                    tabs.forEach(t => t.classList.remove('active'));
+                    tab.classList.add('active');
+
+                    const targetId = `section-${tab.dataset.target}`;
+                    sections.forEach(sec => {
+                        sec.classList.remove('active');
+                        if (sec.id === targetId) sec.classList.add('active');
+                    });
+
+                    if (tab.dataset.target === 'local') {
+                        DashboardApp.Library.loadStats();
+                        DashboardApp.Library.loadContent('anime');
+                    }
+                });
+            });
+        }
+    },
+
+    Utils: {
+        fileToBase64: (file) => new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = error => reject(error);
+        })
+    }
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+    DashboardApp.init();
+});
+
+window.switchLocalType = (type, btn) => DashboardApp.Library.switchType(type, btn);
+
+window.saveToList = async () => {
+    const data = window.ListModalManager.currentData;
+    if (!data) return;
+    const idToSave = data.entry_id || data.id;
+    await window.ListModalManager.save(idToSave, data.source || 'anilist');
+    await DashboardApp.Tracking.load();
+};
+
+window.deleteFromList = async () => {
+    const data = window.ListModalManager.currentData;
+    if (!data) return;
+    const idToDelete = data.entry_id || data.id;
+    await window.ListModalManager.delete(idToDelete, data.source || 'anilist');
+    await DashboardApp.Tracking.load();
+};
+
+window.closeAddToListModal = () => window.ListModalManager.close();

desktop/src/scripts/settings.js

@@ -1,5 +1,6 @@
-const API_BASE = '/api/config';
+const API_BASE2 = '/api/config';
 let currentConfig = {};
+let currentSchema = {};
 let activeSection = '';
 let modal, navContainer, formContent, form;
 
@@ -9,96 +10,74 @@ window.toggleSettingsModal = async (forceClose = false) => {
     formContent = document.getElementById('config-section-content');
     form = document.getElementById('config-form');
 
-    if (!modal) {
-        console.error('Modal not found');
-        return;
-    }
+    if (!modal) return;
 
     if (forceClose) {
         modal.classList.add('hidden');
     } else {
         const isHidden = modal.classList.contains('hidden');
-
         if (isHidden) {
-            // Abrir modal
             modal.classList.remove('hidden');
             await loadSettings();
         } else {
-            // Cerrar modal
             modal.classList.add('hidden');
         }
     }
 };
 
 async function loadSettings() {
-    if (!formContent) {
-        console.error('Form content not found');
-        return;
-    }
+    if (!formContent) return;
 
-    // Mostrar loading
+    // Loading State
     formContent.innerHTML = `
         <div class="skeleton-loader">
             <div class="skeleton title-skeleton"></div>
-            <div class="skeleton text-skeleton"></div>
-            <div class="skeleton text-skeleton"></div>
+            <div class="skeleton field-skeleton"></div>
+            <div class="skeleton field-skeleton"></div>
         </div>
     `;
 
     try {
-        const res = await fetch(API_BASE);
-
-        if (!res.ok) {
-            throw new Error(`HTTP error! status: ${res.status}`);
-        }
+        const res = await fetch(API_BASE2);
+        if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
 
         const data = await res.json();
-
         if (data.error) throw new Error(data.error);
 
-        currentConfig = data;
+        // --- CORRECCIÓN AQUI ---
+        // Tu JSON devuelve "values", el código original buscaba "config"
+        currentConfig = data.values || data.config || data;
+        currentSchema = data.schema || {};
+
         renderNav();
 
-        // Seleccionar la primera sección si no hay ninguna activa
         if (!activeSection || !currentConfig[activeSection]) {
             activeSection = Object.keys(currentConfig)[0];
         }
 
         switchSection(activeSection);
+
     } catch (err) {
         console.error('Error loading settings:', err);
         formContent.innerHTML = `
             <div style="padding: 2rem; text-align: center;">
-                <p style="color: var(--color-danger); margin-bottom: 1rem;">Failed to load settings</p>
-                <p style="color: var(--color-text-muted); font-size: 0.9rem;">${err.message}</p>
+                <p style="color: #ef4444; margin-bottom: 1rem;">Failed to load settings</p>
+                <p style="color: #888; font-size: 0.9rem;">${err.message}</p>
             </div>
         `;
     }
 }
 
-function renderNav() {
-    if (!navContainer) return;
-
-    navContainer.innerHTML = '';
-    Object.keys(currentConfig).forEach(section => {
-        const btn = document.createElement('div');
-        btn.className = `nav-item ${section === activeSection ? 'active' : ''}`;
-        btn.textContent = section;
-        btn.onclick = () => switchSection(section);
-        navContainer.appendChild(btn);
-    });
-}
-
 function switchSection(section) {
     if (!currentConfig[section]) return;
-
     activeSection = section;
     renderNav();
 
     const sectionData = currentConfig[section];
+    const sectionSchema = currentSchema[section] || {};
 
     formContent.innerHTML = `
-        <h2 class="section-title" style="margin-bottom: 2rem; text-transform: capitalize;">
+        <h2 class="section-title" style="margin-bottom: 2rem; text-transform: capitalize; font-size: 1.8rem;">
             ${section.replace(/_/g, ' ')}
         </h2>
     `;
@@ -109,21 +88,34 @@ function switchSection(section) {
 
         const isBool = typeof value === 'boolean';
         const inputId = `input-${section}-${key}`;
-        const label = key.replace(/_/g, ' ');
+        const labelText = key.replace(/_/g, ' ');
+
+        // Obtener descripción
+        const description = sectionSchema[key]?.description || '';
+        const descHtml = description
+            ? `<p class="config-description">${description}</p>`
+            : '';
 
         if (isBool) {
             group.innerHTML = `
-                <div style="display: flex; align-items: center; gap: 0.5rem;">
-                    <input type="checkbox" id="${inputId}" name="${key}" ${value ? 'checked' : ''}>
-                    <label for="${inputId}" style="margin: 0; cursor: pointer;">${label}</label>
-                </div>
+                <div style="display: flex; flex-direction: column; gap: 8px;">
+                    <div style="display: flex; align-items: center; gap: 0.8rem;">
+                        <input type="checkbox" id="${inputId}" name="${key}" ${value ? 'checked' : ''} 
+                               style="width: 20px; height: 20px; accent-color: var(--accent);">
+                        <label for="${inputId}" style="margin: 0; cursor: pointer; font-size: 1rem;">${labelText}</label>
+                    </div>
+                    ${descHtml} </div>
             `;
         } else {
+            // --- CAMBIO PRINCIPAL AQUI ---
+            // Movimos ${descHtml} para que esté DESPUÉS del input
             group.innerHTML = `
-                <label for="${inputId}">${label}</label>
+                <label for="${inputId}">${labelText}</label>
                 <input class="config-input" id="${inputId}" name="${key}"
                        type="${typeof value === 'number' ? 'number' : 'text'}"
-                       value="${value}">
+                       value="${value || ''}" 
+                       placeholder="Not set">
+                ${descHtml} 
             `;
         }
 
@@ -131,9 +123,27 @@ function switchSection(section) {
     });
 }
 
-// Setup form submit handler
+function renderNav() {
+    if (!navContainer) return;
+    navContainer.innerHTML = '';
+
+    Object.keys(currentConfig).forEach(section => {
+        const btn = document.createElement('div');
+        btn.className = `nav-item ${section === activeSection ? 'active' : ''}`;
+
+        // Icono opcional según la sección (puedes personalizar esto)
+        let icon = '';
+        if(section === 'library') icon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>';
+        if(section === 'paths') icon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><folder></folder><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>';
+
+        btn.innerHTML = `${icon} ${section}`;
+        btn.onclick = () => switchSection(section);
+        navContainer.appendChild(btn);
+    });
+}
+
+// Handler de guardado
 document.addEventListener('DOMContentLoaded', () => {
-    // Usar delegación de eventos ya que el form se carga dinámicamente
     document.addEventListener('submit', async (e) => {
         if (e.target.id === 'config-form') {
             e.preventDefault();
@@ -146,8 +156,9 @@ async function saveSettings() {
     if (!form || !activeSection) return;
 
     const updatedData = {};
+    const sectionConfig = currentConfig[activeSection];
 
-    Object.keys(currentConfig[activeSection]).forEach(key => {
+    Object.keys(sectionConfig).forEach(key => {
         const input = form.elements[key];
         if (!input) return;
 
@@ -161,58 +172,42 @@ async function saveSettings() {
     });
 
     try {
-        const res = await fetch(`${API_BASE}/${activeSection}`, {
+        const res = await fetch(`${API_BASE2}/${activeSection}`, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify(updatedData)
         });
 
         if (res.ok) {
-            currentConfig[activeSection] = updatedData;
-
-            // Mostrar notificación de éxito
-            const notification = document.createElement('div');
-            notification.style.cssText = `
-                position: fixed;
-                top: 20px;
-                right: 20px;
-                background: var(--color-success, #10b981);
-                color: white;
-                padding: 1rem 1.5rem;
-                border-radius: 8px;
-                box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-                z-index: 10000;
-                animation: slideIn 0.3s ease-out;
-            `;
-            notification.textContent = 'Settings saved successfully!';
-            document.body.appendChild(notification);
-
-            setTimeout(() => {
-                notification.style.animation = 'slideOut 0.3s ease-out';
-                setTimeout(() => notification.remove(), 300);
-            }, 2000);
+            currentConfig[activeSection] = updatedData; // Actualizamos localmente
+            showNotification('Settings saved successfully!');
         } else {
             throw new Error('Failed to save settings');
         }
     } catch (err) {
-        console.error('Error saving settings:', err);
-        alert('Error saving settings: ' + err.message);
+        console.error(err);
+        showNotification('Error saving settings', true);
     }
 }
 
-// Añadir estilos para las animaciones (solo si no existen)
-if (!document.getElementById('settings-animations')) {
-    const animationStyles = document.createElement('style');
-    animationStyles.id = 'settings-animations';
-    animationStyles.textContent = `
-        @keyframes slideIn {
-            from { transform: translateX(400px); opacity: 0; }
-            to { transform: translateX(0); opacity: 1; }
-        }
-        @keyframes slideOut {
-            from { transform: translateX(0); opacity: 1; }
-            to { transform: translateX(400px); opacity: 0; }
-        }
+function showNotification(msg, isError = false) {
+    const notification = document.createElement('div');
+    const bg = isError ? '#ef4444' : '#10b981';
+
+    notification.style.cssText = `
+        position: fixed; top: 20px; right: 20px;
+        background: ${bg}; color: white;
+        padding: 1rem 1.5rem; border-radius: 8px; font-weight: 600;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 20000;
+        animation: slideIn 0.3s ease-out; display: flex; align-items: center; gap: 10px;
     `;
-    document.head.appendChild(animationStyles);
+    notification.innerHTML = isError
+        ? `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg> ${msg}`
+        : `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg> ${msg}`;
+
+    document.body.appendChild(notification);
+    setTimeout(() => {
+        notification.style.animation = 'slideOut 0.3s ease-out';
+        setTimeout(() => notification.remove(), 300);
+    }, 3000);
 }

desktop/src/scripts/users.js

@@ -1038,7 +1038,7 @@ async function performLogin(userId, password = null) {
         const data = await res.json();
         localStorage.setItem('token', data.token);
 
-        window.location.href = '/anime';
+        window.location.href = '/profile';
     } catch (err) {
         console.error('Login error', err);
         showUserToast(err.message || 'Login failed', 'error');

desktop/src/scripts/utils/continue-watching-manager.js

@@ -52,10 +52,9 @@ const ContinueWatchingManager = {
 
         if (entryType === 'ANIME') {
             url = item.source === 'anilist'
-                ? `/watch/${item.entry_id}/${nextProgress}`
-                : `/watch/${item.entry_id}/${nextProgress}?${item.source}`;
+                ? `/anime/${item.entry_id}?episode=${nextProgress}`
+                : `/anime/${item.entry_id}/${item.source}/?episode=${nextProgress}`;
         } else {
-
             url = item.source === 'anilist'
                 ? `/book/${item.entry_id}?chapter=${nextProgress}`
                 : `/read/${item.source}/${nextProgress}/${item.entry_id}?source=${item.source}`;

desktop/src/shared/config.js

@@ -11,6 +11,22 @@ const DEFAULT_CONFIG = {
         anime: null,
         manga: null,
         novels: null
+    },
+    paths: {
+        mpv: null,
+        ffmpeg: null
+    }
+};
+
+export const CONFIG_SCHEMA = {
+    library: {
+        anime: { description: "Path where anime is stored" },
+        manga: { description: "Path where manga is stored" },
+        novels: { description: "Path where novels are stored" }
+    },
+    paths: {
+        mpv: { description: "Required to open anime episodes in mpv on desktop version." },
+        ffmpeg: { description: "Required for downloading anime episodes." }
     }
 };
 
@@ -31,21 +47,39 @@ function ensureConfigFile() {
 export function getConfig() {
     ensureConfigFile();
     const raw = fs.readFileSync(CONFIG_PATH, 'utf8');
-    return yaml.load(raw) || DEFAULT_CONFIG;
+    const loaded = yaml.load(raw) || {};
+
+    return {
+        values: deepMerge(structuredClone(DEFAULT_CONFIG), loaded),
+        schema: CONFIG_SCHEMA
+    };
+}
+
+function sanitizeLoadedConfig(loaded) {
+    return {
+        library: loaded.library,
+        paths: loaded.paths
+    };
 }
 
 export function setConfig(partialConfig) {
     ensureConfigFile();
 
-    const current = getConfig();
-    const next = deepMerge(current, partialConfig);
+    const raw = fs.readFileSync(CONFIG_PATH, 'utf8');
+    const loadedRaw = yaml.load(raw) || {};
+    const loaded = sanitizeLoadedConfig(loadedRaw);
 
-    fs.writeFileSync(
-        CONFIG_PATH,
-        yaml.dump(next),
-        'utf8'
+    const next = deepMerge(
+        structuredClone(DEFAULT_CONFIG),
+        deepMerge(loaded, partialConfig)
     );
 
+    const toSave = {
+        library: next.library,
+        paths: next.paths
+    };
+
+    fs.writeFileSync(CONFIG_PATH, yaml.dump(toSave), 'utf8');
     return next;
 }
 

desktop/src/shared/extensions.js

@@ -194,6 +194,26 @@ function getBookExtensionsMap() {
     return bookExts;
 }
 
+function getMangaExtensionsMap() {
+    const mangaExts = new Map();
+    for (const [name, ext] of extensions) {
+        if (ext.type === 'book-board' && ext.mediaType !== 'ln') {
+            mangaExts.set(name, ext);
+        }
+    }
+    return mangaExts;
+}
+
+function getNovelExtensionsMap() {
+    const novelExts = new Map();
+    for (const [name, ext] of extensions) {
+        if (ext.type === 'book-board' && ext.mediaType === 'ln') {
+            novelExts.set(name, ext);
+        }
+    }
+    return novelExts;
+}
+
 function getGalleryExtensionsMap() {
     const galleryExts = new Map();
     for (const [name, ext] of extensions) {
@@ -213,5 +233,7 @@ module.exports = {
     getBookExtensionsMap,
     getGalleryExtensionsMap,
     saveExtensionFile,
-    deleteExtensionFile
+    deleteExtensionFile,
+    getMangaExtensionsMap,
+    getNovelExtensionsMap
 };

desktop/src/views/views.routes.ts

@@ -12,7 +12,7 @@ function getNavbarHTML(activePage: string, showSearch: boolean = true): string {
 
     let navbar = cachedNavbar;
 
-    const pages = ['anime', 'books', 'gallery', 'schedule', 'my-list', 'marketplace'];
+    const pages = ['anime', 'books', 'gallery', 'schedule' , 'marketplace'];
     pages.forEach(page => {
         const regex = new RegExp(`(<button class="nav-button[^"]*)"\\s+data-page="${page}"`, 'g');
         if (page === activePage) {
@@ -51,10 +51,10 @@ async function viewsRoutes(fastify: FastifyInstance) {
         reply.type('text/html').send(htmlWithNavbar);
     });
 
-    fastify.get('/my-list', (req: FastifyRequest, reply: FastifyReply) => {
-        const htmlPath = path.join(__dirname, '..', '..', 'views', 'list.html');
+    fastify.get('/profile', (req: FastifyRequest, reply: FastifyReply) => {
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'profile.html');
         const html = fs.readFileSync(htmlPath, 'utf-8');
-        const htmlWithNavbar = injectNavbar(html, 'my-list', false);
+        const htmlWithNavbar = injectNavbar(html, '', false);
         reply.type('text/html').send(htmlWithNavbar);
     });
 
@@ -112,12 +112,6 @@ async function viewsRoutes(fastify: FastifyInstance) {
         reply.type('text/html').send(html);
     });
 
-    fastify.get('/watch/:id/:episode', (req: FastifyRequest, reply: FastifyReply) => {
-        const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'watch.html');
-        const html = fs.readFileSync(htmlPath, 'utf-8');
-        reply.type('text/html').send(html);
-    });
-
     fastify.get('/book/:id', (req: FastifyRequest, reply: FastifyReply) => {
         const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'book.html');
         const html = fs.readFileSync(htmlPath, 'utf-8');

desktop/views/anime/anime.html

@@ -1,17 +1,21 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon" />
     <title>WaifuBoard</title>
-    <link rel="stylesheet" href="/views/css/globals.css">
-    <link rel="stylesheet" href="/views/css/components/anilist-modal.css">
-    <link rel="stylesheet" href="/views/css/components/hero.css">
-    <link rel="stylesheet" href="/views/css/anime/anime.css">
-    <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
-    <script src="/src/scripts/titlebar.js"></script>
+
+    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
+    <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
+    <script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
+
+    <link rel="stylesheet" href="/views/css/globals.css" />
+    <link rel="stylesheet" href="/views/css/components/anilist-modal.css" />
+    <link rel="stylesheet" href="/views/css/anime/anime.css" />
+    <link rel="stylesheet" href="/views/css/anime/player.css" />
     <link rel="stylesheet" href="/views/css/components/titlebar.css">
+    <script src="/src/scripts/titlebar.js"></script>
 </head>
 <body>
 <div id="titlebar">
@@ -20,137 +24,199 @@
         <span class="app-title">WaifuBoard</span>
     </div>
     <div class="title-right">
-        <button class="min">—</button>
+        <button class="min">−</button>
         <button class="max">🗖</button>
         <button class="close">✕</button>
     </div>
 </div>
+<a href="/anime" class="back-btn">
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/>
+    </svg>
+    Back
+</a>
 
 <div class="modal-overlay" id="desc-modal">
     <div class="modal-content">
-        <button class="modal-close" onclick="closeModal()">✕</button>
+        <button class="modal-close" onclick="closeDescriptionModal()">✕</button>
         <h2 class="modal-title">Synopsis</h2>
         <div class="modal-text" id="full-description"></div>
     </div>
 </div>
 
-<a href="/anime" class="back-btn">
-    <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
-    Back to Home
-</a>
+<div class="top-media-wrapper" id="top-media-wrapper">
 
-<div class="hero-wrapper">
-    <div class="video-background">
-        <div id="player"></div>
+    <div class="hero-wrapper" id="hero-wrapper">
+        <div class="video-background"><div id="trailer-player"></div></div>
+        <div class="hero-overlay"></div>
     </div>
-    <div class="hero-overlay"></div>
-</div>
 
-<div class="content-container">
-    <aside class="sidebar">
-        <div class="poster-card">
-            <img id="poster" src="" alt="">
-        </div>
-
-        <div class="info-grid">
-            <div class="info-item">
-                <h4>Format</h4>
-                <span id="format">--</span>
-            </div>
-            <div class="info-item">
-                <h4>Episodes</h4>
-                <span id="episodes">--</span>
-            </div>
-            <div class="info-item">
-                <h4>Status</h4>
-                <span id="status">--</span>
-            </div>
-            <div class="info-item">
-                <h4>Season</h4>
-                <span id="season">--</span>
-            </div>
-            <div class="info-item">
-                <h4>Studio</h4>
-                <span id="studio">--</span>
-            </div>
-        </div>
-
-        <div class="info-grid">
-            <div class="info-item">
-                <h4>Main Characters</h4>
-                <div class="character-list" id="char-list"></div>
-            </div>
-        </div>
-    </aside>
-
-    <main class="main-content">
-        <div class="anime-header">
-            <h1 class="anime-title" id="title">Loading...</h1>
-
-            <div class="meta-row">
-                <div class="pill extension-pill" id="extension-pill" style="display: none; background: #8b5cf6;"></div>
-                <div class="pill" id="local-pill" style="display: none; background: #8b5cf6;"></div>
-                <div class="pill score" id="score">--% Score</div>
-                <div class="pill" id="year">----</div>
-                <div class="pill" id="genres">Action</div>
-            </div>
-
-            <div class="action-row">
-                <button class="btn-watch" id="watch-btn">
-                    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
-                    Start Watching
-                </button>
-                <button class="btn-secondary" id="add-to-list-btn" onclick="openAddToListModal()">+ Add to List</button>
-            </div>
-        </div>
-
-        <div class="description-box">
-            <div id="description-preview"></div>
-            <button id="read-more-btn" class="read-more-btn" style="display: none;" onclick="openModal()">
-                Read More
-                <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M19 9l-7 7-7-7"/></svg>
+    <div class="player-wrapper" id="player-wrapper" style="display: none;">
+        <div class="player-container">
+            <button id="prev-ep-btn" class="side-nav-btn left" title="Previous Episode">
+                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
             </button>
-        </div>
 
-        <div class="episodes-section">
-            <div class="episodes-header-row">
-                <div class="section-title" style="margin:0; border:none; padding:0;">
-                    <h2 style="font-size: 1.8rem; border-left: 4px solid #8b5cf6; padding-left: 1rem;">Episodes</h2>
+            <button id="next-ep-btn" class="side-nav-btn right" title="Next Episode">
+                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
+            </button>
+
+            <div class="player-header">
+                <div class="header-left">
+                    <button class="btn-icon-glass" id="close-player-btn" title="Close Player">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/></svg>
+                    </button>
+                    <div class="episode-info">
+                        <span class="ep-label">Watching</span>
+                        <span id="player-episode-title" class="ep-title">Episode 1</span>
+                    </div>
                 </div>
-                <div class="episode-search-wrapper">
-                    <input type="number" id="ep-search" class="episode-search-input" placeholder="Jump to Ep #" min="1">
+
+                <div class="header-right">
+                    <button class="btn-icon-glass" id="download-btn" title="Download Episode" style="display: none;">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                            <polyline points="7 10 12 15 17 10"></polyline>
+                            <line x1="12" y1="15" x2="12" y2="3"></line>
+                        </svg>
+                    </button>
+                    <div class="settings-group">
+                        <button id="mpv-btn" class="glass-btn-mpv" title="Open in MPV">
+                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                                <path d="M5 3l14 9-14 9V3z"></path>
+                            </svg>
+                            <span>MPV</span>
+                        </button>
+                        <div class="sd-toggle" id="sd-toggle" data-state="sub">
+                            <div class="sd-bg"></div>
+                            <div class="sd-option active" id="opt-sub">Sub</div>
+                            <div class="sd-option" id="opt-dub">Dub</div>
+                        </div>
+
+                        <select id="server-select" class="glass-select" style="display:none;"></select>
+                        <select id="extension-select" class="glass-select"></select>
+                    </div>
                 </div>
             </div>
 
-            <div class="episodes-grid" id="episodes-grid"></div>
-
-            <div class="pagination-controls" id="pagination-controls">
-                <button class="page-btn" id="prev-page" onclick="changePage(-1)">Previous</button>
-                <span class="page-info" id="page-info">Page 1 of 1</span>
-                <button class="page-btn" id="next-page" onclick="changePage(1)">Next</button>
+            <div class="video-frame">
+                <video id="player" controls crossorigin playsinline></video>
+                <div id="player-loading" class="player-loading-overlay">
+                    <div class="spinner"></div>
+                    <p id="player-loading-text">Loading Stream...</p>
+                </div>
             </div>
         </div>
-    </main>
+    </div>
+    <div class="modal-overlay" id="download-modal">
+        <div class="modal-content download-settings-content">
+            <button class="modal-close" id="close-download-modal">✕</button>
+            <h2 class="modal-title">Download Settings</h2>
+
+            <div class="download-sections-wrapper">
+                <div id="dl-quality-section" class="dl-section" style="display:none;">
+                    <h3>Video Quality</h3>
+                    <div class="dl-list" id="dl-quality-list"></div>
+                </div>
+
+                <div id="dl-audio-section" class="dl-section" style="display:none;">
+                    <h3>Audio Tracks</h3>
+                    <div class="dl-list" id="dl-audio-list"></div>
+                </div>
+
+                <div id="dl-subs-section" class="dl-section">
+                    <h3>Subtitles</h3>
+                    <div class="dl-list" id="dl-subs-list"></div>
+                </div>
+            </div>
+
+            <div class="dl-actions">
+                <button class="btn-cancel" id="cancel-dl-btn">Cancel</button>
+                <button class="btn-confirm" id="confirm-dl-btn">Start Download</button>
+            </div>
+        </div>
+    </div>
 </div>
 
-<div id="updateToast" class="hidden">
-    <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
-    <a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">
-        Click To Download
-    </a>
-</div>
+<div class="content-container" id="main-content">
+    <div class="anime-header">
+        <h1 class="anime-title" id="title">Loading...</h1>
+        <div class="hero-meta-info">
+            <span id="local-pill" class="pill-local" style="display:none;">Local</span>
+            <span id="extension-pill" class="pill-local" style="background:#8b5cf6; display:none;">Ext</span>
+            <span id="score">--% Score</span> • <span id="year">----</span> • <span id="format">--</span> • <span id="episodes">-- Ep</span>
+        </div>
+        <div class="hero-description-mini" id="description-preview"></div>
+        <div class="hero-tags" id="genres"></div>
 
-<script src="/src/scripts/updateNotifier.js"></script>
-<script src="/src/scripts/rpc-inapp.js"></script>
-<script src="/src/scripts/auth-guard.js"></script>
+        <div class="action-row">
+            <button class="btn-watch" id="watch-btn">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="black"><path d="M8 5v14l11-7z"/></svg>
+                Start Watching
+            </button>
+            <button class="btn-add-list" id="add-to-list-btn">+ Add to List</button>
+        </div>
+    </div>
+
+    <div class="main-layout">
+        <aside class="poster-section">
+            <div class="poster-card"><img id="poster" src="" alt="Poster"></div>
+            <div class="metadata-sidebar">
+                <div class="meta-item-side"><span>Status</span><p id="status">--</p></div>
+                <div class="meta-item-side"><span>Season</span><p id="season">--</p></div>
+                <div class="meta-item-side"><span>Studio</span><p id="studio">--</p></div>
+            </div>
+        </aside>
+
+        <div class="content-column">
+
+            <section class="episodes-section">
+                <div class="episodes-header-row">
+                    <h2>Episodes</h2>
+                    <input type="number" id="ep-search" class="episode-search-input" placeholder="Jump to...">
+                </div>
+                <div id="episodes-grid" class="episodes-grid"></div>
+
+                <div class="pagination-controls" id="pagination-controls">
+                    <button class="page-btn" id="prev-page">Previous</button>
+                    <span class="page-info" id="page-info">Page 1 of 1</span>
+                    <button class="page-btn" id="next-page">Next</button>
+                </div>
+            </section>
+
+            <div id="relations-section" style="display:none; margin-top: 3rem;">
+                <h3 class="subsection-title">Relations</h3>
+                <div class="relations-horizontal" id="relations-grid"></div>
+            </div>
+
+        </div>
+    </div>
+
+    <section class="content-section">
+        <h2 class="subsection-title">Characters</h2>
+        <div class="characters-grid" id="char-list"></div>
+        <button id="show-more-chars" class="btn-show-more" style="display: none;">Show Full Cast</button>
+    </section>
+
+    <section class="content-section">
+        <h2 class="subsection-title">Recommended</h2>
+        <div class="carousel-wrapper">
+            <button class="scroll-btn left" onclick="scrollRecommendations(-1)">‹</button>
+            <div class="carousel" id="recommendations-grid"></div>
+            <button class="scroll-btn right" onclick="scrollRecommendations(1)">›</button>
+        </div>
+    </section>
+</div>
 
 <script src="/src/scripts/utils/auth-utils.js"></script>
-<script src="/src/scripts/utils/notification-utils.js"></script>
 <script src="/src/scripts/utils/url-utils.js"></script>
 <script src="/src/scripts/utils/pagination-manager.js"></script>
 <script src="/src/scripts/utils/media-metadata-utils.js"></script>
 <script src="/src/scripts/utils/youtube-player-utils.js"></script>
 <script src="/src/scripts/utils/list-modal-manager.js"></script>
-<script src="/src/scripts/anime/anime.js"></script>
+
+<script src="/src/scripts/anime/player.js"></script>
+<script src="/src/scripts/anime/entry.js"></script>
+
 </body>
 </html>

desktop/views/anime/animes.html

@@ -117,46 +117,6 @@
     </section>
 </main>
 
-<!-- Local Library Mode Content -->
-<main id="local-content" class="hidden">
-    <section class="section">
-        <div class="section-header">
-            <div class="section-title">Local Anime Library</div>
-            <button class="btn-secondary" onclick="scanLocalLibrary()">
-                <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                    <path d="M21 12a9 9 0 1 1-9-9"/>
-                    <path d="M21 3v6h-6"/>
-                </svg>
-                <span id="scan-text">Scan Library</span>
-            </button>
-        </div>
-        <div class="local-filters">
-            <div class="filter-group">
-                <button class="filter-btn active" data-filter="all">All</button>
-                <button class="filter-btn" data-filter="watching">Watching</button>
-                <button class="filter-btn" data-filter="completed">Completed</button>
-                <button class="filter-btn" data-filter="unwatched">Unwatched</button>
-                <button class="filter-btn" data-filter="unlinked">Unlinked</button>
-            </div>
-
-            <div class="filter-group">
-                <button class="filter-btn" data-sort="az">A–Z</button>
-                <button class="filter-btn" data-sort="recent">Recent</button>
-            </div>
-        </div>
-        <div class="local-library-grid" id="local-entries-grid">
-            <div class="skeleton-card"></div>
-            <div class="skeleton-card"></div>
-            <div class="skeleton-card"></div>
-            <div class="skeleton-card"></div>
-            <div class="skeleton-card"></div>
-            <div class="skeleton-card"></div>
-            <div class="skeleton-card"></div>
-            <div class="skeleton-card"></div>
-        </div>
-    </section>
-</main>
-
 <div id="updateToast" class="hidden">
     <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
     <a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">
@@ -170,7 +130,6 @@
 <script src="/src/scripts/utils/continue-watching-manager.js"></script>
 <script src="/src/scripts/utils/youtube-player-utils.js"></script>
 <script src="/src/scripts/anime/animes.js"></script>
-<script src="/src/scripts/local-library.js"></script>
 <script src="/src/scripts/updateNotifier.js"></script>
 <script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>

desktop/views/anime/watch.html

@@ -1,197 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>WaifuBoard Watch</title>
-    <link rel="stylesheet" href="/views/css/globals.css">
-    <link rel="stylesheet" href="/views/css/anime/watch.css">
-    <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
-    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
-    <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
-    <script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
-    <link rel="icon" href="/public/assets/waifuboards.ico">
-    <link rel="stylesheet" href="/views/css/components/titlebar.css">
-    <script src="/src/scripts/titlebar.js"></script>
-</head>
-<body>
-<div id="titlebar"> <div class="title-left">
-    <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
-    <span class="app-title">WaifuBoard</span>
-</div>
-    <div class="title-right">
-        <button class="min">—</button>
-        <button class="max">🗖</button>
-        <button class="close">✕</button>
-    </div>
-</div>
-
-
-<header class="top-bar">
-    <a href="#" id="back-link" class="back-btn">
-        <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
-            <path d="M15 19l-7-7 7-7"/>
-        </svg>
-        <span>Back to Series</span>
-    </a>
-</header>
-
-<div class="ui-scale-wrapper">
-    <main class="watch-container">
-
-        <section class="anime-details">
-            <div class="details-container">
-                <div class="details-cover">
-                    <img id="detail-cover-image" src="" alt="Anime Cover" class="cover-image">
-                </div>
-                <div class="details-content">
-                    <h1 id="anime-title-details">Loading...</h1>
-                    <div class="details-meta">
-                        <span id="detail-format" class="meta-badge">--</span>
-                        <span id="detail-season" class="meta-badge">--</span>
-                        <span id="detail-score" class="meta-badge meta-score">--</span>
-                    </div>
-                    <br>
-                    <p id="detail-description" class="details-description">Loading description...</p>
-                </div>
-            </div>
-        </section>
-
-        <section class="player-section">
-
-            <div class="player-toolbar">
-                <div class="control-group">
-                    <div class="sd-toggle" id="sd-toggle" data-state="sub" onclick="toggleAudioMode()">
-                        <div class="sd-bg"></div>
-                        <div class="sd-option active" id="opt-sub">Sub</div>
-                        <div class="sd-option" id="opt-dub">Dub</div>
-                    </div>
-                </div>
-                <div class="control-group">
-                    <select id="server-select" class="source-select" onchange="loadStream()" style="display:none;">
-                        <option value="">Server...</option>
-                    </select>
-                    <select id="extension-select" class="source-select" onchange="onExtensionChange()">
-                        <option value="" disabled selected>Source...</option>
-                    </select>
-                </div>
-            </div>
-
-            <div class="video-container">
-                <video id="player" controls crossorigin playsinline></video>
-                <div id="loading-overlay" class="loading-overlay">
-                    <div class="spinner"></div>
-                    <p id="loading-text">Select a source...</p>
-                </div>
-            </div>
-
-            <div class="episode-controls">
-                <div class="episode-info">
-                    <h1 id="anime-title-details2">Loading...</h1>
-                    <p id="episode-label">Episode --</p>
-                </div>
-                <div class="navigation-buttons">
-                    <button class="nav-btn prev-btn" id="prev-btn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"/></svg><span>Previous</span></button>
-                    <button class="nav-btn next-btn" id="next-btn"><span>Next</span><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 5l7 7-7 7"/></svg></button>
-                </div>
-            </div>
-
-            <div class="episode-carousel-compact">
-                <div class="carousel-header">
-                    <h2>Episodes</h2>
-                    <div class="carousel-nav">
-                        <button class="carousel-arrow-mini" id="ep-prev-mini"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M15 18l-6-6 6-6"/></svg></button>
-                        <button class="carousel-arrow-mini" id="ep-next-mini"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M9 6l6 6-6 6"/></svg></button>
-                    </div>
-                </div>
-                <div id="episode-carousel" class="episode-carousel-compact-list">
-                </div>
-            </div>
-        </section>
-    </main>
-</div>
-
-<script src="../../src/scripts/anime/player.js"></script>
-
-<script>
-    document.addEventListener('DOMContentLoaded', () => {
-        const carousel = document.getElementById('episode-carousel');
-        if (!carousel) return;
-
-        const prevBtn = document.getElementById('ep-prev-mini');
-        const nextBtn = document.getElementById('ep-next-mini');
-
-        const scrollAmount = 150;
-
-        prevBtn?.addEventListener('click', () => {
-            carousel.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
-        });
-
-        nextBtn?.addEventListener('click', () => {
-            carousel.scrollBy({ left: scrollAmount, behavior: 'smooth' });
-        });
-
-        const updateArrows = () => {
-            if (!prevBtn || !nextBtn) return;
-
-            prevBtn.style.opacity = carousel.scrollLeft <= 10 ? '0.3' : '1';
-            prevBtn.style.pointerEvents = carousel.scrollLeft <= 10 ? 'none' : 'auto';
-
-            const atEnd = carousel.scrollLeft + carousel.clientWidth >= carousel.scrollWidth - 10;
-            nextBtn.style.opacity = atEnd ? '0.3' : '1';
-            nextBtn.style.pointerEvents = atEnd ? 'none' : 'auto';
-        };
-
-        carousel.addEventListener('scroll', updateArrows);
-        window.addEventListener('resize', updateArrows);
-
-        const observer = new MutationObserver((mutations, obs) => {
-            updateArrows();
-            obs.disconnect();
-
-        });
-        observer.observe(carousel, { childList: true });
-
-    });
-
-    document.addEventListener('DOMContentLoaded', () => {
-        const expandBtn = document.getElementById('expand-characters-btn');
-        const characterList = document.getElementById('characters-list');
-        const btnText = expandBtn?.querySelector('span');
-
-        if (!expandBtn || !characterList) return;
-
-        expandBtn.addEventListener('click', () => {
-            const isExpanded = expandBtn.getAttribute('data-expanded') === 'true';
-
-            if (isExpanded) {
-
-                characterList.classList.remove('expanded');
-                expandBtn.setAttribute('data-expanded', 'false');
-                if (btnText) btnText.innerText = 'Show All';
-            } else {
-
-                characterList.classList.add('expanded');
-                expandBtn.setAttribute('data-expanded', 'true');
-                if (btnText) btnText.innerText = 'Show Less';
-            }
-        });
-    });
-</script>
-
-<div id="updateToast" class="hidden">
-    <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
-
-    <a
-            id="downloadButton"
-            href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
-            target="_blank"
-    >
-        Click To Download
-    </a>
-</div>
-
-<script src="/src/scripts/updateNotifier.js"></script>
-<script src="/src/scripts/auth-guard.js"></script>
-</body>
-</html>

desktop/views/books/book.html

@@ -24,13 +24,13 @@
         <button class="close">✕</button>
     </div>
 </div>
-
 <a href="/books" class="back-btn">
-    <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
-    Back to Books
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/>
+    </svg>
+    Back
 </a>
 
-
 <div class="hero-wrapper">
     <div class="hero-background">
         <img id="hero-bg" src="" alt="">
@@ -40,107 +40,110 @@
 
 <div class="content-container">
 
+    <div class="book-header-section">
+        <h1 class="book-title" id="title">Loading...</h1>
 
-    <aside class="sidebar">
-        <div class="poster-card">
-            <img id="poster" src="" alt="">
+        <div class="hero-meta-info">
+            <span id="local-pill" class="pill-local" style="display:none;">Local</span>
+            <span id="extension-pill" class="pill-local" style="background:#8b5cf6; display:none;">Ext</span>
+
+            <span id="score">--% Score</span>
+            <span class="meta-separator">•</span>
+            <span id="published-date">----</span>
+            <span class="meta-separator">•</span>
+            <span id="status">--</span>
+            <span class="meta-separator">•</span>
+            <span id="format">--</span>
+            <span class="meta-separator">•</span>
+            <span id="chapters-count">-- Ch</span>
         </div>
 
-        <div class="info-grid">
-            <div class="info-item">
-                <h4>Format</h4>
-                <span id="format">--</span>
-            </div>
-            <div class="info-item">
-                <h4>Chapters</h4>
-                <span id="chapters">--</span>
-            </div>
-            <div class="info-item">
-                <h4>Status</h4>
-                <span id="status">--</span>
-            </div>
-            <div class="info-item">
-                <h4>Published</h4>
+        <div class="hero-description-mini" id="description"></div>
+        <div class="hero-tags" id="genres"></div>
 
-                <span id="published-date">--</span>
-            </div>
+        <div class="action-row">
+            <button class="btn-read" id="read-start-btn">
+                <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M2 9v12h5v-9h8v9h5v-12h2l-10 -9 -10 9z" transform="scale(0.8) translate(3,3)"/></svg>
+                Start Reading
+            </button>
+            <button class="btn-add-list" id="add-to-list-btn">+ Add to Library</button>
         </div>
-    </aside>
+    </div>
 
+    <div class="main-layout">
 
-    <main class="main-content">
-        <div class="book-header">
-            <h1 class="book-title" id="title">Loading...</h1>
-
-            <div class="meta-row">
-                <div class="pill extension-pill" id="extension-pill" style="display: none; background: #8b5cf6;"></div>
-                <div class="pill" id="local-pill" style="display: none; background: #8b5cf6;"></div>
-                <div class="pill score" id="score">--% Score</div>
-                <div class="pill" id="genres">Action</div>
+        <aside class="poster-section">
+            <div class="poster-card">
+                <img id="poster" src="" alt="">
             </div>
 
-            <div class="action-row">
-                <button class="btn-primary" id="read-start-btn">
-                    Start Reading
-                </button>
-                <button class="btn-secondary" id="add-to-list-btn" onclick="openAddToListModal()">+ Add to Library</button>
+            <div class="sidebar-extra-info" id="sidebar-info" style="display: none;">
+                <h4 class="sidebar-label">Alternative Titles</h4>
+                <ul class="synonyms-list" id="synonyms-list">
+                </ul>
             </div>
-        </div>
+        </aside>
 
-        <div class="chapters-section">
-            <div class="section-title">
-                <h2>Chapters</h2>
-                <div class="chapter-controls">
+        <div class="content-column">
 
-                    <select id="provider-filter" class="filter-select" style="display: none; margin-left: 15px;">
-                        <option value="all">All Providers</option>
-                    </select>
+            <div class="chapters-section">
+                <div class="chapters-header">
+                    <h2>Chapters</h2>
+
+                    <div class="chapter-controls">
+                        <select id="provider-filter" class="glass-select" style="display: none;">
+                            <option value="all">All Providers</option>
+                        </select>
+
+                        <div id="language-selector-container" class="control-group hidden">
+                            <select id="language-select" class="glass-select"></select>
+                        </div>
+
+                        <div class="search-box">
+                            <input type="text" id="chapter-search" placeholder="Search..." class="glass-input">
+                        </div>
+
+                        <button id="sort-btn" class="glass-btn-icon" title="Sort">
+                            <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12" />
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+
+                <div id="chapters-list" class="chapters-grid"></div>
+                <div id="loading-msg" style="text-align: center; padding: 2rem; display: none; color: #888;">Loading...</div>
+
+                <div class="pagination-controls" id="pagination" style="display:none;">
+                    <button class="page-btn" id="prev-page">Previous</button>
+                    <span class="page-info" id="page-info">Page 1</span>
+                    <button class="page-btn" id="next-page">Next</button>
                 </div>
             </div>
 
-            <div class="chapters-table-wrapper">
-                <table class="chapters-table">
-                    <thead>
-                    <tr>
-                        <th>#</th>
-                        <th>Title</th>
-
-                        <th>Provider</th>
-                        <th>Action</th>
-                    </tr>
-                    </thead>
-                    <tbody id="chapters-body">
-
-                    </tbody>
-                </table>
-            </div>
 
 
-            <div class="pagination-controls" id="pagination" style="display:none;">
-                <button class="page-btn" id="prev-page">Previous</button>
-                <span class="page-info" id="page-info">Page 1</span>
-                <button class="page-btn" id="next-page">Next</button>
-            </div>
         </div>
-    </main>
+    </div>
+
+    <div id="relations-section" style="display:none; margin-top: 3rem;">
+        <h3 class="subsection-title">Relations</h3>
+        <div class="relations-horizontal" id="relations-list"></div>
+    </div>
+
+    <section class="content-section">
+        <h2 class="subsection-title">Characters</h2>
+        <div class="characters-grid" id="characters-list"></div>
+    </section>
 
 </div>
 
 <div id="updateToast" class="hidden">
     <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
-
-    <a
-            id="downloadButton"
-            href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
-            target="_blank"
-    >
-        Click To Download
-    </a>
+    <a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">Click To Download</a>
 </div>
 
 <script src="/src/scripts/updateNotifier.js"></script>
-<script src="/src/scripts/rpc-inapp.js"></script>
-
 <script src="/src/scripts/utils/auth-utils.js"></script>
 <script src="/src/scripts/utils/notification-utils.js"></script>
 <script src="/src/scripts/utils/url-utils.js"></script>

desktop/views/books/books.html

@@ -57,32 +57,6 @@
         </svg>
     </button>
 </div>
-<main id="local-content" class="hidden">
-    <section class="section">
-        <div class="section-header">
-            <div class="section-title">Local Books Library</div>
-            <button class="btn-secondary" onclick="scanLocalLibrary()">
-                <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                    <path d="M21 12a9 9 0 1 1-9-9"/><path d="M21 3v6h-6"/>
-                </svg>
-                <span id="scan-text">Scan Library</span>
-            </button>
-        </div>
-        <div class="local-filters">
-            <div class="filter-group">
-                <button class="filter-btn active" data-filter="all">All</button>
-                <button class="filter-btn" data-filter="unlinked">Unlinked</button>
-            </div>
-            <div class="filter-group">
-                <button class="filter-btn" data-sort="az">A–Z</button>
-            </div>
-        </div>
-        <div class="local-library-grid" id="local-entries-grid">
-            <div class="skeleton-card"></div>
-            <div class="skeleton-card"></div>
-        </div>
-    </section>
-</main>
 <main id="online-content">
     <section class="section">
         <div class="section-header">
@@ -132,9 +106,9 @@
 <script src="/src/scripts/utils/list-modal-manager.js"></script>
 <script src="/src/scripts/utils/continue-watching-manager.js"></script>
 <script src="/src/scripts/books/books.js"></script>
-<script src="/src/scripts/local-library-books.js"></script>
 <script src="/src/scripts/updateNotifier.js"></script>
 <script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
+<script src="/src/scripts/settings.js"></script>
 </body>
 </html>

desktop/views/components/navbar.html

@@ -11,7 +11,6 @@
     <button class="nav-button" data-page="books" onclick="window.location.href='/books'">Books</button>
     <button class="nav-button" data-page="gallery" onclick="window.location.href='/gallery'">Gallery</button>
     <button class="nav-button" data-page="schedule" onclick="window.location.href='/schedule'">Schedule</button>
-    <button class="nav-button" data-page="my-list" onclick="window.location.href='/my-list'">My List</button>
     <button class="nav-button" data-page="marketplace" onclick="window.location.href='/marketplace'">Marketplace</button>
   </div>
 
@@ -39,6 +38,21 @@
           </div>
         </div>
 
+        <a href="/profile" class="dropdown-item">
+          <svg xmlns="http://www.w3.org/2000/svg"
+               width="18" height="18"
+               viewBox="0 0 24 24"
+               fill="none"
+               stroke="currentColor"
+               stroke-width="2"
+               stroke-linecap="round"
+               stroke-linejoin="round">
+            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
+            <circle cx="12" cy="7" r="4"/>
+          </svg>
+          <span>Profile</span>
+        </a>
+
         <button class="dropdown-item" id="nav-settings">
           <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
             <circle cx="12" cy="12" r="3"/>
@@ -47,14 +61,6 @@
           <span>Settings</span>
         </button>
 
-        <a href="/my-list" class="dropdown-item">
-          <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-            <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
-            <polyline points="17 21 17 13 7 13 7 21"/>
-            <polyline points="7 3 7 8 15 8"/>
-          </svg>
-          <span>My List</span>
-        </a>
         <button class="dropdown-item logout-item" id="nav-logout">
           <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
             <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>

desktop/views/components/settings-modal.html

@@ -42,16 +42,15 @@
 </div>
 
 <style>
-  /* --- AMOLED THEME VARIABLES --- */
+  /* --- THEME VARIABLES (Heredadas y adaptadas de anime.css) --- */
   :root {
-    --amoled-black: #000000;
-    --amoled-surface: #080808;
-    --amoled-field: #0e0e0e;
-    --amoled-border: rgba(255, 255, 255, 0.08);
-    --accent-purple: #8b5cf6;
-    --accent-glow: rgba(139, 92, 246, 0.15);
-    --text-main: #ffffff;
-    --text-dim: #a1a1aa;
+    --modal-bg: #0b0b0b;
+    --modal-sidebar: rgba(255, 255, 255, 0.02);
+    --modal-border: rgba(255, 255, 255, 0.08);
+    --input-bg: rgba(255, 255, 255, 0.04);
+    --accent: #8b5cf6; /* Tu morado principal */
+    --text-primary: #ffffff;
+    --text-secondary: #a1a1aa;
   }
 
   /* --- MODAL BASE --- */
@@ -63,6 +62,7 @@
     align-items: center;
     justify-content: center;
     padding: 20px;
+    font-family: system-ui, -apple-system, sans-serif; /* Coherencia con anime.css */
   }
 
   .modal.hidden { display: none !important; }
@@ -70,55 +70,58 @@
   .modal-overlay {
     position: absolute;
     inset: 0;
-    background: rgba(0, 0, 0, 0.9);
-    backdrop-filter: blur(12px);
+    background: rgba(0, 0, 0, 0.85); /* Un poco menos opaco para profundidad */
+    backdrop-filter: blur(8px);
     z-index: -1;
+    animation: fadeIn 0.3s ease;
   }
 
   .modal-content {
     position: relative;
     display: flex;
-    flex-direction: row; /* Horizontal layout */
-    width: 95%;
-    max-width: 1200px; /* Increased size */
-    height: 85vh;
-    background: var(--amoled-black);
-    border: var(--amoled-border);
-    border-radius: 28px;
+    flex-direction: row;
+    width: 100%;
+    max-width: 1100px;
+    height: 80vh;
+    background: var(--modal-bg);
+    border: 1px solid var(--modal-border);
+    border-radius: 16px; /* Bordes menos exagerados, más elegantes */
     overflow: hidden;
-    box-shadow: 0 0 0 1px var(--amoled-border), 0 24px 60px rgba(0,0,0,0.8);
-    animation: modalScaleUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+    box-shadow: 0 40px 80px rgba(0,0,0,0.6);
+    animation: modalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
   }
 
   /* --- SIDEBAR --- */
   .modal-sidebar {
-    width: 280px;
-    background: var(--amoled-surface);
-    border-right: var(--amoled-border);
+    width: 260px;
+    background: var(--modal-sidebar);
+    border-right: 1px solid var(--modal-border);
     display: flex;
     flex-direction: column;
-    padding: 2rem;
+    padding: 2rem 1.5rem;
     flex-shrink: 0;
   }
 
+  .sidebar-header { margin-bottom: 2rem; }
+
   .sidebar-title {
-    font-size: 1.4rem;
+    font-size: 1.5rem;
     font-weight: 800;
-    margin-bottom: 2.5rem;
-    color: var(--text-main);
-    letter-spacing: -0.02em;
+    color: var(--text-primary);
+    margin: 0;
+    letter-spacing: -0.03em;
   }
 
-  .nav-list { flex: 1; }
+  .nav-list { flex: 1; display: flex; flex-direction: column; gap: 4px; }
 
   .nav-item {
-    padding: 12px 16px;
-    border-radius: 14px;
+    padding: 10px 14px;
+    border-radius: 8px;
     cursor: pointer;
-    color: var(--text-dim);
+    color: var(--text-secondary);
     transition: all 0.2s ease;
-    margin-bottom: 6px;
-    font-weight: 500;
+    font-weight: 600;
+    font-size: 0.95rem;
     display: flex;
     align-items: center;
     gap: 12px;
@@ -127,22 +130,23 @@
 
   .nav-item:hover {
     background: rgba(255, 255, 255, 0.05);
-    color: var(--text-main);
+    color: var(--text-primary);
   }
 
   .nav-item.active {
-    background: var(--accent-glow);
-    color: var(--accent-purple);
-    box-shadow: inset 3px 0 0 var(--accent-purple);
+    background: var(--accent);
+    color: white;
+    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25); /* Glow sutil */
   }
 
-  /* --- MAIN CONTENT & DYNAMIC INPUTS --- */
+  /* --- MAIN CONTENT area --- */
   .modal-main {
     flex: 1;
     display: flex;
     flex-direction: column;
-    background: var(--amoled-black);
+    background: transparent;
     min-width: 0;
+    position: relative;
   }
 
   .config-wrapper {
@@ -153,52 +157,54 @@
 
   .section-container {
     flex: 1;
-    padding: 3.5rem;
+    padding: 3rem;
     overflow-y: auto;
+    /* Custom Scrollbar sutil */
     scrollbar-width: thin;
-    scrollbar-color: #222 transparent;
+    scrollbar-color: #333 transparent;
   }
 
-  /* Styles for the injected section content */
+  /* --- INPUTS & FORMS (Estilo WaifuBoards/Anime) --- */
   .config-group {
-    margin-bottom: 2.5rem;
-    animation: fadeInSection 0.4s ease-out;
+    margin-bottom: 2rem;
+    animation: fadeInSection 0.3s ease-out;
   }
 
   .config-group label {
     display: block;
-    font-size: 0.75rem;
-    color: var(--accent-purple);
-    margin-bottom: 0.8rem;
-    letter-spacing: 0.05em;
-    font-weight: 800;
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+    margin-bottom: 0.6rem;
+    font-weight: 600;
     text-transform: uppercase;
+    letter-spacing: 0.05em;
   }
 
   .config-input {
     width: 100%;
-    padding: 1rem 1.2rem;
-    background: var(--amoled-field);
-    border: 1px solid #1a1a1a;
-    border-radius: 14px;
-    color: #fff;
+    padding: 0.9rem 1rem;
+    background: var(--input-bg);
+    border: 1px solid var(--modal-border);
+    border-radius: 8px;
+    color: var(--text-primary);
     font-size: 1rem;
-    transition: all 0.25s ease;
+    font-family: inherit;
+    transition: all 0.2s ease;
   }
 
   .config-input:focus {
     outline: none;
-    border-color: var(--accent-purple);
-    background: #121212;
-    box-shadow: 0 0 0 4px var(--accent-glow);
+    border-color: var(--accent);
+    background: rgba(255, 255, 255, 0.08);
+    box-shadow: 0 0 0 1px var(--accent);
   }
 
-  /* --- FOOTER --- */
+  /* --- FOOTER ACTION BAR --- */
   .modal-footer-sticky {
-    padding: 1.5rem 3.5rem;
-    background: rgba(0, 0, 0, 0.8);
+    padding: 1.2rem 3rem;
+    background: rgba(11, 11, 11, 0.8); /* Glass effect */
     backdrop-filter: blur(10px);
-    border-top: var(--amoled-border);
+    border-top: 1px solid var(--modal-border);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -206,32 +212,34 @@
 
   .footer-hint {
     font-size: 0.85rem;
-    color: var(--text-dim);
+    color: var(--text-secondary);
+    font-weight: 500;
   }
 
   /* --- BUTTONS --- */
   .btn-primary {
-    padding: 0.8rem 2.2rem;
-    background: #ffffff;
-    color: #000000;
+    padding: 0.7rem 2rem;
+    background: white; /* Estilo 'btn-watch' de anime.css */
+    color: black;
     border: none;
-    border-radius: 100px;
-    font-weight: 700;
+    border-radius: 6px;
+    font-weight: 800;
+    font-size: 0.95rem;
     cursor: pointer;
-    transition: transform 0.2s ease;
+    transition: transform 0.2s ease, filter 0.2s;
   }
 
   .btn-primary:hover {
-    transform: translateY(-2px);
-    background: #f0f0f0;
+    transform: scale(1.02);
+    filter: brightness(0.9);
   }
 
   .btn-exit {
-    background: #111;
-    border: 1px solid #222;
-    color: #ef4444;
+    background: transparent;
+    border: 1px solid var(--modal-border);
+    color: #ef4444; /* Rojo error sutil */
     padding: 10px;
-    border-radius: 12px;
+    border-radius: 8px;
     width: 100%;
     cursor: pointer;
     display: flex;
@@ -240,39 +248,63 @@
     gap: 8px;
     font-weight: 600;
     margin-top: auto;
+    transition: background 0.2s;
   }
 
-  /* --- ANIMATIONS & SKELETON --- */
-  @keyframes modalScaleUp {
-    from { opacity: 0; transform: scale(0.97) translateY(10px); }
+  .btn-exit:hover {
+    background: rgba(239, 68, 68, 0.1);
+    border-color: #ef4444;
+  }
+
+  /* --- SKELETON & ANIMATIONS --- */
+  @keyframes modalSlideUp {
+    from { opacity: 0; transform: scale(0.98) translateY(15px); }
     to { opacity: 1; transform: scale(1) translateY(0); }
   }
 
-  @keyframes fadeInSection {
-    from { opacity: 0; transform: translateY(8px); }
-    to { opacity: 1; transform: translateY(0); }
-  }
+  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+  @keyframes fadeInSection { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
 
-  .skeleton-loader { display: flex; flex-direction: column; gap: 2rem; }
+  .skeleton-loader { display: flex; flex-direction: column; gap: 1.5rem; }
   .skeleton {
-    background: linear-gradient(90deg, #080808 25%, #121212 50%, #080808 75%);
+    background: linear-gradient(90deg, #111 25%, #1a1a1a 50%, #111 75%);
     background-size: 200% 100%;
-    animation: shimmer 1.5s infinite;
-    border-radius: 12px;
+    animation: shimmer 2s infinite;
+    border-radius: 6px;
   }
-  @keyframes shimmer {
-    0% { background-position: 200% 0; }
-    100% { background-position: -200% 0; }
-  }
-  .title-skeleton { height: 35px; width: 40%; }
-  .field-skeleton { height: 55px; width: 100%; }
+  @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
 
-  /* Responsive Mobile View */
+  .title-skeleton { height: 28px; width: 30%; margin-bottom: 1rem; }
+  .field-skeleton { height: 48px; width: 100%; }
+
+  /* --- RESPONSIVE --- */
   @media (max-width: 850px) {
-    .modal-content { flex-direction: column; height: 95vh; width: 100vw; border-radius: 0; }
-    .modal-sidebar { width: 100%; height: auto; border-right: none; border-bottom: var(--amoled-border); padding: 1rem; }
-    .sidebar-title { margin-bottom: 1rem; font-size: 1.2rem; }
-    .section-container { padding: 2rem; }
-    .modal-footer-sticky { padding: 1.5rem 2rem; }
+    .modal-content { flex-direction: column; height: 100%; width: 100%; border-radius: 0; border: none; }
+    .modal-sidebar { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--modal-border); padding: 1.5rem; }
+    .sidebar-footer { display: none; } /* Ocultar btn salir sidebar en movil */
+    .section-container { padding: 1.5rem; }
+    .modal-footer-sticky { padding: 1rem 1.5rem; }
+
+    /* Añadir un botón de cierre flotante en móvil si fuera necesario,
+       pero el diseño actual debería funcionar bien con scroll */
+  }
+
+  /* --- Estilo para la nueva descripción --- */
+  .config-description {
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.5); /* Gris sutil */
+
+    /* Ajustes para posición inferior */
+    margin-top: 0.5rem;    /* Espacio entre el input y la descripción */
+    margin-bottom: 0;      /* Ya no necesitamos margen abajo */
+
+    line-height: 1.4;
+    font-weight: 400;
+  }
+
+  /* Ajuste para inputs vacíos (placeholder) */
+  .config-input::placeholder {
+    color: rgba(255, 255, 255, 0.2);
+    font-style: italic;
   }
 </style>

desktop/views/css/anime/anime.css

@@ -1,297 +1,274 @@
+:root {
+    --bg-card: rgba(255, 255, 255, 0.04);
+    --border-subtle: rgba(255, 255, 255, 0.1);
+    --color-primary: #8b5cf6;
+    --player-height: 85vh;
+}
+
+body {
+    background: #0b0b0b;
+    color: white;
+
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden;
+    width: 100%;
+    font-family: system-ui, -apple-system, sans-serif;
+}
+
+.top-media-wrapper {
+    position: relative;
+
+    width: 100vw;
+    left: 0;
+    background: #000;
+    transition: all 0.5s ease-in-out;
+}
+
+.hero-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    overflow: hidden;
+    z-index: 1;
+}
+
 .video-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    pointer-events: none;
+    overflow: hidden;
+}
+.video-background iframe,
+.video-background #trailer-player {
     position: absolute;
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%) scale(1.35);
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    z-index: 0;
-    opacity: 0.6;
+
+    width: 100vw;
+    height: 56.25vw;
+    min-height: 100vh;
+    min-width: 177.77vh;
+
+    transform: translate(-50%, -50%);
+
+}
+
+.hero-overlay {
+    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.8) 70%, #0b0b0b 100%);
+    z-index: 2;
 }
 
 .content-container {
     position: relative;
     z-index: 10;
-    max-width: 1600px;
-    margin: -350px auto 0 auto;
+    max-width: 1400px;
+    margin: -45vh auto 0 auto;
     padding: 0 3rem 4rem 3rem;
-    display: grid;
-    grid-template-columns: 280px 1fr;
-    gap: 3rem;
-    animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+    transition: margin-top 0.5s ease;
 }
 
-.sidebar {
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
+body.watch-mode .content-container { margin-top: 0; }
+body.watch-mode .anime-header { margin-top: 2rem; }
+
+.anime-header { margin-bottom: 5rem; max-width: 900px; }
+.anime-title {
+    font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900;
+    margin-bottom: 0.5rem; text-shadow: 0 4px 30px rgba(0,0,0,0.6);
 }
+.hero-meta-info {
+    display: flex; align-items: center; gap: 0.8rem;
+    color: rgba(255,255,255,0.7); font-weight: 600; margin-bottom: 1.2rem;
+}
+.pill-local {
+    background: #22c55e; color: black; padding: 2px 8px;
+    border-radius: 4px; font-size: 0.75rem; font-weight: 900;
+}
+.hero-description-mini {
+    font-size: 1.05rem; line-height: 1.5; color: rgba(255,255,255,0.8);
+    margin-bottom: 1.2rem; max-width: 700px;
+    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+}
+.hero-tags {
+    display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem;
+    color: rgba(255,255,255,0.5); font-weight: 500;
+}
+
+.action-row { display: flex; align-items: center; gap: 1rem; }
+.btn-watch {
+    padding: 0.8rem 2.2rem; background: white; color: black;
+    border-radius: 8px; font-weight: 800; border: none; cursor: pointer;
+    display: flex; align-items: center; gap: 0.6rem; transition: 0.2s ease;
+}
+.btn-watch:hover { transform: scale(1.03); filter: brightness(0.9); }
+
+.btn-add-list {
+    padding: 0.8rem 1.5rem; background: rgba(255,255,255,0.1);
+    border: 1px solid rgba(255,255,255,0.2); color: white;
+    border-radius: 8px; font-weight: 700; cursor: pointer; transition: 0.2s;
+}
+.btn-add-list:hover { background: rgba(255,255,255,0.2); }
+
+.main-layout { display: grid; grid-template-columns: 300px 1fr; gap: 4rem; margin-top: 2rem; }
+.content-section { margin-top: 4rem; }
+h2, .subsection-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 1.5rem; color: white; }
 
 .poster-card {
-    width: 100%;
-    aspect-ratio: 2/3;
-    border-radius: var(--radius-lg);
-    overflow: hidden;
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
-    border: 1px solid rgba(255,255,255,0.1);
+    border-radius: 12px; overflow: hidden;
+    box-shadow: 0 30px 60px rgba(0,0,0,0.5); border: 1px solid var(--border-subtle);
 }
+.poster-card img { width: 100%; height: auto; display: block; }
 
-.poster-card img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+.relations-horizontal { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
+.relation-card-horizontal {
+    display: flex; background: var(--bg-card); border: 1px solid var(--border-subtle);
+    border-radius: 10px; overflow: hidden; transition: 0.2s; cursor: pointer;
 }
-
-.info-grid {
-    background: var(--color-bg-elevated);
-    border: 1px solid rgba(255,255,255,0.05);
-    border-radius: var(--radius-md);
-    padding: 1.5rem;
-    display: flex;
-    flex-direction: column;
-    gap: 1.25rem;
+.relation-card-horizontal:hover { background: rgba(255,255,255,0.08); transform: translateX(5px); }
+.rel-img { width: 85px; height: 110px; object-fit: cover; }
+.rel-info { padding: 1rem; display: flex; flex-direction: column; justify-content: center; }
+.rel-type {
+    font-size: 0.7rem; color: var(--color-primary); font-weight: 800;
+    margin-bottom: 4px; background: rgba(139, 92, 246, 0.1); width: fit-content; padding: 2px 6px; border-radius: 4px;
 }
+.rel-title { font-size: 0.95rem; font-weight: 700; color: #eee; }
 
-.info-item h4 { margin: 0 0 0.25rem 0; font-size: 0.85rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
-.info-item span { font-weight: 600; font-size: 1rem; color: var(--color-text-primary); }
+.characters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
+.character-item { display: flex; align-items: center; gap: 1rem; }
+.char-avatar { width: 60px; height: 60px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
+.char-avatar img { width: 100%; height: 100%; object-fit: cover; }
+.char-info { display: flex; flex-direction: column; gap: 2px; }
+.char-name { font-size: 1rem; font-weight: 700; color: #fff; }
+.char-role { font-size: 0.8rem; color: #888; font-weight: 500; }
+.btn-show-more { background: transparent; border: 1px solid var(--border-subtle); color: #aaa; padding: 10px; width: 100%; margin-top: 1rem; cursor: pointer; }
 
-.character-list {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
+.episodes-section { margin-top: 3rem; }
+.episodes-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
+.episode-search-input {
+    background: rgba(255,255,255,0.05); border: 1px solid var(--border-subtle);
+    color: white; padding: 8px 15px; border-radius: 8px; width: 100px;
 }
-.character-item { display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; }
-.char-dot { width: 6px; height: 6px; background: var(--color-primary); border-radius: 50%; }
-
-.main-content {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-}
-
-.anime-header {
-    margin-bottom: 2rem;
-}
-
-.anime-title {
-    font-size: 4rem;
-    font-weight: 900;
-    line-height: 1;
-    margin: 0 0 1.5rem 0;
-    text-shadow: 0 4px 30px rgba(0,0,0,0.8);
-}
-
-.meta-row {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    margin-bottom: 1.5rem;
-    flex-wrap: wrap;
-}
-
-.pill {
-    padding: 0.5rem 1.25rem;
-    background: rgba(255,255,255,0.1);
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255,255,255,0.1);
-    border-radius: var(--radius-full);
-    font-weight: 600;
-    font-size: 0.95rem;
-}
-.pill.score { background: rgba(34, 197, 94, 0.2); color: #4ade80; border-color: rgba(34, 197, 94, 0.2); }
-
-.action-row {
-    display: flex;
-    gap: 1rem;
-    margin-top: 1rem;
-}
-
-.btn-watch {
-    padding: 1rem 3rem;
-    background: var(--color-text-primary);
-    color: var(--color-bg-base);
-    border-radius: var(--radius-full);
-    font-weight: 800;
-    font-size: 1.1rem;
-    border: none;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    transition: transform 0.2s, box-shadow 0.2s;
-}
-
-.btn-watch:hover {
-    transform: scale(1.05);
-    box-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
-}
-
-.btn-secondary {
-    padding: 1rem 2rem;
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-    color: white;
-    border-radius: var(--radius-full);
-    font-weight: 700;
-    font-size: 1rem;
-    border: 1px solid rgba(255,255,255,0.2);
-    cursor: pointer;
-    transition: all 0.2s;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-.btn-secondary:hover {
-    background: rgba(255, 255, 255, 0.2);
-    transform: scale(1.05);
-}
-
-.description-box {
-    margin-top: 3rem;
-    font-size: 1.15rem;
-    line-height: 1.8;
-    color: #e4e4e7;
-    max-width: 900px;
-    background: rgba(255,255,255,0.03);
-    padding: 2rem;
-    border-radius: var(--radius-md);
-    border: 1px solid rgba(255,255,255,0.05);
-}
-
-.episodes-section {
-    margin-top: 4rem;
-}
-.section-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.8rem; }
-.section-title::before { content: ''; width: 4px; height: 28px; background: var(--color-primary); border-radius: 2px; }
-
 .episodes-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-    gap: 1rem;
-}
 
+    grid-template-columns: repeat(auto-fill, minmax(55px, 1fr));
+    gap: 0.6rem;
+}
 .episode-btn {
-    background: var(--color-bg-elevated);
-    border: 1px solid rgba(255,255,255,0.1);
-    padding: 1.25rem 1rem;
-    border-radius: var(--radius-md);
-    cursor: pointer;
-    transition: 0.2s;
+    background: rgba(255,255,255,0.03);
+    border: 1px solid var(--border-subtle);
+    padding: 0.6rem 0;
+    border-radius: 6px;
     text-align: center;
+    font-size: 0.9rem;
     font-weight: 600;
-    color: var(--color-text-secondary);
-}
-
-.episode-btn:hover {
-    background: var(--color-bg-elevated-hover);
-    color: white;
-    transform: translateY(-3px);
-    border-color: var(--color-primary);
-}
-
-@keyframes slideUp {
-    from { opacity: 0; transform: translateY(60px); }
-    to { opacity: 1; transform: translateY(0); }
-}
-
-@media (max-width: 1024px) {
-    .content-container {
-        grid-template-columns: 1fr;
-        margin-top: -100px;
-        padding: 0 1.5rem 4rem 1.5rem;
-    }
-    .poster-card { width: 220px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
-    .main-content { text-align: center; align-items: center; }
-    .anime-title { font-size: 2.5rem; }
-    .meta-row { justify-content: center; }
-    .sidebar { display: none;  }
-}
-
-.read-more-btn {
-    background: none;
-    border: none;
-    color: #8b5cf6;
     cursor: pointer;
-    font-weight: 600;
-    padding: 0;
-    margin-top: 0.5rem;
-    font-size: 0.95rem;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.25rem;
+    transition: all 0.2s;
+    color: #ccc;
+}
+.episode-btn:hover {
+    background: white;
+    color: black;
+    transform: translateY(-2px);
+}
+.episode-btn.active-playing {
+    background: var(--color-primary);
+    color: white;
+    border-color: var(--color-primary);
+    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
 }
-.read-more-btn:hover { text-decoration: underline; }
 
-.episodes-header-row {
+.metadata-sidebar {
+    margin-top: 2rem;
+    background: rgba(255,255,255,0.03);
+    padding: 1.5rem;
+    border-radius: 16px;
+    border: 1px solid rgba(255,255,255,0.08);
+    display: flex;
+    flex-direction: column;
+    gap: 1.2rem;
+}
+.meta-item-side {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 1.5rem;
-    flex-wrap: wrap;
-    gap: 1rem;
+    border-bottom: 1px solid rgba(255,255,255,0.05);
+    padding-bottom: 0.8rem;
 }
-.episodes-header-row h2 {
+.meta-item-side:last-child { border-bottom: none; padding-bottom: 0; }
+.meta-item-side span {
+    font-size: 0.8rem;
+    color: #888;
+    font-weight: 600;
+}
+.meta-item-side p {
+    font-size: 0.95rem;
+    font-weight: 500;
+    color: #fff;
     margin: 0;
-    font-size: 1.8rem;
-    border-left: 4px solid #8b5cf6;
-    padding-left: 1rem;
-}
-.episode-search-wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-}
-.episode-search-input {
-    background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 99px;
-    padding: 0.6rem 1rem;
-    color: white;
-    width: 140px;
-    text-align: center;
-    font-family: inherit;
-    transition: 0.2s;
-    -moz-appearance: textfield;
-}
-.episode-search-input:focus {
-    border-color: #8b5cf6;
-    background: rgba(255, 255, 255, 0.1);
-    outline: none;
+    text-align: right;
 }
 
-.episode-search-input::-webkit-outer-spin-button,
-.episode-search-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+@media (max-width: 1024px) {
+    .content-container { margin-top: -200px; padding: 0 1.5rem; }
+    .main-layout { grid-template-columns: 1fr; gap: 2rem; }
+    .poster-section { display: flex; flex-direction: column; align-items: center; }
+    .poster-card { width: 220px; }
+    .metadata-sidebar { width: 100%; max-width: 400px; }
+}
+
+.relation-card-horizontal.no-link {
+    cursor: default;
+    opacity: 0.7;
+}
+.relation-card-horizontal.no-link:hover {
+    transform: none;
+    background: var(--bg-card);
+}
 
 .pagination-controls {
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: 1rem;
+    gap: 1.5rem;
     margin-top: 2rem;
-    padding-top: 1rem;
+    padding-top: 1.5rem;
     border-top: 1px solid rgba(255, 255, 255, 0.05);
 }
+
+.page-info {
+    font-size: 0.9rem;
+    font-weight: 700;
+    color: #888;
+    min-width: 100px;
+    text-align: center;
+}
+
 .page-btn {
-    background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.2);
     color: white;
-    padding: 0.5rem 1rem;
+    padding: 0.6rem 1.2rem;
     border-radius: 8px;
+    font-size: 0.85rem;
+    font-weight: 600;
     cursor: pointer;
-    transition: 0.2s;
-    font-weight: 500;
+    transition: all 0.2s ease;
 }
+
 .page-btn:hover:not(:disabled) {
-    background: rgba(255, 255, 255, 0.15);
-    border-color: #8b5cf6;
+    background: white;
+    color: black;
+    border-color: white;
 }
+
 .page-btn:disabled {
     opacity: 0.4;
     cursor: not-allowed;
-}
-.page-info {
-    color: #a1a1aa;
-    font-size: 0.9rem;
-    font-weight: 500;
+    border-color: rgba(255, 255, 255, 0.1);
 }

desktop/views/css/anime/player.css

@@ -0,0 +1,919 @@
+:root {
+    --brand-color: #8b5cf6;
+    --brand-color-light: #a78bfa;
+    --op-color: #fbbf24;
+    --ed-color: #38bdf8;
+    --overlay-gradient-top: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, transparent 100%);
+    --overlay-gradient-bottom: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 40%, transparent 100%);
+}
+
+body.stop-scrolling {
+    overflow: hidden !important;
+    height: 100vh;
+}
+
+.player-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #000;
+    z-index: 9999;
+    display: none;
+    overflow: hidden;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    color: #fff;
+}
+
+.player-wrapper * {
+    box-sizing: border-box;
+}
+
+.player-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+
+    margin: 0;
+    padding: 0;
+}
+.video-frame {
+
+    flex: 1;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background: #000;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.video-frame video {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+.video-frame .plyr {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.player-header {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    padding: 20px 30px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    z-index: 20;
+    background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, transparent 100%);
+    pointer-events: none; /* Permite clickear el video a través del header vacío */
+    transition: opacity 0.3s ease;
+}
+
+.header-left, .header-right {
+    pointer-events: auto;
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+.btn-icon-glass {
+    appearance: none;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255,255,255,0.1);
+    color: #fff;
+    padding: 10px;
+    border-radius: 20%;
+    cursor: pointer;
+    backdrop-filter: blur(4px);
+    transition: all 0.2s;
+}
+
+.btn-icon-glass:hover {
+    background: rgba(255, 255, 255, 0.25);
+    border-color: rgba(255, 255, 255, 0.3);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+    transform: translateY(-1px) scale(1.05);
+}
+
+.player-container:hover .player-header,
+.player-container.paused .player-header {
+    opacity: 1;
+    pointer-events: all;
+}
+
+.player-meta {
+    display: flex; flex-direction: column; gap: 0.5rem;
+}
+
+.btn-close-player {
+    background: transparent;
+    border: none;
+    color: rgba(255,255,255,0.7);
+    display: flex; align-items: center; gap: 10px;
+    font-size: 1.1rem; font-weight: 500;
+    cursor: pointer; padding: 0;
+    transition: color 0.2s;
+}
+.btn-close-player:hover { color: #fff; }
+.btn-close-player svg { width: 28px; height: 28px; }
+
+.episode-info {
+    display: flex;
+    flex-direction: column;
+}
+.ep-label {
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    color: rgba(255,255,255,0.7);
+    letter-spacing: 1px;
+}
+.ep-title {
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: white;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
+}
+
+.nav-capsule {
+    display: flex;
+    align-items: center;
+    background: rgba(0, 0, 0, 0.6);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 20px; /* Forma de pastilla */
+    overflow: hidden;
+    backdrop-filter: blur(10px);
+}
+
+.nav-btn {
+    background: transparent;
+    border: none;
+    color: white;
+    padding: 8px 16px;
+    cursor: pointer;
+    transition: background 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.nav-btn:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.nav-btn:disabled {
+    opacity: 0.3;
+    cursor: default;
+}
+
+.nav-capsule .divider {
+    width: 1px;
+    height: 20px;
+    background: rgba(255, 255, 255, 0.2);
+}
+
+#skip-overlay-btn {
+    position: absolute;
+    bottom: 80px; /* Encima de la barra de Plyr */
+    right: 30px;
+    background: white;
+    color: black;
+    padding: 10px 24px;
+    border-radius: 6px;
+    font-weight: 700;
+    font-size: 0.95rem;
+    border: none;
+    cursor: pointer;
+    z-index: 2147483647 !important; /* Siempre encima de todo */
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
+
+    opacity: 0;
+    transform: translateY(20px);
+    transition: opacity 0.3s, transform 0.3s, background 0.2s;
+    pointer-events: none;
+
+}
+
+#skip-overlay-btn.visible {
+    opacity: 1 !important;
+    pointer-events: auto !important;
+    cursor: pointer !important;
+    visibility: visible !important;
+    display: flex !important;
+}
+
+#skip-overlay-btn:hover {
+    background: #f0f0f0;
+    transform: translateY(-2px);
+}
+
+#skip-overlay-btn.is-next {
+    background: #8b5cf6;
+    color: white;
+}
+#skip-overlay-btn.is-next:hover {
+    background: #7c3aed;
+}
+
+
+/* --- BOTONES DE NAVEGACIÓN LATERALES (Side Chevrons) --- */
+.side-nav-btn {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background: rgba(0, 0, 0, 0.5);
+    color: rgba(255, 255, 255, 0.8);
+    border: none;
+    width: 60px;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    z-index: 30; /* Encima del video */
+    transition: all 0.3s ease;
+    opacity: 0; /* Invisibles por defecto */
+}
+
+/* Bordes redondeados según el lado */
+.side-nav-btn.left {
+    left: 0;
+    border-radius: 0 10px 10px 0;
+}
+
+.side-nav-btn.right {
+    right: 0;
+    border-radius: 10px 0 0 10px;
+}
+
+/* Mostrar solo cuando el mouse está sobre el reproductor */
+.player-container:hover .side-nav-btn {
+    opacity: 1;
+}
+
+/* Efecto Hover sobre el botón */
+.side-nav-btn:hover:not(:disabled) {
+    background: rgba(139, 92, 246, 0.6); /* Tu color brand morado pero transparente */
+    color: white;
+    width: 70px; /* Crecen un poco */
+}
+
+/* Estado deshabilitado (Primer/Último episodio) */
+.side-nav-btn:disabled {
+    cursor: default;
+    opacity: 0 !important; /* Totalmente oculto si no se puede usar */
+    pointer-events: none;
+}
+#player-episode-title {
+    font-size: 1.5rem; font-weight: 700;
+    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
+    margin-left: 2px;
+}
+
+.player-controls-top {
+    display: flex; gap: 1rem; align-items: center;
+}
+
+.glass-select {
+    appearance: none;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255,255,255,0.1);
+    color: #fff;
+    padding: 8px 16px;
+    border-radius: 4px;
+    font-size: 0.85rem; font-weight: 600;
+    cursor: pointer;
+    backdrop-filter: blur(4px);
+    transition: all 0.2s;
+}
+.glass-select:hover { background: rgba(255, 255, 255, 0.2); }
+.glass-select option { background: #111; color: #ccc; }
+
+.sd-toggle {
+    background: rgba(255,255,255,0.1);
+    border-radius: 4px;
+    display: flex;
+    padding: 2px;
+    cursor: pointer;
+    border: 1px solid rgba(255,255,255,0.1);
+}
+.sd-option {
+    padding: 4px 12px;
+    font-size: 0.75rem; font-weight: 700;
+    color: rgba(255,255,255,0.5);
+    border-radius: 2px;
+    transition: all 0.2s;
+}
+.sd-option.active {
+    background: #fff;
+    color: #000;
+}
+
+.btn-skip-intro {
+    position: absolute;
+    bottom: 120px; right: 40px;
+    background: #fff;
+    color: #000;
+    border: none;
+    padding: 10px 24px;
+    font-weight: 700; font-size: 0.9rem;
+    border-radius: 4px;
+    cursor: pointer;
+    z-index: 50;
+    display: flex; align-items: center; gap: 8px;
+    opacity: 0; transform: translateY(20px);
+    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+}
+.btn-skip-intro.visible {
+    opacity: 1; transform: translateY(0);
+}
+.btn-skip-intro:hover {
+    background: #e6e6e6;
+    transform: scale(1.02);
+}
+
+:root {
+    --plyr-color-main: var(--brand-color);
+    --plyr-video-control-color: #fff;
+    --plyr-video-control-background-hover: transparent;
+    --plyr-control-icon-size: 20px;
+    --plyr-range-track-height: 4px;
+    --plyr-range-thumb-height: 14px;
+    --plyr-range-thumb-background: #fff;
+    --plyr-menu-background: rgba(20, 20, 20, 0.95);
+    --plyr-menu-color: #fff;
+    --plyr-tooltip-background: rgba(255,255,255,0.9);
+    --plyr-tooltip-color: #000;
+}
+
+.plyr--video .plyr__controls {
+    padding-bottom: max(20px, env(safe-area-inset-bottom));
+}
+
+.plyr__progress__container:hover .plyr__progress input[type=range],
+.plyr__progress__container:hover .plyr__progress__buffer {
+    height: 8px;
+    transition: height 0.1s ease;
+}
+
+.plyr__progress {
+    position: relative;
+    cursor: pointer;
+}
+
+.skip-marker {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 4px;
+    z-index: 3;
+    pointer-events: none;
+    transition: height 0.1s ease;
+
+    background-color: rgba(255, 255, 255, 0.3);
+
+    border-left: 2px solid rgba(0,0,0,0);
+    border-right: 2px solid rgba(0,0,0,0);
+    background-clip: padding-box;
+}
+
+.plyr__progress__container:hover .skip-marker {
+    height: 8px;
+}
+
+.skip-marker.op {
+    background-color: var(--op-color);
+    box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
+}
+
+.skip-marker.ed {
+    background-color: var(--ed-color);
+}
+
+.player-loading-overlay {
+    background: #000;
+}
+.spinner {
+    border-width: 2px;
+    width: 50px; height: 50px;
+    border-top-color: #fff;
+    border-right-color: rgba(255,255,255,0.1);
+    border-bottom-color: rgba(255,255,255,0.1);
+    border-left-color: rgba(255,255,255,0.1);
+}
+
+.settings-group {
+    display: flex;
+    align-items: center;
+    gap: 12px; /* Espacio entre los elementos */
+}
+
+/* Opcional: Ajuste para pantallas móviles muy pequeñas */
+@media (max-width: 600px) {
+    .settings-group {
+        gap: 8px;
+    }
+    .glass-select {
+        padding: 6px 10px;
+        font-size: 0.75rem;
+    }
+}
+
+.player-container:fullscreen,
+.player-container:-webkit-full-screen {
+    width: 100vw;
+    height: 100vh;
+    background: #000;
+    position: fixed;
+    inset: 0;
+    z-index: 99999;
+}
+
+/* Controles custom SIEMPRE visibles encima */
+.player-container:fullscreen .player-header,
+.player-container:fullscreen .side-nav-btn,
+.player-container:fullscreen #skip-overlay-btn,
+.player-container:-webkit-full-screen .player-header,
+.player-container:-webkit-full-screen .side-nav-btn,
+.player-container:-webkit-full-screen #skip-overlay-btn {
+    z-index: 2147483647 !important;
+    visibility: visible;
+}
+
+/* Posición correcta del botón Skip en fullscreen */
+.player-container:fullscreen #skip-overlay-btn,
+.player-container:-webkit-full-screen #skip-overlay-btn {
+    bottom: 100px;
+    right: 50px;
+}
+
+/* ================= UI HIDDEN (UNA SOLA FUENTE DE VERDAD) ================= */
+
+.player-container.ui-hidden .player-header,
+.player-container.ui-hidden .side-nav-btn {
+    opacity: 0;
+    pointer-events: none;
+    cursor: none;
+}
+#skip-overlay-btn {
+    opacity: 0;
+    pointer-events: none;
+}
+
+#skip-overlay-btn.visible {
+    opacity: 1 !important;
+    pointer-events: auto !important;
+    visibility: visible !important;
+}
+
+.player-container.ui-hidden #skip-overlay-btn.visible {
+    opacity: 1 !important;
+    pointer-events: auto !important;
+    cursor: pointer !important;
+    visibility: visible !important;
+}
+.player-header,
+.side-nav-btn,
+#skip-overlay-btn {
+    transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.player-container:fullscreen #skip-overlay-btn,
+.player-container:-webkit-full-screen #skip-overlay-btn {
+    z-index: 2147483647 !important;
+    pointer-events: auto !important;
+}
+.player-container:fullscreen #skip-overlay-btn.visible,
+.player-container:-webkit-full-screen #skip-overlay-btn.visible {
+    opacity: 1 !important;
+    visibility: visible !important;
+    pointer-events: auto !important;
+}
+
+.glass-btn-mpv {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    color: white;
+    padding: 6px 12px;
+    border-radius: 8px;
+    font-weight: 700;
+    font-size: 0.85rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    backdrop-filter: blur(10px);
+    height: 36px;
+}
+
+.glass-btn-mpv:hover {
+    background: white;
+    color: black;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
+}
+
+.glass-btn-mpv svg {
+    margin-top: -1px;
+}
+
+.glass-btn-mpv:active {
+    transform: scale(0.95);
+}
+
+.plyr__custom-select-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 4px;
+}
+
+/* El select real: invisible pero clickable */
+.plyr__custom-select-wrapper select {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+    z-index: 2; /* Encima del botón visual */
+    appearance: none;
+    -webkit-appearance: none;
+}
+
+/* El botón visual que imita a Plyr */
+.plyr__custom-control-btn {
+    position: relative;
+    background: transparent;
+    border: none;
+    color: #fff; /* Plyr default white */
+    padding: 7px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background 0.3s ease, color 0.3s ease;
+    font-family: inherit;
+    font-size: 13px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    line-height: 1;
+}
+
+.plyr__custom-control-btn:hover {
+    background: rgba(255, 255, 255, 0.15); /* Plyr hover effect */
+    color: #fff;
+}
+
+.plyr__custom-control-btn svg {
+    width: 20px;
+    height: 20px;
+    fill: currentColor;
+    pointer-events: none;
+}
+
+/* Badge pequeño para indicar calidad actual (opcional) */
+.quality-badge {
+    background: var(--brand-color);
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+}
+
+.download-settings-content {
+    background: #1a1a1a;
+    width: 90%;
+    max-width: 500px;
+    max-height: 85vh;
+    border: 1px solid #333;
+    display: flex;
+    flex-direction: column;
+}
+
+.download-sections-wrapper {
+    overflow-y: auto;
+    padding-right: 5px;
+    margin-bottom: 20px;
+    flex: 1;
+}
+
+.dl-section {
+    margin-bottom: 1.5rem;
+}
+
+.dl-section h3 {
+    font-size: 0.9rem;
+    color: var(--brand-color-light);
+    margin-bottom: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    border-bottom: 1px solid rgba(255,255,255,0.1);
+    padding-bottom: 5px;
+}
+
+.dl-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.dl-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    background: rgba(255,255,255,0.05);
+    padding: 10px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background 0.2s;
+    user-select: none;
+}
+
+.dl-item:hover {
+    background: rgba(255,255,255,0.1);
+}
+
+.dl-item input[type="radio"],
+.dl-item input[type="checkbox"] {
+    accent-color: var(--brand-color);
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+}
+
+.dl-item span {
+    font-size: 0.9rem;
+    color: #eee;
+    flex: 1;
+}
+
+.dl-item .tag-info {
+    font-size: 0.75rem;
+    color: #aaa;
+    background: rgba(0,0,0,0.3);
+    padding: 2px 6px;
+    border-radius: 4px;
+}
+
+.dl-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    padding-top: 10px;
+    border-top: 1px solid rgba(255,255,255,0.1);
+}
+
+.btn-cancel {
+    background: transparent;
+    border: 1px solid #444;
+    color: #ccc;
+    padding: 8px 16px;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.btn-confirm {
+    background: var(--brand-color);
+    border: none;
+    color: white;
+    padding: 8px 20px;
+    border-radius: 4px;
+    font-weight: 600;
+    cursor: pointer;
+}
+.btn-confirm:hover {
+    background: #7c3aed;
+}
+/* =========================================
+   MODAL DE DESCARGAS - REDISEÑO "GLASS"
+   ========================================= */
+
+#download-modal {
+    position: fixed !important;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.6); /* Fondo oscurecido */
+    backdrop-filter: blur(8px); /* Desenfoque del fondo */
+    z-index: 2147483647 !important; /* Encima de todo */
+    display: none; /* Controlado por JS/Clases */
+    justify-content: center;
+    align-items: center;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: none; /* Por defecto no bloquea, JS lo activa */
+}
+
+/* Estado visible activado por JS */
+#download-modal.show {
+    display: flex !important;
+    opacity: 1 !important;
+    pointer-events: auto !important;
+    visibility: visible !important;
+}
+
+.download-settings-content {
+    background: rgba(20, 20, 20, 0.85); /* Fondo semitransparente oscuro */
+    width: 90%;
+    max-width: 480px;
+    max-height: 85vh;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 16px; /* Bordes más redondeados como anime.css */
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255,255,255,0.05);
+    display: flex;
+    flex-direction: column;
+    padding: 24px;
+    position: relative;
+    transform: scale(0.95);
+    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    color: #fff;
+    overflow: hidden;
+}
+
+#download-modal.show .download-settings-content {
+    transform: scale(1);
+}
+
+/* Botón de cerrar (X) */
+.download-settings-content .modal-close {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background: rgba(255, 255, 255, 0.1);
+    border: none;
+    color: white;
+    font-size: 1.2rem;
+    cursor: pointer;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+    z-index: 10;
+}
+
+.download-settings-content .modal-close:hover {
+    background: rgba(255, 255, 255, 0.3);
+    transform: rotate(90deg);
+}
+
+.modal-title {
+    margin: 0 0 20px 0;
+    font-size: 1.5rem;
+    font-weight: 800;
+    background: linear-gradient(to right, #fff, rgba(255,255,255,0.5));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+/* Wrappers internos */
+.download-sections-wrapper {
+    overflow-y: auto;
+    padding-right: 8px; /* Espacio para scrollbar */
+    margin-bottom: 20px;
+    flex: 1;
+}
+
+/* Scrollbar personalizado fino */
+.download-sections-wrapper::-webkit-scrollbar { width: 6px; }
+.download-sections-wrapper::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
+.download-sections-wrapper::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
+.download-sections-wrapper::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }
+
+.dl-section { margin-bottom: 1.5rem; }
+
+.dl-section h3 {
+    font-size: 0.75rem;
+    color: var(--brand-color-light); /* Morado claro */
+    margin-bottom: 1rem;
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.dl-section h3::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: linear-gradient(to right, rgba(139, 92, 246, 0.3), transparent);
+}
+
+.dl-list { display: flex; flex-direction: column; gap: 8px; }
+
+/* Items de la lista */
+.dl-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    background: rgba(255, 255, 255, 0.03);
+    padding: 12px 16px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border: 1px solid transparent;
+    user-select: none;
+}
+
+.dl-item:hover {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: rgba(255, 255, 255, 0.1);
+    transform: translateX(4px);
+}
+
+/* Inputs nativos con color de marca */
+.dl-item input[type="radio"],
+.dl-item input[type="checkbox"] {
+    accent-color: var(--brand-color);
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+    margin: 0;
+}
+
+.dl-item span {
+    font-size: 0.95rem;
+    color: rgba(255,255,255,0.9);
+    flex: 1;
+    font-weight: 500;
+}
+
+.dl-item .tag-info {
+    font-size: 0.7rem;
+    color: #ccc;
+    background: rgba(0, 0, 0, 0.4);
+    padding: 3px 8px;
+    border-radius: 4px;
+    font-weight: 600;
+    border: 1px solid rgba(255,255,255,0.1);
+}
+
+/* Pie del modal (Botones) */
+.dl-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    padding-top: 20px;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.btn-cancel {
+    background: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: rgba(255, 255, 255, 0.8);
+    padding: 10px 20px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-weight: 600;
+    transition: all 0.2s;
+}
+.btn-cancel:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+    border-color: white;
+}
+
+.btn-confirm {
+    background: var(--brand-color);
+    border: none;
+    color: white;
+    padding: 10px 24px;
+    border-radius: 8px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.2s;
+    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.btn-confirm:hover {
+    background: #7c3aed; /* Un tono más oscuro del brand */
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
+}

desktop/views/css/anime/watch.css

@@ -1,830 +0,0 @@
-.top-bar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    padding: var(--spacing-lg) var(--spacing-xl);
-    background: linear-gradient(
-            180deg,
-            rgba(0, 0, 0, 0.8) 0%,
-            transparent 100%
-    );
-    z-index: 1000;
-    pointer-events: none;
-}
-
-.back-btn {
-    pointer-events: auto;
-    display: inline-flex;
-    align-items: center;
-    gap: var(--spacing-sm);
-    padding: 0.7rem 1.5rem;
-    background: var(--glass-bg);
-    backdrop-filter: blur(16px);
-    border: 1px solid var(--glass-border);
-    border-radius: var(--radius-full);
-    color: var(--color-text-primary);
-    text-decoration: none;
-    font-weight: 600;
-    font-size: 0.9rem;
-    transition: all var(--transition-smooth);
-    box-shadow: var(--shadow-sm);
-}
-
-.back-btn:hover {
-    background: rgba(255, 255, 255, 0.12);
-    border-color: var(--color-primary);
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-glow);
-}
-
-.watch-container {
-    max-width: 1600px;
-    margin: var(--spacing-2xl) auto;
-    padding: 0 var(--spacing-xl);
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-xl);
-    align-items: center;
-}
-
-.player-section {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-lg);
-}
-
-.player-toolbar {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-md);
-    flex-wrap: wrap;
-    background: var(--glass-bg);
-    backdrop-filter: blur(16px);
-    border: 1px solid var(--glass-border);
-    border-radius: var(--radius-lg);
-    padding: var(--spacing-md);
-    box-shadow: var(--shadow-sm);
-}
-
-.control-group {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-md);
-}
-
-.sd-toggle {
-    display: flex;
-    background: var(--color-bg-elevated);
-    border: var(--border-subtle);
-    border-radius: var(--radius-full);
-    padding: 4px;
-    position: relative;
-    cursor: pointer;
-}
-
-.sd-option {
-    padding: 0.6rem 1.5rem;
-    font-size: 0.875rem;
-    font-weight: 700;
-    color: var(--color-text-muted);
-    z-index: 2;
-    transition: color var(--transition-base);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-}
-
-.sd-option.active {
-    color: var(--color-text-primary);
-}
-
-.sd-bg {
-    position: absolute;
-    top: 4px;
-    left: 4px;
-    bottom: 4px;
-    width: calc(50% - 4px);
-    background: var(--color-primary);
-    border-radius: var(--radius-full);
-    transition: transform var(--transition-smooth);
-    box-shadow: 0 4px 12px var(--color-primary-glow);
-    z-index: 1;
-}
-
-.sd-toggle[data-state="dub"] .sd-bg {
-    transform: translateX(100%);
-}
-
-.source-select {
-    appearance: none;
-    background-color: var(--color-bg-elevated);
-    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: right 1.2rem center;
-    border: var(--border-subtle);
-    color: var(--color-text-primary);
-    padding: 0.7rem 2.8rem 0.7rem 1.2rem;
-    border-radius: var(--radius-full);
-    font-size: 0.9rem;
-    font-weight: 500;
-    cursor: pointer;
-    min-width: 160px;
-    transition: all var(--transition-base);
-}
-
-.source-select:hover {
-    border-color: var(--color-primary);
-    background-color: var(--color-bg-card);
-}
-.source-select:focus {
-    outline: none;
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px var(--color-primary-glow);
-}
-
-.video-container {
-    aspect-ratio: 16/9;
-    width: 100%;
-    background: var(--color-bg-base);
-    border-radius: var(--radius-xl);
-    overflow: hidden;
-    box-shadow:
-            var(--shadow-lg),
-            0 0 0 1px var(--glass-border);
-    position: relative;
-    transition: box-shadow var(--transition-smooth);
-}
-
-.video-container:hover {
-    box-shadow:
-            var(--shadow-lg),
-            0 0 0 1px var(--color-primary),
-            var(--shadow-glow);
-}
-
-#player {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-}
-
-.loading-overlay {
-    position: absolute;
-    inset: 0;
-    background: var(--color-bg-base);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    z-index: 20;
-    gap: var(--spacing-lg);
-}
-
-.spinner {
-    width: 48px;
-    height: 48px;
-    border: 3px solid rgba(255, 255, 255, 0.1);
-    border-top-color: var(--color-primary);
-    border-radius: 50%;
-    animation: spin 0.8s linear infinite;
-}
-
-@keyframes spin {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-.loading-overlay p {
-    color: var(--color-text-secondary);
-    font-size: 0.95rem;
-    font-weight: 500;
-}
-
-.episode-controls {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    gap: var(--spacing-lg);
-    background: var(--glass-bg);
-    backdrop-filter: blur(16px);
-    border: 1px solid var(--glass-border);
-    border-radius: var(--radius-lg);
-    padding: var(--spacing-lg);
-    box-shadow: var(--shadow-sm);
-}
-
-.episode-info h1 {
-    font-size: 1.75rem;
-    font-weight: 800;
-    margin: 0 0 var(--spacing-xs);
-}
-.episode-info p {
-    color: var(--color-primary);
-    font-weight: 600;
-    font-size: 1rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-}
-
-.navigation-buttons {
-    display: flex;
-    gap: var(--spacing-md);
-}
-
-.nav-btn {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-sm);
-    background: var(--color-bg-elevated);
-    border: var(--border-subtle);
-    color: var(--color-text-primary);
-    padding: 0.75rem 1.5rem;
-    border-radius: var(--radius-full);
-    font-weight: 600;
-    font-size: 0.9rem;
-    cursor: pointer;
-    transition: all var(--transition-base);
-}
-
-.nav-btn:hover:not(:disabled) {
-    background: var(--color-primary);
-    border-color: var(--color-primary);
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-glow);
-}
-.nav-btn:disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
-}
-
-.episode-carousel-compact {
-    width: 100%;
-    max-width: 1600px;
-    margin-top: var(--spacing-lg);
-    padding: 0;
-    background: transparent;
-    border-radius: var(--radius-lg);
-    overflow: hidden;
-}
-
-.carousel-header {
-    margin-bottom: var(--spacing-lg);
-    padding: 0 var(--spacing-xl);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.carousel-header h2 {
-    font-size: 1.6rem;
-    font-weight: 900;
-    color: var(--color-text-primary);
-    letter-spacing: -0.04em;
-    border-left: 4px solid var(--color-primary);
-    padding-left: var(--spacing-md);
-}
-
-.carousel-nav {
-    display: flex;
-    gap: var(--spacing-xs);
-}
-
-.carousel-arrow-mini {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    background: var(--color-bg-elevated);
-    border: var(--border-subtle);
-    border-radius: var(--radius-full);
-    color: var(--color-text-secondary);
-    cursor: pointer;
-    transition: all var(--transition-fast);
-}
-
-.carousel-arrow-mini:hover {
-    background: var(--color-primary);
-    border-color: var(--color-primary);
-    color: var(--color-text-primary);
-    box-shadow: var(--shadow-sm);
-}
-
-.carousel-arrow-mini[style*="opacity: 0.3"] {
-    background: var(--color-bg-elevated);
-    color: var(--color-text-muted);
-    border-color: var(--border-subtle);
-    box-shadow: none;
-}
-
-.episode-carousel-compact-list {
-    display: flex;
-    gap: var(--spacing-md);
-    padding: var(--spacing-sm) var(--spacing-xl);
-    overflow-x: auto;
-    scroll-snap-type: x mandatory;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-    mask-image: linear-gradient(
-            to right,
-            transparent,
-            black var(--spacing-md),
-            black calc(100% - var(--spacing-md)),
-            transparent
-    );
-}
-
-.episode-carousel-compact-list::-webkit-scrollbar {
-    display: none;
-}
-
-.carousel-item {
-    flex: 0 0 200px;
-    height: 112px;
-
-    background: var(--color-bg-card);
-    border: 2px solid var(--border-subtle);
-    border-radius: var(--radius-md);
-    overflow: hidden;
-    position: relative;
-    transition: all var(--transition-base);
-    text-decoration: none;
-    display: flex;
-    flex-direction: column;
-
-    scroll-snap-align: start;
-    box-shadow: var(--shadow-sm);
-}
-
-.carousel-item:hover {
-    border-color: var(--color-primary);
-    transform: scale(1.02);
-    box-shadow: var(--shadow-md), var(--shadow-glow);
-}
-
-.carousel-item.active-ep-carousel {
-    border-color: var(--color-primary);
-    background: rgba(139, 92, 246, 0.15);
-    box-shadow:
-            0 0 0 2px var(--color-primary),
-            var(--shadow-md);
-    transform: scale(1.02);
-}
-
-.carousel-item.active-ep-carousel::after {
-    content: "WATCHING";
-    position: absolute;
-    top: 0;
-    right: 0;
-    background: var(--color-primary);
-    color: var(--color-text-primary);
-    padding: 2px 8px;
-    font-size: 0.7rem;
-    font-weight: 800;
-    border-bottom-left-radius: var(--radius-sm);
-    letter-spacing: 0.05em;
-    z-index: 10;
-}
-
-.carousel-item-img-container {
-    height: 70px;
-    background: var(--color-bg-elevated);
-    overflow: hidden;
-    position: relative;
-}
-
-.carousel-item-img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    transition: transform var(--transition-smooth);
-    opacity: 0.8;
-}
-
-.carousel-item:hover .carousel-item-img {
-    transform: scale(1.1);
-    opacity: 1;
-}
-
-.carousel-item-info {
-    flex: 1;
-    padding: var(--spacing-xs) var(--spacing-sm);
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    background: var(--color-bg-elevated);
-}
-
-.carousel-item-info p {
-    font-size: 1rem;
-    font-weight: 600;
-    color: var(--color-text-primary);
-    margin: 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    letter-spacing: 0;
-    line-height: 1.2;
-}
-
-.carousel-item-info p::before {
-    content: attr(data-episode-number);
-    color: var(--color-primary);
-    font-weight: 800;
-    margin-right: var(--spacing-xs);
-    opacity: 0.7;
-}
-
-.carousel-item.no-thumbnail {
-    flex: 0 0 160px;
-    height: 90px;
-    background: var(--color-bg-elevated);
-    border: 2px solid var(--border-subtle);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: row;
-}
-
-.carousel-item.no-thumbnail .carousel-item-info {
-    padding: var(--spacing-sm);
-    background: transparent;
-    justify-content: center;
-}
-
-.carousel-item.no-thumbnail .carousel-item-info p {
-    color: var(--color-text-secondary);
-    font-size: 1.05rem;
-    font-weight: 700;
-    text-align: center;
-}
-
-.carousel-item.no-thumbnail:hover {
-    background: rgba(139, 92, 246, 0.12);
-    border-color: var(--color-primary);
-}
-
-.carousel-item.no-thumbnail.active-ep-carousel .carousel-item-info p {
-    color: var(--color-primary);
-}
-
-.anime-details,
-.anime-extra-content {
-    max-width: 1600px;
-    margin: var(--spacing-2xl) auto;
-}
-
-.details-container {
-    display: flex;
-    flex-direction: row;
-    gap: var(--spacing-xl);
-    background: var(--glass-bg);
-    backdrop-filter: blur(16px);
-    border: 1px solid var(--glass-border);
-    border-radius: var(--radius-lg);
-    padding: var(--spacing-xl);
-    box-shadow: var(--shadow-md);
-}
-
-.details-cover {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--spacing-md);
-    flex-shrink: 0;
-}
-
-.details-cover h1 {
-    font-size: 2.5rem;
-    font-weight: 900;
-    color: var(--color-text-primary);
-    line-height: 1.2;
-    margin: 0 0 var(--spacing-md) 0;
-    text-align: left;
-}
-
-.cover-image {
-    width: 220px;
-    border-radius: var(--radius-md);
-    box-shadow: var(--shadow-lg);
-}
-
-.details-content h1 {
-    font-size: 1.5rem;
-    font-weight: 800;
-    margin-bottom: var(--spacing-md);
-}
-
-.meta-badge {
-    background: rgba(139, 92, 246, 0.12);
-    color: var(--color-primary);
-    padding: 0.5rem 1rem;
-    border-radius: var(--radius-sm);
-    font-size: 0.875rem;
-    font-weight: 600;
-    border: 1px solid rgba(139, 92, 246, 0.2);
-}
-
-.meta-badge.meta-score {
-    background: var(--color-primary);
-    color: white;
-}
-.details-description {
-    font-size: 1rem;
-    line-height: 1.7;
-    color: var(--color-text-secondary);
-}
-
-.characters-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: var(--spacing-xl);
-}
-
-.characters-header h2 {
-    font-size: 1.75rem;
-    font-weight: 800;
-    color: var(--color-text-primary);
-    border-left: 5px solid var(--color-primary);
-    padding-left: var(--spacing-md);
-}
-
-.expand-btn {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-xs);
-    background: transparent;
-    border: none;
-    color: var(--color-primary);
-    font-weight: 600;
-    cursor: pointer;
-    font-size: 1rem;
-    padding: var(--spacing-xs);
-    border-radius: var(--radius-sm);
-}
-
-.expand-btn:hover {
-    background: rgba(139, 92, 246, 0.1);
-}
-.expand-btn svg {
-    transition: transform var(--transition-smooth);
-}
-.expand-btn[data-expanded="true"] svg {
-    transform: rotate(180deg);
-}
-
-.characters-carousel {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--spacing-lg);
-    align-content: flex-start;
-    overflow: hidden;
-
-    height: 208px;
-    transition: height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
-    padding: 0 var(--spacing-sm);
-
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-}
-
-.characters-carousel::-webkit-scrollbar {
-    display: none;
-}
-
-.characters-carousel.expanded {
-    height: auto;
-    max-height: 3200px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding: 0;
-
-    -ms-overflow-style: auto;
-    scrollbar-width: thin;
-}
-
-.characters-carousel.expanded::-webkit-scrollbar {
-    width: 6px;
-}
-
-.characters-carousel.expanded::-webkit-scrollbar-thumb {
-    background: rgba(139, 92, 246, 0.4);
-    border-radius: 3px;
-}
-
-.characters-carousel.expanded::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-.plyr--video {
-    border-radius: var(--radius-xl);
-}
-.plyr__controls {
-    background: linear-gradient(
-            to top,
-            rgba(0, 0, 0, 0.9) 0%,
-            rgba(0, 0, 0, 0.5) 50%,
-            transparent 100%
-    ) !important;
-    padding: 1rem 1.5rem 1.5rem !important;
-}
-.plyr--full-ui input[type="range"] {
-    color: var(--color-primary);
-}
-.plyr__control:hover {
-    background: rgba(255, 255, 255, 0.12) !important;
-}
-.plyr__menu__container {
-    background: var(--glass-bg) !important;
-    backdrop-filter: blur(16px);
-    border: 1px solid var(--glass-border);
-    box-shadow: var(--shadow-lg) !important;
-}
-
-@media (min-width: 1024px) {
-    .carousel-nav {
-        display: flex;
-    }
-    .watch-container {
-        padding-top: 5rem;
-    }
-
-    .details-cover {
-        align-items: center;
-        text-align: center;
-    }
-    .details-cover h1 {
-        text-align: center;
-        margin-bottom: var(--spacing-lg);
-    }
-}
-
-@media (max-width: 768px) {
-    .watch-container {
-        padding: 5rem 1rem 2rem 1rem;
-        margin: 0;
-        width: 100%;
-        overflow-x: hidden;
-    }
-
-    .player-toolbar {
-        flex-direction: column;
-        align-items: stretch;
-        gap: 1rem;
-        padding: 1rem;
-    }
-
-    .control-group {
-        justify-content: space-between;
-        width: 100%;
-    }
-
-    .source-select {
-        width: 100%;
-        background-position: right 1.5rem center;
-    }
-
-    .episode-controls {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 1.5rem;
-    }
-
-    .episode-info {
-        width: 100%;
-        text-align: left;
-    }
-
-    .episode-info h1 {
-        font-size: 1.4rem;
-        line-height: 1.3;
-    }
-
-    .navigation-buttons {
-        width: 100%;
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 0.8rem;
-    }
-
-    .nav-btn {
-        justify-content: center;
-        padding: 0.8rem;
-        width: 100%;
-    }
-
-    .details-container {
-        flex-direction: column;
-        padding: 1.5rem;
-        gap: 2rem;
-    }
-
-    .details-cover {
-        flex-direction: row;
-        align-items: flex-start;
-        width: 100%;
-        gap: 1.5rem;
-    }
-
-    @media (max-width: 480px) {
-        .details-cover {
-            flex-direction: column;
-            align-items: center;
-            text-align: center;
-        }
-
-        .details-cover h1 {
-            text-align: center;
-        }
-    }
-
-    .cover-image {
-        width: 140px;
-        flex-shrink: 0;
-        margin: 0 auto;
-    }
-
-    .details-content h1 {
-        font-size: 1.3rem;
-    }
-
-    .characters-carousel {
-        justify-content: center;
-        padding-bottom: 1rem;
-    }
-
-    .character-card {
-        width: calc(50% - 0.75rem);
-        flex: 0 0 calc(50% - 0.75rem);
-    }
-}
-
-.plyr__progress {
-    position: relative;
-}
-
-.plyr__markers {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 100%;
-    pointer-events: none;
-    z-index: 2;
-}
-
-.plyr__marker {
-    position: absolute;
-    bottom: 0;
-    width: 3px;
-    height: 100%;
-    background: rgba(255, 215, 0, 0.8); /* Color dorado para Opening */
-    pointer-events: all;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.plyr__marker[data-label*="Ending"] {
-    background: rgba(255, 100, 100, 0.8); /* Color rojo para Ending */
-}
-
-.plyr__marker:hover {
-    height: 120%;
-    width: 4px;
-    background: rgba(255, 215, 0, 1);
-}
-
-.plyr__marker[data-label*="Ending"]:hover {
-    background: rgba(255, 100, 100, 1);
-}
-
-/* Tooltip para mostrar el label */
-.plyr__marker::before {
-    content: attr(data-label);
-    position: absolute;
-    bottom: 100%;
-    left: 50%;
-    transform: translateX(-50%) translateY(-8px);
-    background: rgba(0, 0, 0, 0.9);
-    color: white;
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-size: 12px;
-    white-space: nowrap;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.2s ease;
-}
-
-.plyr__marker:hover::before {
-    opacity: 1;
-}
-.plyr__marker {
-    position: absolute;
-    height: 100%;
-    background: rgba(255, 255, 255, 0.35);
-    cursor: pointer;
-}

desktop/views/css/books/book.css

@@ -1,194 +1,228 @@
+:root {
+    --bg-card: rgba(255, 255, 255, 0.04);
+    --border-subtle: rgba(255, 255, 255, 0.1);
+    --color-primary: #8b5cf6;
+}
+
+/* --- BASICS --- */
 .back-btn {
-    position: fixed;
-    top: 2rem; left: 2rem; z-index: 100;
-    display: flex; align-items: center; gap: 0.5rem;
-    padding: 0.8rem 1.5rem;
-    background: var(--color-glass-bg); backdrop-filter: blur(12px);
-    border: var(--border-subtle); border-radius: var(--radius-full);
-    color: white; text-decoration: none; font-weight: 600;
-    transition: all 0.2s ease;
+    position: fixed; top: 2rem; left: 2rem; z-index: 100; display: flex; align-items: center; gap: 0.5rem;
+    padding: 0.8rem 1.5rem; background: var(--color-glass-bg); backdrop-filter: blur(12px);
+    border: var(--border-subtle); border-radius: 8px; /* Anime style */
+    color: white; text-decoration: none; font-weight: 600; transition: all 0.2s ease;
 }
 .back-btn:hover { background: rgba(255, 255, 255, 0.15); transform: translateX(-5px); }
 
-.hero-wrapper {
-    position: relative; width: 100%; height: 60vh; overflow: hidden;
-}
+.hero-wrapper { position: relative; width: 100%; height: 60vh; overflow: hidden; }
 .hero-background { position: absolute; inset: 0; z-index: 0; }
 .hero-background img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; filter: blur(8px); transform: scale(1.1); }
-.hero-overlay {
-    position: absolute; inset: 0; z-index: 1;
-    background: linear-gradient(to bottom, transparent 0%, var(--color-bg-base) 100%);
-}
+.hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, transparent 0%, var(--color-bg-base) 100%); }
 
 .content-container {
-    position: relative; z-index: 10;
-    max-width: 1600px; margin: -350px auto 0 auto;
+    position: relative; z-index: 10; max-width: 1400px; margin: -300px auto 0 auto;
     padding: 0 3rem 4rem 3rem;
-    display: grid;
-    grid-template-columns: 260px 1fr;
-    gap: 3rem;
-    align-items: flex-start;
-    animation: slideUp 0.8s ease;
 }
 
-.hero-content { display: none; }
-
-.sidebar {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-    position: sticky;
-    top: calc(var(--nav-height) + 2rem);
-    align-self: flex-start;
-    z-index: 20;
+/* --- HEADER SECTION --- */
+.book-header-section { margin-bottom: 4rem; max-width: 900px; }
+.book-title {
+    font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900;
+    margin-bottom: 0.5rem; text-shadow: 0 4px 30px rgba(0,0,0,0.6); line-height: 1.1;
 }
 
+.hero-meta-info {
+    display: flex; align-items: center; gap: 0.8rem;
+    color: rgba(255,255,255,0.7); font-weight: 600; margin-bottom: 1.2rem;
+    flex-wrap: wrap;
+}
+.meta-separator { color: rgba(255,255,255,0.3); font-size: 0.8rem; }
+
+.pill-local {
+    background: #22c55e; color: black; padding: 2px 8px;
+    border-radius: 4px; font-size: 0.75rem; font-weight: 900;
+}
+
+.hero-description-mini {
+    font-size: 1.05rem; line-height: 1.5; color: rgba(255,255,255,0.8);
+    margin-bottom: 1.2rem; max-width: 700px;
+    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
+}
+.hero-tags {
+    display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem;
+    color: rgba(255,255,255,0.5); font-weight: 500;
+}
+
+/* --- BUTTONS --- */
+.action-row { display: flex; align-items: center; gap: 1rem; }
+.btn-read {
+    padding: 0.8rem 2.2rem; background: white; color: black;
+    border-radius: 8px; font-weight: 800; border: none; cursor: pointer;
+    display: flex; align-items: center; gap: 0.6rem; transition: 0.2s ease;
+}
+.btn-read:hover { transform: scale(1.03); filter: brightness(0.9); }
+
+.btn-add-list {
+    padding: 0.8rem 1.5rem; background: rgba(255,255,255,0.1);
+    border: 1px solid rgba(255,255,255,0.2); color: white;
+    border-radius: 8px; font-weight: 700; cursor: pointer; transition: 0.2s;
+}
+.btn-add-list:hover { background: rgba(255,255,255,0.2); }
+
+
+/* --- MAIN LAYOUT --- */
+.main-layout { display: grid; grid-template-columns: 280px 1fr; gap: 4rem; margin-top: 2rem; }
+
+/* Sidebar */
+.poster-section { display: flex; flex-direction: column; gap: 1.5rem; }
 .poster-card {
-    width: 100%; aspect-ratio: 2/3; border-radius: var(--radius-lg);
-    overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.8);
-    border: 1px solid rgba(255,255,255,0.1);
-    background: #1a1a1a;
+    border-radius: 12px; overflow: hidden; width: 100%;
+    box-shadow: 0 30px 60px rgba(0,0,0,0.5); border: 1px solid var(--border-subtle);
 }
-.poster-card img { width: 100%; height: 100%; object-fit: cover; }
+.poster-card img { width: 100%; height: auto; display: block; aspect-ratio: 2/3; object-fit: cover; }
 
-.info-grid {
-    background: var(--color-bg-elevated); border: var(--border-subtle);
-    border-radius: var(--radius-md); padding: 1.25rem;
-    display: flex; flex-direction: column; gap: 1rem;
+/* Sidebar Extra Info (Synonyms) */
+.sidebar-extra-info {
+    background: rgba(255,255,255,0.03); padding: 1.5rem;
+    border-radius: 16px; border: 1px solid rgba(255,255,255,0.08);
 }
-.info-item h4 { margin: 0 0 0.25rem 0; font-size: 0.8rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
-.info-item span { font-weight: 600; font-size: 0.95rem; }
+.sidebar-label {
+    font-size: 0.8rem; color: #888; text-transform: uppercase; margin: 0 0 1rem 0; letter-spacing: 0.5px;
+}
+.synonyms-list {
+    list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem;
+}
+.synonyms-list li {
+    font-size: 0.9rem; color: #ddd; line-height: 1.4; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 0.5rem;
+}
+.synonyms-list li:last-child { border-bottom: none; }
 
-.main-content {
-    display: flex; flex-direction: column;
-    padding-top: 4rem;
-    justify-content: flex-start;
-}
 
-.book-header { margin-bottom: 1.5rem; }
-.book-title { font-size: 3.5rem; font-weight: 900; line-height: 1.1; margin: 0 0 1rem 0; text-shadow: 0 4px 30px rgba(0,0,0,0.8); }
+/* --- CONTENT COLUMN --- */
+.content-section { margin-top: 4rem; }
+h2, .subsection-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 1.5rem; color: white; }
 
-.meta-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
-.pill { padding: 0.4rem 1rem; background: rgba(255,255,255,0.1); border-radius: 99px; font-size: 0.9rem; font-weight: 600; border: var(--border-subtle); backdrop-filter: blur(10px); }
-.pill.score { background: rgba(34, 197, 94, 0.2); color: #4ade80; border-color: rgba(34, 197, 94, 0.2); }
+/* Chapters Section */
+.chapters-section { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1rem; }
+.chapters-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
 
-#description { display: none; }
-#year { display: none; }
+/* Chapter Controls */
+.chapter-controls { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
+.glass-select, .glass-input {
+    appearance: none; -webkit-appearance: none;
+    background-color: rgba(0, 0, 0, 0.4);
+    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='rgba(255,255,255,0.7)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9);
+    padding: 0.4rem 2rem 0.4rem 0.8rem; border-radius: 6px; font-size: 0.8rem; font-weight: 500; height: 34px;
+    outline: none; backdrop-filter: blur(4px); transition: all 0.2s ease; cursor: pointer; min-width: 110px;
+}
+.glass-input { background-image: none; padding: 0.4rem 0.8rem; width: 180px; }
+.glass-input:focus { border-color: var(--color-primary); width: 220px; }
+.glass-btn-icon { width: 34px; height: 34px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; }
+.glass-btn-icon:hover { background: var(--color-primary); border-color: var(--color-primary); }
 
-.action-row { display: flex; gap: 1rem; }
-.btn-primary {
-    padding: 0.8rem 2rem; background: white; color: black; border: none; border-radius: 99px;
-    font-weight: 800; cursor: pointer; transition: transform 0.2s;
+/* Chapters Grid */
+.chapters-grid { display: flex; flex-direction: column; gap: 0.5rem; }
+.chapter-item {
+    display: flex; align-items: center; justify-content: space-between;
+    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05);
+    padding: 0.8rem 1.2rem; border-radius: 8px;
+    transition: all 0.2s ease; cursor: pointer; position: relative; overflow: hidden;
 }
-.btn-primary:hover { transform: scale(1.05); }
+.chapter-item:hover { background: rgba(255, 255, 255, 0.08); transform: translateX(5px); border-color: rgba(255, 255, 255, 0.2); }
+.chapter-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--color-primary); opacity: 0; transition: opacity 0.2s; }
+.chapter-info { display: flex; flex-direction: column; gap: 0.2rem; }
+.chapter-number { font-size: 0.85rem; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; }
+.chapter-title { font-size: 1rem; font-weight: 500; color: white; }
+.chapter-meta { display: flex; align-items: center; gap: 1rem; font-size: 0.85rem; color: #888; }
+.lang-tag { font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,0.1); text-transform: uppercase; color: #ccc; }
 
-.btn-secondary {
-    padding: 0.8rem 2rem;
-    background: rgba(255,255,255,0.1);
-    color: white;
-    border: 1px solid rgba(255,255,255,0.2);
-    border-radius: 99px;
-    font-weight: 700;
-    cursor: pointer;
-    transition: 0.2s;
-    backdrop-filter: blur(10px);
-}
-.btn-secondary:hover {
-    background: rgba(255,255,255,0.2);
-}
 
-.btn-blur {
-    padding: 0.8rem 2rem;
-    background: rgba(255,255,255,0.1);
-    color: white;
-    border: 1px solid rgba(255,255,255,0.2);
-    border-radius: 99px;
-    font-weight: 700;
-    cursor: pointer;
-    transition: 0.2s;
-    backdrop-filter: blur(10px);
+/* --- RELATIONS (Horizontal Cards) --- */
+.relations-horizontal { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
+.relation-card-horizontal {
+    display: flex; background: var(--bg-card); border: 1px solid var(--border-subtle);
+    border-radius: 10px; overflow: hidden; transition: 0.2s; cursor: pointer;
 }
-.btn-blur:hover { background: rgba(255,255,255,0.2); }
+.relation-card-horizontal:hover { background: rgba(255,255,255,0.08); transform: translateX(5px); }
+.rel-img { width: 85px; height: 110px; object-fit: cover; }
+.rel-info { padding: 1rem; display: flex; flex-direction: column; justify-content: center; }
+.rel-type {
+    font-size: 0.7rem; color: var(--color-primary); font-weight: 800;
+    margin-bottom: 4px; background: rgba(139, 92, 246, 0.1); width: fit-content; padding: 2px 6px; border-radius: 4px;
+}
+.rel-title { font-size: 0.95rem; font-weight: 700; color: #eee; }
 
-.chapters-section { margin-top: 1rem; }
-.section-title { display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.8rem; margin-bottom: 1.5rem; }
-.section-title h2 { font-size: 1.5rem; margin: 0; border-left: 4px solid var(--color-primary); padding-left: 1rem; }
 
-.chapters-table-wrapper {
-    background: var(--color-bg-elevated); border-radius: var(--radius-md);
-    border: 1px solid rgba(255,255,255,0.05); overflow: hidden;
-}
-.chapters-table { width: 100%; border-collapse: collapse; text-align: left; }
-.chapters-table th {
-    padding: 0.8rem 1.2rem; background: rgba(255,255,255,0.03);
-    color: var(--color-text-secondary); font-weight: 600; font-size: 0.85rem;
-    text-transform: uppercase; letter-spacing: 0.5px;
-}
-.chapters-table td {
-    padding: 1rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,0.05);
-    color: var(--color-text-primary); font-size: 0.95rem;
-}
-.chapters-table tr:last-child td { border-bottom: none; }
-.chapters-table tr:hover { background: var(--color-bg-elevated-hover); }
+/* --- CHARACTERS (Grid Style) --- */
+.characters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 1rem; }
+.character-item { display: flex; align-items: center; gap: 1rem; }
+.char-avatar { width: 60px; height: 60px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
+.char-avatar img { width: 100%; height: 100%; object-fit: cover; }
+.char-info { display: flex; flex-direction: column; gap: 2px; }
+.char-name { font-size: 1rem; font-weight: 700; color: #fff; }
+.char-role { font-size: 0.8rem; color: #888; font-weight: 500; }
 
-.filter-select {
-    appearance: none;
-    -webkit-appearance: none;
-    background-color: var(--color-bg-elevated);
-    color: var(--color-text-primary);
-    border: 1px solid rgba(255,255,255,0.1);
-    padding: 0.5rem 2rem 0.5rem 1rem;
-    border-radius: 99px;
-    font-size: 0.9rem;
-    font-weight: 500;
-    cursor: pointer;
-    outline: none;
-    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: right 1rem center;
-}
-
-.filter-select:hover {
-    border-color: var(--color-primary);
-    background-color: var(--color-bg-elevated-hover);
-}
-
-.filter-select option {
-    background-color: var(--color-bg-elevated);
-    color: var(--color-text-primary);
-}
-
-.read-btn-small {
-    background: var(--color-primary); color: white; border: none;
-    padding: 0.4rem 0.9rem; border-radius: 6px; font-weight: 600; cursor: pointer;
-    font-size: 0.8rem; transition: 0.2s;
-}
-.read-btn-small:hover { background: #7c3aed; }
-
-.pagination-controls {
-    display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; align-items: center;
-}
-.page-btn {
-    background: var(--color-bg-elevated); border: 1px solid rgba(255,255,255,0.1);
-    color: white; padding: 0.5rem 1rem; border-radius: 8px; cursor: pointer; font-size: 0.9rem;
-}
+/* --- PAGINATION --- */
+.pagination-controls { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; align-items: center; }
+.page-btn { background: var(--color-bg-elevated); border: 1px solid rgba(255, 255, 255, 0.1); color: white; padding: 0.5rem 1rem; border-radius: 8px; cursor: pointer; font-size: 0.9rem; }
 .page-btn:disabled { opacity: 0.5; cursor: not-allowed; }
 .page-btn:hover:not(:disabled) { border-color: var(--color-primary); }
 
-@keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
 
 @media (max-width: 1024px) {
-    .hero-wrapper { height: 40vh; }
-    .content-container { grid-template-columns: 1fr; margin-top: -80px; padding: 0 1.5rem 4rem 1.5rem; }
-    .poster-card { display: none; }
-
-    .main-content { padding-top: 0; align-items: center; text-align: center; }
-    .book-title { font-size: 2.2rem; }
-    .meta-row { justify-content: center; }
-    .action-row { justify-content: center; width: 100%; }
-    .btn-primary, .btn-blur { flex: 1; justify-content: center; }
-
-    .sidebar { display: none; }
-    .chapters-table th:nth-child(3), .chapters-table td:nth-child(3) { display: none; }
-    .chapters-table th:nth-child(4), .chapters-table td:nth-child(4) { display: none; }
+    .content-container { margin-top: -150px; padding: 0 1.5rem; }
+    .main-layout { grid-template-columns: 1fr; gap: 2rem; }
+    .poster-section { display: flex; flex-direction: column; align-items: center; }
+    .poster-card { width: 220px; }
+    .metadata-sidebar { width: 100%; max-width: 400px; }
+}
+
+@media (max-width: 768px) {
+    .hero-wrapper { height: 40vh; }
+    .book-title { font-size: 2.5rem; }
+    .action-row { flex-direction: column; width: 100%; }
+    .btn-read, .btn-add-list { width: 100%; justify-content: center; }
+    .chapters-header { flex-direction: column; align-items: flex-start; }
+    .chapter-controls { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
+    .search-box { grid-column: span 2; }
+    .glass-input { width: 100%; }
+}
+
+.chapter-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    border-bottom: 1px solid rgba(255,255,255,0.1);
+}
+
+.chapter-actions {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+
+.download-btn {
+    background: transparent;
+    border: 1px solid rgba(255,255,255,0.3);
+    color: #ccc;
+    padding: 6px 10px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.download-btn:hover {
+    background: rgba(255,255,255,0.1);
+    border-color: #fff;
+    color: #fff;
+}
+
+.download-btn:disabled {
+    opacity: 0.7;
+    cursor: wait;
 }

desktop/views/css/books/reader.css

@@ -4,11 +4,15 @@
     --bg-hover: #252530;
 }
 
-.hidden { display: none !important; }
+.hidden {
+    display: none !important;
+}
 
 .top-bar {
     position: fixed;
-    top: 0; left: 0; right: 0;
+    top: 0;
+    left: 0;
+    right: 0;
     height: 64px;
     background: rgba(10, 10, 15, 0.85);
     backdrop-filter: blur(20px) saturate(180%);
@@ -107,7 +111,9 @@
     height: auto;
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-lg);
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    transition:
+            transform 0.2s ease,
+            box-shadow 0.2s ease;
     cursor: pointer;
     display: block;
 }
@@ -160,7 +166,9 @@
     box-shadow: var(--shadow-lg);
     object-fit: contain;
     cursor: pointer;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    transition:
+            transform 0.2s ease,
+            box-shadow 0.2s ease;
 }
 
 .double-container img:hover {
@@ -174,7 +182,7 @@
     padding: 3rem 2.5rem;
     line-height: var(--ln-line-height, 1.8);
     font-size: var(--ln-font-size, 18px);
-    font-family: var(--ln-font-family, 'Georgia', serif);
+    font-family: var(--ln-font-family, "Georgia", serif);
     color: var(--ln-text-color, #e5e7eb);
     text-align: var(--ln-text-align, left);
 }
@@ -183,7 +191,9 @@
     margin-bottom: 1.5em;
 }
 
-.ln-content h1, .ln-content h2, .ln-content h3 {
+.ln-content h1,
+.ln-content h2,
+.ln-content h3 {
     margin-top: 2em;
     margin-bottom: 1em;
     font-weight: 700;
@@ -297,7 +307,7 @@
 .control label span {
     color: var(--color-text-primary);
     font-weight: 600;
-    font-family: 'JetBrains Mono', monospace;
+    font-family: "JetBrains Mono", monospace;
     font-size: 0.8125rem;
 }
 
@@ -338,7 +348,9 @@ input[type="range"]::-moz-range-thumb {
     transition: all 0.2s;
 }
 
-select, input[type="color"], input[type="number"] {
+select,
+input[type="color"],
+input[type="number"] {
     width: 100%;
     padding: 0.625rem 0.875rem;
     border-radius: var(--radius-md);
@@ -350,11 +362,15 @@ select, input[type="color"], input[type="number"] {
     border: 1px solid var(--border-subtle);
 }
 
-select:hover, input[type="color"]:hover, input[type="number"]:hover {
+select:hover,
+input[type="color"]:hover,
+input[type="number"]:hover {
     border-color: var(--color-primary);
 }
 
-select:focus, input[type="color"]:focus, input[type="number"]:focus {
+select:focus,
+input[type="color"]:focus,
+input[type="number"]:focus {
     outline: none;
     border-color: var(--color-primary);
     box-shadow: 0 0 0 3px var(--color-primary-glow);
@@ -454,7 +470,9 @@ input[type="color"] {
 }
 
 @keyframes spin {
-    to { transform: rotate(360deg); }
+    to {
+        transform: rotate(360deg);
+    }
 }
 
 .loading-container {
@@ -545,3 +563,63 @@ input[type="color"] {
     margin: 0 auto;
     display: block;
 }
+
+@media (max-width: 768px) {
+    #reader {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+
+        padding-top: 64px;
+    }
+
+    .manga-container {
+        width: 100% !important;
+        max-width: 100% !important;
+        gap: 0 !important;
+    }
+
+    .page-img {
+        width: 100% !important;
+        max-width: 100% !important;
+        height: auto !important;
+        border-radius: 0 !important;
+        box-shadow: none !important;
+    }
+
+    .page-img.longstrip-fit {
+        width: 100% !important;
+        max-width: 100% !important;
+        margin: 0 !important;
+    }
+
+    .double-container {
+        flex-direction: column !important;
+        gap: 0 !important;
+        width: 100% !important;
+    }
+
+    .double-container img {
+        width: 100% !important;
+        max-width: 100% !important;
+        border-radius: 0 !important;
+    }
+
+    .fit-height,
+    .fit-screen {
+        width: 100% !important;
+        height: auto !important;
+        max-height: none !important;
+        max-width: 100% !important;
+        object-fit: contain !important;
+    }
+}
+
+.double-container.break-double {
+    display: block;
+}
+
+.double-container.break-double img {
+    width: 100%;
+    max-width: 100%;
+    display: block;
+}

desktop/views/css/components/anilist-modal.css

@@ -1,268 +1,279 @@
+:root {
+
+    --color-primary: #8b5cf6;
+    --bg-modal: rgba(15, 15, 15, 0.95);
+    --border-subtle: rgba(255, 255, 255, 0.1);
+    --input-bg: rgba(0, 0, 0, 0.4);
+}
+
 .modal-overlay {
     position: fixed;
     inset: 0;
-    background: rgba(0,0,0,0.9);
-    backdrop-filter: blur(10px);
+    background: rgba(0, 0, 0, 0.85);
+    backdrop-filter: blur(8px);
     z-index: 2000;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 1rem;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+}
+
+.modal-overlay.active {
+    opacity: 1;
+    visibility: visible;
 }
 
 .modal-content {
-    background: var(--color-bg-amoled);
-    border: 1px solid rgba(255,255,255,0.1);
-    border-radius: var(--radius-lg);
-    max-width: 900px;
+    background: var(--bg-modal);
+    border: 1px solid var(--border-subtle);
+    border-radius: 16px;
+    max-width: 850px;
     width: 95%;
-    padding: 0;
     position: relative;
-    animation: modalSlideUp 0.3s ease;
-    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
+    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.9),
+    0 0 0 1px rgba(255, 255, 255, 0.05);
     max-height: 90vh;
     display: flex;
     flex-direction: column;
+    transform: scale(0.95) translateY(10px);
+    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-@keyframes modalSlideUp {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+.modal-overlay.active .modal-content {
+    transform: scale(1) translateY(0);
 }
 
 .modal-close {
     position: absolute;
-    top: 1rem;
-    right: 1rem;
-    background: rgba(255,255,255,0.05);
-    border: 1px solid rgba(255,255,255,0.1);
-    color: white;
-    width: 36px;
-    height: 36px;
+    top: 1.2rem;
+    right: 1.2rem;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--border-subtle);
+    color: #ccc;
+    width: 32px;
+    height: 32px;
     border-radius: 8px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 1.2rem;
-    transition: 0.2s;
+    font-size: 1rem;
+    transition: all 0.2s;
     z-index: 2001;
 }
 
 .modal-close:hover {
-    background: var(--color-danger);
-    border-color: var(--color-danger);
+    background: #ef4444;
+    border-color: #ef4444;
+    color: white;
+    transform: rotate(90deg);
 }
 
 .modal-title {
-    font-size: 1.8rem;
+    font-size: 1.5rem;
     font-weight: 800;
-    padding: 1.5rem 2rem 0.5rem;
-    margin-bottom: 0;
-    color: var(--color-text-primary);
-    border-bottom: 1px solid rgba(255,255,255,0.05);
+    padding: 2rem 2.5rem 1rem 2.5rem;
+    margin: 0;
+    color: white;
+    border-bottom: 1px solid var(--border-subtle);
+    letter-spacing: -0.02em;
+    background: linear-gradient(to right, #fff, #aaa);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
 }
 
 .modal-body {
-    display: flex;
-    flex-direction: column;
+    padding: 0 2.5rem;
     overflow-y: auto;
-    padding: 0 2rem;
     flex-grow: 1;
+
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255,255,255,0.2) transparent;
 }
 
+.modal-body::-webkit-scrollbar { width: 6px; }
+.modal-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
+
 .modal-fields-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.5rem 2rem;
-    padding: 1.5rem 0;
+    padding: 2rem 0;
 }
 
 .form-group {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
-}
-
-.form-group.notes-group {
-    grid-column: 1 / span 2;
-}
-.form-group.checkbox-group {
-    grid-column: 3 / 4;
-    align-self: flex-end;
-    margin-bottom: 0.5rem;
-}
-.form-group.full-width {
-    grid-column: 1 / -1;
+    gap: 0.6rem;
 }
 
 .form-group label {
-    font-size: 0.8rem;
+    font-size: 0.75rem;
     font-weight: 700;
-    color: var(--color-text-secondary);
+    color: rgba(255, 255, 255, 0.6);
     text-transform: uppercase;
-    letter-spacing: 0.5px;
+    letter-spacing: 0.05em;
 }
 
 .form-input {
-    background: var(--color-bg-field);
-    border: 1px solid rgba(255,255,255,0.1);
-    color: var(--color-text-primary);
-    padding: 0.8rem 1rem;
-    border-radius: 8px;
+    background: var(--input-bg);
+    border: 1px solid var(--border-subtle);
+    color: white;
+    padding: 0.9rem 1rem;
+    border-radius: 10px;
     font-family: inherit;
-    font-size: 1rem;
-    transition: 0.2s;
+    font-size: 0.95rem;
+    font-weight: 500;
+    transition: all 0.2s ease;
 }
 
 .form-input:focus {
     outline: none;
+    background: rgba(0,0,0,0.6);
     border-color: var(--color-primary);
-    box-shadow: 0 0 10px var(--color-primary-glow);
+    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
 }
 
-.notes-textarea {
-    resize: vertical;
-    min-height: 100px;
-}
+.form-group.notes-group { grid-column: 1 / span 2; }
+.form-group.checkbox-group { grid-column: 3 / 4; align-self: end; margin-bottom: 0.8rem; }
+.form-group.full-width { grid-column: 1 / -1; }
+.notes-textarea { resize: vertical; min-height: 100px; line-height: 1.5; }
 
-.date-group {
-    display: flex;
-    gap: 1rem;
-}
-
-.date-input-pair {
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-}
+.date-group { display: flex; gap: 1.5rem; }
+.date-input-pair { flex: 1; display: flex; flex-direction: column; gap: 0.6rem; }
 
 .checkbox-group {
     flex-direction: row;
     align-items: center;
-    gap: 1rem;
+    background: rgba(255,255,255,0.02);
+    padding: 0.8rem;
+    border-radius: 8px;
+    border: 1px solid transparent;
+    transition: 0.2s;
 }
 
+.checkbox-group:hover { border-color: var(--border-subtle); }
+
 .form-checkbox {
-    width: 18px;
-    height: 18px;
-    border: 1px solid rgba(255,255,255,0.2);
-    background: var(--color-bg-base);
-    border-radius: 4px;
+    width: 20px;
+    height: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    background: transparent;
+    border-radius: 5px;
     cursor: pointer;
-    -webkit-appearance: none;
     appearance: none;
     position: relative;
-    transition: all 0.2s;
-    flex-shrink: 0;
+    transition: 0.2s;
 }
 
 .form-checkbox:checked {
     background: var(--color-primary);
     border-color: var(--color-primary);
+    box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
 }
 
 .form-checkbox:checked::after {
-    content: '✓';
+    content: "✓";
     position: absolute;
-    top: 50%;
-    left: 50%;
+    top: 50%; left: 50%;
     transform: translate(-50%, -50%);
     color: white;
-    font-size: 14px;
+    font-size: 12px;
+    font-weight: 900;
 }
 
 .modal-actions {
     display: flex;
     gap: 1rem;
-    margin-top: 0;
-    justify-content: flex-end;
-    flex-shrink: 0;
-    padding: 1rem 2rem;
-    border-top: 1px solid rgba(255,255,255,0.05);
-    background: var(--color-bg-amoled);
-    position: sticky;
-    bottom: 0;
-    z-index: 10;
+    padding: 1.5rem 2.5rem;
+    border-top: 1px solid var(--border-subtle);
+    background: rgba(10, 10, 10, 0.3);
+    border-bottom-left-radius: 16px;
+    border-bottom-right-radius: 16px;
+    backdrop-filter: blur(10px);
 }
 
 .btn-primary, .btn-secondary, .btn-danger {
-    padding: 0.8rem 1.5rem;
-    border-radius: 999px;
+    padding: 0.85rem 1.8rem;
+    border-radius: 10px;
     font-weight: 700;
-    font-size: 0.95rem;
+    font-size: 0.9rem;
     border: none;
     cursor: pointer;
-    transition: transform 0.2s, background 0.2s;
-    flex: none;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .btn-primary {
     background: var(--color-primary);
     color: white;
+    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
 }
 
 .btn-primary:hover {
-    transform: scale(1.05);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
+    filter: brightness(1.1);
 }
 
 .btn-secondary {
-    background: rgba(255,255,255,0.1);
-    color: white;
-    border: 1px solid rgba(255,255,255,0.2);
+    background: transparent;
+    border: 1px solid var(--border-subtle);
+    color: #ccc;
 }
 
 .btn-secondary:hover {
-    background: rgba(255,255,255,0.15);
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+    border-color: white;
 }
 
 .btn-danger {
-    background: var(--color-danger);
-    color: white;
+    background: rgba(239, 68, 68, 0.1);
+    color: #ef4444;
+    border: 1px solid rgba(239, 68, 68, 0.2);
     margin-right: auto;
 }
 
 .btn-danger:hover {
-    opacity: 0.9;
+    background: #ef4444;
+    color: white;
+    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
 }
 
-.modal-overlay {
-    display: none;
-    opacity: 0;
-}
-.modal-overlay.active {
-    display: flex;
-    opacity: 1;
-}
-
-@media (max-width: 900px) {
+@media (max-width: 768px) {
     .modal-content {
-        max-width: 95%;
+        width: 100%;
+        height: 100%;
+        max-height: 100vh;
+        border-radius: 0;
+        border: none;
     }
-    .modal-fields-grid {
-        grid-template-columns: repeat(2, 1fr);
-    }
-    .form-group.notes-group {
-        grid-column: 1 / -1;
-    }
-    .form-group.checkbox-group {
-        grid-column: 1 / -1;
-        align-self: auto;
-    }
-    .modal-actions {
-        padding: 1rem 1.5rem;
-    }
-    .modal-title, .modal-body {
-        padding-left: 1.5rem;
-        padding-right: 1.5rem;
-    }
-}
 
+    .modal-title { padding: 1.5rem 1.5rem 1rem; }
+    .modal-body { padding: 0 1.5rem; }
+    .modal-fields-grid { display: flex; flex-direction: column; gap: 1.2rem; }
+
+    .form-group, .form-group.notes-group,
+    .form-group.checkbox-group, .form-group.full-width {
+        grid-column: auto;
+        width: 100%;
+    }
+
+    .date-group { flex-direction: column; gap: 1rem; }
+    .modal-actions {
+        flex-direction: column;
+        gap: 0.8rem;
+        padding: 1.5rem;
+    }
+
+    .btn-primary, .btn-secondary, .btn-danger { width: 100%; padding: 1rem; }
+    .btn-primary { order: 1; }
+    .btn-secondary { order: 2; }
+    .btn-danger { order: 3; margin-top: 0.5rem; }
+}

desktop/views/css/components/local-library.css

@@ -1,132 +0,0 @@
-.library-mode-btn {
-    padding: 0.6rem 1.2rem;
-    background: rgba(255, 255, 255, 0.05);
-    border-radius: var(--radius-full);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    color: var(--color-text-secondary);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-weight: 600;
-    font-size: 0.9rem;
-    transition: all 0.2s;
-}
-
-.library-mode-btn:hover {
-    background: rgba(255, 255, 255, 0.1);
-    color: white;
-}
-
-.library-mode-btn.active {
-    background: var(--color-primary);
-    color: white;
-    border-color: var(--color-primary);
-}
-
-.library-mode-btn svg {
-    width: 18px;
-    height: 18px;
-}
-
-.local-library-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-    gap: 1.5rem;
-    padding: 1rem 0;
-}
-
-.local-card {
-    cursor: pointer;
-    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
-}
-
-.local-card:hover {
-    transform: translateY(-8px);
-}
-
-.local-card-info {
-    padding: 0.8rem 0;
-}
-
-.local-card-title {
-    font-size: 1rem;
-    font-weight: 600;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    margin-bottom: 0.5rem;
-}
-
-.match-status {
-    font-size: 0.85rem;
-    display: inline-block;
-    padding: 0.25rem 0.75rem;
-    border-radius: var(--radius-sm);
-}
-
-.status-linked {
-    background: rgba(34, 197, 94, 0.2);
-    color: var(--color-success);
-}
-
-.status-unlinked {
-    background: rgba(239, 68, 68, 0.2);
-    color: var(--color-danger);
-}
-
-.hidden {
-    display: none !important;
-}
-
-.skeleton-card {
-    width: 100%;
-    aspect-ratio: 2/3;
-    background: linear-gradient(90deg, #18181b 25%, #27272a 50%, #18181b 75%);
-    background-size: 200% 100%;
-    animation: shimmer 1.5s infinite;
-    border-radius: var(--radius-md);
-}
-
-@keyframes shimmer {
-    0% { background-position: 200% 0; }
-    100% { background-position: -200% 0; }
-}
-
-.hero-wrapper {
-    position: relative;
-}
-
-.library-mode-btn.icon-only {
-    position: absolute;
-    bottom: 2rem;
-    right: 2rem;
-    z-index: 50;
-}
-
-
-.hero-mode-switch .library-mode-btn {
-    backdrop-filter: blur(10px);
-}
-
-.local-filters {
-    display: flex;
-    gap: 1rem;
-    margin-bottom: 1rem;
-    flex-wrap: wrap;
-}
-
-.filter-btn {
-    padding: 0.4rem 0.9rem;
-    border-radius: 999px;
-    background: rgba(255,255,255,0.06);
-    border: 1px solid rgba(255,255,255,0.12);
-    color: #bbb;
-    cursor: pointer;
-}
-
-.filter-btn.active {
-    background: var(--color-primary);
-    color: white;
-    border-color: var(--color-primary);
-}

desktop/views/css/components/titlebar.css

@@ -25,6 +25,11 @@ html.electron .panel-header {
     top: var(--titlebar-height) !important;
 }
 
+html.electron .player-wrapper {
+    top: var(--titlebar-height);
+    height: calc(100% - var(--titlebar-height));
+}
+
 html.electron .panel-content {
     margin-top: 2rem;
 }

desktop/views/css/list.css

@@ -1,485 +0,0 @@
-.container {
-    max-width: 1600px;
-    margin: 0 auto;
-    padding: 3rem;
-}
-
-.header-section {
-    margin-bottom: 3rem;
-    margin-top: 3rem;
-}
-
-.page-title {
-    font-size: 3rem;
-    font-weight: 900;
-    margin-bottom: 2rem;
-    background: linear-gradient(135deg, var(--color-primary), #a78bfa);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-}
-
-.stats-row {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 1.5rem;
-}
-
-.stat-card {
-    background: var(--color-bg-elevated);
-    border: 1px solid rgba(255,255,255,0.1);
-    border-radius: var(--radius-lg);
-    padding: 1.5rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    transition: transform 0.3s, box-shadow 0.3s;
-    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
-}
-
-.stat-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 15px 35px var(--color-primary-glow);
-}
-
-.stat-value {
-    font-size: 2.5rem;
-    font-weight: 900;
-    color: var(--color-primary);
-}
-
-.stat-label {
-    font-size: 0.9rem;
-    color: var(--color-text-secondary);
-    font-weight: 600;
-}
-
-/* --- Filtros mejorados --- */
-.filters-section {
-    display: flex;
-    gap: 1.5rem;
-    margin-bottom: 2rem;
-    padding: 1.5rem;
-    background: var(--color-bg-elevated);
-    border-radius: var(--radius-md);
-    border: 1px solid rgba(255,255,255,0.05);
-    flex-wrap: wrap;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
-}
-
-.filter-group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    flex: 1;
-    min-width: 150px;
-}
-
-.filter-group label {
-    font-size: 0.8rem;
-    font-weight: 700;
-    color: var(--color-text-secondary);
-    text-transform: uppercase;
-    letter-spacing: 1px;
-}
-
-.filter-select {
-    background: var(--color-bg-base);
-    border: 1px solid rgba(255,255,255,0.1);
-    color: var(--color-text-primary);
-    padding: 0.7rem 1rem;
-    border-radius: 8px;
-    font-family: inherit;
-    cursor: pointer;
-    transition: 0.2s;
-    -webkit-appearance: none;
-    appearance: none;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23a1a1aa'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: right 0.7rem center;
-    background-size: 1.2em;
-    padding-right: 2.5rem;
-}
-
-.filter-select:hover {
-    border-color: var(--color-primary);
-}
-
-.filter-select:focus {
-    outline: none;
-    border-color: var(--color-primary);
-    box-shadow: 0 0 10px var(--color-primary-glow);
-}
-
-.view-toggle {
-    display: flex;
-    gap: 0.5rem;
-}
-
-.view-btn {
-    background: var(--color-bg-base);
-    border: 1px solid rgba(255,255,255,0.1);
-    color: var(--color-text-secondary);
-    padding: 0.7rem;
-    border-radius: 8px;
-    cursor: pointer;
-    transition: 0.2s;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.view-btn:hover {
-    border-color: var(--color-primary);
-    color: white;
-}
-
-.view-btn.active {
-    background: var(--color-primary);
-    border-color: var(--color-primary);
-    color: white;
-}
-
-.loading-state {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 5rem 0;
-    gap: 1.5rem;
-}
-
-.spinner {
-    width: 50px;
-    height: 50px;
-    border: 4px solid rgba(139, 92, 246, 0.1);
-    border-top-color: var(--color-primary);
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-    to { transform: rotate(360deg); }
-}
-
-.empty-state {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 5rem 0;
-    gap: 1.5rem;
-    color: var(--color-text-secondary);
-}
-
-.empty-state svg {
-    opacity: 0.3;
-}
-
-.empty-state h2 {
-    font-size: 1.8rem;
-    color: var(--color-text-primary);
-}
-
-.list-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
-    gap: 2rem;
-}
-
-.list-grid.list-view {
-    grid-template-columns: 1fr;
-    gap: 1rem;
-}
-
-.list-item {
-    background: var(--color-bg-elevated-hover);
-    border: 1px solid rgba(255,255,255,0.08);
-    border-radius: var(--radius-md);
-    overflow: hidden;
-    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
-}
-
-.list-item:hover {
-    transform: translateY(-8px);
-    border-color: var(--color-primary);
-    box-shadow: 0 15px 30px var(--color-primary-glow);
-}
-
-.list-grid.list-view .list-item {
-    flex-direction: row;
-    align-items: center;
-    padding-right: 1rem;
-    transition: all 0.3s ease;
-}
-
-.list-grid.list-view .list-item:hover {
-    transform: none;
-    box-shadow: 0 4px 20px var(--color-primary-glow);
-}
-
-.item-poster-link {
-    display: block;
-    cursor: pointer;
-    flex-shrink: 0;
-}
-
-.item-poster {
-    width: 100%;
-    aspect-ratio: 2/3;
-    object-fit: cover;
-    background: #222;
-}
-
-.list-grid.list-view .item-poster {
-    /* Cambiar el ancho y alto */
-    width: 120px; /* Antes: 100px */
-    height: 180px; /* Antes: 150px */
-    aspect-ratio: auto;
-    border-radius: 8px;
-    margin: 1rem;
-}
-
-.item-content {
-    padding: 1rem; /* Antes: 1.2rem */
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    justify-content: space-between;
-}
-
-.list-grid.list-view .item-content {
-    padding: 1rem 0;
-    flex-direction: row;
-    align-items: center;
-}
-.list-grid.list-view .item-content > div:first-child {
-    flex-basis: 75%;
-}
-
-.item-title {
-    font-size: 1rem; /* Antes: 1.1rem */
-    font-weight: 800;
-    margin-bottom: 0.5rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    color: white;
-}
-
-.list-grid.list-view .item-title {
-    font-size: 1.3rem;
-    white-space: normal;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 400px;
-}
-
-.item-meta {
-    display: flex;
-    gap: 0.3rem; /* Antes: 0.75rem. Espacio entre los pills */
-    margin-bottom: 0.5rem; /* Antes: 0.8rem */
-    flex-wrap: wrap;
-    /* Añadir: Asegura que si se envuelven, lo hagan con poco margen vertical */
-    line-height: 1.4;
-}
-
-.meta-pill {
-    font-size: 0.65rem; /* Antes: 0.7rem */
-    padding: 0.15rem 0.4rem; /* Antes: 0.25rem 0.6rem. Reduce el padding interno */
-    border-radius: 999px;
-    font-weight: 700;
-    white-space: nowrap;
-    text-transform: uppercase;
-}
-
-.status-pill {
-    background: rgba(34, 197, 94, 0.2);
-    color: var(--color-success);
-    border: 1px solid rgba(34, 197, 94, 0.3);
-}
-
-.type-pill {
-    background: rgba(139, 92, 246, 0.15);
-    color: var(--color-primary);
-    border: 1px solid rgba(139, 92, 246, 0.3);
-}
-
-.source-pill {
-    background: rgba(255, 255, 255, 0.1);
-    color: var(--color-text-primary);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.repeat-pill {
-    background: rgba(59, 130, 246, 0.15);
-    color: #3b82f6;
-    border: 1px solid rgba(59, 130, 246, 0.3);
-    text-transform: none;
-}
-.private-pill {
-    background: rgba(251, 191, 36, 0.15);
-    color: #facc15;
-    border: 1px solid rgba(251, 191, 36, 0.3);
-    text-transform: none;
-}
-
-.progress-bar-container {
-    background: rgba(255,255,255,0.08);
-    border-radius: 999px;
-    height: 10px;
-    overflow: hidden;
-    margin-bottom: 0.5rem;
-    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
-}
-
-.progress-bar {
-    height: 100%;
-    background: linear-gradient(90deg, var(--color-primary), #a78bfa);
-    border-radius: 999px;
-    transition: width 0.3s;
-}
-
-.progress-text {
-    font-size: 0.9rem;
-    color: var(--color-text-secondary);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-weight: 500;
-}
-
-.score-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.3rem;
-    font-weight: 700;
-    color: #facc15;
-    background: rgba(250, 204, 21, 0.1);
-    padding: 0.1rem 0.5rem;
-    border-radius: 4px;
-}
-
-/* --- Botón de edición flotante --- */
-.edit-icon-btn {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    z-index: 50;
-    background: rgba(18, 18, 21, 0.9);
-    backdrop-filter: blur(8px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    color: white;
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    transition: opacity 0.3s, transform 0.2s, background 0.2s;
-}
-
-.list-item:hover .edit-icon-btn {
-    opacity: 1;
-    transform: scale(1.05);
-}
-
-.edit-icon-btn:hover {
-    background: var(--color-primary);
-    border-color: var(--color-primary);
-}
-
-.list-grid.list-view .edit-icon-btn {
-    position: relative;
-    top: auto;
-    right: auto;
-    margin-left: auto;
-    opacity: 1;
-    transform: none;
-    background: var(--color-bg-elevated);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-}
-.list-grid.list-view .list-item:hover .edit-icon-btn {
-    opacity: 1;
-    background: var(--color-primary);
-    border-color: var(--color-primary);
-    transform: none;
-}
-
-/* --- Modal de Edición Mejorado (Estilo Anilist + AMOLED) --- */
-
-@media (max-width: 550px) {
-    /* Layout de lista (card view) */
-    .list-grid {
-        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    }
-    .list-grid.list-view .list-item {
-        flex-direction: column;
-        align-items: flex-start;
-        padding-right: 0;
-    }
-    .list-grid.list-view .item-poster {
-        width: 100%;
-        height: auto;
-        margin: 0;
-        border-radius: 0;
-        aspect-ratio: 16/9;
-    }
-    .list-grid.list-view .item-content {
-        flex-direction: column;
-        padding: 1rem;
-    }
-    .list-grid.list-view .item-content > div:first-child {
-        flex-basis: auto;
-    }
-    .list-grid.list-view .edit-icon-btn {
-        position: absolute;
-        top: 1rem;
-        right: 1rem;
-        opacity: 1;
-        background: rgba(18, 18, 21, 0.8);
-    }
-
-    /* Modal en móvil */
-    .modal-content {
-        margin: 0.5rem;
-        width: auto;
-    }
-    .modal-fields-grid {
-        grid-template-columns: 1fr;
-        gap: 1rem;
-        padding-bottom: 0;
-    }
-    .form-group.notes-group,
-    .form-group.checkbox-group {
-        grid-column: auto;
-    }
-    .modal-actions {
-        flex-direction: column;
-        align-items: stretch;
-    }
-    .btn-danger {
-        margin-right: 0;
-        order: 3;
-    }
-    .btn-secondary {
-        order: 2;
-    }
-    .btn-primary {
-        order: 1;
-    }
-}
-
-.edit-btn-card {
-    display: none;
-}
-
-.item-poster-link {
-    z-index: 1;
-}

desktop/views/css/profile.css

@@ -0,0 +1,707 @@
+/* =========================================
+   1. LAYOUT & ESTRUCTURA BASE
+   ========================================= */
+.main-wrapper {
+    width: 100%;
+    min-height: 100vh;
+    padding-bottom: 6rem;
+    position: relative;
+    overflow-x: hidden;
+}
+
+/* Efecto de fondo ambiental (Glow superior) */
+.main-wrapper::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    height: 60vh;
+    background: radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.15), transparent 70%);
+    z-index: -1;
+    pointer-events: none;
+}
+
+.content-container {
+    max-width: 1600px;
+    margin: 0 auto;
+    padding: 0 3rem;
+    animation: fadeInUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+@keyframes fadeInUp {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* =========================================
+   2. PERFIL (Modern Header)
+   ========================================= */
+.profile-header {
+    background: var(--color-bg-elevated, #18181b);
+    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.05));
+    padding-bottom: 0;
+    margin-bottom: 2rem;
+    position: relative;
+}
+
+.profile-banner {
+    height: 200px;
+    background: linear-gradient(120deg, #2e1065, #8b5cf6);
+    width: 100%;
+    position: relative;
+}
+
+.profile-body {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 0 3rem;
+    display: flex;
+    align-items: flex-end;
+    gap: 2rem;
+    margin-top: -60px; /* Superposición sobre el banner */
+    position: relative;
+    z-index: 2;
+}
+
+/* Avatar */
+.profile-avatar-wrapper {
+    position: relative;
+    width: 160px;
+    height: 160px;
+    flex-shrink: 0;
+}
+
+.avatar-img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border: 5px solid var(--color-bg-base, #09090b);
+    object-fit: cover;
+    background: var(--color-bg-elevated, #18181b);
+}
+
+.avatar-edit-overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(0,0,0,0.5);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    opacity: 0;
+    cursor: pointer;
+    transition: 0.2s;
+    border: 5px solid transparent;
+}
+
+.profile-avatar-wrapper:hover .avatar-edit-overlay {
+    opacity: 1;
+}
+
+/* Detalles de Texto y Badges */
+.profile-details {
+    flex-grow: 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding-bottom: 1rem;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.username-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.profile-text h1 {
+    font-size: 2.5rem;
+    margin: 0;
+    line-height: 1.2;
+}
+
+.header-anilist-badge {
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    overflow: hidden;
+    transition: transform 0.2s, box-shadow 0.2s;
+    display: flex;
+}
+
+.header-anilist-badge img { width: 100%; height: 100%; object-fit: cover; }
+.header-anilist-badge:hover { transform: scale(1.1); box-shadow: 0 0 15px rgba(61, 180, 242, 0.5); }
+
+/* Estadísticas */
+.profile-stats-grid { display: flex; gap: 1.5rem; }
+
+.stat-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: rgba(255,255,255,0.03);
+    padding: 0.5rem 1.5rem;
+    border-radius: 12px;
+    border: 1px solid rgba(255,255,255,0.05);
+}
+
+.stat-value { font-size: 1.4rem; font-weight: 800; color: white; }
+.stat-label { font-size: 0.8rem; color: var(--color-text-secondary, #a1a1aa); text-transform: uppercase; letter-spacing: 0.5px; }
+
+/* Responsive Profile */
+@media (max-width: 900px) {
+    .profile-body { flex-direction: column; align-items: center; margin-top: -100px; text-align: center; }
+    .profile-details { flex-direction: column; align-items: center; width: 100%; }
+    .profile-stats-grid { justify-content: center; width: 100%; }
+    .username-wrapper { justify-content: center; }
+}
+
+/* =========================================
+   3. NAVEGACIÓN (Pills Modernos)
+   ========================================= */
+.hub-navigation-modern {
+    display: flex;
+    gap: 1rem;
+    max-width: 1400px;
+    margin: 1rem auto 0 auto;
+    padding: 0 3rem 1rem 3rem;
+}
+
+.nav-pill {
+    background: transparent;
+    border: none;
+    color: var(--color-text-secondary, #a1a1aa);
+    padding: 0.6rem 1.2rem;
+    font-size: 0.95rem;
+    font-weight: 600;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: 0.2s;
+}
+
+.nav-pill:hover { background: rgba(255,255,255,0.05); color: white; }
+.nav-pill.active { background: var(--color-primary, #8b5cf6); color: white; }
+
+@media (max-width: 768px) {
+    .hub-navigation-modern { justify-content: center; padding-left: 1rem; padding-right: 1rem; flex-wrap: wrap; }
+}
+
+.tab-section {
+    display: none;
+    opacity: 0;
+    transform: translateY(10px);
+    transition: opacity 0.3s, transform 0.3s;
+}
+
+.tab-section.active {
+    display: block;
+    opacity: 1;
+    transform: translateY(0);
+}
+
+/* =========================================
+   4. TOOLBAR & CONTROLES
+   ========================================= */
+.toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2.5rem;
+    background: rgba(255,255,255,0.03);
+    border: 1px solid rgba(255,255,255,0.05);
+    padding: 0.75rem 1rem;
+    border-radius: 12px;
+    backdrop-filter: blur(5px);
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+/* Local Toolbar Variant */
+.toolbar.local-toolbar {
+    display: grid;
+    grid-template-columns: 1fr auto auto;
+    gap: 1.5rem;
+}
+
+.search-box {
+    position: relative;
+    flex-grow: 1;
+    max-width: 400px;
+}
+
+.search-box svg {
+    position: absolute;
+    left: 14px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--color-text-muted, #71717a);
+    pointer-events: none;
+}
+
+.search-input {
+    width: 100%;
+    background: rgba(0,0,0,0.2);
+    border: 1px solid transparent;
+    padding: 0.7rem 1rem 0.7rem 2.8rem;
+    border-radius: 8px;
+    color: white;
+    font-family: inherit;
+    font-size: 0.95rem;
+    transition: all 0.2s;
+}
+
+.search-input:focus {
+    background: rgba(0,0,0,0.4);
+    border-color: var(--color-primary, #8b5cf6);
+    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
+}
+
+.filters-inline {
+    display: flex;
+    gap: 0.8rem;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.minimal-select {
+    background: rgba(255,255,255,0.05);
+    border: 1px solid rgba(255,255,255,0.08);
+    color: var(--color-text-secondary, #a1a1aa);
+    padding: 0.6rem 2rem 0.6rem 1rem;
+    border-radius: 8px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.9rem;
+    font-weight: 500;
+    transition: 0.2s;
+    appearance: none;
+    -webkit-appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a1a1aa'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0.7rem center;
+    background-size: 1rem;
+}
+
+.minimal-select:hover { background: rgba(255,255,255,0.1); color: white; }
+.minimal-select:focus { border-color: var(--color-primary, #8b5cf6); color: white; }
+
+.view-toggle {
+    display: flex;
+    background: rgba(0,0,0,0.3);
+    border-radius: 8px;
+    padding: 2px;
+}
+
+.view-btn {
+    background: transparent;
+    border: none;
+    color: var(--color-text-muted, #71717a);
+    padding: 0.5rem 0.8rem;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 1.1rem;
+    line-height: 1;
+}
+
+.view-btn.active, .view-btn:hover { background: rgba(255,255,255,0.1); color: white; }
+
+/* Switcher Local (Segmented Control) */
+.local-type-switcher {
+    display: flex;
+    background: rgba(0,0,0,0.3);
+    padding: 4px;
+    border-radius: 10px;
+    border: 1px solid rgba(255,255,255,0.05);
+}
+
+.type-pill-btn {
+    background: transparent;
+    border: none;
+    color: var(--color-text-secondary, #a1a1aa);
+    padding: 0.5rem 1.2rem;
+    font-size: 0.9rem;
+    font-weight: 600;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.type-pill-btn:hover { color: white; }
+.type-pill-btn.active {
+    background: var(--color-bg-elevated, #18181b);
+    color: white;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+/* Action Buttons (Scan) */
+.actions-group {
+    display: flex;
+    gap: 0.5rem;
+    border-left: 1px solid rgba(255,255,255,0.1);
+    padding-left: 1.5rem;
+}
+
+.action-icon-btn {
+    background: rgba(255,255,255,0.05);
+    border: 1px solid rgba(255,255,255,0.1);
+    color: var(--color-text-secondary, #a1a1aa);
+    width: 40px; height: 40px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: 0.2s;
+}
+
+.action-icon-btn:hover { background: var(--color-primary, #8b5cf6); border-color: var(--color-primary, #8b5cf6); color: white; }
+.action-icon-btn.danger:hover { background: rgba(239, 68, 68, 0.2); border-color: #ef4444; color: #ef4444; }
+
+@media (max-width: 768px) {
+    .toolbar { flex-direction: column; align-items: stretch; }
+    .toolbar.local-toolbar { grid-template-columns: 1fr; gap: 1rem; }
+    .actions-group { border-left: none; padding-left: 0; justify-content: flex-end; }
+    .local-type-switcher, .type-pill-btn { width: 100%; flex: 1; }
+    .search-box { max-width: 100%; }
+    .filters-inline { justify-content: space-between; }
+    .minimal-select { flex: 1; }
+}
+
+/* =========================================
+   5. LIST GRID (Cards)
+   ========================================= */
+.list-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 2rem 1.5rem;
+}
+
+.list-item {
+    position: relative;
+    border-radius: 8px;
+    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s;
+    cursor: pointer;
+}
+
+.list-item:hover { transform: scale(1.05); z-index: 10; }
+
+.item-poster-link {
+    display: block;
+    position: relative;
+    border-radius: 8px;
+    overflow: hidden;
+    aspect-ratio: 2/3;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
+}
+
+.item-poster {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: filter 0.3s;
+}
+
+.list-item:hover .item-poster { filter: brightness(1.1); }
+
+.item-content { padding-top: 0.8rem; }
+
+.item-title {
+    font-size: 0.95rem;
+    font-weight: 700;
+    margin: 0 0 0.4rem 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: rgba(255,255,255,0.9);
+}
+
+.list-item:hover .item-title { color: var(--color-primary, #8b5cf6); }
+
+.item-meta {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    margin-bottom: 0.5rem;
+}
+
+.meta-pill {
+    font-size: 0.65rem;
+    padding: 0.15rem 0.4rem;
+    border-radius: 4px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.status-pill { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
+.type-pill { background: rgba(255, 255, 255, 0.1); color: #e4e4e7; }
+.source-pill { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
+.repeat-pill { background: rgba(234, 179, 8, 0.15); color: #facc15; }
+.private-pill { background: rgba(239, 68, 68, 0.15); color: #f87171; }
+
+.progress-bar-container {
+    height: 4px;
+    background: rgba(255,255,255,0.1);
+    border-radius: 2px;
+    margin-bottom: 0.4rem;
+    overflow: hidden;
+}
+
+.progress-bar {
+    height: 100%;
+    background: var(--color-primary, #8b5cf6);
+    border-radius: 2px;
+}
+
+.progress-text {
+    font-size: 0.8rem;
+    color: var(--color-text-secondary, #a1a1aa);
+    display: flex;
+    justify-content: space-between;
+}
+
+/* Edit Button (Hover) */
+.edit-icon-btn {
+    position: absolute;
+    top: 10px; right: 10px;
+    background: rgba(0,0,0,0.7);
+    backdrop-filter: blur(4px);
+    border: 1px solid rgba(255,255,255,0.2);
+    color: white;
+    width: 32px; height: 32px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transform: translateY(-5px);
+    transition: all 0.2s;
+    z-index: 20;
+    cursor: pointer;
+}
+
+.list-item:hover .edit-icon-btn { opacity: 1; transform: translateY(0); }
+.edit-icon-btn:hover { background: var(--color-primary, #8b5cf6); border-color: var(--color-primary, #8b5cf6); }
+
+/* Badges adicionales */
+.unmatched-badge {
+    position: absolute;
+    top: 10px; left: 10px;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(4px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 4px 8px;
+    border-radius: 6px;
+    font-size: 0.7rem;
+    font-weight: 700;
+    color: #fbbf24;
+    display: flex; align-items: center; gap: 4px;
+}
+
+.folder-path-tooltip {
+    font-size: 0.75rem;
+    color: var(--color-text-muted, #71717a);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-top: 0.2rem;
+}
+
+/* --- LIST VIEW MODE --- */
+.list-grid.list-view { grid-template-columns: 1fr; gap: 1rem; }
+
+.list-grid.list-view .list-item {
+    display: flex;
+    align-items: center;
+    background: var(--color-bg-elevated, #18181b);
+    padding: 1rem;
+    border: 1px solid rgba(255,255,255,0.05);
+}
+
+.list-grid.list-view .list-item:hover {
+    transform: scale(1.01);
+    border-color: var(--color-primary, #8b5cf6);
+}
+
+.list-grid.list-view .item-poster-link { width: 60px; aspect-ratio: 2/3; margin-right: 1.5rem; flex-shrink: 0; }
+.list-grid.list-view .item-content { padding-top: 0; flex-grow: 1; display: flex; align-items: center; justify-content: space-between; }
+.list-grid.list-view .item-title { font-size: 1.1rem; margin-bottom: 0.2rem; }
+.list-grid.list-view .edit-icon-btn { position: static; opacity: 1; transform: none; background: transparent; border: 1px solid rgba(255,255,255,0.1); }
+
+/* =========================================
+   6. CONFIGURACIÓN (Stream Style)
+   ========================================= */
+.stream-settings-container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding-top: 1rem;
+    color: #e5e5e5;
+}
+
+.stream-section {
+    margin-bottom: 2.5rem;
+    padding-bottom: 2.5rem;
+    border-bottom: 1px solid rgba(255,255,255,0.1);
+}
+
+.stream-section.no-border { border-bottom: none; }
+
+.section-label {
+    font-size: 1.1rem;
+    color: #a1a1aa;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: 1.5rem;
+    font-weight: 600;
+}
+
+/* Row de Perfil */
+.stream-profile-row { display: flex; gap: 3rem; align-items: flex-start; }
+
+.stream-avatar-wrapper {
+    position: relative;
+    width: 120px; height: 120px;
+    border-radius: 8px;
+    overflow: hidden;
+    flex-shrink: 0;
+    background: #27272a;
+}
+
+.stream-avatar-wrapper img { width: 100%; height: 100%; object-fit: cover; }
+
+.avatar-overlay {
+    position: absolute; inset: 0;
+    background: rgba(0,0,0,0.6);
+    display: flex; align-items: center; justify-content: center;
+    opacity: 0; cursor: pointer; transition: 0.2s;
+    font-weight: 600; text-transform: uppercase; font-size: 0.8rem;
+}
+
+.stream-avatar-wrapper:hover .avatar-overlay { opacity: 1; }
+
+.stream-inputs-col { flex-grow: 1; display: flex; flex-direction: column; gap: 1.5rem; }
+
+/* Formularios */
+.stream-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: end; }
+
+.stream-input-group { display: flex; flex-direction: column; gap: 0.5rem; }
+.stream-input-group label { font-size: 0.85rem; color: #d4d4d8; font-weight: 500; }
+
+.stream-input {
+    background: #27272a;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    padding: 0.8rem 1rem;
+    color: white;
+    font-size: 1rem;
+    transition: 0.2s;
+}
+
+.stream-input:focus { background: #3f3f46; outline: none; border-color: var(--color-primary, #8b5cf6); }
+
+/* Botones Settings */
+.stream-actions { margin-top: 0.5rem; }
+
+.btn-stream-primary {
+    background: white; color: black;
+    border: none; padding: 0.7rem 2rem;
+    font-weight: 700; border-radius: 4px;
+    cursor: pointer; transition: 0.2s;
+}
+.btn-stream-primary:hover { background: #d4d4d8; }
+
+.btn-stream-ghost {
+    background: transparent; border: 1px solid #52525b;
+    color: white; padding: 0.75rem 1.5rem;
+    border-radius: 4px; cursor: pointer;
+    font-weight: 600; height: 46px;
+}
+.btn-stream-ghost:hover { border-color: white; background: rgba(255,255,255,0.05); }
+
+/* Integraciones */
+.stream-integration-row {
+    display: flex; justify-content: space-between; align-items: center;
+    background: rgba(255,255,255,0.03);
+    padding: 1rem 1.5rem;
+    border-radius: 6px;
+}
+
+.int-info { display: flex; align-items: center; gap: 1rem; }
+.int-logo { width: 32px; height: 32px; }
+.int-text { display: flex; flex-direction: column; }
+.int-name { font-weight: 700; font-size: 1rem; }
+.int-status { font-size: 0.85rem; color: #a1a1aa; }
+
+.btn-stream-outline {
+    background: transparent; border: none;
+    color: var(--color-primary, #8b5cf6);
+    font-weight: 600; cursor: pointer; font-size: 0.95rem;
+}
+.btn-stream-outline:hover { text-decoration: underline; }
+.btn-danger-outline { color: #ef4444; border: 1px solid #ef4444; padding: 0.5rem 1rem; border-radius: 4px; }
+
+.link-danger {
+    background: transparent; border: none;
+    color: #ef4444; font-size: 1rem;
+    cursor: pointer; padding: 0;
+    text-decoration: underline; opacity: 0.8;
+}
+.link-danger:hover { opacity: 1; }
+
+@media (max-width: 768px) {
+    .stream-profile-row { flex-direction: column; align-items: center; text-align: center; gap: 2rem; }
+    .stream-form-row { grid-template-columns: 1fr; }
+    .btn-stream-ghost { width: 100%; }
+    .stream-actions { display: flex; justify-content: center; }
+}
+
+/* =========================================
+   7. UTILIDADES & ESTADOS (Loading/Console)
+   ========================================= */
+.loading-state {
+    display: flex; flex-direction: column; align-items: center;
+    justify-content: center; padding: 4rem 0;
+    color: var(--color-text-secondary, #a1a1aa);
+}
+
+.spinner {
+    width: 40px; height: 40px;
+    border: 3px solid rgba(139, 92, 246, 0.1);
+    border-top-color: var(--color-primary, #8b5cf6);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    margin-bottom: 1rem;
+}
+.spinner.small { width: 20px; height: 20px; border-width: 2px; margin-bottom: 0; }
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.empty-state {
+    text-align: center; padding: 5rem 2rem;
+    background: rgba(255,255,255,0.02);
+    border-radius: 20px;
+    border: 2px dashed rgba(255,255,255,0.05);
+}
+.empty-state p { font-size: 1.2rem; color: var(--color-text-secondary, #a1a1aa); margin-bottom: 1.5rem; }
+
+.btn-blur {
+    background: rgba(255,255,255,0.1); backdrop-filter: blur(10px);
+    border: 1px solid rgba(255,255,255,0.2);
+    color: white; padding: 0.8rem 1.5rem;
+    border-radius: 99px; text-decoration: none;
+    display: inline-block; transition: 0.2s;
+}
+.btn-blur:hover { background: white; color: black; }
+
+.console-output {
+    background: #09090b; border: 1px solid #27272a;
+    padding: 1.5rem; border-radius: 12px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.9rem; color: #4ade80;
+    display: flex; align-items: center; gap: 1rem;
+    box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);
+    margin-bottom: 1.5rem;
+}
+
+.hidden { display: none !important; }

desktop/views/list.html

@@ -1,145 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
-    <title>My Lists - WaifuBoard</title>
-    <link rel="stylesheet" href="/views/css/globals.css">
-    <link rel="stylesheet" href="/views/css/components/navbar.css">
-    <link rel="stylesheet" href="/views/css/components/anilist-modal.css">
-    <link rel="stylesheet" href="/views/css/list.css">
-    <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
-    <link rel="stylesheet" href="/views/css/components/titlebar.css">
-    <script src="/src/scripts/titlebar.js"></script>
-</head>
-<body>
-<div id="titlebar"> <div class="title-left">
-    <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
-    <span class="app-title">WaifuBoard</span>
-</div>
-    <div class="title-right">
-        <button class="min">—</button>
-        <button class="max">🗖</button>
-        <button class="close">✕</button>
-    </div>
-</div>
-
-<div class="container">
-    <div class="header-section">
-        <h1 class="page-title">My List</h1>
-        <div class="stats-row">
-            <div class="stat-card">
-                <span class="stat-value" id="total-count">0</span>
-                <span class="stat-label">Total Entries</span>
-            </div>
-            <div class="stat-card">
-                <span class="stat-value" id="watching-count">0</span>
-                <span class="stat-label">Watching</span>
-            </div>
-            <div class="stat-card">
-                <span class="stat-value" id="completed-count">0</span>
-                <span class="stat-label">Completed</span>
-            </div>
-            <div class="stat-card">
-                <span class="stat-value" id="planned-count">0</span>
-                <span class="stat-label">Planning</span>
-            </div>
-        </div>
-    </div>
-
-    <div class="filters-section">
-        <div class="filter-group">
-            <label>Status</label>
-            <select id="status-filter" class="filter-select">
-                <option value="all">All Status</option>
-                <option value="CURRENT">Watching</option>
-                <option value="COMPLETED">Completed</option>
-                <option value="PLANNING">Planning</option>
-                <option value="PAUSED">Paused</option>
-                <option value="DROPPED">Dropped</option>
-            </select>
-        </div>
-
-        <div class="filter-group">
-            <label>Source</label>
-            <select id="source-filter" class="filter-select">
-                <option value="all">All Sources</option>
-                <option value="anilist">AniList</option>
-            </select>
-        </div>
-
-        <div class="filter-group">
-            <label>Type</label>
-            <select id="type-filter" class="filter-select">
-                <option value="all">All Types</option>
-                <option value="ANIME">Anime</option>
-                <option value="MANGA">Manga</option>
-                <option value="NOVEL">Novel</option>
-            </select>
-        </div>
-        <div class="filter-group">
-            <label>Sort By</label>
-            <select id="sort-filter" class="filter-select">
-                <option value="updated">Last Updated</option>
-                <option value="title">Title (A-Z)</option>
-                <option value="score">Score (High-Low)</option>
-                <option value="progress">Progress</option>
-            </select>
-        </div>
-
-        <div class="filter-group">
-            <label>View</label>
-            <div class="view-toggle">
-                <button class="view-btn active" data-view="grid">
-                    <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
-                        <rect x="3" y="3" width="7" height="7" rx="1"/>
-                        <rect x="14" y="3" width="7" height="7" rx="1"/>
-                        <rect x="3" y="14" width="7" height="7" rx="1"/>
-                        <rect x="14" y="14" width="7" height="7" rx="1"/>
-                    </svg>
-                </button>
-                <button class="view-btn" data-view="list">
-                    <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
-                        <rect x="3" y="5" width="18" height="2" rx="1"/>
-                        <rect x="3" y="11" width="18" height="2" rx="1"/>
-                        <rect x="3" y="17" width="18" height="2" rx="1"/>
-                    </svg>
-                </button>
-            </div>
-        </div>
-    </div>
-
-    <div id="loading-state" class="loading-state">
-        <div class="spinner"></div>
-        <p>Loading your list...</p>
-    </div>
-
-    <div id="empty-state" class="empty-state" style="display: none;">
-        <svg width="120" height="120" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-            <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
-        </svg>
-        <h2>Your list is empty</h2>
-        <p>Start adding anime to track your progress</p>
-        <button class="btn-primary" onclick="window.location.href='/anime'">Browse Content</button>
-    </div>
-
-    <div id="list-container" class="list-grid"></div>
-</div>
-
-<div id="updateToast" class="hidden">
-    <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
-    <a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">
-        Click To Download
-    </a>
-</div>
-
-<script src="/src/scripts/updateNotifier.js"></script>
-<script src="/src/scripts/rpc-inapp.js"></script>
-<script src="/src/scripts/auth-guard.js"></script>
-<script src="/src/scripts/utils/auth-utils.js"></script>
-<script src="/src/scripts/utils/notification-utils.js"></script>
-<script src="/src/scripts/utils/list-modal-manager.js"></script>
-<script src="/src/scripts/list.js"></script>
-</body>
-</html>

desktop/views/marketplace.html

@@ -71,5 +71,6 @@
 <script src="/src/scripts/titlebar.js"></script>
 <script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
+<script src="/src/scripts/settings.js"></script>
 </body>
 </html>

desktop/views/profile.html

@@ -0,0 +1,212 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
+    <title>Profile - WaifuBoard</title>
+    <link rel="stylesheet" href="/views/css/globals.css">
+    <link rel="stylesheet" href="/views/css/components/navbar.css">
+    <link rel="stylesheet" href="/views/css/components/anilist-modal.css">
+    <link rel="stylesheet" href="/views/css/profile.css">
+    <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
+    <link rel="stylesheet" href="/views/css/components/titlebar.css">
+    <script src="/src/scripts/titlebar.js"></script>
+</head>
+<body>
+<div id="titlebar">
+    <div class="title-left">
+        <img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
+        <span class="app-title">WaifuBoard</span>
+    </div>
+    <div class="title-right">
+        <button class="min">−</button>
+        <button class="max">🗖</button>
+        <button class="close">✕</button>
+    </div>
+</div>
+
+<div class="main-wrapper">
+    <section class="profile-header">
+        <div class="profile-banner"></div> <div class="profile-body">
+        <div class="profile-avatar-wrapper">
+            <img id="user-avatar" src="/public/assets/placeholder.svg" alt="Profile" class="avatar-img">
+        </div>
+
+        <div class="profile-details">
+            <div class="profile-text">
+                <div class="username-wrapper">
+                    <h1 id="user-username">Loading...</h1>
+                    <a id="header-anilist-link" href="#" target="_blank" class="header-anilist-badge" style="display: none;">
+                        <img src="https://anilist.co/img/icons/android-chrome-512x512.png" alt="AniList">
+                    </a>
+                </div>
+            </div>
+
+            <div class="profile-stats-grid">
+                <div class="stat-card">
+                    <span class="stat-value" id="total-stat">0</span>
+                    <span class="stat-label">Total Entries</span>
+                </div>
+                <div class="stat-card">
+                    <span class="stat-value" id="anime-stat">-</span>
+                    <span class="stat-label">Anime</span>
+                </div>
+                <div class="stat-card">
+                    <span class="stat-value" id="manga-stat">-</span>
+                    <span class="stat-label">Manga</span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+        <div class="hub-navigation-modern">
+            <button class="nav-pill active" data-target="tracking">Tracking List</button>
+            <button class="nav-pill" data-target="local">Local Library</button>
+            <button class="nav-pill" data-target="settings">Settings</button>
+        </div>
+    </section>
+
+    <div class="content-container">
+
+        <div id="section-tracking" class="tab-section active">
+            <div class="toolbar">
+                <div class="search-box">
+                    <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+                    <input type="text" id="tracking-search-input" class="search-input" placeholder="Search your list...">
+
+                </div>
+                <div class="filters-inline">
+                    <select id="status-filter" class="minimal-select"><option value="all">Status: All</option><option value="CURRENT">Watching</option><option value="COMPLETED">Completed</option><option value="PLANNING">Planning</option><option value="PAUSED">Paused</option><option value="DROPPED">Dropped</option></select>
+                    <select id="type-filter" class="minimal-select"><option value="all">Type: All</option><option value="ANIME">Anime</option><option value="MANGA">Manga</option><option value="NOVEL">Novel</option></select>
+                    <select id="sort-filter" class="minimal-select"><option value="updated">Latest</option><option value="score">Score</option><option value="title">A-Z</option></select>
+                    <div class="view-toggle">
+                        <button class="view-btn active" data-view="grid">⊞</button>
+                        <button class="view-btn" data-view="list">☰</button>
+                    </div>
+                </div>
+            </div>
+            <div id="loading-state" class="loading-state"><div class="spinner"></div></div>
+            <div id="empty-state" class="empty-state" style="display: none;">
+                <p>No content found</p>
+                <a href="/anime" class="btn-blur">Discover Content</a>
+            </div>
+            <div id="list-container" class="list-grid"></div>
+        </div>
+
+        <div id="section-local" class="tab-section">
+
+            <div class="toolbar local-toolbar">
+                <div class="search-box">
+                    <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+                    <input type="text" id="local-search-input" class="search-input" placeholder="Filter local files...">
+                </div>
+
+                <div class="local-type-switcher">
+                    <button class="type-pill-btn active" onclick="switchLocalType('anime', this)">Anime</button>
+                    <button class="type-pill-btn" onclick="switchLocalType('manga', this)">Manga</button>
+                    <button class="type-pill-btn" onclick="switchLocalType('novels', this)">Novels</button>
+                </div>
+
+                <div class="actions-group">
+                    <button id="scan-incremental-btn" class="action-icon-btn" title="Update Library (Fast)">
+                        <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
+                    </button>
+                    <button id="scan-full-btn" class="action-icon-btn danger" title="Full Rescan (Slow)">
+                        <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
+                    </button>
+                </div>
+            </div>
+
+            <div class="console-output" id="scan-console" style="display: none;">
+                <div class="spinner small"></div>
+                <span id="scan-status-text">Scanning folders...</span>
+            </div>
+
+            <div id="local-list-container" class="list-grid"></div>
+
+            <div id="local-loading" class="loading-state" style="display: none;">
+                <div class="spinner"></div>
+            </div>
+        </div>
+
+        <div id="section-settings" class="tab-section">
+            <div class="stream-settings-container">
+
+                <div class="stream-section">
+                    <h3 class="section-label">Profile</h3>
+                    <form id="profile-form" class="stream-profile-row">
+
+                        <div class="stream-avatar-wrapper">
+                            <img id="setting-avatar-preview" src="/public/assets/placeholder.svg" alt="Avatar">
+                            <div class="avatar-overlay" onclick="document.getElementById('avatar-upload').click()">
+                                <span>Edit</span>
+                            </div>
+                            <input type="file" id="avatar-upload" accept="image/*" style="display: none;">
+                        </div>
+
+                        <div class="stream-inputs-col">
+                            <div class="stream-input-group">
+                                <label>Username</label>
+                                <input type="text" id="setting-username" class="stream-input">
+                            </div>
+
+                            <div class="stream-actions">
+                                <button type="submit" class="btn-stream-primary">Submit</button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+
+                <div class="stream-section">
+                    <h3 class="section-label">Change password</h3>
+                    <form id="password-form" class="stream-form-row">
+                        <div class="stream-input-group">
+                            <label>Current password</label>
+                            <input type="password" id="current-password" class="stream-input" placeholder="••••••">
+                        </div>
+                        <div class="stream-input-group">
+                            <label>New password</label>
+                            <input type="password" id="new-password" class="stream-input" placeholder="••••••">
+                        </div>
+                        <div class="stream-actions-inline">
+                            <button type="submit" class="btn-stream-ghost">Update password</button>
+                        </div>
+                    </form>
+                </div>
+
+                <div class="stream-section">
+                    <h3 class="section-label">Connections</h3>
+                    <div class="stream-integration-row">
+                        <div class="int-info">
+                            <img src="https://anilist.co/img/icons/android-chrome-512x512.png" alt="AL" class="int-logo">
+                            <div class="int-text">
+                                <span class="int-name">AniList</span>
+                                <span id="anilist-status" class="int-status">Checking...</span>
+                            </div>
+                        </div>
+                        <button id="anilist-action-btn" class="btn-stream-outline">Manage</button>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+
+    </div>
+</div>
+
+<div id="updateToast" class="hidden">
+    <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
+    <a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">Download</a>
+</div>
+
+<script src="/src/scripts/updateNotifier.js"></script>
+<script src="/src/scripts/rpc-inapp.js"></script>
+<script src="/src/scripts/auth-guard.js"></script>
+<script src="/src/scripts/utils/auth-utils.js"></script>
+<script src="/src/scripts/utils/notification-utils.js"></script>
+<script src="/src/scripts/utils/list-modal-manager.js"></script>
+<script src="/src/scripts/profile.js"></script>
+<script src="/src/scripts/settings.js"></script>
+</body>
+</html>

desktop/views/schedule.html

@@ -92,5 +92,6 @@
     <script src="/src/scripts/schedule/schedule.js"></script>
     <script src="/src/scripts/rpc-inapp.js"></script>
     <script src="/src/scripts/auth-guard.js"></script>
+    <script src="/src/scripts/settings.js"></script>
 </body>
 </html>

docker/server.js

@@ -101,9 +101,11 @@ const start = async () => {
 
     await loadExtensions();
     await initHeadless();
-    await refreshAll();
 
     await fastify.listen({ port: 54322, host: "0.0.0.0" });
+    refreshAll().catch(e =>
+        console.error("initial refresh failed", e)
+    );
     console.log(`Server running at http://localhost:54322`);
   } catch (err) {
     fastify.log.error(err);

docker/src/api/anime/anime.service.ts

@@ -41,17 +41,21 @@ const MEDIA_FIELDS = `
   siteUrl
   tags { id name description category rank isGeneralSpoiler isMediaSpoiler isAdult }
   relations {
-    edges {
-      relationType
-      node {
-        id
-        title { romaji }
-        type
-        format
-        status
+      edges {
+        relationType
+        node {
+          id
+          title { romaji english }
+          type
+          format
+          status
+          coverImage { medium large color }
+          bannerImage
+          season
+          seasonYear
+        }
       }
     }
-  }
   studios {
     edges {
       isMain
@@ -70,12 +74,28 @@ const MEDIA_FIELDS = `
       mediaRecommendation {
         id
         title { romaji }
-        coverImage { medium }
+        coverImage { medium large}
         format
         type
       }
     }
   }
+  characters(perPage: 12, sort: [ROLE, RELEVANCE]) {
+    edges {
+      role
+      node {
+        id
+        name { full native }
+        image { medium large }
+      }
+      voiceActors {
+        id
+        name { full }
+        language
+        image { medium }
+      }
+    }
+  }
 `;
 
 export async function refreshTrendingAnime(): Promise<void> {
@@ -140,7 +160,19 @@ async function fetchAniList(query: string, variables: any) {
 export async function getAnimeById(id: string | number): Promise<Anime | { error: string }> {
     const row = await queryOne("SELECT full_data FROM anime WHERE id = ?", [id]);
 
-    if (row) return JSON.parse(row.full_data);
+    if (row) {
+        const cached = JSON.parse(row.full_data);
+
+        if (cached?.characters?.edges?.length) {
+            return cached;
+        }
+
+        await queryOne(
+            "DELETE FROM anime WHERE id = ?",
+            [id]
+        );
+    }
+
 
     const query = `
     query ($id: Int) {

docker/src/api/books/books.controller.ts

@@ -101,12 +101,14 @@ export async function getChapterContent(req: any, reply: FastifyReply) {
     try {
         const { bookId, chapter, provider } = req.params;
         const source = req.query.source || 'anilist';
+        const lang = req.query.lang || 'none';
 
         const content = await booksService.getChapterContent(
             bookId,
             chapter,
             provider,
-            source
+            source,
+            lang
         );
 
         return reply.send(content);

docker/src/api/books/books.service.ts

@@ -67,7 +67,19 @@ export async function getBookById(id: string | number): Promise<Book | { error:
     );
 
     if (row) {
-        return JSON.parse(row.full_data);
+        const parsed = JSON.parse(row.full_data);
+
+        const hasRelationImages =
+            parsed?.relations?.edges?.[0]?.node?.coverImage?.large;
+
+        const hasCharacterImages =
+            parsed?.characters?.nodes?.[0]?.image?.large;
+
+        if (hasRelationImages && hasCharacterImages) {
+            return parsed;
+        }
+
+        console.log(`[Book] Cache outdated for ID ${id}, refetching...`);
     }
 
     try {
@@ -82,8 +94,8 @@ export async function getBookById(id: string | number): Promise<Book | { error:
                 trailer { id site thumbnail } updatedAt coverImage { extraLarge large medium color }
                 bannerImage genres synonyms averageScore meanScore popularity isLocked trending favourites
                 tags { id name description category rank isGeneralSpoiler isMediaSpoiler isAdult userId }
-                relations { edges { relationType node { id title { romaji } } } }
-                characters(page: 1, perPage: 10) { nodes { id name { full } } }
+                relations { edges { relationType node { id title { romaji } coverImage { large medium } } } }
+                characters(page: 1, perPage: 10) { nodes { id name { full } image { large medium } } }
                 studios { nodes { id name isAnimationStudio } }
                 isAdult nextAiringEpisode { airingAt timeUntilAiring episode }
                 externalLinks { url site } 
@@ -406,7 +418,8 @@ async function searchChaptersInExtension(ext: Extension, name: string, searchTit
             title: ch.title,
             date: ch.releaseDate,
             provider: name,
-            index: ch.index
+            index: ch.index,
+            language: ch.language ?? null,
         }));
 
         await setCache(cacheKey, result, CACHE_TTL_MS);
@@ -463,7 +476,7 @@ export async function getChaptersForBook(id: string, ext: Boolean, onlyProvider?
     };
 }
 
-export async function getChapterContent(bookId: string, chapterIndex: string, providerName: string, source: string): Promise<ChapterContent> {
+export async function getChapterContent(bookId: string, chapterId: string, providerName: string, source: string, lang: string): Promise<ChapterContent> {
     const extensions = getAllExtensions();
     const ext = extensions.get(providerName);
 
@@ -471,14 +484,14 @@ export async function getChapterContent(bookId: string, chapterIndex: string, pr
         throw new Error("Provider not found");
     }
 
-    const contentCacheKey = `content:${providerName}:${source}:${bookId}:${chapterIndex}`;
+    const contentCacheKey = `content:${providerName}:${source}:${lang}:${bookId}:${chapterId}`;
     const cachedContent = await getCache(contentCacheKey);
 
     if (cachedContent) {
         const isExpired = Date.now() - cachedContent.created_at > CACHE_TTL_MS;
 
         if (!isExpired) {
-            console.log(`[${providerName}] Content cache hit for Book ID ${bookId}, Index ${chapterIndex}`);
+            console.log(`[${providerName}] Content cache hit for Book ID ${bookId}, Index ${chapterId}`);
             try {
                 return JSON.parse(cachedContent.result) as ChapterContent;
             } catch (e) {
@@ -486,33 +499,14 @@ export async function getChapterContent(bookId: string, chapterIndex: string, pr
 
             }
         } else {
-            console.log(`[${providerName}] Content cache expired for Book ID ${bookId}, Index ${chapterIndex}`);
+            console.log(`[${providerName}] Content cache expired for Book ID ${bookId}, Index ${chapterId}`);
         }
     }
 
-    const isExternal = source !== 'anilist';
-    const chapterList = await getChaptersForBook(bookId, isExternal, providerName);
-
-    if (!chapterList?.chapters || chapterList.chapters.length === 0) {
-        throw new Error("Chapters not found");
-    }
-
-    const providerChapters = chapterList.chapters.filter(c => c.provider === providerName);
-    const index = parseInt(chapterIndex, 10);
-
-    if (Number.isNaN(index)) {
-        throw new Error("Invalid chapter index");
-    }
-
-    if (!providerChapters[index]) {
-        throw new Error("Chapter index out of range");
-    }
-
-    const selectedChapter = providerChapters[index];
-
-    const chapterId = selectedChapter.id;
-    const chapterTitle = selectedChapter.title || null;
-    const chapterNumber = typeof selectedChapter.number === 'number' ? selectedChapter.number : index;
+    const selectedChapter: any = {
+        id: chapterId,
+        provider: providerName
+    };
 
     try {
         if (!ext.findChapterPages) {
@@ -522,12 +516,13 @@ export async function getChapterContent(bookId: string, chapterIndex: string, pr
         let contentResult: ChapterContent;
 
         if (ext.mediaType === "manga") {
+            // Usamos el ID directamente
             const pages = await ext.findChapterPages(chapterId);
             contentResult = {
                 type: "manga",
-                chapterId,
-                title: chapterTitle,
-                number: chapterNumber,
+                chapterId: selectedChapter.id,
+                title: selectedChapter.title,
+                number: selectedChapter.number,
                 provider: providerName,
                 pages
             };
@@ -535,9 +530,9 @@ export async function getChapterContent(bookId: string, chapterIndex: string, pr
             const content = await ext.findChapterPages(chapterId);
             contentResult = {
                 type: "ln",
-                chapterId,
-                title: chapterTitle,
-                number: chapterNumber,
+                chapterId: selectedChapter.id,
+                title: selectedChapter.title,
+                number: selectedChapter.number,
                 provider: providerName,
                 content
             };
@@ -546,7 +541,6 @@ export async function getChapterContent(bookId: string, chapterIndex: string, pr
         }
 
         await setCache(contentCacheKey, contentResult, CACHE_TTL_MS);
-
         return contentResult;
 
     } catch (err) {

docker/src/api/config/config.controller.ts

@@ -1,43 +1,53 @@
-import {FastifyReply, FastifyRequest} from 'fastify';
-import {getConfig, setConfig} from '../../shared/config';
+import { FastifyReply, FastifyRequest } from 'fastify';
+import { getConfig, setConfig } from '../../shared/config';
 
 export async function getFullConfig(req: FastifyRequest, reply: FastifyReply) {
     try {
-        return getConfig();
-    } catch (err) {
+        const { values, schema } = getConfig();
+        return { values, schema };
+    } catch {
         return { error: "Error loading config" };
     }
 }
 
-export async function getConfigSection(req: FastifyRequest<{ Params: { section: string } }>, reply: FastifyReply) {
+export async function getConfigSection(
+    req: FastifyRequest<{ Params: { section: string } }>,
+    reply: FastifyReply
+) {
     try {
         const { section } = req.params;
-        const config = getConfig();
+        const { values } = getConfig();
 
-        if (config[section] === undefined) {
+        if (values[section] === undefined) {
             return { error: "Section not found" };
         }
 
-        return { [section]: config[section] };
-    } catch (err) {
+        return { [section]: values[section] };
+    } catch {
         return { error: "Error loading config section" };
     }
 }
 
-export async function updateConfig(req: FastifyRequest<{ Body: any }>, reply: FastifyReply) {
+export async function updateConfig(
+    req: FastifyRequest<{ Body: any }>,
+    reply: FastifyReply
+) {
     try {
-        return setConfig(req.body);
-    } catch (err) {
+        return setConfig(req.body); // schema nunca se toca
+    } catch {
         return { error: "Error updating config" };
     }
 }
 
-export async function updateConfigSection(req: FastifyRequest<{ Params: { section: string }, Body: any }>, reply: FastifyReply) {
+export async function updateConfigSection(
+    req: FastifyRequest<{ Params: { section: string }, Body: any }>,
+    reply: FastifyReply
+) {
     try {
         const { section } = req.params;
-        const updatedConfig = setConfig({ [section]: req.body });
-        return { [section]: updatedConfig[section] };
-    } catch (err) {
+        const updatedValues = setConfig({ [section]: req.body });
+        return { [section]: updatedValues[section] };
+    } catch {
         return { error: "Error updating config section" };
     }
 }

docker/src/api/extensions/extensions.controller.ts

@@ -1,8 +1,6 @@
 import { FastifyReply, FastifyRequest } from 'fastify';
-import { getExtension, getExtensionsList, getGalleryExtensionsMap, getBookExtensionsMap, getAnimeExtensionsMap, saveExtensionFile, deleteExtensionFile } from '../../shared/extensions';
+import { getExtension, getExtensionsList, getGalleryExtensionsMap, getBookExtensionsMap, getMangaExtensionsMap, getNovelExtensionsMap, getAnimeExtensionsMap, saveExtensionFile, deleteExtensionFile } from '../../shared/extensions';
 import { ExtensionNameRequest } from '../types';
-import path from 'path';
-import fs from 'fs/promises';
 
 const TYPE_MAP: Record<string, string> = {
     'anime-board': 'anime',
@@ -69,6 +67,16 @@ export async function getBookExtensions(req: FastifyRequest, reply: FastifyReply
     return { extensions: Array.from(bookExtensions.keys()) };
 }
 
+export async function getMangaExtensions(req: FastifyRequest, reply: FastifyReply) {
+    const bookExtensions = getMangaExtensionsMap();
+    return { extensions: Array.from(bookExtensions.keys()) };
+}
+
+export async function getNovelExtensions(req: FastifyRequest, reply: FastifyReply) {
+    const bookExtensions = getNovelExtensionsMap();
+    return { extensions: Array.from(bookExtensions.keys()) };
+}
+
 export async function getGalleryExtensions(req: FastifyRequest, reply: FastifyReply) {
     const galleryExtensions = getGalleryExtensionsMap();
     return { extensions: Array.from(galleryExtensions.keys()) };

docker/src/api/extensions/extensions.routes.ts

@@ -6,6 +6,8 @@ async function extensionsRoutes(fastify: FastifyInstance) {
     fastify.get('/extensions/anime', controller.getAnimeExtensions);
     fastify.post('/extensions/update', controller.updateExtensions);
     fastify.get('/extensions/book', controller.getBookExtensions);
+    fastify.get('/extensions/manga', controller.getMangaExtensions);
+    fastify.get('/extensions/novel', controller.getNovelExtensions);
     fastify.get('/extensions/gallery', controller.getGalleryExtensions);
     fastify.get('/extensions/:name/settings', controller.getExtensionSettings);
     fastify.post('/extensions/install', controller.installExtension);

docker/src/api/local/download.service.ts

@@ -0,0 +1,478 @@
+import { getConfig as loadConfig } from '../../shared/config';
+import { queryOne, queryAll, run } from '../../shared/database';
+import { getAnimeById } from '../anime/anime.service';
+import { getBookById } from '../books/books.service';
+import crypto from 'crypto';
+import fs from 'fs';
+import path from 'path';
+import AdmZip from 'adm-zip';
+import { spawn } from 'child_process';
+const { values } = loadConfig();
+
+const FFMPEG_PATH =
+    values.paths?.ffmpeg || 'ffmpeg';
+
+type AnimeDownloadParams = {
+    anilistId: number;
+    episodeNumber: number;
+    streamUrl: string;
+    headers?: Record<string, string>;
+    quality?: string;
+    subtitles?: Array<{ language: string; url: string }>;
+    chapters?: Array<{ title: string; start_time: number; end_time: number }>;
+};
+
+type BookDownloadParams = {
+    anilistId: number;
+    chapterNumber: number;
+    format: 'manga' | 'novel';
+    content?: string;
+    images?: Array<{ index: number; url: string }>;
+};
+
+async function ensureDirectory(dirPath: string) {
+    if (!fs.existsSync(dirPath)) {
+        fs.mkdirSync(dirPath, { recursive: true });
+    }
+}
+
+async function downloadFile(url: string, outputPath: string): Promise<void> {
+    const res = await fetch(url);
+    if (!res.ok) throw new Error(`HTTP_${res.status}`);
+
+    await ensureDirectory(path.dirname(outputPath));
+    const buf = Buffer.from(await res.arrayBuffer());
+    fs.writeFileSync(outputPath, buf);
+}
+
+async function getOrCreateEntry(
+    anilistId: number,
+    type: 'anime' | 'manga' | 'novels'
+): Promise<{ id: string; path: string; folderName: string }> {
+    const existing = await queryOne(
+        `SELECT id, path, folder_name FROM local_entries
+         WHERE matched_id = ? AND matched_source = 'anilist' AND type = ?`,
+        [anilistId, type],
+        'local_library'
+    );
+
+    if (existing) {
+        return {
+            id: existing.id,
+            path: existing.path,
+            folderName: existing.folder_name
+        };
+    }
+
+    const metadata: any = type === 'anime'
+        ? await getAnimeById(anilistId)
+        : await getBookById(anilistId);
+
+    if (!metadata) {
+        throw new Error('METADATA_NOT_FOUND');
+    }
+
+    const { values } = loadConfig();
+    const basePath = values.library?.[type];
+
+    if (!basePath) {
+        throw new Error(`NO_LIBRARY_PATH_FOR_${type.toUpperCase()}`);
+    }
+
+    const title = metadata.title?.romaji || metadata.title?.english || `ID_${anilistId}`;
+    const safeName = title.replace(/[<>:"/\\|?*]/g, '_');
+    const folderPath = path.join(basePath, safeName);
+
+    await ensureDirectory(folderPath);
+
+    const entryId = crypto
+        .createHash('sha1')
+        .update(`anilist:${type}:${anilistId}`)
+        .digest('hex');
+    const now = Date.now();
+
+    await run(
+        `INSERT OR IGNORE INTO local_entries
+   (id, type, path, folder_name, matched_id, matched_source, last_scan)
+   VALUES (?, ?, ?, ?, ?, 'anilist', ?)`,
+        [entryId, type, folderPath, safeName, anilistId, now],
+        'local_library'
+    );
+
+    return {
+        id: entryId,
+        path: folderPath,
+        folderName: safeName
+    };
+}
+
+export async function downloadAnimeEpisode(params: AnimeDownloadParams) {
+    const { anilistId, episodeNumber, streamUrl, subtitles, chapters } = params;
+
+    const entry = await getOrCreateEntry(anilistId, 'anime');
+
+    const exists = await queryOne(
+        `SELECT id FROM local_files WHERE entry_id = ? AND unit_number = ?`,
+        [entry.id, episodeNumber],
+        'local_library'
+    );
+    if (exists) return { status: 'ALREADY_EXISTS', entry_id: entry.id, episode: episodeNumber };
+
+    const outputPath = path.join(entry.path, `Episode_${episodeNumber.toString().padStart(2, '0')}.mkv`);
+    const tempDir = path.join(entry.path, '.temp');
+    await ensureDirectory(tempDir);
+
+    try {
+        let videoInput = streamUrl;
+        let audioInputs: string[] = [];
+
+        const isMaster = (params as any).is_master === true;
+
+        if (isMaster) {
+
+            const variant = (params as any).variant;
+            const audios = (params as any).audio;
+
+            if (!variant || !variant.playlist_url) {
+                throw new Error('VARIANT_REQUIRED_FOR_MASTER');
+            }
+
+            videoInput = variant.playlist_url;
+
+            if (audios && audios.length > 0) {
+                audioInputs = audios.map((a: any) => a.playlist_url);
+            }
+        }
+
+        const subFiles: string[] = [];
+        if (subtitles?.length) {
+            for (let i = 0; i < subtitles.length; i++) {
+                const ext = subtitles[i].url.endsWith('.vtt') ? 'vtt' : 'srt';
+                const p = path.join(tempDir, `sub_${i}.${ext}`);
+                await downloadFile(subtitles[i].url, p);
+                subFiles.push(p);
+            }
+        }
+
+        const args = [
+            '-protocol_whitelist', 'file,http,https,tcp,tls,crypto',
+            '-allowed_extensions', 'ALL',
+            '-f', 'hls',
+            '-extension_picky', '0',
+            '-i', videoInput
+        ];
+
+        audioInputs.forEach(audioUrl => {
+            args.push(
+                '-protocol_whitelist', 'file,http,https,tcp,tls,crypto',
+                '-allowed_extensions', 'ALL',
+                '-f', 'hls',
+                '-extension_picky', '0',
+                '-i', audioUrl
+            );
+        });
+
+        subFiles.forEach(f => args.push('-i', f));
+
+        let chaptersInputIndex = -1;
+
+        if (chapters?.length) {
+            const meta = path.join(tempDir, 'chapters.txt');
+
+            const sorted = [...chapters].sort((a, b) => a.start_time - b.start_time);
+            const lines: string[] = [';FFMETADATA1'];
+
+            for (let i = 0; i < sorted.length; i++) {
+                const c = sorted[i];
+
+                const start = Math.floor(c.start_time * 1000);
+                const end = Math.floor(c.end_time * 1000);
+                const title = (c.title || 'chapter').toUpperCase();
+
+                lines.push(
+                    '[CHAPTER]',
+                    'TIMEBASE=1/1000',
+                    `START=${start}`,
+                    `END=${end}`,
+                    `title=${title}`
+                );
+
+                if (i < sorted.length - 1) {
+                    const nextStart = Math.floor(sorted[i + 1].start_time * 1000);
+                    if (nextStart - end > 1000) {
+                        lines.push(
+                            '[CHAPTER]',
+                            'TIMEBASE=1/1000',
+                            `START=${end}`,
+                            `END=${nextStart}`,
+                            'title=Episode'
+                        );
+                    }
+                } else {
+                    lines.push(
+                        '[CHAPTER]',
+                        'TIMEBASE=1/1000',
+                        `START=${end}`,
+                        'title=Episode'
+                    );
+                }
+            }
+
+            fs.writeFileSync(meta, lines.join('\n'));
+            args.push('-i', meta);
+
+            // índice correcto del metadata input
+            chaptersInputIndex = 1 + audioInputs.length + subFiles.length;
+        }
+
+        args.push('-map', '0:v:0');
+
+        if (audioInputs.length > 0) {
+
+            audioInputs.forEach((_, i) => {
+                args.push('-map', `${i + 1}:a:0`);
+
+                const audioInfo = (params as any).audio?.[i];
+                if (audioInfo) {
+                    const audioStreamIndex = i;
+                    if (audioInfo.language) {
+                        args.push(`-metadata:s:a:${audioStreamIndex}`, `language=${audioInfo.language}`);
+                    }
+                    if (audioInfo.name) {
+                        args.push(`-metadata:s:a:${audioStreamIndex}`, `title=${audioInfo.name}`);
+                    }
+                }
+            });
+        } else {
+
+            args.push('-map', '0:a:0?');
+        }
+
+        const subtitleStartIndex = 1 + audioInputs.length;
+        subFiles.forEach((_, i) => {
+            args.push('-map', `${subtitleStartIndex + i}:0`);
+            args.push(`-metadata:s:s:${i}`, `language=${subtitles![i].language}`);
+        });
+
+        if (chaptersInputIndex >= 0) {
+            args.push('-map_metadata', `${chaptersInputIndex}`);
+        }
+
+        args.push('-c:v', 'copy');
+
+        args.push('-c:a', 'copy');
+
+        if (subFiles.length) {
+            args.push('-c:s', 'srt');
+
+        }
+
+        args.push('-y');
+
+        args.push(outputPath);
+
+        await new Promise((resolve, reject) => {
+            console.log('🎬 Iniciando descarga con FFmpeg...');
+            console.log('📹 Video:', videoInput);
+            if (audioInputs.length > 0) {
+                console.log('🔊 Audio tracks:', audioInputs.length);
+            }
+            console.log('💾 Output:', outputPath);
+            console.log('Args:', args.join(' '));
+
+            const ff = spawn(FFMPEG_PATH, args, {
+                windowsHide: true,
+                stdio: ['ignore', 'pipe', 'pipe']
+            });
+
+            let lastProgress = '';
+
+            ff.stdout.on('data', (data) => {
+                const text = data.toString();
+                console.log('[stdout]', text);
+            });
+
+            ff.stderr.on('data', (data) => {
+                const text = data.toString();
+
+                if (text.includes('time=') || text.includes('speed=')) {
+                    const timeMatch = text.match(/time=(\S+)/);
+                    const speedMatch = text.match(/speed=(\S+)/);
+                    if (timeMatch || speedMatch) {
+                        lastProgress = `⏱️  Time: ${timeMatch?.[1] || 'N/A'} | Speed: ${speedMatch?.[1] || 'N/A'}`;
+                        console.log(lastProgress);
+                    }
+                } else {
+                    console.log('[ffmpeg]', text);
+                }
+            });
+
+            ff.on('error', (error) => {
+                console.error('❌ Error al iniciar FFmpeg:', error);
+                reject(error);
+            });
+
+            ff.on('close', (code) => {
+                if (code === 0) {
+                    console.log('✅ Descarga completada exitosamente');
+                    resolve(true);
+                } else {
+                    console.error(`❌ FFmpeg terminó con código: ${code}`);
+                    reject(new Error(`FFmpeg exited with code ${code}`));
+                }
+            });
+        });
+
+        fs.rmSync(tempDir, { recursive: true, force: true });
+
+        const fileId = crypto.randomUUID();
+        await run(
+            `INSERT INTO local_files (id, entry_id, file_path, unit_number)
+             VALUES (?, ?, ?, ?)`,
+            [fileId, entry.id, outputPath, episodeNumber],
+            'local_library'
+        );
+
+        await run(
+            `UPDATE local_entries SET last_scan = ? WHERE id = ?`,
+            [Date.now(), entry.id],
+            'local_library'
+        );
+
+        return {
+            status: 'SUCCESS',
+            entry_id: entry.id,
+            file_id: fileId,
+            episode: episodeNumber,
+            path: outputPath
+        };
+
+    } catch (e: any) {
+        fs.rmSync(tempDir, { recursive: true, force: true });
+        if (fs.existsSync(outputPath)) fs.unlinkSync(outputPath);
+        const err = new Error('DOWNLOAD_FAILED');
+        (err as any).details = e.message;
+        throw err;
+    }
+}
+
+export async function downloadBookChapter(params: BookDownloadParams) {
+    const { anilistId, chapterNumber, format, content, images } = params;
+
+    const type = format === 'manga' ? 'manga' : 'novels';
+    const entry = await getOrCreateEntry(anilistId, type);
+
+    const existingFile = await queryOne(
+        `SELECT id FROM local_files WHERE entry_id = ? AND unit_number = ?`,
+        [entry.id, chapterNumber],
+        'local_library'
+    );
+
+    if (existingFile) {
+        return {
+            status: 'ALREADY_EXISTS',
+            message: `Chapter ${chapterNumber} already exists`,
+            entry_id: entry.id,
+            chapter: chapterNumber
+        };
+    }
+
+    try {
+        let outputPath: string;
+        let fileId: string;
+
+        if (format === 'manga') {
+            const chapterName = `Chapter_${chapterNumber.toString().padStart(3, '0')}.cbz`;
+            outputPath = path.join(entry.path, chapterName);
+
+            const zip = new AdmZip();
+            const sortedImages = images!.sort((a, b) => a.index - b.index);
+
+            for (const img of sortedImages) {
+                const res = await fetch(img.url);
+                if (!res.ok) throw new Error(`HTTP_${res.status}`);
+                const buf = Buffer.from(await res.arrayBuffer());
+
+                const ext = path.extname(new URL(img.url).pathname) || '.jpg';
+                const filename = `${img.index.toString().padStart(4, '0')}${ext}`;
+                zip.addFile(filename, buf);
+            }
+
+            zip.writeZip(outputPath);
+
+        } else {
+            const chapterName = `Chapter_${chapterNumber.toString().padStart(3, '0')}.epub`;
+            outputPath = path.join(entry.path, chapterName);
+
+            const zip = new AdmZip();
+
+            zip.addFile('mimetype', Buffer.from('application/epub+zip'), '', 0);
+
+            const containerXml = `<?xml version="1.0" encoding="UTF-8"?>
+<container version="1.0" xmlns="urn:oasis:names:tc:opendocument:xmlns:container">
+  <rootfiles>
+    <rootfile full-path="OEBPS/content.opf" media-type="application/oebps-package+xml"/>
+  </rootfiles>
+</container>`;
+            zip.addFile('META-INF/container.xml', Buffer.from(containerXml));
+
+            const contentOpf = `<?xml version="1.0" encoding="UTF-8"?>
+<package xmlns="http://www.idpf.org/2007/opf" version="3.0" unique-identifier="bookid">
+  <metadata xmlns:dc="http://purl.org/dc/elements/1.1/">
+    <dc:title>Chapter ${chapterNumber}</dc:title>
+    <dc:identifier id="bookid">chapter-${anilistId}-${chapterNumber}</dc:identifier>
+    <dc:language>en</dc:language>
+  </metadata>
+  <manifest>
+    <item id="chapter" href="chapter.xhtml" media-type="application/xhtml+xml"/>
+  </manifest>
+  <spine>
+    <itemref idref="chapter"/>
+  </spine>
+</package>`;
+            zip.addFile('OEBPS/content.opf', Buffer.from(contentOpf));
+
+            const chapterXhtml = `<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>Chapter ${chapterNumber}</title>
+</head>
+<body>
+${content}
+</body>
+</html>`;
+            zip.addFile('OEBPS/chapter.xhtml', Buffer.from(chapterXhtml));
+
+            zip.writeZip(outputPath);
+        }
+
+        fileId = crypto.randomUUID();
+        await run(
+            `INSERT INTO local_files (id, entry_id, file_path, unit_number)
+             VALUES (?, ?, ?, ?)`,
+            [fileId, entry.id, outputPath, chapterNumber],
+            'local_library'
+        );
+
+        await run(
+            `UPDATE local_entries SET last_scan = ? WHERE id = ?`,
+            [Date.now(), entry.id],
+            'local_library'
+        );
+
+        return {
+            status: 'SUCCESS',
+            entry_id: entry.id,
+            file_id: fileId,
+            chapter: chapterNumber,
+            format,
+            path: outputPath
+        };
+
+    } catch (error: any) {
+        const err = new Error('DOWNLOAD_FAILED');
+        (err as any).details = error.message;
+        throw err;
+    }
+}

docker/src/api/local/local.controller.ts

@@ -1,6 +1,7 @@
 import {FastifyReply, FastifyRequest} from 'fastify';
 import fs from 'fs';
 import * as service from './local.service';
+import * as downloadService from './download.service';
 
 type ScanQuery = {
     mode?: 'full' | 'incremental';
@@ -16,6 +17,65 @@ type MatchBody = {
     matched_id: number | null;
 };
 
+type DownloadAnimeBody =
+    | {
+    anilist_id: number;
+    episode_number: number;
+    stream_url: string; // media playlist FINAL
+    is_master?: false;
+    subtitles?: {
+        language: string;
+        url: string;
+    }[];
+    chapters?: {
+        title: string;
+        start_time: number;
+        end_time: number;
+    }[];
+}
+    | {
+    anilist_id: number;
+    episode_number: number;
+    stream_url: string; // master.m3u8
+    is_master: true;
+
+    variant: {
+        resolution: string;
+        bandwidth?: number;
+        codecs?: string;
+        playlist_url: string;
+    };
+
+    audio?: {
+        group?: string;
+        language?: string;
+        name?: string;
+        playlist_url: string;
+    }[];
+
+    subtitles?: {
+        language: string;
+        url: string;
+    }[];
+
+    chapters?: {
+        title: string;
+        start_time: number;
+        end_time: number;
+    }[];
+};
+
+type DownloadBookBody = {
+    anilist_id: number;
+    chapter_number: number;
+    format: 'manga' | 'novel';
+    content?: string;
+    images?: Array<{
+        index: number;
+        url: string;
+    }>;
+};
+
 export async function scanLibrary(request: FastifyRequest<{ Querystring: ScanQuery }>, reply: FastifyReply) {
     try {
         const mode = request.query.mode || 'incremental';
@@ -183,3 +243,170 @@ export async function getPage(request: FastifyRequest, reply: FastifyReply) {
 
     return reply.status(400).send();
 }
+
+function buildProxyUrl(rawUrl: string, headers: Record<string, string>) {
+    const params = new URLSearchParams({ url: rawUrl });
+
+    for (const [key, value] of Object.entries(headers)) {
+        params.set(key.toLowerCase(), value);
+    }
+
+    return `http://localhost:54322/api/proxy?${params.toString()}`;
+}
+
+export async function downloadAnime(request: FastifyRequest<{ Body: DownloadAnimeBody }>, reply: FastifyReply) {
+    try {
+        const {
+            anilist_id,
+            episode_number,
+            stream_url,
+            is_master,
+            subtitles,
+            chapters
+        } = request.body;
+
+        const clientHeaders = (request.body as any).headers || {};
+
+        // Validación básica
+        if (!anilist_id || !episode_number || !stream_url) {
+            return reply.status(400).send({
+                error: 'MISSING_REQUIRED_FIELDS',
+                required: ['anilist_id', 'episode_number', 'stream_url']
+            });
+        }
+
+        // Proxy del stream URL principal
+        const proxyUrl = buildProxyUrl(stream_url, clientHeaders);
+        console.log('Stream URL:', proxyUrl);
+
+        // Proxy de subtítulos
+        const proxiedSubs = subtitles?.map(sub => ({
+            ...sub,
+            url: buildProxyUrl(sub.url, clientHeaders)
+        }));
+
+        // Preparar parámetros base
+        const downloadParams: any = {
+            anilistId: anilist_id,
+            episodeNumber: episode_number,
+            streamUrl: proxyUrl,
+            subtitles: proxiedSubs,
+            chapters
+        };
+
+        // Si es master playlist, agregar campos adicionales
+        if (is_master === true) {
+            const { variant, audio } = request.body as any;
+
+            if (!variant || !variant.playlist_url) {
+                return reply.status(400).send({
+                    error: 'MISSING_VARIANT',
+                    message: 'variant with playlist_url is required when is_master is true'
+                });
+            }
+
+            downloadParams.is_master = true;
+
+            // Proxy del variant playlist
+            downloadParams.variant = {
+                ...variant,
+                playlist_url: buildProxyUrl(variant.playlist_url, clientHeaders)
+            };
+
+            // Proxy de audio tracks si existen
+            if (audio && audio.length > 0) {
+                downloadParams.audio = audio.map((a: any) => ({
+                    ...a,
+                    playlist_url: buildProxyUrl(a.playlist_url, clientHeaders)
+                }));
+            }
+
+            console.log('Master playlist detected');
+            console.log('Variant:', downloadParams.variant.resolution);
+            console.log('Audio tracks:', downloadParams.audio?.length || 0);
+        }
+
+        const result = await downloadService.downloadAnimeEpisode(downloadParams);
+
+        if (result.status === 'ALREADY_EXISTS') {
+            return reply.status(409).send(result);
+        }
+
+        return result;
+    } catch (err: any) {
+        console.error('Error downloading anime:', err);
+
+        if (err.message === 'METADATA_NOT_FOUND') {
+            return reply.status(404).send({ error: 'ANIME_NOT_FOUND_IN_ANILIST' });
+        }
+
+        if (err.message === 'VARIANT_REQUIRED_FOR_MASTER') {
+            return reply.status(400).send({ error: 'VARIANT_REQUIRED_FOR_MASTER' });
+        }
+
+        if (err.message === 'DOWNLOAD_FAILED') {
+            return reply.status(500).send({ error: 'DOWNLOAD_FAILED', details: err.details });
+        }
+
+        return reply.status(500).send({ error: 'FAILED_TO_DOWNLOAD_ANIME' });
+    }
+}
+
+export async function downloadBook(request: FastifyRequest<{ Body: DownloadBookBody }>, reply: FastifyReply) {
+    try {
+        const {
+            anilist_id,
+            chapter_number,
+            format,
+            content,
+            images
+        } = request.body;
+
+        if (!anilist_id || !chapter_number || !format) {
+            return reply.status(400).send({
+                error: 'MISSING_REQUIRED_FIELDS',
+                required: ['anilist_id', 'chapter_number', 'format']
+            });
+        }
+
+        if (format === 'novel' && !content) {
+            return reply.status(400).send({
+                error: 'MISSING_CONTENT',
+                message: 'content field is required for novels'
+            });
+        }
+
+        if (format === 'manga' && (!images || images.length === 0)) {
+            return reply.status(400).send({
+                error: 'MISSING_IMAGES',
+                message: 'images field is required for manga'
+            });
+        }
+
+        const result = await downloadService.downloadBookChapter({
+            anilistId: anilist_id,
+            chapterNumber: chapter_number,
+            format,
+            content,
+            images
+        });
+
+        if (result.status === 'ALREADY_EXISTS') {
+            return reply.status(409).send(result);
+        }
+
+        return result;
+    } catch (err: any) {
+        console.error('Error downloading book:', err);
+
+        if (err.message === 'METADATA_NOT_FOUND') {
+            return reply.status(404).send({ error: 'BOOK_NOT_FOUND_IN_ANILIST' });
+        }
+
+        if (err.message === 'DOWNLOAD_FAILED') {
+            return reply.status(500).send({ error: 'DOWNLOAD_FAILED', details: err.details });
+        }
+
+        return reply.status(500).send({ error: 'FAILED_TO_DOWNLOAD_BOOK' });
+    }
+}

docker/src/api/local/local.routes.ts

@@ -10,6 +10,8 @@ async function localRoutes(fastify: FastifyInstance) {
     fastify.get('/library/:id/units', controller.getUnits);
     fastify.get('/library/:unitId/manifest', controller.getManifest);
     fastify.get('/library/:unitId/resource/:resId', controller.getPage);
+    fastify.post('/library/download/anime', controller.downloadAnime);
+    fastify.post('/library/download/book', controller.downloadBook);
 }
 
 export default localRoutes;

docker/src/api/local/local.service.ts

@@ -7,12 +7,64 @@ import path from "path";
 import { getAnimeById, searchAnimeLocal } from "../anime/anime.service";
 import { getBookById, searchBooksAniList } from "../books/books.service";
 import AdmZip from 'adm-zip';
-import EPub from 'epub';
 
 const MANGA_IMAGE_EXTS = ['.jpg', '.jpeg', '.png', '.webp'];
 const MANGA_ARCHIVES = ['.cbz', '.cbr', '.zip'];
 const NOVEL_EXTS = ['.epub', '.pdf', '.txt', '.md', '.docx', '.mobi'];
 
+function normalize(str: string) {
+    return str
+        .toLowerCase()
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .replace(/[^a-z0-9 ]/g, '')
+        .trim();
+}
+
+function levenshtein(a: string, b: string) {
+    const matrix = Array.from({ length: b.length + 1 }, (_, i) => [i]);
+
+    for (let j = 0; j <= a.length; j++) matrix[0][j] = j;
+
+    for (let i = 1; i <= b.length; i++) {
+        for (let j = 1; j <= a.length; j++) {
+            matrix[i][j] = Math.min(
+                matrix[i - 1][j] + 1,
+                matrix[i][j - 1] + 1,
+                matrix[i - 1][j - 1] + (b[i - 1] === a[j - 1] ? 0 : 1)
+            );
+        }
+    }
+    return matrix[b.length][a.length];
+}
+
+function getTitleVariants(media: any): string[] {
+    const t = media.title || {};
+    return [
+        t.romaji,
+        t.english,
+        t.native,
+        ...(media.synonyms || [])
+    ].filter(Boolean);
+}
+
+function scoreEntry(query: string, media: any) {
+    const q = normalize(query);
+    let best = Infinity;
+
+    for (const title of getTitleVariants(media)) {
+        const t = normalize(title);
+
+        if (t.includes(q) || q.includes(t)) {
+            return 0;
+        }
+
+        best = Math.min(best, levenshtein(q, t));
+    }
+
+    return best;
+}
+
 export async function resolveEntryMetadata(entry: any, type: string) {
     let metadata = null;
     let matchedId = entry.matched_id;
@@ -26,16 +78,26 @@ export async function resolveEntryMetadata(entry: any, type: string) {
 
         let picked = null;
 
+        let candidates = results;
+
         if (type !== 'anime' && Array.isArray(results)) {
-            console.log(type);
             if (entry.type === 'novels') {
-                picked = results.find(r => r.format === 'NOVEL');
+                candidates = results.filter(r => r.format === 'NOVEL');
             } else if (entry.type === 'manga') {
-                picked = results.find(r => r.format !== 'NOVEL');
+                candidates = results.filter(r => r.format !== 'NOVEL');
             }
         }
 
-        picked ??= results?.[0];
+        if (Array.isArray(candidates) && candidates.length) {
+            const scored = candidates
+                .map(r => ({ r, score: scoreEntry(entry.folder_name, r) }))
+                .sort((a, b) => a.score - b.score);
+
+            // cutoff opcional
+            if (scored[0].score <= 10) {
+                picked = scored[0].r;
+            }
+        }
 
         if (picked?.id) {
             matchedId = picked.id;
@@ -65,9 +127,9 @@ export async function resolveEntryMetadata(entry: any, type: string) {
 }
 
 export async function performLibraryScan(mode: 'full' | 'incremental' = 'incremental') {
-    const config = loadConfig();
+    const { values } = loadConfig();
 
-    if (!config.library) {
+    if (!values.library) {
         throw new Error('NO_LIBRARY_CONFIGURED');
     }
 
@@ -76,7 +138,7 @@ export async function performLibraryScan(mode: 'full' | 'incremental' = 'increme
         await run(`DELETE FROM local_entries`, [], 'local_library');
     }
 
-    for (const [type, basePath] of Object.entries(config.library)) {
+    for (const [type, basePath] of Object.entries(values.library)) {
         if (!basePath || !fs.existsSync(<PathLike>basePath)) continue;
 
         const dirs = fs.readdirSync(<string>basePath, { withFileTypes: true }).filter(d => d.isDirectory());
@@ -427,28 +489,10 @@ export async function getUnitResource(unitId: string, resId: string) {
     return null;
 }
 
-function parseEpubToHtml(filePath: string): Promise<string> {
-    return new Promise((resolve, reject) => {
-        const epub = new EPub(filePath);
 
-        epub.on('end', async () => {
-            let html = '';
-
-            for (const id of epub.flow.map(f => f.id)) {
-                const chapter = await new Promise<string>((res, rej) => {
-                    epub.getChapter(id, (err, text) => {
-                        if (err) rej(err);
-                        else res(text);
-                    });
-                });
-
-                html += `<section class="ln-chapter">${chapter}</section>`;
-            }
-
-            resolve(html);
-        });
-
-        epub.on('error', reject);
-        epub.parse();
-    });
+function parseEpubToHtml(filePath: string) {
+    const zip = new AdmZip(filePath);
+    const entry = zip.getEntry('OEBPS/chapter.xhtml');
+    if (!entry) throw new Error('CHAPTER_NOT_FOUND');
+    return entry.getData().toString('utf8');
 }

docker/src/api/proxy/proxy.controller.ts

@@ -1,6 +1,16 @@
-import {FastifyReply} from 'fastify';
+import {FastifyReply, FastifyRequest} from 'fastify';
 import {processM3U8Content, proxyRequest, streamToReadable} from './proxy.service';
-import {ProxyRequest} from '../types';
+
+interface ProxyQuerystring {
+    url: string;
+    referer?: string;
+    origin?: string;
+    userAgent?: string;
+}
+
+type ProxyRequest = FastifyRequest<{
+    Querystring: ProxyQuerystring
+}>;
 
 export async function handleProxy(req: ProxyRequest, reply: FastifyReply) {
     const { url, referer, origin, userAgent } = req.query;
@@ -10,32 +20,23 @@ export async function handleProxy(req: ProxyRequest, reply: FastifyReply) {
     }
 
     try {
+        const rangeHeader = req.headers.range;
+
         const { response, contentType, isM3U8, contentLength } = await proxyRequest(url, {
             referer,
             origin,
             userAgent
-        });
+        }, rangeHeader);
+
 
         reply.header('Access-Control-Allow-Origin', '*');
         reply.header('Access-Control-Allow-Methods', 'GET, OPTIONS');
         reply.header('Access-Control-Allow-Headers', 'Content-Type, Range');
         reply.header('Access-Control-Expose-Headers', 'Content-Length, Content-Range, Accept-Ranges');
 
-        if (contentType) {
-            reply.header('Content-Type', contentType);
-        }
-
-        if (contentLength) {
-            reply.header('Content-Length', contentLength);
-        }
-
-        if (contentType?.startsWith('image/') || contentType?.startsWith('video/')) {
-            reply.header('Cache-Control', 'public, max-age=31536000, immutable');
-        }
-
-        reply.header('Accept-Ranges', 'bytes');
-
         if (isM3U8) {
+            reply.header('Content-Type', 'application/vnd.apple.mpegurl');
+
             const text = await response.text();
             const baseUrl = new URL(response.url);
 
@@ -48,13 +49,67 @@ export async function handleProxy(req: ProxyRequest, reply: FastifyReply) {
             return reply.send(processedContent);
         }
 
+        const isSubtitle = url.includes('.vtt') || url.includes('.srt') || url.includes('.ass') ||
+            contentType?.includes('text/vtt') || contentType?.includes('text/srt');
+
+        if (isSubtitle) {
+            const text = await response.text();
+
+            let mimeType = 'text/vtt';
+            if (url.includes('.srt') || contentType?.includes('srt')) {
+                mimeType = 'text/plain';
+            } else if (url.includes('.ass')) {
+                mimeType = 'text/plain';
+            }
+
+            reply.header('Content-Type', mimeType);
+            reply.header('Cache-Control', 'public, max-age=3600');
+            return reply.send(text);
+        }
+
+        if (contentType) {
+            reply.header('Content-Type', contentType);
+        }
+
+        if (response.status === 206) {
+            const contentRange = response.headers.get('content-range');
+            if (contentRange) {
+                reply.header('Content-Range', contentRange);
+            }
+            reply.code(206);
+        }
+
+        if (contentLength) {
+            reply.header('Content-Length', contentLength);
+        }
+
+        if (contentType?.startsWith('image/') || contentType?.startsWith('video/')) {
+            reply.header('Cache-Control', 'public, max-age=31536000, immutable');
+        }
+
+        reply.header('Accept-Ranges', 'bytes');
+
         return reply.send(streamToReadable(response.body!));
 
     } catch (err) {
         req.server.log.error(err);
+        console.error('=== PROXY ERROR ===');
+        console.error('URL:', url);
+        console.error('Error:', err);
+        console.error('===================');
 
         if (!reply.sent) {
-            return reply.code(500).send({ error: "Internal Server Error" });
+            return reply.code(500).send({
+                error: "Internal Server Error",
+                details: err instanceof Error ? err.message : String(err)
+            });
         }
     }
 }
+
+export async function handleProxyOptions(req: FastifyRequest, reply: FastifyReply) {
+    reply.header('Access-Control-Allow-Origin', '*');
+    reply.header('Access-Control-Allow-Methods', 'GET, OPTIONS');
+    reply.header('Access-Control-Allow-Headers', 'Content-Type, Range');
+    return reply.code(204).send();
+}

docker/src/api/proxy/proxy.routes.ts

@@ -1,8 +1,9 @@
 import { FastifyInstance } from 'fastify';
-import { handleProxy } from './proxy.controller';
+import {handleProxy, handleProxyOptions} from './proxy.controller';
 
 async function proxyRoutes(fastify: FastifyInstance) {
     fastify.get('/proxy', handleProxy);
+    fastify.options('/proxy', handleProxyOptions);
 }
 
 export default proxyRoutes;

docker/src/api/proxy/proxy.service.ts

@@ -1,4 +1,4 @@
-import { Readable } from 'stream';
+import {Readable} from 'stream';
 
 interface ProxyHeaders {
     referer?: string;
@@ -13,25 +13,24 @@ interface ProxyResponse {
     contentLength: string | null;
 }
 
-export async function proxyRequest(url: string, { referer, origin, userAgent }: ProxyHeaders): Promise<ProxyResponse> {
+export async function proxyRequest(url: string, { referer, origin, userAgent }: ProxyHeaders, rangeHeader?: string): Promise<ProxyResponse> {
     const headers: Record<string, string> = {
         'User-Agent': userAgent || "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
         'Accept': '*/*',
         'Accept-Language': 'en-US,en;q=0.9',
         'Accept-Encoding': 'identity',
-
         'Connection': 'keep-alive'
     };
 
     if (referer) headers['Referer'] = referer;
     if (origin) headers['Origin'] = origin;
+    if (rangeHeader) headers['Range'] = rangeHeader;
 
     let lastError: Error | null = null;
     const maxRetries = 2;
 
     for (let attempt = 0; attempt < maxRetries; attempt++) {
         try {
-
             const controller = new AbortController();
             const timeoutId = setTimeout(() => controller.abort(), 60000);
 
@@ -43,8 +42,7 @@ export async function proxyRequest(url: string, { referer, origin, userAgent }:
 
             clearTimeout(timeoutId);
 
-            if (!response.ok) {
-
+            if (!response.ok && response.status !== 206) {
                 if (response.status === 404 || response.status === 403) {
                     throw new Error(`Proxy Error: ${response.status} ${response.statusText}`);
                 }
@@ -57,9 +55,16 @@ export async function proxyRequest(url: string, { referer, origin, userAgent }:
                 throw new Error(`Proxy Error: ${response.status} ${response.statusText}`);
             }
 
-            const contentType = response.headers.get('content-type');
             const contentLength = response.headers.get('content-length');
-            const isM3U8 = (contentType && contentType.includes('mpegurl')) || url.includes('.m3u8');
+            const contentType = response.headers.get('content-type');
+            const ct = contentType?.toLowerCase();
+
+            const isM3U8 =
+                !!ct && (
+                    ct.includes('mpegurl') ||
+                    ct.includes('m3u8')
+                ) ||
+                url.toLowerCase().includes('.m3u8');
 
             return {
                 response,
@@ -83,24 +88,57 @@ export async function proxyRequest(url: string, { referer, origin, userAgent }:
 }
 
 export function processM3U8Content(text: string, baseUrl: URL, { referer, origin, userAgent }: ProxyHeaders): string {
-    return text.replace(/^(?!#)(?!\s*$).+/gm, (line) => {
-        line = line.trim();
-        let absoluteUrl: string;
-
+    const buildProxy = (url: string) => {
         try {
-            absoluteUrl = new URL(line, baseUrl).href;
-        } catch (e) {
-            return line;
+            const params = new URLSearchParams();
+            params.set('url', new URL(url, baseUrl).href);
+            if (referer) params.set('referer', referer);
+            if (origin) params.set('origin', origin);
+            if (userAgent) params.set('userAgent', userAgent);
+            return `/api/proxy?${params.toString()}`;
+        } catch (error) {
+            console.error('Error building proxy URL for:', url, error);
+            return url;
+        }
+    };
+
+    const isMasterPlaylist = text.includes('#EXT-X-STREAM-INF');
+
+
+    let lines = text.split('\n');
+    let result = [];
+
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        const trimmed = line.trim();
+
+        if (!trimmed) {
+            result.push(line);
+            continue;
         }
 
-        const proxyParams = new URLSearchParams();
-        proxyParams.set('url', absoluteUrl);
-        if (referer) proxyParams.set('referer', referer);
-        if (origin) proxyParams.set('origin', origin);
-        if (userAgent) proxyParams.set('userAgent', userAgent);
+        if (trimmed.startsWith('#')) {
+            if (line.includes('URI=')) {
+                const processedLine = line.replace(/URI="([^"]+)"/g, (match, uri) => {
+                    return `URI="${buildProxy(uri)}"`;
+                });
+                result.push(processedLine);
+            } else {
+                result.push(line);
+            }
+            continue;
+        }
 
-        return `/api/proxy?${proxyParams.toString()}`;
-    });
+        try {
+            const proxiedUrl = buildProxy(trimmed);
+            result.push(proxiedUrl);
+        } catch (error) {
+            console.error('Error processing M3U8 URL line:', trimmed, error);
+            result.push(line);
+        }
+    }
+
+    return result.join('\n');
 }
 
 export function streamToReadable(webStream: ReadableStream): Readable {
@@ -110,7 +148,6 @@ export function streamToReadable(webStream: ReadableStream): Readable {
     return new Readable({
         async read() {
             try {
-
                 const timeoutPromise = new Promise((_, reject) => {
                     readTimeout = setTimeout(() => reject(new Error('Stream read timeout')), 10000);
                 });

docker/src/api/types.ts

@@ -79,6 +79,7 @@ export interface Episode {
 }
 
 export interface Chapter {
+    language?: string | null;
     index: number;
     id: string;
     number: string | number;

docker/src/scripts/anime/anime.js

@@ -1,326 +0,0 @@
-let animeData = null;
-let extensionName = null;
-let animeId = null;
-let isLocal = false;
-
-const episodePagination = Object.create(PaginationManager);
-episodePagination.init(12, renderEpisodes);
-
-YouTubePlayerUtils.init('player');
-
-document.addEventListener('DOMContentLoaded', () => {
-    loadAnime();
-    setupDescriptionModal();
-    setupEpisodeSearch();
-});
-
-function markAsLocal() {
-    isLocal = true;
-    const pill = document.getElementById('local-pill');
-    if (!pill) return;
-
-    pill.textContent = 'Local';
-    pill.style.display = 'inline-flex';
-    pill.style.background = 'rgba(34,197,94,.2)';
-    pill.style.color = '#22c55e';
-    pill.style.borderColor = 'rgba(34,197,94,.3)';
-}
-
-async function checkLocalLibraryEntry() {
-    try {
-        const res = await fetch(`/api/library/anime/${animeId}`);
-        if (!res.ok) return;
-
-        markAsLocal();
-
-    } catch (e) {
-    }
-}
-
-async function loadAnime() {
-    try {
-
-        const urlData = URLUtils.parseEntityPath('anime');
-        if (!urlData) {
-            showError("Invalid URL");
-            return;
-        }
-
-        extensionName = urlData.extensionName;
-        animeId = urlData.entityId;
-        await checkLocalLibraryEntry();
-
-        const fetchUrl = extensionName
-            ? `/api/anime/${animeId}?source=${extensionName}`
-            : `/api/anime/${animeId}?source=anilist`;
-
-        const res = await fetch(fetchUrl, { headers: AuthUtils.getSimpleAuthHeaders() });
-        const data = await res.json();
-
-        if (data.error) {
-            showError("Anime Not Found");
-            return;
-        }
-
-        animeData = data;
-        animeData.entry_type = 'ANIME';
-        const metadata = MediaMetadataUtils.formatAnimeData(data, !!extensionName);
-
-        updatePageTitle(metadata.title);
-        updateMetadata(metadata);
-        updateDescription(data.description || data.summary);
-        updateCharacters(metadata.characters);
-        updateExtensionPill();
-
-        setupWatchButton();
-
-        const hasTrailer = YouTubePlayerUtils.playTrailer(
-            metadata.trailer,
-            'player',
-            metadata.banner
-        );
-
-        setupEpisodes(metadata.episodes);
-
-        await setupAddToListButton();
-
-    } catch (err) {
-        console.error('Error loading anime:', err);
-        showError("Error loading anime");
-    }
-}
-
-function updatePageTitle(title) {
-    document.title = `${title} | WaifuBoard`;
-    document.getElementById('title').innerText = title;
-}
-
-function updateMetadata(metadata) {
-
-    if (metadata.poster) {
-        document.getElementById('poster').src = metadata.poster;
-    }
-
-    document.getElementById('score').innerText = `${metadata.score}% Score`;
-
-    document.getElementById('year').innerText = metadata.year;
-
-    document.getElementById('genres').innerText = metadata.genres;
-
-    document.getElementById('format').innerText = metadata.format;
-
-    document.getElementById('status').innerText = metadata.status;
-
-    document.getElementById('season').innerText = metadata.season;
-
-    document.getElementById('studio').innerText = metadata.studio;
-
-    document.getElementById('episodes').innerText = metadata.episodes;
-}
-
-function updateDescription(rawDescription) {
-    const desc = MediaMetadataUtils.truncateDescription(rawDescription, 4);
-
-    document.getElementById('description-preview').innerHTML = desc.short;
-    document.getElementById('full-description').innerHTML = desc.full;
-
-    const readMoreBtn = document.getElementById('read-more-btn');
-    if (desc.isTruncated) {
-        readMoreBtn.style.display = 'inline-flex';
-    } else {
-        readMoreBtn.style.display = 'none';
-    }
-}
-
-function updateCharacters(characters) {
-    const container = document.getElementById('char-list');
-    container.innerHTML = '';
-
-    if (characters.length > 0) {
-        characters.forEach(char => {
-            container.innerHTML += `
-                <div class="character-item">
-                    <div class="char-dot"></div> ${char.name}
-                </div>`;
-        });
-    } else {
-        container.innerHTML = `
-            <div class="character-item" style="color: #666;">
-                No character data available
-            </div>`;
-    }
-}
-
-function updateExtensionPill() {
-    const pill = document.getElementById('extension-pill');
-    if (!pill) return;
-
-    if (extensionName) {
-        pill.textContent = extensionName.charAt(0).toUpperCase() + extensionName.slice(1).toLowerCase();
-        pill.style.display = 'inline-flex';
-    } else {
-        pill.style.display = 'none';
-    }
-}
-
-function setupWatchButton() {
-    const watchBtn = document.getElementById('watch-btn');
-    if (watchBtn) {
-        watchBtn.onclick = () => {
-            const source = isLocal ? 'local' : (extensionName || 'anilist');
-            window.location.href = URLUtils.buildWatchUrl(animeId, num, source);
-        };
-    }
-}
-
-async function setupAddToListButton() {
-    const btn = document.getElementById('add-to-list-btn');
-    if (!btn || !animeData) return;
-
-    ListModalManager.currentData = animeData;
-    const entryType = ListModalManager.getEntryType(animeData);
-
-    await ListModalManager.checkIfInList(animeId, extensionName || 'anilist', entryType);
-
-    const tempBtn = document.querySelector('.hero-buttons .btn-blur');
-    if (tempBtn) {
-        ListModalManager.updateButton('.hero-buttons .btn-blur');
-    } else {
-
-        updateCustomAddButton();
-    }
-
-    btn.onclick = () => ListModalManager.open(animeData, extensionName || 'anilist');
-}
-
-function updateCustomAddButton() {
-    const btn = document.getElementById('add-to-list-btn');
-    if (!btn) return;
-
-    if (ListModalManager.isInList) {
-        btn.innerHTML = `
-            <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
-                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
-            </svg>
-            In Your List
-        `;
-        btn.style.background = 'rgba(34, 197, 94, 0.2)';
-        btn.style.color = '#22c55e';
-        btn.style.borderColor = 'rgba(34, 197, 94, 0.3)';
-    } else {
-        btn.innerHTML = '+ Add to List';
-        btn.style.background = null;
-        btn.style.color = null;
-        btn.style.borderColor = null;
-    }
-}
-
-function setupEpisodes(totalEpisodes) {
-
-    const limitedTotal = Math.min(Math.max(totalEpisodes, 1), 5000);
-
-    episodePagination.setTotalItems(limitedTotal);
-    renderEpisodes();
-}
-
-function renderEpisodes() {
-    const grid = document.getElementById('episodes-grid');
-    if (!grid) return;
-
-    grid.innerHTML = '';
-
-    const range = episodePagination.getPageRange();
-    const start = range.start + 1;
-
-    const end = range.end;
-
-    for (let i = start; i <= end; i++) {
-        createEpisodeButton(i, grid);
-    }
-
-    episodePagination.renderControls(
-        'pagination-controls',
-        'page-info',
-        'prev-page',
-        'next-page'
-    );
-}
-
-function createEpisodeButton(num, container) {
-    const btn = document.createElement('div');
-    btn.className = 'episode-btn';
-    btn.innerText = `Ep ${num}`;
-    btn.onclick = () => {
-        const source = isLocal ? 'local' : (extensionName || 'anilist');
-        window.location.href = URLUtils.buildWatchUrl(animeId, num, source);
-    };
-    container.appendChild(btn);
-}
-
-function setupDescriptionModal() {
-    const modal = document.getElementById('desc-modal');
-    if (!modal) return;
-
-    modal.addEventListener('click', (e) => {
-        if (e.target.id === 'desc-modal') {
-            closeDescriptionModal();
-        }
-    });
-}
-
-function openDescriptionModal() {
-    document.getElementById('desc-modal').classList.add('active');
-    document.body.style.overflow = 'hidden';
-}
-
-function closeDescriptionModal() {
-    document.getElementById('desc-modal').classList.remove('active');
-    document.body.style.overflow = '';
-}
-
-function setupEpisodeSearch() {
-    const searchInput = document.getElementById('ep-search');
-    if (!searchInput) return;
-
-    searchInput.addEventListener('input', (e) => {
-        const val = parseInt(e.target.value);
-        const grid = document.getElementById('episodes-grid');
-        const totalEpisodes = episodePagination.totalItems;
-
-        if (val > 0 && val <= totalEpisodes) {
-            grid.innerHTML = '';
-            createEpisodeButton(val, grid);
-            document.getElementById('pagination-controls').style.display = 'none';
-        } else if (!e.target.value) {
-            renderEpisodes();
-        } else {
-            grid.innerHTML = '<div style="color:#666; width:100%; text-align:center;">Episode not found</div>';
-            document.getElementById('pagination-controls').style.display = 'none';
-        }
-    });
-}
-
-function showError(message) {
-    document.getElementById('title').innerText = message;
-}
-
-function saveToList() {
-    if (!animeId) return;
-    ListModalManager.save(animeId, extensionName || 'anilist');
-}
-
-function deleteFromList() {
-    if (!animeId) return;
-    ListModalManager.delete(animeId, extensionName || 'anilist');
-}
-
-function closeAddToListModal() {
-    ListModalManager.close();
-}
-
-window.openDescriptionModal = openDescriptionModal;
-window.closeDescriptionModal = closeDescriptionModal;
-window.changePage = (delta) => {
-    if (delta > 0) episodePagination.nextPage();
-    else episodePagination.prevPage();
-};

docker/src/scripts/anime/entry.js

@@ -0,0 +1,408 @@
+let animeData = null;
+let extensionName = null;
+
+let animeId = null;
+let isLocal = false;
+
+const episodePagination = Object.create(PaginationManager);
+episodePagination.init(50, renderEpisodes);
+
+document.addEventListener('DOMContentLoaded', () => {
+    loadAnimeData();
+    setupDescriptionModal();
+    setupEpisodeSearch();
+
+    const urlParams = new URLSearchParams(window.location.search);
+    const initialEp = urlParams.get('episode');
+
+    if (initialEp) {
+        setTimeout(() => {
+            if (animeData) {
+
+                const source = isLocal ? 'local' : (extensionName || 'anilist');
+
+                if (typeof AnimePlayer !== 'undefined') {
+                    AnimePlayer.init(animeId, source, isLocal, animeData);
+                    AnimePlayer.playEpisode(parseInt(initialEp));
+                }
+            }
+        }, 800);
+    }
+});
+
+async function loadAnimeData() {
+    try {
+
+        const pathParts = window.location.pathname.split('/');
+
+        const cleanParts = pathParts.filter(p => p.length > 0);
+
+        if (cleanParts.length >= 3 && cleanParts[0] === 'anime') {
+
+            extensionName = cleanParts[1];
+            animeId = cleanParts[2];
+        } else if (cleanParts.length === 2 && cleanParts[0] === 'anime') {
+
+            extensionName = null;
+
+            animeId = cleanParts[1];
+        } else {
+            showError("Invalid URL Format");
+            return;
+        }
+
+        try {
+            const localRes = await fetch(`/api/library/anime/${animeId}`);
+            if (localRes.ok) isLocal = true;
+        } catch {}
+
+        const fetchUrl = extensionName
+            ? `/api/anime/${animeId}?source=${extensionName}`
+            : `/api/anime/${animeId}?source=anilist`;
+
+        const res = await fetch(fetchUrl, { headers: AuthUtils.getSimpleAuthHeaders() });
+        const data = await res.json();
+
+        if (data.error) {
+            showError("Anime Not Found");
+            return;
+        }
+
+        animeData = data;
+        animeData.entry_type = 'ANIME';
+
+        const metadata = MediaMetadataUtils.formatAnimeData(data, !!extensionName);
+
+        document.title = `${metadata.title} | WaifuBoard`;
+        document.getElementById('title').innerText = metadata.title;
+        if (metadata.poster) document.getElementById('poster').src = metadata.poster;
+
+        document.getElementById('score').innerText = `${metadata.score}% Score`;
+        document.getElementById('year').innerText = metadata.year;
+        document.getElementById('genres').innerText = metadata.genres.split(',').join(' • ');
+        document.getElementById('format').innerText = metadata.format;
+        document.getElementById('status').innerText = metadata.status;
+        document.getElementById('season').innerText = metadata.season;
+        document.getElementById('studio').innerText = metadata.studio;
+        document.getElementById('episodes').innerText = `${metadata.episodes} Ep`;
+
+        updateLocalPill();
+        updateDescription(data.description || data.summary);
+        updateRelations(data.relations?.edges);
+        updateCharacters(metadata.characters);
+        updateRecommendations(data.recommendations?.nodes);
+
+        const source = isLocal ? 'local' : (extensionName || 'anilist');
+
+        if (typeof AnimePlayer !== 'undefined') {
+            AnimePlayer.init(animeId, source, isLocal, animeData);
+        }
+
+        YouTubePlayerUtils.init('trailer-player');
+        YouTubePlayerUtils.playTrailer(metadata.trailer, 'trailer-player', metadata.banner);
+
+        const watchBtn = document.getElementById('watch-btn');
+        if (watchBtn) {
+            watchBtn.onclick = () => {
+                if (typeof AnimePlayer !== 'undefined') AnimePlayer.playEpisode(1);
+            };
+        }
+
+        const total = metadata.episodes || 12;
+        setupEpisodes(total);
+
+        setupAddToListButton();
+
+    } catch (err) {
+        console.error('Error loading anime details:', err);
+        showError("Error loading anime");
+    }
+}
+
+function updateLocalPill() {
+    if (isLocal) {
+        const pill = document.getElementById('local-pill');
+        if(pill) pill.style.display = 'inline-flex';
+    }
+    if (extensionName) {
+        const pill = document.getElementById('extension-pill');
+        if(pill) {
+            pill.innerText = extensionName;
+            pill.style.display = 'inline-flex';
+        }
+    }
+}
+
+function updateDescription(rawDescription) {
+    const desc = MediaMetadataUtils.truncateDescription(rawDescription, 3);
+    const previewEl = document.getElementById('description-preview');
+    const fullEl = document.getElementById('full-description');
+
+    if (previewEl) {
+        previewEl.innerHTML = desc.short +
+            (desc.isTruncated ? ' <span onclick="openDescriptionModal()" style="color:white; cursor:pointer; font-weight:700; margin-left:5px;">Read more</span>' : '');
+    }
+    if (fullEl) fullEl.innerHTML = desc.full;
+}
+
+function setupDescriptionModal() {
+    const modal = document.getElementById('desc-modal');
+    if (!modal) return;
+    modal.addEventListener('click', (e) => {
+        if (e.target.id === 'desc-modal') {
+            closeDescriptionModal();
+        }
+    });
+}
+
+function openDescriptionModal() {
+    const modal = document.getElementById('desc-modal');
+    if(modal) modal.classList.add('active');
+}
+
+function closeDescriptionModal() {
+    const modal = document.getElementById('desc-modal');
+    if(modal) modal.classList.remove('active');
+}
+
+function setupEpisodes(totalEpisodes) {
+    const limitedTotal = Math.min(Math.max(totalEpisodes, 1), 5000);
+    episodePagination.setTotalItems(limitedTotal);
+    renderEpisodes();
+}
+
+function renderEpisodes() {
+    const grid = document.getElementById('episodes-grid');
+    if (!grid) return;
+    grid.innerHTML = '';
+
+    const range = episodePagination.getPageRange();
+    const currentEp = (typeof AnimePlayer !== 'undefined') ? AnimePlayer.getCurrentEpisode() : 0;
+
+    for (let i = range.start + 1; i <= range.end; i++) {
+        const btn = document.createElement('div');
+        btn.className = 'episode-btn';
+        if (currentEp === i) btn.classList.add('active-playing');
+
+        btn.innerText = i;
+
+        btn.onclick = () => {
+            if (typeof AnimePlayer !== 'undefined') {
+                AnimePlayer.playEpisode(i);
+                renderEpisodes();
+            }
+        };
+        grid.appendChild(btn);
+    }
+
+    const totalItems = episodePagination.totalItems || 0;
+    const itemsPerPage = episodePagination.itemsPerPage || 50;
+    const safeTotalPages = Math.ceil(totalItems / itemsPerPage) || 1;
+
+    const info = document.getElementById('page-info');
+    if(info) info.innerText = `Page ${episodePagination.currentPage} of ${safeTotalPages}`;
+
+    const prevBtn = document.getElementById('prev-page');
+    const nextBtn = document.getElementById('next-page');
+
+    if(prevBtn) {
+        prevBtn.disabled = episodePagination.currentPage === 1;
+        prevBtn.onclick = () => { episodePagination.prevPage(); };
+    }
+
+    if(nextBtn) {
+
+        nextBtn.disabled = episodePagination.currentPage >= safeTotalPages;
+        nextBtn.onclick = () => { episodePagination.nextPage(); };
+    }
+}
+
+function setupEpisodeSearch() {
+    const searchInput = document.getElementById('ep-search');
+    if (!searchInput) return;
+
+    searchInput.addEventListener('input', (e) => {
+        const val = parseInt(e.target.value);
+        const grid = document.getElementById('episodes-grid');
+        const controls = document.getElementById('pagination-controls');
+
+        if (val > 0) {
+            grid.innerHTML = '';
+            const btn = document.createElement('div');
+            btn.className = 'episode-btn';
+            btn.innerText = `${val}`;
+            btn.onclick = () => { if (typeof AnimePlayer !== 'undefined') AnimePlayer.playEpisode(val); };
+            grid.appendChild(btn);
+            if(controls) controls.style.display = 'none';
+        } else if (!e.target.value) {
+            if(controls) controls.style.display = 'flex';
+            renderEpisodes();
+        }
+    });
+}
+
+function updateCharacters(characters) {
+    const container = document.getElementById('char-list');
+    if (!container) return;
+    container.innerHTML = '';
+    if (!characters || characters.length === 0) return;
+
+    characters.forEach((char, index) => {
+        const img = char.node?.image?.large || char.image;
+        const name = char.node?.name?.full || char.name;
+        const role = char.role || 'Supporting';
+
+        const card = document.createElement('div');
+        card.className = `character-item ${index >= 12 ? 'hidden-char' : ''}`;
+        card.style.display = index >= 12 ? 'none' : 'flex';
+
+        card.innerHTML = `
+            <div class="char-avatar"><img src="${img}" loading="lazy"></div>
+            <div class="char-info"><div class="char-name">${name}</div><div class="char-role">${role}</div></div>
+        `;
+        container.appendChild(card);
+    });
+
+    const showMoreBtn = document.getElementById('show-more-chars');
+    if (showMoreBtn) {
+        if (characters.length > 12) {
+            showMoreBtn.style.display = 'block';
+            showMoreBtn.onclick = () => {
+                document.querySelectorAll('.hidden-char').forEach(el => el.style.display = 'flex');
+                showMoreBtn.style.display = 'none';
+            };
+        } else {
+            showMoreBtn.style.display = 'none';
+        }
+    }
+}
+
+function updateRelations(relations) {
+    const container = document.getElementById('relations-grid');
+    const section = document.getElementById('relations-section');
+
+    if (!container || !relations || relations.length === 0) {
+        if (section) section.style.display = 'none';
+        return;
+    }
+
+    section.style.display = 'block';
+    container.innerHTML = '';
+
+    const priorityMap = {
+        'ADAPTATION': 1,
+        'PREQUEL': 2,
+        'SEQUEL': 3,
+        'PARENT': 4,
+        'SIDE_STORY': 5,
+        'SPIN_OFF': 6,
+        'ALTERNATIVE': 7,
+        'CHARACTER': 8,
+        'OTHER': 99
+    };
+
+    relations.sort((a, b) => {
+        const pA = priorityMap[a.relationType] || 50;
+        const pB = priorityMap[b.relationType] || 50;
+        return pA - pB;
+    });
+
+    relations.forEach(rel => {
+        const media = rel.node;
+        if (!media) return;
+
+        const title = media.title?.romaji || media.title?.english || 'Unknown';
+        const cover = media.coverImage?.large || media.coverImage?.medium || '';
+
+        const typeDisplay = rel.relationType ? rel.relationType.replace(/_/g, ' ') : 'RELATION';
+        const rawType = rel.relationType;
+
+        const el = document.createElement('div');
+        el.className = 'relation-card-horizontal';
+
+        let targetUrl = null;
+
+        if (rawType === 'ADAPTATION') {
+            targetUrl = `/book/${media.id}`;
+
+        } else if (media.type === 'ANIME' && rawType !== 'OTHER') {
+            targetUrl = `/anime/${media.id}`;
+
+        }
+
+        if (targetUrl) {
+            el.onclick = () => { window.location.href = targetUrl; };
+        } else {
+            el.classList.add('no-link');
+
+            el.onclick = null;
+        }
+
+        el.innerHTML = `
+            <img src="${cover}" class="rel-img" alt="${title}" onerror="this.src='/public/assets/placeholder.svg'">
+            <div class="rel-info">
+                <span class="rel-type">${typeDisplay}</span>
+                <span class="rel-title">${title}</span>
+            </div>
+        `;
+        container.appendChild(el);
+    });
+}
+
+function updateRecommendations(recommendations) {
+    const container = document.getElementById('recommendations-grid');
+    if (!container || !recommendations) return;
+    container.innerHTML = '';
+
+    recommendations.forEach(rec => {
+        const media = rec.mediaRecommendation;
+        if (!media) return;
+
+        const title = media.title?.romaji || 'Unknown';
+        const cover = media.coverImage?.large || media.coverImage?.medium || '';
+
+        const el = document.createElement('div');
+        el.className = 'card';
+
+        el.onclick = () => { window.location.href = `/anime/${media.id}`; };
+
+        el.innerHTML = `
+            <div class="card-img-wrap"><img src="${cover}" loading="lazy" onerror="this.src='/public/assets/no-cover.jpg'"></div>
+            <div class="card-content"><h3>${title}</h3></div>
+        `;
+        container.appendChild(el);
+    });
+}
+
+async function setupAddToListButton() {
+    const btn = document.getElementById('add-to-list-btn');
+    if (!btn || !animeData) return;
+
+    ListModalManager.currentData = animeData;
+    const entryType = 'ANIME';
+    await ListModalManager.checkIfInList(animeId, extensionName || 'anilist', entryType);
+    updateCustomAddButton();
+    btn.onclick = () => ListModalManager.open(animeData, extensionName || 'anilist');
+}
+
+function updateCustomAddButton() {
+    const btn = document.getElementById('add-to-list-btn');
+    if (btn && ListModalManager.isInList) {
+        btn.innerHTML = `✓ In Your List`;
+        btn.style.background = 'rgba(34, 197, 94, 0.2)';
+        btn.style.borderColor = '#22c55e';
+        btn.style.color = '#22c55e';
+    }
+}
+
+function showError(msg) {
+    const el = document.getElementById('title');
+    if(el) el.innerText = msg;
+}
+
+window.openDescriptionModal = openDescriptionModal;
+window.closeDescriptionModal = closeDescriptionModal;
+window.scrollRecommendations = (dir) => {
+    const el = document.getElementById('recommendations-grid');
+    if(el) el.scrollBy({ left: 240 * 3 * dir, behavior: 'smooth' });
+};

docker/src/scripts/books/book.js

@@ -5,25 +5,483 @@ let bookSlug = null;
 
 let allChapters = [];
 let filteredChapters = [];
-
 let availableExtensions = [];
 let isLocal = false;
+
+let currentLanguage = null;
+let uniqueLanguages = [];
+let isSortAscending = true;
+
 const chapterPagination = Object.create(PaginationManager);
-chapterPagination.init(12, () => renderChapterTable());
+chapterPagination.init(6, () => renderChapterList());
 
 document.addEventListener('DOMContentLoaded', () => {
     init();
     setupModalClickOutside();
+    document.getElementById('sort-btn')?.addEventListener('click', toggleSortOrder);
 });
 
+async function init() {
+    try {
+        const urlData = URLUtils.parseEntityPath('book');
+        if (!urlData) { showError("Book Not Found"); return; }
+
+        extensionName = urlData.extensionName;
+        bookId = urlData.entityId;
+        bookSlug = urlData.slug;
+
+        await loadBookMetadata();
+        await checkLocalLibraryEntry();
+        await loadAvailableExtensions();
+        await loadChapters();
+        await setupAddToListButton();
+
+    } catch (err) {
+        console.error("Init Error:", err);
+        showError("Error loading book");
+    }
+}
+
+async function loadBookMetadata() {
+    const source = extensionName || 'anilist';
+    const fetchUrl = `/api/book/${bookId}?source=${source}`;
+
+    try {
+        const res = await fetch(fetchUrl);
+        const data = await res.json();
+
+        if (data.error || !data) { showError("Book Not Found"); return; }
+
+        const raw = Array.isArray(data) ? data[0] : data;
+        bookData = raw;
+
+        const metadata = MediaMetadataUtils.formatBookData(raw, !!extensionName);
+        bookData.entry_type = metadata.format === 'MANGA' ? 'MANGA' : 'NOVEL';
+
+        updatePageTitle(metadata.title);
+        updateMetadata(metadata, raw);
+        updateExtensionPill();
+
+    } catch (e) {
+        console.error(e);
+        showError("Error loading metadata");
+    }
+}
+
+function updatePageTitle(title) {
+    document.title = `${title} | WaifuBoard Books`;
+    const titleEl = document.getElementById('title');
+    if (titleEl) titleEl.innerText = title;
+}
+
+function updateMetadata(metadata, rawData) {
+    // 1. Cabecera (Score, Año, Status, Formato, Caps)
+    const elements = {
+        'description': metadata.description,
+        'published-date': metadata.year,
+        'status': metadata.status,
+        'format': metadata.format,
+        'chapters-count': metadata.chapters ? `${metadata.chapters} Ch` : '?? Ch',
+        'genres': metadata.genres ? metadata.genres.replace(/,/g, ' • ') : '',
+        'poster': metadata.poster,
+        'hero-bg': metadata.banner
+    };
+
+    if(document.getElementById('description')) document.getElementById('description').innerHTML = metadata.description;
+    if(document.getElementById('poster')) document.getElementById('poster').src = metadata.poster;
+    if(document.getElementById('hero-bg')) document.getElementById('hero-bg').src = metadata.banner;
+
+    ['published-date','status','format','chapters-count','genres'].forEach(id => {
+        const el = document.getElementById(id);
+        if(el) el.innerText = elements[id];
+    });
+
+    const scoreEl = document.getElementById('score');
+    if (scoreEl) scoreEl.innerText = extensionName ? `${metadata.score}` : `${metadata.score}% Score`;
+
+    // 2. Sidebar: Sinónimos (Para llenar espacio vacío)
+    if (rawData.synonyms && rawData.synonyms.length > 0) {
+        const sidebarInfo = document.getElementById('sidebar-info');
+        const list = document.getElementById('synonyms-list');
+        if (sidebarInfo && list) {
+            sidebarInfo.style.display = 'block';
+            list.innerHTML = '';
+            // Mostrar máx 5 sinónimos para no alargar demasiado
+            rawData.synonyms.slice(0, 5).forEach(syn => {
+                const li = document.createElement('li');
+                li.innerText = syn;
+                list.appendChild(li);
+            });
+        }
+    }
+
+    // 3. Renderizar Personajes
+    if (rawData.characters && rawData.characters.nodes && rawData.characters.nodes.length > 0) {
+        renderCharacters(rawData.characters.nodes);
+    }
+
+    // 4. Renderizar Relaciones
+    if (rawData.relations && rawData.relations.edges && rawData.relations.edges.length > 0) {
+        renderRelations(rawData.relations.edges);
+    }
+}
+
+function renderCharacters(nodes) {
+    const container = document.getElementById('characters-list');
+    if(!container) return;
+    container.innerHTML = '';
+
+    nodes.forEach(char => {
+        const el = document.createElement('div');
+        el.className = 'character-item';
+
+        const img = char.image?.large || char.image?.medium || '/public/assets/no-image.png';
+        const name = char.name?.full || 'Unknown';
+        const role = char.role || 'Supporting';
+
+        el.innerHTML = `
+            <div class="char-avatar"><img src="${img}" loading="lazy"></div>
+            <div class="char-info">
+                <div class="char-name">${name}</div>
+                <div class="char-role">${role}</div>
+            </div>
+        `;
+        container.appendChild(el);
+    });
+}
+
+function renderRelations(edges) {
+    const container = document.getElementById('relations-list');
+    const section = document.getElementById('relations-section');
+    if(!container || !section) return;
+
+    if (!edges || edges.length === 0) {
+        section.style.display = 'none';
+        return;
+    }
+
+    section.style.display = 'block';
+    container.innerHTML = '';
+
+    edges.forEach(edge => {
+        const node = edge.node;
+        if (!node) return;
+
+        const el = document.createElement('div');
+        el.className = 'relation-card-horizontal';
+
+        const img = node.coverImage?.large || node.coverImage?.medium || '/public/assets/no-image.png';
+        const title = node.title?.romaji || node.title?.english || node.title?.native || 'Unknown';
+        const type = edge.relationType ? edge.relationType.replace(/_/g, ' ') : 'Related';
+
+        el.innerHTML = `
+            <img src="${img}" class="rel-img" alt="${title}" loading="lazy">
+            <div class="rel-info">
+                <span class="rel-type">${type}</span>
+                <span class="rel-title">${title}</span>
+            </div>
+        `;
+
+        el.onclick = () => {
+            const targetType = node.type === 'ANIME' ? 'anime' : 'book';
+            window.location.href = `/${targetType}/${node.id}`;
+        };
+
+        container.appendChild(el);
+    });
+}
+
+function processChaptersData(chaptersData) {
+    allChapters = chaptersData;
+    const langSet = new Set(allChapters.map(ch => ch.language).filter(l => l));
+    uniqueLanguages = Array.from(langSet);
+    setupLanguageSelector();
+    filterAndRenderChapters();
+    setupReadButton();
+}
+
+function buildProxyUrl(url, headers = {}) {
+    const origin = window.location.origin;
+
+    const params = new URLSearchParams({ url });
+    if (headers.Referer || headers.referer)
+        params.append("referer", headers.Referer || headers.referer);
+    if (headers["User-Agent"] || headers["user-agent"])
+        params.append("userAgent", headers["User-Agent"] || headers["user-agent"]);
+    if (headers.Origin || headers.origin)
+        params.append("origin", headers.Origin || headers.origin);
+
+    return `${origin}/api/proxy?${params.toString()}`;
+}
+
+async function downloadChapter(chapterId, chapterNumber, provider, btnElement) {
+    // Validamos que tengamos bookId y un provider válido
+    if (!bookId || !provider) return showError("Error: Faltan datos del capítulo");
+
+    // Feedback visual
+    const originalText = btnElement.innerHTML;
+    btnElement.innerHTML = `<span class="spinner">↻</span>`; // Spinner pequeño
+    btnElement.disabled = true;
+
+    try {
+        // 1. OBTENER CONTENIDO USANDO EL PROVIDER DEL CAPÍTULO
+        // CAMBIO AQUÍ: Usamos 'provider' en lugar de 'extensionName'
+        const fetchUrl = `/api/book/${bookId}/${chapterId}/${provider}?source=${extensionName || 'anilist'}&lang=none`;
+
+        const contentRes = await fetch(fetchUrl);
+
+        if (!contentRes.ok) throw new Error("Error obteniendo contenido del capítulo");
+        const chapterData = await contentRes.json();
+
+        // 2. PREPARAR BODY (Misma lógica)
+        let payload = {
+            anilist_id: parseInt(bookId),
+            chapter_number: parseFloat(chapterNumber),
+            format: "",
+        };
+
+        if (chapterData.pages && Array.isArray(chapterData.pages)) {
+            payload.format = "manga";
+            payload.images = chapterData.pages.map((img, index) => {
+                let finalUrl = img.url;
+                if (img.headers && Object.keys(img.headers).length > 0) {
+                    finalUrl = buildProxyUrl(img.url, img.headers);
+                }
+                return { index: index, url: finalUrl };
+            });
+        }
+        else if (chapterData.content) {
+            payload.format = "novel";
+            payload.content = chapterData.content;
+        } else {
+            throw new Error("Formato desconocido");
+        }
+
+        const downloadRes = await fetch('/api/library/download/book', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload)
+        });
+
+        const downloadData = await downloadRes.json();
+
+        if (downloadRes.status === 200) {
+            btnElement.innerHTML = "✓";
+            btnElement.style.color = "#22c55e"; // Icono verde
+        } else if (downloadRes.status === 409) {
+            btnElement.innerHTML = "✓";
+            btnElement.style.color = "#3b82f6"; // Icono azul (ya existe)
+        } else {
+            throw new Error(downloadData.message || "Error");
+        }
+
+    } catch (err) {
+        console.error("Download Error:", err);
+        btnElement.innerHTML = "✕"; // X roja
+        btnElement.style.color = "#ef4444";
+        btnElement.disabled = false;
+
+        // Restaurar icono original después de 3 seg
+        setTimeout(() => {
+            btnElement.innerHTML = originalText;
+            btnElement.style.color = "";
+        }, 3000);
+    }
+}
+
+async function loadChapters(targetProvider = null) {
+    const listContainer = document.getElementById('chapters-list');
+    const loadingMsg = document.getElementById('loading-msg');
+
+    if(listContainer) listContainer.innerHTML = '';
+    if(loadingMsg) loadingMsg.style.display = 'block';
+
+    if (!targetProvider) {
+        const select = document.getElementById('provider-filter');
+        targetProvider = select ? select.value : (availableExtensions[0] || 'all');
+    }
+
+    try {
+        let fetchUrl;
+        let isLocalRequest = targetProvider === 'local';
+
+        if (isLocalRequest) {
+            fetchUrl = `/api/library/${bookId}/units`;
+        } else {
+            const source = extensionName || 'anilist';
+            fetchUrl = `/api/book/${bookId}/chapters?source=${source}`;
+            if (targetProvider !== 'all') fetchUrl += `&provider=${targetProvider}`;
+        }
+
+        const res = await fetch(fetchUrl);
+        const data = await res.json();
+
+        if(loadingMsg) loadingMsg.style.display = 'none';
+
+        let rawData = [];
+        if (isLocalRequest) {
+            rawData = (data.units || []).map((unit, idx) => ({
+                id: unit.id || idx, number: unit.number, title: unit.name,
+                provider: 'local', index: idx, format: unit.format, language: 'local'
+            }));
+        } else {
+            rawData = data.chapters || [];
+        }
+        processChaptersData(rawData);
+
+    } catch (err) {
+        if(loadingMsg) loadingMsg.style.display = 'none';
+        if(listContainer) listContainer.innerHTML = '<div style="text-align:center; color: #ef4444;">Error loading chapters.</div>';
+        console.error(err);
+    }
+}
+
+function setupLanguageSelector() {
+    const selectorContainer = document.getElementById('language-selector-container');
+    const select = document.getElementById('language-select');
+    if (!selectorContainer || !select) return;
+
+    if (uniqueLanguages.length <= 1) {
+        selectorContainer.classList.add('hidden');
+        currentLanguage = uniqueLanguages[0] || null;
+        return;
+    }
+    selectorContainer.classList.remove('hidden');
+    select.innerHTML = '';
+
+    const langNames = { 'es': 'Español', 'es-419': 'Latino', 'en': 'English', 'pt-br': 'Português', 'ja': '日本語' };
+
+    uniqueLanguages.forEach(lang => {
+        const option = document.createElement('option');
+        option.value = lang;
+        option.textContent = langNames[lang] || lang.toUpperCase();
+        select.appendChild(option);
+    });
+
+    if (uniqueLanguages.includes('es-419')) currentLanguage = 'es-419';
+    else if (uniqueLanguages.includes('es')) currentLanguage = 'es';
+    else currentLanguage = uniqueLanguages[0];
+    select.value = currentLanguage;
+
+    select.onchange = (e) => {
+        currentLanguage = e.target.value;
+        chapterPagination.currentPage = 1;
+        filterAndRenderChapters();
+    };
+}
+
+function filterAndRenderChapters() {
+    let tempChapters = [...allChapters];
+    if (currentLanguage && uniqueLanguages.length > 1) {
+        tempChapters = tempChapters.filter(ch => ch.language === currentLanguage);
+    }
+    const searchQuery = document.getElementById('chapter-search')?.value.toLowerCase();
+    if(searchQuery){
+        tempChapters = tempChapters.filter(ch =>
+            (ch.title && ch.title.toLowerCase().includes(searchQuery)) ||
+            (ch.number && ch.number.toString().includes(searchQuery))
+        );
+    }
+    tempChapters.sort((a, b) => {
+        const numA = parseFloat(a.number) || 0;
+        const numB = parseFloat(b.number) || 0;
+        return isSortAscending ? numA - numB : numB - numA;
+    });
+    filteredChapters = tempChapters;
+    chapterPagination.setTotalItems(filteredChapters.length);
+    renderChapterList();
+}
+
+function renderChapterList() {
+    const container = document.getElementById('chapters-list');
+    if(!container) return;
+    container.innerHTML = '';
+    const itemsToShow = chapterPagination.getCurrentPageItems(filteredChapters);
+
+    if (itemsToShow.length === 0) {
+        container.innerHTML = '<div style="text-align:center; padding:2rem; color:#888;">No chapters found.</div>';
+        return;
+    }
+
+    itemsToShow.forEach(chapter => {
+        const el = document.createElement('div');
+        el.className = 'chapter-item';
+
+        // El clic principal abre el lector
+        el.onclick = () => openReader(chapter.id, chapter.provider);
+
+        const dateStr = chapter.date ? new Date(chapter.date).toLocaleDateString() : '';
+        const providerLabel = chapter.provider !== 'local' ? chapter.provider : '';
+
+        // Definimos el icono SVG de descarga para no ensuciar tanto el template string
+        const downloadIcon = `
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                <polyline points="7 10 12 15 17 10"></polyline>
+                <line x1="12" y1="15" x2="12" y2="3"></line>
+            </svg>`;
+
+        const isLocal = chapter.provider === 'local';
+        const downloadBtnStyle = isLocal ? 'display:none;' : '';
+
+        el.innerHTML = `
+            <div class="chapter-info">
+                <span class="chapter-number">Chapter ${chapter.number}</span>
+                <span class="chapter-title">${chapter.title || ''}</span>
+            </div>
+            
+            <div class="chapter-actions" style="display: flex; align-items: center; gap: 10px;">
+                <div class="chapter-meta">
+                    ${providerLabel ? `<span class="lang-tag">${providerLabel}</span>` : ''}
+                    ${dateStr ? `<span>${dateStr}</span>` : ''}
+                </div>
+        
+                <button class="download-btn" 
+                    style="${downloadBtnStyle}"
+                    onclick="event.stopPropagation(); downloadChapter('${chapter.id}', '${chapter.number}', '${chapter.provider}', this)"
+                    title="Descargar">
+                    ${downloadIcon}
+                </button>
+        
+                <svg class="chapter-play-icon" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M8 5v14l11-7z"/>
+                </svg>
+            </div>
+        `;
+        container.appendChild(el);
+    });
+
+    chapterPagination.renderControls('pagination', 'page-info', 'prev-page', 'next-page');
+}
+
+function toggleSortOrder() {
+    isSortAscending = !isSortAscending;
+    const btn = document.getElementById('sort-btn');
+    if(btn) btn.style.transform = isSortAscending ? 'rotate(180deg)' : 'rotate(0deg)';
+    filterAndRenderChapters();
+}
+
+function setupReadButton() {
+    const readBtn = document.getElementById('read-start-btn');
+    if (!readBtn || allChapters.length === 0) return;
+    const firstChapter = [...allChapters].sort((a,b) => a.index - b.index)[0];
+    if (firstChapter) readBtn.onclick = () =>
+        openReader(firstChapter.index ?? firstChapter.id, firstChapter.provider);
+
+}
+
+function openReader(chapterIndexOrId, provider) {
+    const lang = currentLanguage ?? 'none';
+    window.location.href =
+        URLUtils.buildReadUrl(bookId, chapterIndexOrId, provider, extensionName || 'anilist')
+        + `?lang=${lang}`;
+}
+
 async function checkLocalLibraryEntry() {
     try {
-        const libraryType =
-            bookData?.entry_type === 'NOVEL' ? 'novels' : 'manga';
-
+        const libraryType = bookData?.entry_type === 'NOVEL' ? 'novels' : 'manga';
         const res = await fetch(`/api/library/${libraryType}/${bookId}`);
         if (!res.ok) return;
-
         const data = await res.json();
         if (data.matched) {
             isLocal = true;
@@ -36,255 +494,36 @@ async function checkLocalLibraryEntry() {
                 pill.style.borderColor = 'rgba(34, 197, 94, 0.3)';
             }
         }
-    } catch (e) {
-        console.error("Error checking local status:", e);
-    }
-}
-
-async function init() {
-    try {
-        const urlData = URLUtils.parseEntityPath('book');
-        if (!urlData) {
-            showError("Book Not Found");
-            return;
-        }
-
-        extensionName = urlData.extensionName;
-        bookId = urlData.entityId;
-        bookSlug = urlData.slug;
-        await loadBookMetadata();
-        await checkLocalLibraryEntry();
-
-        await loadAvailableExtensions();
-        await loadChapters();
-
-        await setupAddToListButton();
-
-    } catch (err) {
-        console.error("Metadata Error:", err);
-        showError("Error loading book");
-    }
+    } catch (e) { console.error("Error checking local:", e); }
 }
 
 async function loadAvailableExtensions() {
     try {
-        const res = await fetch('/api/extensions/book');
-        const data = await res.json();
-        availableExtensions = data.extensions || [];
+        if (!bookData?.entry_type) return;
+        console.log(bookData.entry_type)
 
+        const type = bookData.entry_type === 'MANGA' ? 'manga' : 'novel';
+        const res = await fetch(`/api/extensions/${type}`);
+        const data = await res.json();
+
+        availableExtensions = data.extensions || [];
         setupProviderFilter();
     } catch (err) {
-        console.error("Error fetching extensions:", err);
-    }
-}
-
-async function loadBookMetadata() {
-    const source = extensionName || 'anilist';
-    const fetchUrl = `/api/book/${bookId}?source=${source}`;
-
-    const res = await fetch(fetchUrl);
-    const data = await res.json();
-
-    if (data.error || !data) {
-        showError("Book Not Found");
-        return;
-    }
-
-    const raw = Array.isArray(data) ? data[0] : data;
-    bookData = raw;
-
-    const metadata = MediaMetadataUtils.formatBookData(raw, !!extensionName);
-    bookData.entry_type =
-        metadata.format === 'MANGA' ? 'MANGA' : 'NOVEL';
-    updatePageTitle(metadata.title);
-    updateMetadata(metadata);
-    updateExtensionPill();
-}
-
-function updatePageTitle(title) {
-    document.title = `${title} | WaifuBoard Books`;
-    const titleEl = document.getElementById('title');
-    if (titleEl) titleEl.innerText = title;
-}
-
-function updateMetadata(metadata) {
-
-    const descEl = document.getElementById('description');
-    if (descEl) descEl.innerHTML = metadata.description;
-
-    const scoreEl = document.getElementById('score');
-    if (scoreEl) {
-        scoreEl.innerText = extensionName
-            ? `${metadata.score}`
-            : `${metadata.score}% Score`;
-    }
-
-    const pubEl = document.getElementById('published-date');
-    if (pubEl) pubEl.innerText = metadata.year;
-
-    const statusEl = document.getElementById('status');
-    if (statusEl) statusEl.innerText = metadata.status;
-
-    const formatEl = document.getElementById('format');
-    if (formatEl) formatEl.innerText = metadata.format;
-
-    const chaptersEl = document.getElementById('chapters');
-    if (chaptersEl) chaptersEl.innerText = metadata.chapters;
-
-    const genresEl = document.getElementById('genres');
-    if (genresEl) genresEl.innerText = metadata.genres;
-
-    const posterEl = document.getElementById('poster');
-    if (posterEl) posterEl.src = metadata.poster;
-
-    const heroBgEl = document.getElementById('hero-bg');
-    if (heroBgEl) heroBgEl.src = metadata.banner;
-}
-
-function updateExtensionPill() {
-    const pill = document.getElementById('extension-pill');
-    if (!pill) return;
-
-    if (extensionName) {
-        pill.textContent = extensionName.charAt(0).toUpperCase() + extensionName.slice(1).toLowerCase();
-        pill.style.display = 'inline-flex';
-    } else {
-        pill.style.display = 'none';
-    }
-}
-
-async function setupAddToListButton() {
-    const btn = document.getElementById('add-to-list-btn');
-    if (!btn || !bookData) return;
-
-    ListModalManager.currentData = bookData;
-    const entryType = ListModalManager.getEntryType(bookData);
-    const idForCheck = extensionName ? bookSlug : bookId;
-
-    await ListModalManager.checkIfInList(
-        idForCheck,
-        extensionName || 'anilist',
-        entryType
-    );
-
-    updateCustomAddButton();
-
-    btn.onclick = () => ListModalManager.open(bookData, extensionName || 'anilist');
-}
-
-function updateCustomAddButton() {
-    const btn = document.getElementById('add-to-list-btn');
-    if (!btn) return;
-
-    if (ListModalManager.isInList) {
-        btn.innerHTML = `
-            <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
-                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
-            </svg>
-            In Your Library
-        `;
-        btn.style.background = 'rgba(34, 197, 94, 0.2)';
-        btn.style.color = '#22c55e';
-        btn.style.borderColor = 'rgba(34, 197, 94, 0.3)';
-    } else {
-        btn.innerHTML = '+ Add to Library';
-        btn.style.background = null;
-        btn.style.color = null;
-        btn.style.borderColor = null;
-    }
-}
-
-async function loadChapters(targetProvider = null) {
-    const tbody = document.getElementById('chapters-body');
-    if (!tbody) return;
-
-    if (!targetProvider) {
-        const select = document.getElementById('provider-filter');
-        targetProvider = select ? select.value : (availableExtensions[0] || 'all');
-    }
-
-    tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">Loading chapters...</td></tr>';
-
-    try {
-        let fetchUrl;
-        let isLocalRequest = targetProvider === 'local';
-
-        if (isLocalRequest) {
-            // Nuevo endpoint para archivos locales
-            fetchUrl = `/api/library/${bookId}/units`;
-        } else {
-            const source = extensionName || 'anilist';
-            fetchUrl = `/api/book/${bookId}/chapters?source=${source}`;
-            if (targetProvider !== 'all') fetchUrl += `&provider=${targetProvider}`;
-        }
-
-        const res = await fetch(fetchUrl);
-        const data = await res.json();
-
-        // Mapeo de datos: Si es local usamos 'units', si no, usamos 'chapters'
-        if (isLocalRequest) {
-            allChapters = (data.units || []).map((unit, idx) => ({
-                number: unit.number,
-                title: unit.name,
-                provider: 'local',
-                index: idx,           // ✅ índice (0,1,2…)
-                format: unit.format
-            }));
-        } else {
-            allChapters = data.chapters || [];
-        }
-
-        filteredChapters = [...allChapters];
-        applyChapterFilter();
-
-        const totalEl = document.getElementById('total-chapters');
-        if (allChapters.length === 0) {
-            tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">No chapters found.</td></tr>';
-            if (totalEl) totalEl.innerText = "0 Found";
-            return;
-        }
-
-        if (totalEl) totalEl.innerText = `${allChapters.length} Found`;
-
-        setupReadButton();
-        chapterPagination.setTotalItems(filteredChapters.length);
-        chapterPagination.reset();
-        renderChapterTable();
-
-    } catch (err) {
-        tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; color: #ef4444;">Error loading chapters.</td></tr>';
         console.error(err);
     }
 }
 
-function applyChapterFilter() {
-    const chapterParam = URLUtils.getQueryParam('chapter');
-    if (!chapterParam) return;
-
-    const chapterNumber = parseFloat(chapterParam);
-    if (isNaN(chapterNumber)) return;
-
-    filteredChapters = allChapters.filter(
-        ch => parseFloat(ch.number) === chapterNumber
-    );
-
-    chapterPagination.reset();
-}
-
 function setupProviderFilter() {
     const select = document.getElementById('provider-filter');
     if (!select) return;
-
     select.style.display = 'inline-block';
     select.innerHTML = '';
 
-    // Opción para cargar todo
     const allOpt = document.createElement('option');
     allOpt.value = 'all';
-    allOpt.innerText = 'Load All (Slower)';
+    allOpt.innerText = 'All Providers';
     select.appendChild(allOpt);
 
-    // NUEVO: Si es local, añadimos la opción 'local' al principio
     if (isLocal) {
         const localOpt = document.createElement('option');
         localOpt.value = 'local';
@@ -292,7 +531,6 @@ function setupProviderFilter() {
         select.appendChild(localOpt);
     }
 
-    // Añadir extensiones normales
     availableExtensions.forEach(ext => {
         const opt = document.createElement('option');
         opt.value = ext;
@@ -300,90 +538,43 @@ function setupProviderFilter() {
         select.appendChild(opt);
     });
 
-    // Lógica de selección automática
-    if (isLocal) {
-        select.value = 'local'; // Prioridad si es local
-    } else if (extensionName && availableExtensions.includes(extensionName)) {
-        select.value = extensionName;
-    } else if (availableExtensions.length > 0) {
-        select.value = availableExtensions[0];
+    if (isLocal) select.value = 'local';
+    else if (extensionName && availableExtensions.includes(extensionName)) select.value = extensionName;
+    else if (availableExtensions.length > 0) select.value = availableExtensions[0];
+
+    select.onchange = () => loadChapters(select.value);
+}
+
+function updateExtensionPill() {
+    const pill = document.getElementById('extension-pill');
+    if(pill && extensionName) { pill.innerText = extensionName; pill.style.display = 'inline-flex'; }
+}
+
+async function setupAddToListButton() {
+    const btn = document.getElementById('add-to-list-btn');
+    if (!btn || !bookData) return;
+    ListModalManager.currentData = bookData;
+    const entryType = ListModalManager.getEntryType(bookData);
+    const idForCheck = extensionName ? bookSlug : bookId;
+    await ListModalManager.checkIfInList(idForCheck, extensionName || 'anilist', entryType);
+    updateCustomAddButton();
+    btn.onclick = () => ListModalManager.open(bookData, extensionName || 'anilist');
+}
+
+function updateCustomAddButton() {
+    const btn = document.getElementById('add-to-list-btn');
+    if(btn && ListModalManager.isInList) {
+        btn.innerHTML = '✓ In Your List'; btn.style.background = 'rgba(34, 197, 94, 0.2)'; btn.style.color = '#22c55e'; btn.style.borderColor = '#22c55e';
     }
-
-    select.onchange = () => {
-        loadChapters(select.value);
-    };
-}
-
-function setupReadButton() {
-    const readBtn = document.getElementById('read-start-btn');
-    if (!readBtn || filteredChapters.length === 0) return;
-
-    const firstChapter = filteredChapters[0];
-    readBtn.onclick = () => openReader(0, firstChapter.provider);
-}
-
-function renderChapterTable() {
-    const tbody = document.getElementById('chapters-body');
-    if (!tbody) return;
-
-    tbody.innerHTML = '';
-
-    if (filteredChapters.length === 0) {
-        tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">No chapters match this filter.</td></tr>';
-        chapterPagination.renderControls(
-            'pagination',
-            'page-info',
-            'prev-page',
-            'next-page'
-        );
-        return;
-    }
-
-    const pageItems = chapterPagination.getCurrentPageItems(filteredChapters);
-
-    pageItems.forEach((ch) => {
-        const row = document.createElement('tr');
-        row.innerHTML = `
-            <td>${ch.number}</td>
-            <td>${ch.title || 'Chapter ' + ch.number}</td>
-            <td><span class="pill" style="font-size:0.75rem;">${ch.provider}</span></td>
-            <td>
-                <button class="read-btn-small" onclick="openReader('${ch.index}', '${ch.provider}')">
-                    Read
-                </button>
-            </td>
-        `;
-        tbody.appendChild(row);
-    });
-
-    chapterPagination.renderControls(
-        'pagination',
-        'page-info',
-        'prev-page',
-        'next-page'
-    );
-}
-
-function openReader(chapterId, provider) {
-    const effectiveExtension = extensionName || 'anilist';
-
-    window.location.href = URLUtils.buildReadUrl(
-        bookId,          // SIEMPRE anilist
-        chapterId,       // número normal
-        provider,        // 'local' o extensión
-        extensionName || 'anilist'
-    );
 }
 
 function setupModalClickOutside() {
     const modal = document.getElementById('add-list-modal');
-    if (!modal) return;
-
-    modal.addEventListener('click', (e) => {
-        if (e.target.id === 'add-list-modal') {
-            ListModalManager.close();
-        }
-    });
+    if (modal) {
+        modal.addEventListener('click', (e) => {
+            if (e.target.id === 'add-list-modal') ListModalManager.close();
+        });
+    }
 }
 
 function showError(message) {
@@ -391,21 +582,15 @@ function showError(message) {
     if (titleEl) titleEl.innerText = message;
 }
 
-function saveToList() {
+// Exports
+window.openReader = openReader;
+window.saveToList = () => {
     const idToSave = extensionName ? bookSlug : bookId;
     ListModalManager.save(idToSave, extensionName || 'anilist');
-}
-
-function deleteFromList() {
+};
+window.deleteFromList = () => {
     const idToDelete = extensionName ? bookSlug : bookId;
     ListModalManager.delete(idToDelete, extensionName || 'anilist');
-}
-
-function closeAddToListModal() {
-    ListModalManager.close();
-}
-
-window.openReader = openReader;
-window.saveToList = saveToList;
-window.deleteFromList = deleteFromList;
-window.closeAddToListModal = closeAddToListModal;
+};
+window.closeAddToListModal = () => ListModalManager.close();
+window.openAddToListModal = () => ListModalManager.open(bookData, extensionName || 'anilist');

docker/src/scripts/books/reader.js

@@ -1,3 +1,4 @@
+const urlParams = new URLSearchParams(window.location.search);
 const reader = document.getElementById('reader');
 const panel = document.getElementById('settings-panel');
 const overlay = document.getElementById('overlay');
@@ -10,6 +11,16 @@ const nextBtn = document.getElementById('next-chapter');
 const lnSettings = document.getElementById('ln-settings');
 const mangaSettings = document.getElementById('manga-settings');
 
+
+const rawSource = urlParams.get('source') || 'anilist';
+const sourceParts = rawSource.split('?');
+const source = sourceParts[0];
+
+let lang =
+    urlParams.get('lang') ??
+    new URLSearchParams(sourceParts[1] || '').get('lang') ??
+    'none';
+
 const config = {
     ln: {
         fontSize: 18,
@@ -33,11 +44,12 @@ let currentType = null;
 let currentPages = [];
 let observer = null;
 
+// === CAMBIO: Parseo de URL para obtener ID ===
 const parts = window.location.pathname.split('/');
-
 const bookId = parts[4];
-let chapter = parts[3];
+let currentChapterId = parts[3]; // Ahora es un ID (string)
 let provider = parts[2];
+let chaptersList = []; // Buffer para guardar el orden de capítulos
 
 function loadConfig() {
     try {
@@ -116,6 +128,28 @@ function updateSettingsVisibility() {
     mangaSettings.classList.toggle('hidden', currentType !== 'manga');
 }
 
+// === CAMBIO: Nueva función para traer la lista de capítulos y saber el orden ===
+async function fetchChapterList() {
+    try {
+        // Reusamos el endpoint que lista capítulos
+        const res = await fetch(`/api/book/${bookId}/chapters?source=${source}&provider=${provider}`);
+        const data = await res.json();
+
+        // Ordenamos por número para asegurar navegación correcta
+        let list = data.chapters || [];
+        list.sort((a, b) => Number(a.number) - Number(b.number));
+
+        // Si hay filtro de idioma en la URL, filtramos la navegación también
+        if (lang !== 'none') {
+            list = list.filter(c => c.language === lang);
+        }
+
+        chaptersList = list;
+    } catch (e) {
+        console.error("Error fetching chapter list:", e);
+    }
+}
+
 async function loadChapter() {
     reader.innerHTML = `
         <div class="loading-container">
@@ -124,78 +158,107 @@ async function loadChapter() {
         </div>
     `;
 
-    const urlParams = new URLSearchParams(window.location.search);
-    let source = urlParams.get('source');
-    if (!source) {
-        source = 'anilist';
+    // === CAMBIO: Si no tenemos la lista de capítulos (y no es local), la pedimos ===
+    if (provider !== 'local' && chaptersList.length === 0) {
+        await fetchChapterList();
     }
+
     let newEndpoint;
 
     if (provider === 'local') {
         newEndpoint = `/api/library/${bookId}/units`;
     } else {
-        newEndpoint = `/api/book/${bookId}/${chapter}/${provider}?source=${source}`;
+        // === CAMBIO: Usamos currentChapterId en la URL ===
+        newEndpoint = `/api/book/${bookId}/${currentChapterId}/${provider}?source=${source}&lang=${lang}`;
     }
 
     try {
         const res = await fetch(newEndpoint);
         const data = await res.json();
-        if (provider === 'local') {
-            const unit = data.units[Number(chapter)];
-            if (!unit) return;
 
-            chapterLabel.textContent = unit.name;
-            document.title = unit.name;
+        const chapterMeta = chaptersList.find(
+            c => String(c.id) === String(currentChapterId)
+        );
+
+        if (chapterMeta) {
+            chapterLabel.textContent = `Chapter ${chapterMeta.number} - ${chapterMeta.title}`;
+            document.title = `Chapter ${chapterMeta.number} - ${chapterMeta.title}`;
+        }
+
+        // Lógica específica para contenido LOCAL
+        if (provider === 'local') {
+            const unit = data.units.find(u => String(u.id) === String(currentChapterId));
+
+            if (!unit) {
+                reader.innerHTML = '<div class="loading-container"><span>Chapter not found (Local)</span></div>';
+                return;
+            }
 
             const manifestRes = await fetch(`/api/library/${unit.id}/manifest`);
             const manifest = await manifestRes.json();
 
             reader.innerHTML = '';
 
-            // ===== MANGA =====
+            // Setup navegación manual para local (simple index +/- 1)
+            const unitIndex = data.units.findIndex(
+                u => String(u.id) === String(currentChapterId)
+            );
+            setupLocalNavigation(unitIndex, data.units.length);
+
+
             if (manifest.type === 'manga') {
                 currentType = 'manga';
                 updateSettingsVisibility();
                 applyStyles();
-
                 currentPages = manifest.pages;
-                loadManga(currentPages);
+                await loadManga(currentPages);
                 return;
             }
-
-            // ===== LN =====
             if (manifest.type === 'ln') {
                 currentType = 'ln';
                 updateSettingsVisibility();
                 applyStyles();
-
                 const contentRes = await fetch(manifest.url);
                 const html = await contentRes.text();
-
                 loadLN(html);
                 return;
             }
         }
+        const rawSource = urlParams.get('source') || 'anilist';
+        const source = rawSource.split('?')[0];
 
+        const res2 = await fetch(`/api/book/${bookId}?source=${source}`);
+        const data2 = await res2.json();
 
-        if (data.title) {
-            chapterLabel.textContent = data.title;
-            document.title = data.title;
-        } else {
-            chapterLabel.textContent = `Chapter ${chapter}`;
-            document.title = `Chapter ${chapter}`;
+        fetch("/api/rpc", {
+            method: "POST",
+            headers: {"Content-Type": "application/json"},
+            body: JSON.stringify({
+                details: data2.title.romaji ?? data2.title,
+                state: `Chapter ${data.title}`,
+                mode: "reading"
+            })
+        });
+
+        if (data.error) {
+            reader.innerHTML = `<div class="loading-container"><span style="color: #ef4444;">Error: ${data.error}</span></div>`;
+            return;
+        }
+
+        if (!chapterMeta) {
+            if (data.title) {
+                chapterLabel.textContent = `Chapter ${data.number ?? ''} - ${data.title}`;
+                document.title = chapterLabel.textContent;
+            } else {
+                chapterLabel.textContent = `Chapter ${data.number ?? currentChapterId}`;
+                document.title = chapterLabel.textContent;
+            }
         }
 
         setupProgressTracking(data, source);
 
-        if (data.error) {
-            reader.innerHTML = `
-                <div class="loading-container">
-                    <span style="color: #ef4444;">Error: ${data.error}</span>
-                </div>
-            `;
-            return;
-        }
+        // === CAMBIO: Actualizar botones basado en IDs ===
+        updateNavigationButtons();
 
         currentType = data.type;
         updateSettingsVisibility();
@@ -204,11 +267,12 @@ async function loadChapter() {
 
         if (data.type === 'manga') {
             currentPages = data.pages || [];
-            loadManga(currentPages);
+            await loadManga(currentPages);
         } else if (data.type === 'ln') {
             loadLN(data.content);
         }
     } catch (error) {
+        console.error(error);
         reader.innerHTML = `
             <div class="loading-container">
                 <span style="color: #ef4444;">Error loading chapter: ${error.message}</span>
@@ -217,7 +281,91 @@ async function loadChapter() {
     }
 }
 
-function loadManga(pages) {
+// === CAMBIO: Lógica de navegación basada en IDs ===
+function updateNavigationButtons() {
+    if (provider === 'local') return; // Se maneja aparte
+
+    // Buscamos el índice actual en la lista completa
+    const currentIndex = chaptersList.findIndex(c => String(c.id) === String(currentChapterId));
+
+    if (currentIndex === -1) {
+        console.warn("Current chapter not found in list, navigation disabled");
+        prevBtn.disabled = true;
+        nextBtn.disabled = true;
+        prevBtn.style.opacity = 0.5;
+        nextBtn.style.opacity = 0.5;
+        return;
+    }
+
+    // Configurar botón ANTERIOR
+    if (currentIndex > 0) {
+        const prevId = chaptersList[currentIndex - 1].id;
+        prevBtn.onclick = () => changeChapter(prevId);
+        prevBtn.disabled = false;
+        prevBtn.style.opacity = 1;
+    } else {
+        prevBtn.onclick = null;
+        prevBtn.disabled = true;
+        prevBtn.style.opacity = 0.5;
+    }
+
+    // Configurar botón SIGUIENTE
+    if (currentIndex < chaptersList.length - 1) {
+        const nextId = chaptersList[currentIndex + 1].id;
+        nextBtn.onclick = () => changeChapter(nextId);
+        nextBtn.disabled = false;
+        nextBtn.style.opacity = 1;
+    } else {
+        nextBtn.onclick = null;
+        nextBtn.disabled = true;
+        nextBtn.style.opacity = 0.5;
+    }
+}
+
+// Fallback para navegación local (basada en índices)
+function setupLocalNavigation(currentIndex, totalUnits) {
+    if (currentIndex > 0) {
+        prevBtn.onclick = () => changeChapter(currentIndex - 1);
+        prevBtn.disabled = false;
+        prevBtn.style.opacity = 1;
+    } else {
+        prevBtn.disabled = true;
+        prevBtn.style.opacity = 0.5;
+    }
+
+    if (currentIndex < totalUnits - 1) {
+        nextBtn.onclick = () => changeChapter(currentIndex + 1);
+        nextBtn.disabled = false;
+        nextBtn.style.opacity = 1;
+    } else {
+        nextBtn.disabled = true;
+        nextBtn.style.opacity = 0.5;
+    }
+}
+
+function changeChapter(newId) {
+    currentChapterId = newId;
+    updateURL(newId);
+    window.scrollTo(0, 0);
+    loadChapter();
+}
+
+function loadLongStrip(container, pages) {
+    pages.forEach((page, index) => {
+        const img = createImageElement(page, index);
+        img.classList.remove('fit-width', 'fit-height', 'fit-screen');
+
+        img.classList.add('longstrip-fit');
+        container.appendChild(img);
+    });
+}
+
+function updateURL(newId) {
+    const newUrl = `/read/${provider}/${newId}/${bookId}?source=${source}&lang=${lang}`;
+    window.history.pushState({}, '', newUrl);
+}
+
+async function loadManga(pages) {
     if (!pages || pages.length === 0) {
         reader.innerHTML = '<div class="loading-container"><span>No pages found</span></div>';
         return;
@@ -226,18 +374,22 @@ function loadManga(pages) {
     const container = document.createElement('div');
     container.className = 'manga-container';
 
-    let isLongStrip = false;
+    const analysis = await analyzePages(pages);
 
-    if (config.manga.mode === 'longstrip') {
-        isLongStrip = true;
-    } else if (config.manga.mode === 'auto' && detectLongStrip(pages)) {
-        isLongStrip = true;
-    }
+    const isLongStrip =
+        config.manga.mode === 'longstrip' ||
+        (config.manga.mode === 'auto' && analysis.tallRatio > 0.3);
 
-    const useDouble = config.manga.mode === 'double' ||
-        (config.manga.mode === 'auto' && !isLongStrip && shouldUseDoublePage(pages));
+    const useDouble =
+        !isLongStrip &&
+        (
+            config.manga.mode === 'double' ||
+            (config.manga.mode === 'auto' && analysis.wideRatio < 0.3)
+        );
 
-    if (useDouble) {
+    if (isLongStrip) {
+        loadLongStrip(container, pages);
+    } else if (useDouble) {
         loadDoublePage(container, pages);
     } else {
         loadSinglePage(container, pages);
@@ -248,20 +400,6 @@ function loadManga(pages) {
     enableMangaPageNavigation();
 }
 
-function shouldUseDoublePage(pages) {
-    if (pages.length <= 5) return false;
-
-    const widePages = pages.filter(p => {
-        if (!p.height || !p.width) return false;
-        const ratio = p.width / p.height;
-        return ratio > 1.3;
-    });
-
-    if (widePages.length > pages.length * 0.3) return false;
-
-    return true;
-}
-
 function loadSinglePage(container, pages) {
     pages.forEach((page, index) => {
         const img = createImageElement(page, index);
@@ -298,7 +436,6 @@ function loadDoublePage(container, pages) {
                     i++;
                 } else {
                     const rightPage = createImageElement(nextPage, i + 1);
-
                     if (config.manga.direction === 'rtl') {
                         doubleContainer.appendChild(rightPage);
                         doubleContainer.appendChild(leftPage);
@@ -306,7 +443,6 @@ function loadDoublePage(container, pages) {
                         doubleContainer.appendChild(leftPage);
                         doubleContainer.appendChild(rightPage);
                     }
-
                     container.appendChild(doubleContainer);
                     i += 2;
                 }
@@ -335,6 +471,18 @@ function createImageElement(page, index) {
         }
     };
 
+    img.onload = () => {
+        const ratio = img.naturalWidth / img.naturalHeight;
+
+        if (ratio > 1.3) {
+            const double = img.closest('.double-container');
+            if (double) {
+                double.replaceWith(img);
+            }
+        }
+    };
+
+
     if (config.manga.mode === 'longstrip' && index > 0) {
         img.classList.add('longstrip-fit');
     } else {
@@ -349,35 +497,60 @@ function createImageElement(page, index) {
         img.dataset.src = url;
         img.loading = 'lazy';
     }
-
     img.alt = `Page ${index + 1}`;
-
     return img;
 }
 
 function buildProxyUrl(url, headers = {}) {
-    const params = new URLSearchParams({
-        url
-    });
-
-    if (headers.referer) params.append('referer', headers.referer);
-    if (headers['user-agent']) params.append('ua', headers['user-agent']);
-    if (headers.cookie) params.append('cookie', headers.cookie);
-
+    const params = new URLSearchParams({ url });
+    if (headers.Referer || headers.referer)
+        params.append("referer", headers.Referer || headers.referer);
+    if (headers["User-Agent"] || headers["user-agent"])
+        params.append("userAgent", headers["User-Agent"] || headers["user-agent"]);
+    if (headers.Origin || headers.origin)
+        params.append("origin", headers.Origin || headers.origin);
     return `/api/proxy?${params.toString()}`;
 }
 
-function detectLongStrip(pages) {
-    if (!pages || pages.length === 0) return false;
+function analyzePages(pages, sample = 6) {
+    return new Promise(resolve => {
+        let tall = 0;
+        let wide = 0;
+        let loaded = 0;
 
-    const relevant = pages.slice(1);
-    const tall = relevant.filter(p => p.height && p.width && (p.height / p.width) > 2);
-    return tall.length >= 2 || (tall.length / relevant.length) > 0.3;
+        const count = Math.min(sample, pages.length);
+
+        for (let i = 0; i < count; i++) {
+            const img = new Image();
+            img.src = provider === 'local'
+                ? pages[i].url
+                : buildProxyUrl(pages[i].url, pages[i].headers);
+
+            img.onload = () => {
+                const ratio = img.naturalWidth / img.naturalHeight;
+                if (ratio < 0.6) tall++;
+                else if (ratio > 1.3) wide++;
+                loaded++;
+                if (loaded === count) finish();
+            };
+
+            img.onerror = () => {
+                loaded++;
+                if (loaded === count) finish();
+            };
+        }
+
+        function finish() {
+            resolve({
+                tallRatio: tall / count,
+                wideRatio: wide / count
+            });
+        }
+    });
 }
 
 function setupLazyLoading() {
     if (observer) observer.disconnect();
-
     observer = new IntersectionObserver((entries) => {
         entries.forEach(entry => {
             if (entry.isIntersecting) {
@@ -389,10 +562,7 @@ function setupLazyLoading() {
                 }
             }
         });
-    }, {
-        rootMargin: '200px'
-    });
-
+    }, { rootMargin: '200px' });
     document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));
 }
 
@@ -403,161 +573,100 @@ function loadLN(html) {
     reader.appendChild(div);
 }
 
+// Listeners de configuración
 document.getElementById('font-size').addEventListener('input', (e) => {
     config.ln.fontSize = parseInt(e.target.value);
     document.getElementById('font-size-value').textContent = e.target.value + 'px';
-    applyStyles();
-    saveConfig();
+    applyStyles(); saveConfig();
 });
-
 document.getElementById('line-height').addEventListener('input', (e) => {
     config.ln.lineHeight = parseFloat(e.target.value);
     document.getElementById('line-height-value').textContent = e.target.value;
-    applyStyles();
-    saveConfig();
+    applyStyles(); saveConfig();
 });
-
 document.getElementById('max-width').addEventListener('input', (e) => {
     config.ln.maxWidth = parseInt(e.target.value);
     document.getElementById('max-width-value').textContent = e.target.value + 'px';
-    applyStyles();
-    saveConfig();
+    applyStyles(); saveConfig();
 });
-
 document.getElementById('font-family').addEventListener('change', (e) => {
     config.ln.fontFamily = e.target.value;
-    applyStyles();
-    saveConfig();
+    applyStyles(); saveConfig();
 });
-
 document.getElementById('text-color').addEventListener('change', (e) => {
     config.ln.textColor = e.target.value;
-    applyStyles();
-    saveConfig();
+    applyStyles(); saveConfig();
 });
-
 document.getElementById('bg-color').addEventListener('change', (e) => {
     config.ln.bg = e.target.value;
-    applyStyles();
-    saveConfig();
+    applyStyles(); saveConfig();
 });
-
 document.querySelectorAll('[data-align]').forEach(btn => {
     btn.addEventListener('click', () => {
         document.querySelectorAll('[data-align]').forEach(b => b.classList.remove('active'));
         btn.classList.add('active');
         config.ln.textAlign = btn.dataset.align;
-        applyStyles();
-        saveConfig();
+        applyStyles(); saveConfig();
     });
 });
-
 document.querySelectorAll('[data-preset]').forEach(btn => {
     btn.addEventListener('click', () => {
         const preset = btn.dataset.preset;
-
         const presets = {
             dark: { bg: '#14141b', textColor: '#e5e7eb' },
             sepia: { bg: '#f4ecd8', textColor: '#5c472d' },
             light: { bg: '#fafafa', textColor: '#1f2937' },
             amoled: { bg: '#000000', textColor: '#ffffff' }
         };
-
         if (presets[preset]) {
             Object.assign(config.ln, presets[preset]);
             document.getElementById('bg-color').value = config.ln.bg;
             document.getElementById('text-color').value = config.ln.textColor;
-            applyStyles();
-            saveConfig();
+            applyStyles(); saveConfig();
         }
     });
 });
-
 document.getElementById('display-mode').addEventListener('change', (e) => {
     config.manga.mode = e.target.value;
-    saveConfig();
-    loadChapter();
+    saveConfig(); loadChapter();
 });
-
 document.getElementById('image-fit').addEventListener('change', (e) => {
     config.manga.imageFit = e.target.value;
-    saveConfig();
-    loadChapter();
+    saveConfig(); loadChapter();
 });
-
 document.getElementById('page-spacing').addEventListener('input', (e) => {
     config.manga.spacing = parseInt(e.target.value);
     document.getElementById('page-spacing-value').textContent = e.target.value + 'px';
-    applyStyles();
-    saveConfig();
+    applyStyles(); saveConfig();
 });
-
 document.getElementById('preload-count').addEventListener('change', (e) => {
     config.manga.preloadCount = parseInt(e.target.value);
     saveConfig();
 });
-
 document.querySelectorAll('[data-direction]').forEach(btn => {
     btn.addEventListener('click', () => {
         document.querySelectorAll('[data-direction]').forEach(b => b.classList.remove('active'));
         btn.classList.add('active');
         config.manga.direction = btn.dataset.direction;
-        saveConfig();
-        loadChapter();
+        saveConfig(); loadChapter();
     });
 });
 
-prevBtn.addEventListener('click', () => {
-    const current = parseInt(chapter);
-    if (current <= 0) return;
-
-    const newChapter = String(current - 1);
-    updateURL(newChapter);
-    window.scrollTo(0, 0);
-    loadChapter();
-});
-
-nextBtn.addEventListener('click', () => {
-    const newChapter = String(parseInt(chapter) + 1);
-    updateURL(newChapter);
-    window.scrollTo(0, 0);
-    loadChapter();
-});
-
-function updateURL(newChapter) {
-    chapter = newChapter;
-    const urlParams = new URLSearchParams(window.location.search);
-    let source = urlParams.get('source');
-
-    let src;
-    if (source === 'anilist') {
-        src= "?source=anilist"
-    } else {
-        src= `?source=${source}`
-    }
-    const newUrl = `/read/${provider}/${chapter}/${bookId}${src}`;
-    window.history.pushState({}, '', newUrl);
-}
-
+// Botón "Atrás"
 document.getElementById('back-btn').addEventListener('click', () => {
-    const parts = window.location.pathname.split('/');
-    const mangaId = parts[4];
 
-    const urlParams = new URLSearchParams(window.location.search);
-    let source = urlParams.get('source');
-
-    if (source === 'anilist') {
-        window.location.href = `/book/${mangaId}`;
+    if (source === 'anilist' || !source) {
+        window.location.href = `/book/${bookId}`;
     } else {
-        window.location.href = `/book/${source}/${mangaId}`;
+        window.location.href = `/book/${source}/${bookId}`;
     }
 });
 
+// Panel de configuración
 settingsBtn.addEventListener('click', () => {
     panel.classList.add('open');
     overlay.classList.add('active');
 });
-
 closePanel.addEventListener('click', closeSettings);
 overlay.addEventListener('click', closeSettings);
 
@@ -565,7 +674,6 @@ function closeSettings() {
     panel.classList.remove('open');
     overlay.classList.remove('active');
 }
-
 document.addEventListener('keydown', (e) => {
     if (e.key === 'Escape' && panel.classList.contains('open')) {
         closeSettings();
@@ -575,37 +683,24 @@ document.addEventListener('keydown', (e) => {
 function enableMangaPageNavigation() {
     if (currentType !== 'manga') return;
     const logicalPages = [];
-
     document.querySelectorAll('.manga-container > *').forEach(el => {
-        if (el.classList.contains('double-container')) {
-            logicalPages.push(el);
-        } else if (el.tagName === 'IMG') {
+        if (el.classList.contains('double-container') || el.tagName === 'IMG') {
             logicalPages.push(el);
         }
     });
-
     if (logicalPages.length === 0) return;
 
     function scrollToLogical(index) {
         if (index < 0 || index >= logicalPages.length) return;
-
         const topBar = document.querySelector('.top-bar');
         const offset = topBar ? -topBar.offsetHeight : 0;
-
-        const y = logicalPages[index].getBoundingClientRect().top
-            + window.pageYOffset
-            + offset;
-
-        window.scrollTo({
-            top: y,
-            behavior: 'smooth'
-        });
+        const y = logicalPages[index].getBoundingClientRect().top + window.pageYOffset + offset;
+        window.scrollTo({ top: y, behavior: 'smooth' });
     }
 
     function getCurrentLogicalIndex() {
         let closest = 0;
         let minDist = Infinity;
-
         logicalPages.forEach((el, i) => {
             const rect = el.getBoundingClientRect();
             const dist = Math.abs(rect.top);
@@ -614,53 +709,36 @@ function enableMangaPageNavigation() {
                 closest = i;
             }
         });
-
         return closest;
     }
-
     const rtl = () => config.manga.direction === 'rtl';
 
     document.addEventListener('keydown', (e) => {
         if (currentType !== 'manga') return;
         if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT') return;
-
         const index = getCurrentLogicalIndex();
-
-        if (e.key === 'ArrowLeft') {
-            scrollToLogical(rtl() ? index + 1 : index - 1);
-        }
-        if (e.key === 'ArrowRight') {
-            scrollToLogical(rtl() ? index - 1 : index + 1);
-        }
+        if (e.key === 'ArrowLeft') scrollToLogical(rtl() ? index + 1 : index - 1);
+        if (e.key === 'ArrowRight') scrollToLogical(rtl() ? index - 1 : index + 1);
     });
 
     reader.addEventListener('click', (e) => {
         if (currentType !== 'manga') return;
-
         const bounds = reader.getBoundingClientRect();
         const x = e.clientX - bounds.left;
         const half = bounds.width / 2;
-
         const index = getCurrentLogicalIndex();
-
-        if (x < half) {
-            scrollToLogical(rtl() ? index + 1 : index - 1);
-        } else {
-            scrollToLogical(rtl() ? index - 1 : index + 1);
-        }
+        if (x < half) scrollToLogical(rtl() ? index + 1 : index - 1);
+        else scrollToLogical(rtl() ? index - 1 : index + 1);
     });
 }
 
 let resizeTimer;
 window.addEventListener('resize', () => {
     clearTimeout(resizeTimer);
-    resizeTimer = setTimeout(() => {
-        applyStyles();
-    }, 250);
+    resizeTimer = setTimeout(() => { applyStyles(); }, 250);
 });
 
 let progressSaved = false;
-
 function setupProgressTracking(data, source) {
     progressSaved = false;
 
@@ -673,25 +751,16 @@ function setupProgressTracking(data, source) {
             source: source,
             entry_type: data.type === 'manga' ? 'MANGA' : 'NOVEL',
             status: 'CURRENT',
-            progress: source === 'anilist'
-                ? Math.floor(chapterNumber)
-
-                : chapterNumber
-
+            progress: source === 'anilist' ? Math.floor(chapterNumber) : chapterNumber
         };
 
         try {
             await fetch('/api/list/entry', {
                 method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'Authorization': `Bearer ${token}`
-                },
+                headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
                 body: JSON.stringify(body)
             });
-        } catch (err) {
-            console.error('Error updating progress:', err);
-        }
+        } catch (err) { console.error('Error updating progress:', err); }
     }
 
     function checkProgress() {
@@ -701,25 +770,22 @@ function setupProgressTracking(data, source) {
 
         if (percent >= 0.8 && !progressSaved) {
             progressSaved = true;
-
             const chapterNumber = (typeof data.number !== 'undefined' && data.number !== null)
                 ? data.number
-                : Number(chapter);
+                : 0; // Fallback si no hay numero
 
             sendProgress(chapterNumber);
-
             window.removeEventListener('scroll', checkProgress);
         }
     }
-
     window.removeEventListener('scroll', checkProgress);
     window.addEventListener('scroll', checkProgress);
 }
 
-if (!bookId || !chapter || !provider) {
+if (!bookId || !currentChapterId || !provider) {
     reader.innerHTML = `
         <div class="loading-container">
-            <span style="color: #ef4444;">Missing required parameters (bookId, chapter, provider)</span>
+            <span style="color: #ef4444;">Missing required parameters (bookId, chapterId, provider)</span>
         </div>
     `;
 } else {

docker/src/scripts/list.js

@@ -1,380 +0,0 @@
-const API_BASE = '/api';
-let currentList = [];
-let filteredList = [];
-
-document.addEventListener('DOMContentLoaded', async () => {
-    await loadList();
-    setupEventListeners();
-});
-
-function getEntryLink(item) {
-    const isAnime = item.entry_type?.toUpperCase() === 'ANIME';
-    const baseRoute = isAnime ? '/anime' : '/book';
-    const source = item.source || 'anilist';
-
-    if (source === 'anilist') {
-        return `${baseRoute}/${item.entry_id}`;
-    } else {
-        return `${baseRoute}/${source}/${item.entry_id}`;
-    }
-}
-
-async function populateSourceFilter() {
-    const select = document.getElementById('source-filter');
-    if (!select) return;
-
-    select.innerHTML = `
-        <option value="all">All Sources</option>
-        <option value="anilist">AniList</option>
-    `;
-
-    try {
-        const [animeRes, bookRes] = await Promise.all([
-            fetch(`${API_BASE}/extensions/anime`),
-            fetch(`${API_BASE}/extensions/book`)
-        ]);
-
-        const extensions = new Set();
-
-        if (animeRes.ok) {
-            const data = await animeRes.json();
-            (data.extensions || []).forEach(ext => extensions.add(ext));
-        }
-
-        if (bookRes.ok) {
-            const data = await bookRes.json();
-            (data.extensions || []).forEach(ext => extensions.add(ext));
-        }
-
-        extensions.forEach(extName => {
-            const lower = extName.toLowerCase();
-            if (lower !== 'anilist' && lower !== 'local') {
-                const option = document.createElement('option');
-                option.value = extName;
-                option.textContent = extName.charAt(0).toUpperCase() + extName.slice(1);
-                select.appendChild(option);
-            }
-        });
-    } catch (error) {
-        console.error('Error loading extensions:', error);
-    }
-}
-
-function updateLocalList(entryData, action) {
-    const entryId = entryData.entry_id;
-    const source = entryData.source;
-
-    const findIndex = (list) => list.findIndex(e =>
-        e.entry_id === entryId && e.source === source
-    );
-
-    const currentIndex = findIndex(currentList);
-    if (currentIndex !== -1) {
-        if (action === 'update') {
-
-            currentList[currentIndex] = { ...currentList[currentIndex], ...entryData };
-        } else if (action === 'delete') {
-            currentList.splice(currentIndex, 1);
-        }
-    } else if (action === 'update') {
-
-        currentList.push(entryData);
-    }
-
-    filteredList = [...currentList];
-
-    updateStats();
-    applyFilters();
-    window.ListModalManager.close();
-}
-
-function setupEventListeners() {
-
-    document.querySelectorAll('.view-btn').forEach(btn => {
-        btn.addEventListener('click', () => {
-            document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));
-            btn.classList.add('active');
-            const view = btn.dataset.view;
-            const container = document.getElementById('list-container');
-            if (view === 'list') {
-                container.classList.add('list-view');
-            } else {
-                container.classList.remove('list-view');
-            }
-        });
-    });
-
-    document.getElementById('status-filter').addEventListener('change', applyFilters);
-    document.getElementById('source-filter').addEventListener('change', applyFilters);
-    document.getElementById('type-filter').addEventListener('change', applyFilters);
-    document.getElementById('sort-filter').addEventListener('change', applyFilters);
-
-    document.querySelector('.search-input').addEventListener('input', (e) => {
-        const query = e.target.value.toLowerCase();
-        if (query) {
-            filteredList = currentList.filter(item =>
-                item.title?.toLowerCase().includes(query)
-            );
-        } else {
-            filteredList = [...currentList];
-        }
-        applyFilters();
-    });
-
-    document.getElementById('modal-save-btn')?.addEventListener('click', async () => {
-
-        const entryToSave = window.ListModalManager.currentEntry || window.ListModalManager.currentData;
-
-        if (!entryToSave) return;
-
-        const success = await window.ListModalManager.save(entryToSave.entry_id, entryToSave.source);
-
-        if (success) {
-
-            const updatedEntry = window.ListModalManager.currentEntry;
-            updatedEntry.updated_at = new Date().toISOString();
-
-            updateLocalList(updatedEntry, 'update');
-        }
-
-    });
-
-    document.getElementById('modal-delete-btn')?.addEventListener('click', async () => {
-        const entryToDelete = window.ListModalManager.currentEntry || window.ListModalManager.currentData;
-
-        if (!entryToDelete) return;
-
-        const success = await window.ListModalManager.delete(entryToDelete.entry_id, entryToDelete.source);
-
-        if (success) {
-            updateLocalList(entryToDelete, 'delete');
-        }
-
-    });
-
-    document.getElementById('add-list-modal')?.addEventListener('click', (e) => {
-        if (e.target.id === 'add-list-modal') {
-            window.ListModalManager.close();
-        }
-    });
-}
-
-async function loadList() {
-    const loadingState = document.getElementById('loading-state');
-    const emptyState = document.getElementById('empty-state');
-    const container = document.getElementById('list-container');
-
-    await populateSourceFilter();
-
-    try {
-        loadingState.style.display = 'flex';
-        emptyState.style.display = 'none';
-        container.innerHTML = '';
-
-        const response = await fetch(`${API_BASE}/list`, {
-            headers: window.AuthUtils.getSimpleAuthHeaders()
-        });
-
-        if (!response.ok) {
-            throw new Error('Failed to load list');
-        }
-
-        const data = await response.json();
-        currentList = data.results || [];
-        filteredList = [...currentList];
-
-        loadingState.style.display = 'none';
-
-        if (currentList.length === 0) {
-            emptyState.style.display = 'flex';
-        } else {
-            updateStats();
-            applyFilters();
-        }
-    } catch (error) {
-        console.error('Error loading list:', error);
-        loadingState.style.display = 'none';
-        if (window.NotificationUtils) {
-            window.NotificationUtils.error('Failed to load your list. Please try again.');
-        } else {
-            alert('Failed to load your list. Please try again.');
-        }
-    }
-}
-
-function updateStats() {
-
-    const total = currentList.length;
-    const watching = currentList.filter(item => item.status === 'WATCHING').length;
-    const completed = currentList.filter(item => item.status === 'COMPLETED').length;
-    const planning = currentList.filter(item => item.status === 'PLANNING').length;
-
-    document.getElementById('total-count').textContent = total;
-    document.getElementById('watching-count').textContent = watching;
-    document.getElementById('completed-count').textContent = completed;
-    document.getElementById('planned-count').textContent = planning;
-}
-
-function applyFilters() {
-    const statusFilter = document.getElementById('status-filter').value;
-    const sourceFilter = document.getElementById('source-filter').value;
-    const typeFilter = document.getElementById('type-filter').value;
-    const sortFilter = document.getElementById('sort-filter').value;
-
-    let filtered = [...filteredList];
-
-    if (statusFilter !== 'all') {
-        filtered = filtered.filter(item => item.status === statusFilter);
-    }
-
-    if (sourceFilter !== 'all') {
-        filtered = filtered.filter(item => item.source === sourceFilter);
-    }
-
-    if (typeFilter !== 'all') {
-        filtered = filtered.filter(item => item.entry_type === typeFilter);
-    }
-
-    switch (sortFilter) {
-        case 'title':
-            filtered.sort((a, b) => (a.title || '').localeCompare(b.title || ''));
-            break;
-        case 'score':
-            filtered.sort((a, b) => (b.score || 0) - (a.score || 0));
-            break;
-        case 'progress':
-            filtered.sort((a, b) => (b.progress || 0) - (a.progress || 0));
-            break;
-        case 'updated':
-        default:
-
-            filtered.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at));
-            break;
-    }
-
-    renderList(filtered);
-}
-
-function renderList(items) {
-    const container = document.getElementById('list-container');
-    container.innerHTML = '';
-
-    if (items.length === 0) {
-
-        if (currentList.length === 0) {
-            document.getElementById('empty-state').style.display = 'flex';
-        } else {
-
-            container.innerHTML = '<div class="empty-state"><p>No entries match your filters</p></div>';
-        }
-        return;
-    }
-
-    document.getElementById('empty-state').style.display = 'none';
-
-    items.forEach(item => {
-        const element = createListItem(item);
-        container.appendChild(element);
-    });
-}
-
-function createListItem(item) {
-    const div = document.createElement('div');
-    div.className = 'list-item';
-
-    const itemLink = getEntryLink(item);
-
-    const posterUrl = item.poster || '/public/assets/placeholder.png';
-    const progress = item.progress || 0;
-
-    const totalUnits = item.entry_type === 'ANIME' ?
-        item.total_episodes || 0 :
-        item.total_chapters || 0;
-
-    const progressPercent = totalUnits > 0 ? (progress / totalUnits) * 100 : 0;
-    const score = item.score ? item.score.toFixed(1) : null;
-    const repeatCount = item.repeat_count || 0;
-
-    const entryType = (item.entry_type).toUpperCase();
-    let unitLabel = 'units';
-    if (entryType === 'ANIME') {
-        unitLabel = 'episodes';
-    } else if (entryType === 'MANGA') {
-        unitLabel = 'chapters';
-    } else if (entryType === 'NOVEL') {
-        unitLabel = 'chapters/volumes';
-    }
-
-    const statusLabels = {
-        'CURRENT': entryType === 'ANIME' ? 'Watching' : 'Reading',
-        'COMPLETED': 'Completed',
-        'PLANNING': 'Planning',
-        'PAUSED': 'Paused',
-        'DROPPED': 'Dropped',
-        'REPEATING': entryType === 'ANIME' ? 'Rewatching' : 'Rereading'
-    };
-
-    const extraInfo = [];
-    if (repeatCount > 0) {
-        extraInfo.push(`<span class="meta-pill repeat-pill">🔁 ${repeatCount}</span>`);
-    }
-    if (item.is_private) {
-        extraInfo.push('<span class="meta-pill private-pill">🔒 Private</span>');
-    }
-
-    const entryDataString = JSON.stringify(item).replace(/'/g, '&#39;');
-
-    div.innerHTML = `
-        <a href="${itemLink}" class="item-poster-link">
-            <img src="${posterUrl}" alt="${item.title || 'Entry'}" class="item-poster" onerror="this.src='/public/assets/placeholder.png'">
-        </a>
-        <div class="item-content">
-            <div>
-                <a href="${itemLink}" style="text-decoration:none; color:inherit;">
-                    <h3 class="item-title">${item.title || 'Unknown Title'}</h3>
-                </a>
-                <div class="item-meta">
-                    <span class="meta-pill status-pill">${statusLabels[item.status] || item.status}</span>
-                    <span class="meta-pill type-pill">${entryType}</span> 
-                    <span class="meta-pill source-pill">${item.source.toUpperCase()}</span>
-                    ${extraInfo.join('')}
-                </div>
-            </div>
-
-            <div>
-                <div class="progress-bar-container">
-                    <div class="progress-bar" style="width: ${progressPercent}%"></div>
-                </div>
-                <div class="progress-text">
-                    <span>${progress}${totalUnits > 0 ? ` / ${totalUnits}` : ''} ${unitLabel}</span> ${score ? `<span class="score-badge">⭐ ${score}</span>` : ''}
-                </div>
-            </div>
-        </div>
-
-        <button class="edit-icon-btn" data-entry='${entryDataString}'>
-            <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
-                <path d="M15.232 5.232l3.536 3.536m-2.036-5.808a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.536L15.232 5.232z"/>
-            </svg>
-        </button>
-        `;
-
-    const editBtn = div.querySelector('.edit-icon-btn');
-    editBtn.addEventListener('click', (e) => {
-        try {
-            const entryData = JSON.parse(e.currentTarget.dataset.entry);
-
-            window.ListModalManager.isInList = true;
-            window.ListModalManager.currentEntry = entryData;
-            window.ListModalManager.currentData = entryData;
-
-            window.ListModalManager.open(entryData, entryData.source);
-        } catch (error) {
-            console.error('Error parsing entry data for modal:', error);
-            if (window.NotificationUtils) {
-                window.NotificationUtils.error('Could not open modal. Check HTML form IDs.');
-            }
-        }
-    });
-
-    return div;
-}

docker/src/scripts/local-library-books.js

@@ -1,106 +0,0 @@
-let activeFilter = 'all';
-let activeSort = 'az';
-let isLocalMode = false;
-let localEntries = [];
-
-function toggleLibraryMode() {
-    isLocalMode = !isLocalMode;
-    const btn = document.getElementById('library-mode-btn');
-    const onlineContent = document.getElementById('online-content');
-    const localContent = document.getElementById('local-content');
-
-    if (isLocalMode) {
-        btn.classList.add('active');
-        onlineContent.classList.add('hidden');
-        localContent.classList.remove('hidden');
-        loadLocalEntries();
-    } else {
-        btn.classList.remove('active');
-        onlineContent.classList.remove('hidden');
-        localContent.classList.add('hidden');
-    }
-}
-
-async function loadLocalEntries() {
-    const grid = document.getElementById('local-entries-grid');
-    grid.innerHTML = '<div class="skeleton-card"></div>'.repeat(6);
-
-    try {
-        const [mangaRes, novelRes] = await Promise.all([
-            fetch('/api/library/manga'),
-            fetch('/api/library/novels')
-        ]);
-
-        const [manga, novel] = await Promise.all([
-            mangaRes.json(),
-            novelRes.json()
-        ]);
-
-        localEntries = [
-            ...manga.map(e => ({ ...e, type: 'manga' })),
-            ...novel.map(e => ({ ...e, type: 'novel' }))
-        ];
-
-        if (localEntries.length === 0) {
-            grid.innerHTML = '<p style="grid-column:1/-1;text-align:center;padding:3rem;">No books found.</p>';
-            return;
-        }
-
-        renderLocalEntries(localEntries);
-    } catch {
-        grid.innerHTML = '<p style="grid-column:1/-1;text-align:center;color:var(--color-danger);padding:3rem;">Error loading library.</p>';
-    }
-}
-
-function filterLocal(type) {
-    if (type === 'all') renderLocalEntries(localEntries);
-    else renderLocalEntries(localEntries.filter(e => e.type === type));
-}
-
-function renderLocalEntries(entries) {
-    const grid = document.getElementById('local-entries-grid');
-    grid.innerHTML = entries.map(entry => {
-        const title = entry.metadata?.title?.romaji || entry.metadata?.title?.english || entry.id;
-        const cover = entry.metadata?.coverImage?.extraLarge || '/public/assets/placeholder.jpg';
-        const chapters = entry.metadata?.chapters || '??';
-
-        return `
-            <div class="local-card" onclick="viewLocalEntry(${entry.metadata?.id || 'null'})">
-                <div class="card-img-wrap">
-                    <img src="${cover}" alt="${title}" loading="lazy">
-                </div>
-                <div class="local-card-info">
-                    <div class="local-card-title">${title}</div>
-                    <p style="font-size: 0.85rem; color: var(--color-text-secondary); margin: 0;">
-                        ${chapters} Chapters
-                    </p>
-                    <div class="badge">${entry.type}</div>
-                    <div class="match-status ${entry.matched ? 'status-linked' : 'status-unlinked'}">
-                        ${entry.matched ? '● Linked' : '○ Unlinked'}
-                    </div>
-                </div>
-            </div>
-        `;
-    }).join('');
-}
-
-async function scanLocalLibrary() {
-    const btnText = document.getElementById('scan-text');
-    btnText.innerText = "Scanning...";
-    try {
-        // Asumiendo que el scan de libros usa este query param
-        const response = await fetch('/api/library/scan?mode=incremental', { method: 'POST' });
-        if (response.ok) {
-            await loadLocalEntries();
-            if (window.NotificationUtils) NotificationUtils.show('Library scanned!', 'success');
-        }
-    } catch (err) {
-        if (window.NotificationUtils) NotificationUtils.show('Scan failed', 'error');
-    } finally {
-        btnText.innerText = "Scan Library";
-    }
-}
-
-function viewLocalEntry(id) {
-    if (id) window.location.href = `/book/${id}`;
-}

docker/src/scripts/local-library.js

@@ -1,209 +0,0 @@
-let activeFilter = 'all';
-let activeSort = 'az';
-let isLocalMode = false;
-let localEntries = [];
-
-function toggleLibraryMode() {
-    isLocalMode = !isLocalMode;
-
-    const btn = document.getElementById('library-mode-btn');
-    const onlineContent = document.getElementById('online-content');
-    const localContent = document.getElementById('local-content');
-    const svg = btn.querySelector('svg');
-    const label = btn.querySelector('span');
-
-    if (isLocalMode) {
-        // LOCAL MODE
-        btn.classList.add('active');
-        onlineContent.classList.add('hidden');
-        localContent.classList.remove('hidden');
-        loadLocalEntries();
-
-        svg.innerHTML = `
-            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
-            <polyline points="9 22 9 12 15 12 15 22"/>
-        `;
-    } else {
-        // ONLINE MODE
-        btn.classList.remove('active');
-        onlineContent.classList.remove('hidden');
-        localContent.classList.add('hidden');
-
-        svg.innerHTML = `
-            <circle cx="12" cy="12" r="10"/>
-            <line x1="2" y1="12" x2="22" y2="12"/>
-            <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
-        `;
-    }
-}
-
-async function loadLocalEntries() {
-    const grid = document.getElementById('local-entries-grid');
-    grid.innerHTML = '<div class="skeleton-card"></div>'.repeat(8);
-
-    try {
-        const response = await fetch('/api/library/anime');
-        const entries = await response.json();
-        localEntries = entries;
-
-        if (entries.length === 0) {
-            grid.innerHTML = '<p style="grid-column: 1/-1; text-align: center; color: var(--color-text-secondary); padding: 3rem;">No anime found in your local library. Click "Scan Library" to scan your folders.</p>';
-
-            return;
-        }
-
-        // Renderizar grid
-        grid.innerHTML = entries.map(entry => {
-            const title = entry.metadata?.title?.romaji || entry.metadata?.title?.english || entry.id;
-            const cover = entry.metadata?.coverImage?.extraLarge || entry.metadata?.coverImage?.large || '/public/assets/placeholder.jpg';
-            const score = entry.metadata?.averageScore || '--';
-            const episodes = entry.metadata?.episodes || '??';
-
-            return `
-                <div class="local-card" onclick="viewLocalEntry(${entry.metadata?.id || 'null'})">
-                    <div class="card-img-wrap">
-                        <img src="${cover}" alt="${title}" loading="lazy">
-                    </div>
-                    <div class="local-card-info">
-                        <div class="local-card-title">${title}</div>
-                        <p style="font-size: 0.85rem; color: var(--color-text-secondary); margin: 0;">
-                            ${score}% • ${episodes} Eps
-                        </p>
-                        <div class="match-status ${entry.matched ? 'status-linked' : 'status-unlinked'}">
-                            ${entry.matched ? '● Linked' : '○ Unlinked'}
-                        </div>
-                    </div>
-                </div>
-            `;
-        }).join('');
-    } catch (err) {
-        console.error('Error loading local entries:', err);
-        grid.innerHTML = '<p style="grid-column: 1/-1; text-align: center; color: var(--color-danger); padding: 3rem;">Error loading local library. Make sure the backend is running.</p>';
-    }
-}
-
-
-async function scanLocalLibrary() {
-    const btnText = document.getElementById('scan-text');
-    const originalText = btnText.innerText;
-    btnText.innerText = "Scanning...";
-
-    try {
-        const response = await fetch('/api/library/scan?mode=incremental', {
-            method: 'POST'
-        });
-
-        if (response.ok) {
-            await loadLocalEntries();
-            // Mostrar notificación de éxito si tienes sistema de notificaciones
-            if (window.NotificationUtils) {
-                NotificationUtils.show('Library scanned successfully!', 'success');
-            }
-        } else {
-            throw new Error('Scan failed');
-        }
-    } catch (err) {
-        console.error("Scan failed", err);
-        alert("Failed to scan library. Check console for details.");
-
-        // Mostrar notificación de error si tienes sistema de notificaciones
-        if (window.NotificationUtils) {
-            NotificationUtils.show('Failed to scan library', 'error');
-        }
-    } finally {
-        btnText.innerText = originalText;
-    }
-}
-
-function viewLocalEntry(anilistId) {
-    if (!anilistId) {
-        console.warn('Anime not linked');
-        return;
-    }
-    window.location.href = `/anime/${anilistId}`;
-}
-
-function renderLocalEntries(entries) {
-    const grid = document.getElementById('local-entries-grid');
-
-    grid.innerHTML = entries.map(entry => {
-        const title = entry.metadata?.title?.romaji
-            || entry.metadata?.title?.english
-            || entry.id;
-
-        const cover =
-            entry.metadata?.coverImage?.extraLarge
-            || entry.metadata?.coverImage?.large
-            || '/public/assets/placeholder.jpg';
-
-        const score = entry.metadata?.averageScore || '--';
-        const episodes = entry.metadata?.episodes || '??';
-
-        return `
-            <div class="local-card" onclick="viewLocalEntry(${entry.metadata?.id || 'null'})">
-                <div class="card-img-wrap">
-                    <img src="${cover}" alt="${title}" loading="lazy">
-                </div>
-                <div class="local-card-info">
-                    <div class="local-card-title">${title}</div>
-                    <p style="font-size: 0.85rem; color: var(--color-text-secondary); margin: 0;">
-                        ${score}% • ${episodes} Eps
-                    </p>
-                    <div class="match-status ${entry.matched ? 'status-linked' : 'status-unlinked'}">
-                        ${entry.matched ? '● Linked' : '○ Unlinked'}
-                    </div>
-                </div>
-            </div>
-        `;
-    }).join('');
-}
-
-function applyLocalFilters() {
-    let filtered = [...localEntries];
-
-    if (activeFilter === 'linked') {
-        filtered = filtered.filter(e => e.matched);
-    }
-
-    if (activeFilter === 'unlinked') {
-        filtered = filtered.filter(e => !e.matched);
-    }
-
-    if (activeSort === 'az') {
-        filtered.sort((a, b) =>
-            (a.metadata?.title?.romaji || a.id)
-                .localeCompare(b.metadata?.title?.romaji || b.id)
-        );
-    }
-
-    if (activeSort === 'za') {
-        filtered.sort((a, b) =>
-            (b.metadata?.title?.romaji || b.id)
-                .localeCompare(a.metadata?.title?.romaji || a.id)
-        );
-    }
-
-    renderLocalEntries(filtered);
-}
-
-document.addEventListener('click', e => {
-    const btn = e.target.closest('.filter-btn');
-    if (!btn) return;
-
-    if (btn.dataset.filter) {
-        activeFilter = btn.dataset.filter;
-    }
-
-    if (btn.dataset.sort) {
-        activeSort = btn.dataset.sort;
-    }
-
-    btn
-        .closest('.local-filters')
-        .querySelectorAll('.filter-btn')
-        .forEach(b => b.classList.remove('active'));
-
-    btn.classList.add('active');
-
-    applyLocalFilters();
-});

docker/src/scripts/profile.js

@@ -0,0 +1,585 @@
+const API_BASE = '/api';
+
+const DashboardApp = {
+
+    State: {
+        currentList: [],
+        filteredList: [],
+        localLibraryData: [],
+        currentUserId: null,
+        currentLocalType: 'anime',
+        pagination: {
+            itemsPerPage: 50,
+            visibleCount: 50
+        }
+    },
+
+    init: async function() {
+        console.log('Initializing Dashboard...');
+        await this.User.init();
+        await this.Tracking.load();
+
+        this.UI.setupTabSystem();
+        this.initListeners();
+
+        const localInput = document.getElementById('local-search-input');
+        if(localInput) {
+            localInput.addEventListener('input', (e) => this.Library.filterContent(e.target.value));
+        }
+    },
+
+    initListeners: function() {
+
+        document.getElementById('scan-incremental-btn')?.addEventListener('click', () => this.Library.triggerScan('incremental'));
+        document.getElementById('scan-full-btn')?.addEventListener('click', () => this.Library.triggerScan('full'));
+
+        document.getElementById('profile-form')?.addEventListener('submit', (e) => this.User.updateProfile(e));
+        document.getElementById('password-form')?.addEventListener('submit', (e) => this.User.changePassword(e));
+        document.getElementById('logout-btn')?.addEventListener('click', () => window.AuthUtils.logout());
+
+        const fileInput = document.getElementById('avatar-upload');
+        if (fileInput) {
+            fileInput.addEventListener('change', (e) => {
+                const file = e.target.files[0];
+                if (file) {
+                    const reader = new FileReader();
+                    reader.onload = evt => {
+                        document.getElementById('user-avatar').src = evt.target.result;
+                        const urlInput = document.getElementById('setting-avatar-url');
+                        if(urlInput) urlInput.value = '';
+                    };
+                    reader.readAsDataURL(file);
+                }
+            });
+        }
+
+        const trackingInput = document.getElementById('tracking-search-input');
+        if (trackingInput) trackingInput.addEventListener('input', () => this.Tracking.applyFilters());
+
+        ['status-filter', 'type-filter', 'sort-filter'].forEach(id => {
+            document.getElementById(id)?.addEventListener('change', () => this.Tracking.applyFilters());
+        });
+
+        document.querySelectorAll('.view-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));
+                btn.classList.add('active');
+                const view = btn.dataset.view;
+                const container = document.getElementById('list-container');
+                view === 'list' ? container.classList.add('list-view') : container.classList.remove('list-view');
+            });
+        });
+    },
+
+    User: {
+        init: async function() {
+            try {
+                const headers = window.AuthUtils.getSimpleAuthHeaders();
+                const res = await fetch(`${API_BASE}/me`, { headers });
+
+                if (res.ok) {
+                    const data = await res.json();
+                    document.getElementById('user-username').textContent = data.username;
+                    const settingUsername = document.getElementById('setting-username');
+                    if(settingUsername) settingUsername.value = data.username;
+
+                    if (data.avatar) {
+                        document.getElementById('user-avatar').src = data.avatar;
+                    }
+                }
+
+                const token = localStorage.getItem('token');
+                if (token) {
+                    const payload = JSON.parse(atob(token.split('.')[1]));
+                    DashboardApp.State.currentUserId = payload.id;
+                    await this.checkIntegrations(payload.id);
+                }
+            } catch (err) {
+                console.error("Error loading user profile:", err);
+            }
+        },
+
+        checkIntegrations: async function(userId) {
+            if (!userId) return;
+            try {
+                const res = await fetch(`${API_BASE}/users/${userId}/integration`);
+                let data = { connected: false };
+                if (res.ok) data = await res.json();
+
+                this.updateIntegrationUI(data, userId);
+            } catch (e) { console.error("Integration check error:", e); }
+        },
+
+        updateIntegrationUI: function(data, userId) {
+            const statusEl = document.getElementById('anilist-status');
+            const btn = document.getElementById('anilist-action-btn');
+            const headerBadge = document.getElementById('header-anilist-link');
+
+            if (data.connected) {
+                if (headerBadge) {
+                    headerBadge.style.display = 'flex';
+                    headerBadge.href = `https://anilist.co/user/${data.anilistUserId}`;
+                    headerBadge.title = `Connected as ${data.anilistUserId}`;
+                }
+                if (statusEl) {
+                    statusEl.textContent = `Connected as ID: ${data.anilistUserId}`;
+                    statusEl.style.color = 'var(--color-success)';
+                }
+                if (btn) {
+                    btn.textContent = 'Disconnect';
+                    btn.className = 'btn-stream-outline link-danger';
+
+                    btn.onclick = () => this.disconnectAniList(userId);
+                }
+            } else {
+                if (headerBadge) headerBadge.style.display = 'none';
+                if (statusEl) {
+                    statusEl.textContent = 'Not connected';
+                    statusEl.style.color = 'var(--color-text-secondary)';
+                }
+                if (btn) {
+                    btn.textContent = 'Connect';
+                    btn.className = 'btn-stream-outline';
+                    btn.onclick = () => this.redirectToAniListLogin();
+                }
+            }
+        },
+
+        redirectToAniListLogin: async function() {
+            if (!DashboardApp.State.currentUserId) return;
+            try {
+                const clientId = 32898;
+                const redirectUri = encodeURIComponent(window.location.origin + '/api/anilist');
+                const state = encodeURIComponent(DashboardApp.State.currentUserId);
+                window.location.href = `https://anilist.co/api/v2/oauth/authorize?client_id=${clientId}&response_type=code&redirect_uri=${redirectUri}&state=${state}`;
+            } catch (err) { console.error(err); alert('Error starting AniList login'); }
+        },
+
+        disconnectAniList: async function(userId) {
+            if(!confirm("Disconnect AniList?")) return;
+            try {
+                const token = localStorage.getItem('token');
+                await fetch(`${API_BASE}/users/${userId}/integration`, {
+                    method: 'DELETE',
+                    headers: { 'Authorization': `Bearer ${token}` }
+                });
+                this.checkIntegrations(userId);
+            } catch (e) { alert("Failed to disconnect"); }
+        },
+
+        updateProfile: async function(e) {
+            e.preventDefault();
+            const userId = DashboardApp.State.currentUserId;
+            if (!userId) return;
+
+            const username = document.getElementById('setting-username').value;
+            const urlInput = document.getElementById('setting-avatar-url')?.value || '';
+            const fileInput = document.getElementById('avatar-upload');
+            let finalAvatar = null;
+
+            if (fileInput && fileInput.files && fileInput.files[0]) {
+                try {
+                    finalAvatar = await DashboardApp.Utils.fileToBase64(fileInput.files[0]);
+                } catch (err) { alert("Error reading file"); return; }
+            } else if (urlInput.trim() !== "") {
+                finalAvatar = urlInput.trim();
+            }
+
+            const bodyData = { username };
+            if (finalAvatar) bodyData.profilePictureUrl = finalAvatar;
+
+            try {
+                const res = await fetch(`${API_BASE}/users/${userId}`, {
+                    method: 'PUT',
+                    headers: { ...window.AuthUtils.getSimpleAuthHeaders(), 'Content-Type': 'application/json' },
+                    body: JSON.stringify(bodyData)
+                });
+                if (res.ok) alert('Profile updated successfully!');
+                else { const err = await res.json(); alert(err.error || 'Update failed'); }
+            } catch (e) { console.error(e); }
+        },
+
+        changePassword: async function(e) {
+            e.preventDefault();
+            const userId = DashboardApp.State.currentUserId;
+            if (!userId) return;
+            const currentPassword = document.getElementById('current-password').value;
+            const newPassword = document.getElementById('new-password').value;
+
+            try {
+                const res = await fetch(`${API_BASE}/users/${userId}/password`, {
+                    method: 'PUT',
+                    headers: { ...window.AuthUtils.getSimpleAuthHeaders(), 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ currentPassword, newPassword })
+                });
+                const data = await res.json();
+                if (res.ok) { alert("Password updated successfully"); document.getElementById('password-form').reset(); }
+                else alert(data.error || "Failed to update password");
+            } catch (e) { console.error(e); }
+        }
+    },
+
+    Tracking: {
+        load: async function() {
+            const loadingState = document.getElementById('loading-state');
+            const emptyState = document.getElementById('empty-state');
+            const container = document.getElementById('list-container');
+
+            try {
+                loadingState.style.display = 'flex';
+                emptyState.style.display = 'none';
+                container.innerHTML = '';
+
+                const response = await fetch(`${API_BASE}/list`, { headers: window.AuthUtils.getSimpleAuthHeaders() });
+                if (!response.ok) throw new Error('Failed');
+
+                const data = await response.json();
+                DashboardApp.State.currentList = data.results || [];
+
+                this.updateStats();
+
+                loadingState.style.display = 'none';
+                if (DashboardApp.State.currentList.length === 0) emptyState.style.display = 'flex';
+                else this.applyFilters();
+
+            } catch (error) {
+                console.error(error);
+                loadingState.style.display = 'none';
+            }
+        },
+
+        updateStats: function() {
+            const list = DashboardApp.State.currentList;
+            const animeCount = list.filter(item => item.entry_type === 'ANIME').length;
+            const mangaCount = list.filter(item => item.entry_type === 'MANGA').length;
+
+            document.getElementById('total-stat').textContent = list.length;
+            if (document.getElementById('anime-stat')) document.getElementById('anime-stat').textContent = animeCount;
+            if (document.getElementById('manga-stat')) document.getElementById('manga-stat').textContent = mangaCount;
+        },
+
+        applyFilters: function() {
+            const statusFilter = document.getElementById('status-filter').value;
+            const typeFilter = document.getElementById('type-filter').value;
+            const sortFilter = document.getElementById('sort-filter').value;
+            const searchInput = document.getElementById('tracking-search-input');
+            const searchQuery = searchInput ? searchInput.value.toLowerCase().trim() : '';
+
+            let result = [...DashboardApp.State.currentList];
+
+            if (searchQuery) {
+                result = result.filter(item => (item.title ? item.title.toLowerCase() : '').includes(searchQuery));
+            }
+
+            if (statusFilter !== 'all') result = result.filter(item => item.status === statusFilter);
+            if (typeFilter !== 'all') result = result.filter(item => item.entry_type === typeFilter);
+
+            if (sortFilter === 'title') result.sort((a, b) => (a.title || '').localeCompare(b.title || ''));
+            else if (sortFilter === 'score') result.sort((a, b) => (b.score || 0) - (a.score || 0));
+            else result.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at));
+
+            DashboardApp.State.filteredList = result;
+            DashboardApp.State.pagination.visibleCount = DashboardApp.State.pagination.itemsPerPage;
+            this.render();
+        },
+
+        render: function() {
+            const container = document.getElementById('list-container');
+            container.innerHTML = '';
+            const list = DashboardApp.State.filteredList;
+            const count = DashboardApp.State.pagination.visibleCount;
+
+            if (list.length === 0) {
+                container.innerHTML = '<div class="empty-text" style="grid-column: 1/-1; text-align:center; color: var(--color-text-secondary);">No matches found</div>';
+                return;
+            }
+
+            const itemsToShow = list.slice(0, count);
+            itemsToShow.forEach(item => container.appendChild(this.createItemElement(item)));
+
+            if (count < list.length) {
+                this.renderLoadMoreButton(container, list.length - count);
+            }
+        },
+
+        createItemElement: function(item) {
+            const div = document.createElement('div');
+            div.className = 'list-item';
+
+            const itemLink = this.getEntryLink(item);
+            const posterUrl = item.poster || '/public/assets/placeholder.svg';
+            const progress = item.progress || 0;
+            const totalUnits = item.entry_type === 'ANIME' ? item.total_episodes || 0 : item.total_chapters || 0;
+            const progressPercent = totalUnits > 0 ? (progress / totalUnits) * 100 : 0;
+            const score = item.score ? item.score.toFixed(1) : null;
+            const entryType = (item.entry_type).toUpperCase();
+
+            const statusLabels = {
+                'CURRENT': entryType === 'ANIME' ? 'Watching' : 'Reading',
+                'COMPLETED': 'Completed', 'PLANNING': 'Planning', 'PAUSED': 'Paused',
+                'DROPPED': 'Dropped', 'REPEATING': entryType === 'ANIME' ? 'Rewatching' : 'Rereading'
+            };
+
+            const extraInfo = [];
+            if (item.repeat_count > 0) extraInfo.push(`<span class="meta-pill repeat-pill">🔁 ${item.repeat_count}</span>`);
+            if (item.is_private) extraInfo.push('<span class="meta-pill private-pill">🔒 Private</span>');
+
+            div.innerHTML = `
+                <a href="${itemLink}" class="item-poster-link">
+                    <img src="${posterUrl}" alt="${item.title}" class="item-poster" onerror="this.src='/public/assets/placeholder.svg'">
+                </a>
+                <div class="item-content">
+                    <div>
+                        <a href="${itemLink}" style="text-decoration:none; color:inherit;">
+                            <h3 class="item-title">${item.title || 'Unknown'}</h3>
+                        </a>
+                        <div class="item-meta">
+                            <span class="meta-pill status-pill">${statusLabels[item.status] || item.status}</span>
+                            <span class="meta-pill type-pill">${entryType}</span> 
+                            <span class="meta-pill source-pill">${item.source.toUpperCase()}</span>
+                            ${extraInfo.join('')}
+                        </div>
+                    </div>
+                    <div>
+                        <div class="progress-bar-container"><div class="progress-bar" style="width: ${progressPercent}%"></div></div>
+                        <div class="progress-text">
+                            <span>${progress}${totalUnits > 0 ? ` / ${totalUnits}` : ''}</span> 
+                            ${score ? `<span class="score-badge">⭐ ${score}</span>` : ''}
+                        </div>
+                    </div>
+                </div>
+                <button class="edit-icon-btn">
+                    <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15.232 5.232l3.536 3.536m-2.036-5.808a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.536L15.232 5.232z"/></svg>
+                </button>
+            `;
+
+            div.querySelector('.edit-icon-btn').onclick = (e) => {
+                e.preventDefault(); e.stopPropagation();
+                window.ListModalManager.currentData = item;
+                window.ListModalManager.isInList = true;
+                window.ListModalManager.currentEntry = item;
+                window.ListModalManager.open(item, item.source || 'anilist');
+            };
+
+            return div;
+        },
+
+        renderLoadMoreButton: function(container, remaining) {
+            const btnContainer = document.createElement('div');
+            Object.assign(btnContainer.style, { gridColumn: "1 / -1", display: "flex", justifyContent: "center", padding: "2rem 0" });
+
+            const loadMoreBtn = document.createElement('button');
+            loadMoreBtn.className = "btn-blur";
+            loadMoreBtn.textContent = `Show All (${remaining} more)`;
+            loadMoreBtn.onclick = () => {
+                DashboardApp.State.pagination.visibleCount = DashboardApp.State.filteredList.length;
+                this.render();
+            };
+
+            btnContainer.appendChild(loadMoreBtn);
+            container.appendChild(btnContainer);
+        },
+
+        getEntryLink: function(item) {
+            const baseRoute = (item.entry_type?.toUpperCase() === 'ANIME') ? '/anime' : '/book';
+            return `${baseRoute}/${item.entry_id}`;
+        }
+    },
+
+    Library: {
+        loadStats: async function() {
+            const types = ['anime', 'manga', 'novels'];
+            const elements = { 'anime': 'local-anime-count', 'manga': 'local-manga-count', 'novels': 'local-novel-count' };
+
+            for (const type of types) {
+                try {
+                    const res = await fetch(`${API_BASE}/library/${type}`, { headers: window.AuthUtils.getSimpleAuthHeaders() });
+                    if(res.ok) {
+                        const data = await res.json();
+                        const el = document.getElementById(elements[type]);
+                        if (el) el.textContent = `${data.length} items`;
+                    }
+                } catch (e) { console.error(e); }
+            }
+        },
+
+        loadContent: async function(type) {
+            DashboardApp.State.currentLocalType = type;
+            const container = document.getElementById('local-list-container');
+            const loading = document.getElementById('local-loading');
+            const searchInput = document.getElementById('local-search-input');
+
+            container.innerHTML = '';
+            loading.style.display = 'flex';
+            if(searchInput) searchInput.value = '';
+
+            try {
+                const res = await fetch(`${API_BASE}/library/${type}`, { headers: window.AuthUtils.getSimpleAuthHeaders() });
+                if (!res.ok) throw new Error('Failed to load local content');
+
+                const data = await res.json();
+                DashboardApp.State.localLibraryData = data;
+                this.renderGrid(data, type);
+            } catch (err) {
+                console.error(err);
+                container.innerHTML = `<div class="empty-state"><p>Error loading library</p></div>`;
+            } finally {
+                loading.style.display = 'none';
+            }
+        },
+
+        renderGrid: function(entries, type) {
+            const container = document.getElementById('local-list-container');
+            container.innerHTML = '';
+
+            if (entries.length === 0) {
+                container.innerHTML = `
+                    <div class="empty-state" style="grid-column: 1/-1;">
+                        <p>No ${type} files found.</p>
+                        <button onclick="DashboardApp.Library.triggerScan('incremental')" class="btn-blur">Scan Now</button>
+                    </div>`;
+                return;
+            }
+
+            entries.forEach(entry => {
+                const isMatched = entry.matched && entry.metadata;
+                const meta = entry.metadata || {};
+                let poster = meta.coverImage?.large || '/public/assets/placeholder.svg';
+
+                let title = isMatched ? (meta.title?.english || meta.title?.romaji) : entry.folder_name;
+                if (!isMatched) title = title.replace(/\[.*?\]|\(.*?\)|\.mkv|\.mp4/g, '').trim();
+
+                const url = isMatched ? (type === 'anime' ? `/anime/${meta.id}` : `/book/${meta.id}`) : '#';
+
+                const div = document.createElement('div');
+                div.className = 'list-item';
+                div.innerHTML = `
+                    <div class="item-poster-link" onclick="${isMatched ? `window.location='${url}'` : ''}" style="cursor: ${isMatched ? 'pointer' : 'default'}">
+                        <img src="${poster}" class="item-poster" loading="lazy">
+                        ${!isMatched ? `<div class="unmatched-badge"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg> UNMATCHED</div>` : ''}
+                    </div>
+                    <div class="item-content">
+                        <h3 class="item-title" title="${entry.folder_name}">${title}</h3>
+                        <div class="item-meta">
+                             <span class="meta-pill type-pill">${entry.files ? entry.files.length : 0} FILES</span>
+                             ${isMatched ? '<span class="meta-pill status-pill">MATCHED</span>' : ''}
+                        </div>
+                        <div class="folder-path-tooltip">${entry.folder_name}</div>
+                    </div>
+                    <button class="edit-icon-btn" onclick="DashboardApp.Library.openManualMatch('${entry.id}', '${type}')" title="${isMatched ? 'Rematch' : 'Fix Match'}">
+                        <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
+                    </button>
+                `;
+                container.appendChild(div);
+            });
+        },
+
+        filterContent: function(query) {
+            if (!DashboardApp.State.localLibraryData) return;
+            const lowerQuery = query.toLowerCase();
+            const filtered = DashboardApp.State.localLibraryData.filter(entry => {
+                const metaTitle = entry.metadata?.title?.english || entry.metadata?.title?.romaji || '';
+                const folderName = entry.folder_name || '';
+                return metaTitle.toLowerCase().includes(lowerQuery) || folderName.toLowerCase().includes(lowerQuery);
+            });
+            this.renderGrid(filtered, DashboardApp.State.currentLocalType);
+        },
+
+        triggerScan: async function(mode) {
+            const consoleDiv = document.getElementById('scan-console');
+            const statusText = document.getElementById('scan-status-text');
+            if(consoleDiv) consoleDiv.style.display = 'flex';
+            if(statusText) statusText.textContent = `Starting ${mode} scan...`;
+
+            try {
+                const res = await fetch(`${API_BASE}/library/scan?mode=${mode}`, {
+                    method: 'POST', headers: window.AuthUtils.getSimpleAuthHeaders()
+                });
+                if (res.ok) {
+                    if(statusText) statusText.textContent = "Scan completed successfully!";
+                    setTimeout(() => { if(consoleDiv) consoleDiv.style.display = 'none'; this.loadStats(); }, 3000);
+                } else throw new Error('Scan failed');
+            } catch (e) {
+                if(statusText) { statusText.textContent = "Error during scan."; statusText.style.color = 'var(--color-danger)'; }
+            }
+        },
+
+        openManualMatch: function(id, type) {
+            const newId = prompt("Enter AniList ID to force match:");
+            if (newId) {
+                fetch(`${API_BASE}/library/${type}/${id}/match`, {
+                    method: 'POST',
+                    headers: { ...window.AuthUtils.getSimpleAuthHeaders(), 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ source: 'anilist', matched_id: parseInt(newId) })
+                }).then(res => {
+                    if(res.ok) { alert("Matched! Refreshing..."); this.loadContent(type); }
+                    else { alert("Failed to match."); }
+                });
+            }
+        },
+
+        switchType: function(type, btnElement) {
+            document.querySelectorAll('.type-pill-btn').forEach(b => b.classList.remove('active'));
+            if(btnElement) btnElement.classList.add('active');
+            this.loadContent(type);
+        }
+    },
+
+    UI: {
+        setupTabSystem: function() {
+            const tabs = document.querySelectorAll('.nav-pill');
+            const sections = document.querySelectorAll('.tab-section');
+
+            tabs.forEach(tab => {
+                tab.addEventListener('click', () => {
+                    tabs.forEach(t => t.classList.remove('active'));
+                    tab.classList.add('active');
+
+                    const targetId = `section-${tab.dataset.target}`;
+                    sections.forEach(sec => {
+                        sec.classList.remove('active');
+                        if (sec.id === targetId) sec.classList.add('active');
+                    });
+
+                    if (tab.dataset.target === 'local') {
+                        DashboardApp.Library.loadStats();
+                        DashboardApp.Library.loadContent('anime');
+                    }
+                });
+            });
+        }
+    },
+
+    Utils: {
+        fileToBase64: (file) => new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = error => reject(error);
+        })
+    }
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+    DashboardApp.init();
+});
+
+window.switchLocalType = (type, btn) => DashboardApp.Library.switchType(type, btn);
+
+window.saveToList = async () => {
+    const data = window.ListModalManager.currentData;
+    if (!data) return;
+    const idToSave = data.entry_id || data.id;
+    await window.ListModalManager.save(idToSave, data.source || 'anilist');
+    await DashboardApp.Tracking.load();
+};
+
+window.deleteFromList = async () => {
+    const data = window.ListModalManager.currentData;
+    if (!data) return;
+    const idToDelete = data.entry_id || data.id;
+    await window.ListModalManager.delete(idToDelete, data.source || 'anilist');
+    await DashboardApp.Tracking.load();
+};
+
+window.closeAddToListModal = () => window.ListModalManager.close();

docker/src/scripts/settings.js

@@ -1,5 +1,6 @@
-const API_BASE = '/api/config';
+const API_BASE2 = '/api/config';
 let currentConfig = {};
+let currentSchema = {};
 let activeSection = '';
 let modal, navContainer, formContent, form;
 
@@ -9,96 +10,74 @@ window.toggleSettingsModal = async (forceClose = false) => {
     formContent = document.getElementById('config-section-content');
     form = document.getElementById('config-form');
 
-    if (!modal) {
-        console.error('Modal not found');
-        return;
-    }
+    if (!modal) return;
 
     if (forceClose) {
         modal.classList.add('hidden');
     } else {
         const isHidden = modal.classList.contains('hidden');
-
         if (isHidden) {
-            // Abrir modal
             modal.classList.remove('hidden');
             await loadSettings();
         } else {
-            // Cerrar modal
             modal.classList.add('hidden');
         }
     }
 };
 
 async function loadSettings() {
-    if (!formContent) {
-        console.error('Form content not found');
-        return;
-    }
+    if (!formContent) return;
 
-    // Mostrar loading
+    // Loading State
     formContent.innerHTML = `
         <div class="skeleton-loader">
             <div class="skeleton title-skeleton"></div>
-            <div class="skeleton text-skeleton"></div>
-            <div class="skeleton text-skeleton"></div>
+            <div class="skeleton field-skeleton"></div>
+            <div class="skeleton field-skeleton"></div>
         </div>
     `;
 
     try {
-        const res = await fetch(API_BASE);
-
-        if (!res.ok) {
-            throw new Error(`HTTP error! status: ${res.status}`);
-        }
+        const res = await fetch(API_BASE2);
+        if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
 
         const data = await res.json();
-
         if (data.error) throw new Error(data.error);
 
-        currentConfig = data;
+        // --- CORRECCIÓN AQUI ---
+        // Tu JSON devuelve "values", el código original buscaba "config"
+        currentConfig = data.values || data.config || data;
+        currentSchema = data.schema || {};
+
         renderNav();
 
-        // Seleccionar la primera sección si no hay ninguna activa
         if (!activeSection || !currentConfig[activeSection]) {
             activeSection = Object.keys(currentConfig)[0];
         }
 
         switchSection(activeSection);
+
     } catch (err) {
         console.error('Error loading settings:', err);
         formContent.innerHTML = `
             <div style="padding: 2rem; text-align: center;">
-                <p style="color: var(--color-danger); margin-bottom: 1rem;">Failed to load settings</p>
-                <p style="color: var(--color-text-muted); font-size: 0.9rem;">${err.message}</p>
+                <p style="color: #ef4444; margin-bottom: 1rem;">Failed to load settings</p>
+                <p style="color: #888; font-size: 0.9rem;">${err.message}</p>
             </div>
         `;
     }
 }
 
-function renderNav() {
-    if (!navContainer) return;
-
-    navContainer.innerHTML = '';
-    Object.keys(currentConfig).forEach(section => {
-        const btn = document.createElement('div');
-        btn.className = `nav-item ${section === activeSection ? 'active' : ''}`;
-        btn.textContent = section;
-        btn.onclick = () => switchSection(section);
-        navContainer.appendChild(btn);
-    });
-}
-
 function switchSection(section) {
     if (!currentConfig[section]) return;
-
     activeSection = section;
     renderNav();
 
     const sectionData = currentConfig[section];
+    const sectionSchema = currentSchema[section] || {};
 
     formContent.innerHTML = `
-        <h2 class="section-title" style="margin-bottom: 2rem; text-transform: capitalize;">
+        <h2 class="section-title" style="margin-bottom: 2rem; text-transform: capitalize; font-size: 1.8rem;">
             ${section.replace(/_/g, ' ')}
         </h2>
     `;
@@ -109,21 +88,34 @@ function switchSection(section) {
 
         const isBool = typeof value === 'boolean';
         const inputId = `input-${section}-${key}`;
-        const label = key.replace(/_/g, ' ');
+        const labelText = key.replace(/_/g, ' ');
+
+        // Obtener descripción
+        const description = sectionSchema[key]?.description || '';
+        const descHtml = description
+            ? `<p class="config-description">${description}</p>`
+            : '';
 
         if (isBool) {
             group.innerHTML = `
-                <div style="display: flex; align-items: center; gap: 0.5rem;">
-                    <input type="checkbox" id="${inputId}" name="${key}" ${value ? 'checked' : ''}>
-                    <label for="${inputId}" style="margin: 0; cursor: pointer;">${label}</label>
-                </div>
+                <div style="display: flex; flex-direction: column; gap: 8px;">
+                    <div style="display: flex; align-items: center; gap: 0.8rem;">
+                        <input type="checkbox" id="${inputId}" name="${key}" ${value ? 'checked' : ''} 
+                               style="width: 20px; height: 20px; accent-color: var(--accent);">
+                        <label for="${inputId}" style="margin: 0; cursor: pointer; font-size: 1rem;">${labelText}</label>
+                    </div>
+                    ${descHtml} </div>
             `;
         } else {
+            // --- CAMBIO PRINCIPAL AQUI ---
+            // Movimos ${descHtml} para que esté DESPUÉS del input
             group.innerHTML = `
-                <label for="${inputId}">${label}</label>
+                <label for="${inputId}">${labelText}</label>
                 <input class="config-input" id="${inputId}" name="${key}"
                        type="${typeof value === 'number' ? 'number' : 'text'}"
-                       value="${value}">
+                       value="${value || ''}" 
+                       placeholder="Not set">
+                ${descHtml} 
             `;
         }
 
@@ -131,9 +123,27 @@ function switchSection(section) {
     });
 }
 
-// Setup form submit handler
+function renderNav() {
+    if (!navContainer) return;
+    navContainer.innerHTML = '';
+
+    Object.keys(currentConfig).forEach(section => {
+        const btn = document.createElement('div');
+        btn.className = `nav-item ${section === activeSection ? 'active' : ''}`;
+
+        // Icono opcional según la sección (puedes personalizar esto)
+        let icon = '';
+        if(section === 'library') icon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>';
+        if(section === 'paths') icon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><folder></folder><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>';
+
+        btn.innerHTML = `${icon} ${section}`;
+        btn.onclick = () => switchSection(section);
+        navContainer.appendChild(btn);
+    });
+}
+
+// Handler de guardado
 document.addEventListener('DOMContentLoaded', () => {
-    // Usar delegación de eventos ya que el form se carga dinámicamente
     document.addEventListener('submit', async (e) => {
         if (e.target.id === 'config-form') {
             e.preventDefault();
@@ -146,8 +156,9 @@ async function saveSettings() {
     if (!form || !activeSection) return;
 
     const updatedData = {};
+    const sectionConfig = currentConfig[activeSection];
 
-    Object.keys(currentConfig[activeSection]).forEach(key => {
+    Object.keys(sectionConfig).forEach(key => {
         const input = form.elements[key];
         if (!input) return;
 
@@ -161,58 +172,42 @@ async function saveSettings() {
     });
 
     try {
-        const res = await fetch(`${API_BASE}/${activeSection}`, {
+        const res = await fetch(`${API_BASE2}/${activeSection}`, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify(updatedData)
         });
 
         if (res.ok) {
-            currentConfig[activeSection] = updatedData;
-
-            // Mostrar notificación de éxito
-            const notification = document.createElement('div');
-            notification.style.cssText = `
-                position: fixed;
-                top: 20px;
-                right: 20px;
-                background: var(--color-success, #10b981);
-                color: white;
-                padding: 1rem 1.5rem;
-                border-radius: 8px;
-                box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-                z-index: 10000;
-                animation: slideIn 0.3s ease-out;
-            `;
-            notification.textContent = 'Settings saved successfully!';
-            document.body.appendChild(notification);
-
-            setTimeout(() => {
-                notification.style.animation = 'slideOut 0.3s ease-out';
-                setTimeout(() => notification.remove(), 300);
-            }, 2000);
+            currentConfig[activeSection] = updatedData; // Actualizamos localmente
+            showNotification('Settings saved successfully!');
         } else {
             throw new Error('Failed to save settings');
         }
     } catch (err) {
-        console.error('Error saving settings:', err);
-        alert('Error saving settings: ' + err.message);
+        console.error(err);
+        showNotification('Error saving settings', true);
     }
 }
 
-// Añadir estilos para las animaciones (solo si no existen)
-if (!document.getElementById('settings-animations')) {
-    const animationStyles = document.createElement('style');
-    animationStyles.id = 'settings-animations';
-    animationStyles.textContent = `
-        @keyframes slideIn {
-            from { transform: translateX(400px); opacity: 0; }
-            to { transform: translateX(0); opacity: 1; }
-        }
-        @keyframes slideOut {
-            from { transform: translateX(0); opacity: 1; }
-            to { transform: translateX(400px); opacity: 0; }
-        }
+function showNotification(msg, isError = false) {
+    const notification = document.createElement('div');
+    const bg = isError ? '#ef4444' : '#10b981';
+
+    notification.style.cssText = `
+        position: fixed; top: 20px; right: 20px;
+        background: ${bg}; color: white;
+        padding: 1rem 1.5rem; border-radius: 8px; font-weight: 600;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 20000;
+        animation: slideIn 0.3s ease-out; display: flex; align-items: center; gap: 10px;
     `;
-    document.head.appendChild(animationStyles);
+    notification.innerHTML = isError
+        ? `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg> ${msg}`
+        : `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg> ${msg}`;
+
+    document.body.appendChild(notification);
+    setTimeout(() => {
+        notification.style.animation = 'slideOut 0.3s ease-out';
+        setTimeout(() => notification.remove(), 300);
+    }, 3000);
 }

docker/src/scripts/users.js

@@ -1038,7 +1038,7 @@ async function performLogin(userId, password = null) {
         const data = await res.json();
         localStorage.setItem('token', data.token);
 
-        window.location.href = '/anime';
+        window.location.href = '/profile';
     } catch (err) {
         console.error('Login error', err);
         showUserToast(err.message || 'Login failed', 'error');

docker/src/scripts/utils/continue-watching-manager.js

@@ -52,10 +52,9 @@ const ContinueWatchingManager = {
 
         if (entryType === 'ANIME') {
             url = item.source === 'anilist'
-                ? `/watch/${item.entry_id}/${nextProgress}`
-                : `/watch/${item.entry_id}/${nextProgress}?${item.source}`;
+                ? `/anime/${item.entry_id}?episode=${nextProgress}`
+                : `/anime/${item.entry_id}/${item.source}/?episode=${nextProgress}`;
         } else {
-
             url = item.source === 'anilist'
                 ? `/book/${item.entry_id}?chapter=${nextProgress}`
                 : `/read/${item.source}/${nextProgress}/${item.entry_id}?source=${item.source}`;

docker/src/shared/config.js

@@ -11,6 +11,22 @@ const DEFAULT_CONFIG = {
         anime: null,
         manga: null,
         novels: null
+    },
+    paths: {
+        mpv: null,
+        ffmpeg: null
+    }
+};
+
+export const CONFIG_SCHEMA = {
+    library: {
+        anime: { description: "Path where anime is stored" },
+        manga: { description: "Path where manga is stored" },
+        novels: { description: "Path where novels are stored" }
+    },
+    paths: {
+        mpv: { description: "Required to open anime episodes in mpv on desktop version." },
+        ffmpeg: { description: "Required for downloading anime episodes." }
     }
 };
 
@@ -31,21 +47,39 @@ function ensureConfigFile() {
 export function getConfig() {
     ensureConfigFile();
     const raw = fs.readFileSync(CONFIG_PATH, 'utf8');
-    return yaml.load(raw) || DEFAULT_CONFIG;
+    const loaded = yaml.load(raw) || {};
+
+    return {
+        values: deepMerge(structuredClone(DEFAULT_CONFIG), loaded),
+        schema: CONFIG_SCHEMA
+    };
+}
+
+function sanitizeLoadedConfig(loaded) {
+    return {
+        library: loaded.library,
+        paths: loaded.paths
+    };
 }
 
 export function setConfig(partialConfig) {
     ensureConfigFile();
 
-    const current = getConfig();
-    const next = deepMerge(current, partialConfig);
+    const raw = fs.readFileSync(CONFIG_PATH, 'utf8');
+    const loadedRaw = yaml.load(raw) || {};
+    const loaded = sanitizeLoadedConfig(loadedRaw);
 
-    fs.writeFileSync(
-        CONFIG_PATH,
-        yaml.dump(next),
-        'utf8'
+    const next = deepMerge(
+        structuredClone(DEFAULT_CONFIG),
+        deepMerge(loaded, partialConfig)
     );
 
+    const toSave = {
+        library: next.library,
+        paths: next.paths
+    };
+
+    fs.writeFileSync(CONFIG_PATH, yaml.dump(toSave), 'utf8');
     return next;
 }
 

docker/src/shared/extensions.js

@@ -194,6 +194,26 @@ function getBookExtensionsMap() {
     return bookExts;
 }
 
+function getMangaExtensionsMap() {
+    const mangaExts = new Map();
+    for (const [name, ext] of extensions) {
+        if (ext.type === 'book-board' && ext.mediaType !== 'ln') {
+            mangaExts.set(name, ext);
+        }
+    }
+    return mangaExts;
+}
+
+function getNovelExtensionsMap() {
+    const novelExts = new Map();
+    for (const [name, ext] of extensions) {
+        if (ext.type === 'book-board' && ext.mediaType === 'ln') {
+            novelExts.set(name, ext);
+        }
+    }
+    return novelExts;
+}
+
 function getGalleryExtensionsMap() {
     const galleryExts = new Map();
     for (const [name, ext] of extensions) {
@@ -213,5 +233,7 @@ module.exports = {
     getBookExtensionsMap,
     getGalleryExtensionsMap,
     saveExtensionFile,
-    deleteExtensionFile
+    deleteExtensionFile,
+    getMangaExtensionsMap,
+    getNovelExtensionsMap
 };

docker/src/views/views.routes.ts

@@ -12,7 +12,7 @@ function getNavbarHTML(activePage: string, showSearch: boolean = true): string {
 
     let navbar = cachedNavbar;
 
-    const pages = ['anime', 'books', 'gallery', 'schedule', 'my-list', 'marketplace'];
+    const pages = ['anime', 'books', 'gallery', 'schedule' , 'marketplace'];
     pages.forEach(page => {
         const regex = new RegExp(`(<button class="nav-button[^"]*)"\\s+data-page="${page}"`, 'g');
         if (page === activePage) {
@@ -51,10 +51,10 @@ async function viewsRoutes(fastify: FastifyInstance) {
         reply.type('text/html').send(htmlWithNavbar);
     });
 
-    fastify.get('/my-list', (req: FastifyRequest, reply: FastifyReply) => {
-        const htmlPath = path.join(__dirname, '..', '..', 'views', 'list.html');
+    fastify.get('/profile', (req: FastifyRequest, reply: FastifyReply) => {
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'profile.html');
         const html = fs.readFileSync(htmlPath, 'utf-8');
-        const htmlWithNavbar = injectNavbar(html, 'my-list', false);
+        const htmlWithNavbar = injectNavbar(html, '', false);
         reply.type('text/html').send(htmlWithNavbar);
     });
 
@@ -112,12 +112,6 @@ async function viewsRoutes(fastify: FastifyInstance) {
         reply.type('text/html').send(html);
     });
 
-    fastify.get('/watch/:id/:episode', (req: FastifyRequest, reply: FastifyReply) => {
-        const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'watch.html');
-        const html = fs.readFileSync(htmlPath, 'utf-8');
-        reply.type('text/html').send(html);
-    });
-
     fastify.get('/book/:id', (req: FastifyRequest, reply: FastifyReply) => {
         const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'book.html');
         const html = fs.readFileSync(htmlPath, 'utf-8');

docker/views/anime/anime.html

@@ -1,223 +1,203 @@
 <!doctype html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link
-            rel="icon"
-            href="/public/assets/waifuboards.ico"
-            type="image/x-icon"
-        />
-        <title>WaifuBoard</title>
-        <link rel="stylesheet" href="/views/css/globals.css" />
-        <link rel="stylesheet" href="/views/css/components/anilist-modal.css" />
-        <link rel="stylesheet" href="/views/css/components/hero.css" />
-        <link rel="stylesheet" href="/views/css/anime/anime.css" />
-        <link
-            rel="stylesheet"
-            href="/views/css/components/updateNotifier.css"
-        />
-    </head>
-    <body>
-        <div class="modal-overlay" id="desc-modal">
-            <div class="modal-content">
-                <button class="modal-close" onclick="closeModal()">✕</button>
-                <h2 class="modal-title">Synopsis</h2>
-                <div class="modal-text" id="full-description"></div>
-            </div>
-        </div>
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon" />
+    <title>WaifuBoard</title>
 
-        <a href="/anime" class="back-btn">
-            <svg
-                width="20"
-                height="20"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2.5"
-                viewBox="0 0 24 24"
-            >
-                <path d="M15 19l-7-7 7-7" />
-            </svg>
-            Back to Home
-        </a>
+    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
+    <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
+    <script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
 
-        <div class="hero-wrapper">
-            <div class="video-background">
-                <div id="player"></div>
-            </div>
-            <div class="hero-overlay"></div>
-        </div>
+    <link rel="stylesheet" href="/views/css/globals.css" />
+    <link rel="stylesheet" href="/views/css/components/anilist-modal.css" />
+    <link rel="stylesheet" href="/views/css/anime/anime.css" />
+    <link rel="stylesheet" href="/views/css/anime/player.css" />
+</head>
+<body>
+<a href="/anime" class="back-btn">
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/>
+    </svg>
+    Back
+</a>
 
-        <div class="content-container">
-            <aside class="sidebar">
-                <div class="poster-card">
-                    <img id="poster" src="" alt="" />
-                </div>
+<div class="modal-overlay" id="desc-modal">
+    <div class="modal-content">
+        <button class="modal-close" onclick="closeDescriptionModal()">✕</button>
+        <h2 class="modal-title">Synopsis</h2>
+        <div class="modal-text" id="full-description"></div>
+    </div>
+</div>
 
-                <div class="info-grid">
-                    <div class="info-item">
-                        <h4>Format</h4>
-                        <span id="format">--</span>
-                    </div>
-                    <div class="info-item">
-                        <h4>Episodes</h4>
-                        <span id="episodes">--</span>
-                    </div>
-                    <div class="info-item">
-                        <h4>Status</h4>
-                        <span id="status">--</span>
-                    </div>
-                    <div class="info-item">
-                        <h4>Season</h4>
-                        <span id="season">--</span>
-                    </div>
-                    <div class="info-item">
-                        <h4>Studio</h4>
-                        <span id="studio">--</span>
+<div class="top-media-wrapper" id="top-media-wrapper">
+
+    <div class="hero-wrapper" id="hero-wrapper">
+        <div class="video-background"><div id="trailer-player"></div></div>
+        <div class="hero-overlay"></div>
+    </div>
+
+    <div class="player-wrapper" id="player-wrapper" style="display: none;">
+        <div class="player-container">
+            <button id="prev-ep-btn" class="side-nav-btn left" title="Previous Episode">
+                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
+            </button>
+
+            <button id="next-ep-btn" class="side-nav-btn right" title="Next Episode">
+                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
+            </button>
+
+            <div class="player-header">
+                <div class="header-left">
+                    <button class="btn-icon-glass" id="close-player-btn" title="Close Player">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/></svg>
+                    </button>
+                    <div class="episode-info">
+                        <span class="ep-label">Watching</span>
+                        <span id="player-episode-title" class="ep-title">Episode 1</span>
                     </div>
                 </div>
 
-                <div class="info-grid">
-                    <div class="info-item">
-                        <h4>Main Characters</h4>
-                        <div class="character-list" id="char-list"></div>
-                    </div>
-                </div>
-            </aside>
-
-            <main class="main-content">
-                <div class="anime-header">
-                    <h1 class="anime-title" id="title">Loading...</h1>
-
-                    <div class="meta-row">
-                        <div
-                            class="pill extension-pill"
-                            id="extension-pill"
-                            style="display: none; background: #8b5cf6"
-                        ></div>
-                        <div class="pill" id="local-pill" style="display: none; background: #8b5cf6;"></div>
-                        <div class="pill score" id="score">--% Score</div>
-                        <div class="pill" id="year">----</div>
-                        <div class="pill" id="genres">Action</div>
-                    </div>
-
-                    <div class="action-row">
-                        <button class="btn-watch" id="watch-btn">
-                            <svg
-                                width="24"
-                                height="24"
-                                fill="currentColor"
-                                viewBox="0 0 24 24"
-                            >
-                                <path d="M8 5v14l11-7z" />
-                            </svg>
-                            Start Watching
-                        </button>
-                        <button
-                            class="btn-secondary"
-                            id="add-to-list-btn"
-                            onclick="openAddToListModal()"
-                        >
-                            + Add to List
-                        </button>
-                    </div>
-                </div>
-
-                <div class="description-box">
-                    <div id="description-preview"></div>
-                    <button
-                        id="read-more-btn"
-                        class="read-more-btn"
-                        style="display: none"
-                        onclick="openModal()"
-                    >
-                        Read More
-                        <svg
-                            width="16"
-                            height="16"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-width="2"
-                            viewBox="0 0 24 24"
-                        >
-                            <path d="M19 9l-7 7-7-7" />
+                <div class="header-right">
+                    <button class="btn-icon-glass" id="download-btn" title="Download Episode" style="display: none;">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                            <polyline points="7 10 12 15 17 10"></polyline>
+                            <line x1="12" y1="15" x2="12" y2="3"></line>
                         </svg>
                     </button>
-                </div>
-
-                <div class="episodes-section">
-                    <div class="episodes-header-row">
-                        <div
-                            class="section-title"
-                            style="margin: 0; border: none; padding: 0"
-                        >
-                            <h2
-                                style="
-                                    font-size: 1.8rem;
-                                    border-left: 4px solid #8b5cf6;
-                                    padding-left: 1rem;
-                                "
-                            >
-                                Episodes
-                            </h2>
+                    <div class="settings-group">
+                        <div class="sd-toggle" id="sd-toggle" data-state="sub">
+                            <div class="sd-bg"></div>
+                            <div class="sd-option active" id="opt-sub">Sub</div>
+                            <div class="sd-option" id="opt-dub">Dub</div>
                         </div>
-                        <div class="episode-search-wrapper">
-                            <input
-                                type="number"
-                                id="ep-search"
-                                class="episode-search-input"
-                                placeholder="Jump to Ep #"
-                                min="1"
-                            />
-                        </div>
-                    </div>
 
-                    <div class="episodes-grid" id="episodes-grid"></div>
-
-                    <div class="pagination-controls" id="pagination-controls">
-                        <button
-                            class="page-btn"
-                            id="prev-page"
-                            onclick="changePage(-1)"
-                        >
-                            Previous
-                        </button>
-                        <span class="page-info" id="page-info"
-                            >Page 1 of 1</span
-                        >
-                        <button
-                            class="page-btn"
-                            id="next-page"
-                            onclick="changePage(1)"
-                        >
-                            Next
-                        </button>
+                        <select id="server-select" class="glass-select" style="display:none;"></select>
+                        <select id="extension-select" class="glass-select"></select>
                     </div>
                 </div>
-            </main>
+            </div>
+
+            <div class="video-frame">
+                <video id="player" controls crossorigin playsinline></video>
+                <div id="player-loading" class="player-loading-overlay">
+                    <div class="spinner"></div>
+                    <p id="player-loading-text">Loading Stream...</p>
+                </div>
+            </div>
         </div>
+    </div>
+    <div class="modal-overlay" id="download-modal">
+        <div class="modal-content download-settings-content">
+            <button class="modal-close" id="close-download-modal">✕</button>
+            <h2 class="modal-title">Download Settings</h2>
 
-        <div id="updateToast" class="hidden">
-            <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
-            <a
-                id="downloadButton"
-                href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
-                target="_blank"
-            >
-                Click To Download
-            </a>
+            <div class="download-sections-wrapper">
+                <div id="dl-quality-section" class="dl-section" style="display:none;">
+                    <h3>Video Quality</h3>
+                    <div class="dl-list" id="dl-quality-list"></div>
+                </div>
+
+                <div id="dl-audio-section" class="dl-section" style="display:none;">
+                    <h3>Audio Tracks</h3>
+                    <div class="dl-list" id="dl-audio-list"></div>
+                </div>
+
+                <div id="dl-subs-section" class="dl-section">
+                    <h3>Subtitles</h3>
+                    <div class="dl-list" id="dl-subs-list"></div>
+                </div>
+            </div>
+
+            <div class="dl-actions">
+                <button class="btn-cancel" id="cancel-dl-btn">Cancel</button>
+                <button class="btn-confirm" id="confirm-dl-btn">Start Download</button>
+            </div>
         </div>
+    </div>
+</div>
 
-        <script src="/src/scripts/updateNotifier.js"></script>
-        <script src="/src/scripts/auth-guard.js"></script>
+<div class="content-container" id="main-content">
+    <div class="anime-header">
+        <h1 class="anime-title" id="title">Loading...</h1>
+        <div class="hero-meta-info">
+            <span id="local-pill" class="pill-local" style="display:none;">Local</span>
+            <span id="extension-pill" class="pill-local" style="background:#8b5cf6; display:none;">Ext</span>
+            <span id="score">--% Score</span> • <span id="year">----</span> • <span id="format">--</span> • <span id="episodes">-- Ep</span>
+        </div>
+        <div class="hero-description-mini" id="description-preview"></div>
+        <div class="hero-tags" id="genres"></div>
 
-        <script src="/src/scripts/utils/auth-utils.js"></script>
-        <script src="/src/scripts/utils/notification-utils.js"></script>
-        <script src="/src/scripts/utils/url-utils.js"></script>
-        <script src="/src/scripts/utils/pagination-manager.js"></script>
-        <script src="/src/scripts/utils/media-metadata-utils.js"></script>
-        <script src="/src/scripts/utils/youtube-player-utils.js"></script>
-        <script src="/src/scripts/utils/list-modal-manager.js"></script>
-        <script src="/src/scripts/anime/anime.js"></script>
-    </body>
+        <div class="action-row">
+            <button class="btn-watch" id="watch-btn">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="black"><path d="M8 5v14l11-7z"/></svg>
+                Start Watching
+            </button>
+            <button class="btn-add-list" id="add-to-list-btn">+ Add to List</button>
+        </div>
+    </div>
+
+    <div class="main-layout">
+        <aside class="poster-section">
+            <div class="poster-card"><img id="poster" src="" alt="Poster"></div>
+            <div class="metadata-sidebar">
+                <div class="meta-item-side"><span>Status</span><p id="status">--</p></div>
+                <div class="meta-item-side"><span>Season</span><p id="season">--</p></div>
+                <div class="meta-item-side"><span>Studio</span><p id="studio">--</p></div>
+            </div>
+        </aside>
+
+        <div class="content-column">
+
+            <section class="episodes-section">
+                <div class="episodes-header-row">
+                    <h2>Episodes</h2>
+                    <input type="number" id="ep-search" class="episode-search-input" placeholder="Jump to...">
+                </div>
+                <div id="episodes-grid" class="episodes-grid"></div>
+
+                <div class="pagination-controls" id="pagination-controls">
+                    <button class="page-btn" id="prev-page">Previous</button>
+                    <span class="page-info" id="page-info">Page 1 of 1</span>
+                    <button class="page-btn" id="next-page">Next</button>
+                </div>
+            </section>
+
+            <div id="relations-section" style="display:none; margin-top: 3rem;">
+                <h3 class="subsection-title">Relations</h3>
+                <div class="relations-horizontal" id="relations-grid"></div>
+            </div>
+
+        </div>
+    </div>
+
+    <section class="content-section">
+        <h2 class="subsection-title">Characters</h2>
+        <div class="characters-grid" id="char-list"></div>
+        <button id="show-more-chars" class="btn-show-more" style="display: none;">Show Full Cast</button>
+    </section>
+
+    <section class="content-section">
+        <h2 class="subsection-title">Recommended</h2>
+        <div class="carousel-wrapper">
+            <button class="scroll-btn left" onclick="scrollRecommendations(-1)">‹</button>
+            <div class="carousel" id="recommendations-grid"></div>
+            <button class="scroll-btn right" onclick="scrollRecommendations(1)">›</button>
+        </div>
+    </section>
+</div>
+
+<script src="/src/scripts/utils/auth-utils.js"></script>
+<script src="/src/scripts/utils/url-utils.js"></script>
+<script src="/src/scripts/utils/pagination-manager.js"></script>
+<script src="/src/scripts/utils/media-metadata-utils.js"></script>
+<script src="/src/scripts/utils/youtube-player-utils.js"></script>
+<script src="/src/scripts/utils/list-modal-manager.js"></script>
+
+<script src="/src/scripts/anime/player.js"></script>
+<script src="/src/scripts/anime/entry.js"></script>
+
+</body>
 </html>

docker/views/anime/animes.html

@@ -9,10 +9,10 @@
     <link rel="stylesheet" href="/views/css/components/hero.css">
     <link rel="stylesheet" href="/views/css/components/anilist-modal.css">
     <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
-    <link rel="stylesheet" href="/views/css/components/local-library.css">
     <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
 </head>
 <body>
+
 <div class="hero-wrapper">
     <div class="hero-background">
         <img id="hero-bg-media" alt="">
@@ -103,45 +103,6 @@
     </section>
 </main>
 
-<!-- Local Library Mode Content -->
-<main id="local-content" class="hidden">
-    <section class="section">
-        <div class="section-header">
-            <div class="section-title">Local Anime Library</div>
-            <button class="btn-secondary" onclick="scanLocalLibrary()">
-                <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                    <path d="M21 12a9 9 0 1 1-9-9"/>
-                    <path d="M21 3v6h-6"/>
-                </svg>
-                <span id="scan-text">Scan Library</span>
-            </button>
-        </div>
-        <div class="local-filters">
-            <div class="filter-group">
-                <button class="filter-btn active" data-filter="all">All</button>
-                <button class="filter-btn" data-filter="watching">Watching</button>
-                <button class="filter-btn" data-filter="completed">Completed</button>
-                <button class="filter-btn" data-filter="unwatched">Unwatched</button>
-                <button class="filter-btn" data-filter="unlinked">Unlinked</button>
-            </div>
-
-            <div class="filter-group">
-                <button class="filter-btn" data-sort="az">A–Z</button>
-                <button class="filter-btn" data-sort="recent">Recent</button>
-            </div>
-        </div>
-        <div class="local-library-grid" id="local-entries-grid">
-            <div class="skeleton-card"></div>
-            <div class="skeleton-card"></div>
-            <div class="skeleton-card"></div>
-            <div class="skeleton-card"></div>
-            <div class="skeleton-card"></div>
-            <div class="skeleton-card"></div>
-            <div class="skeleton-card"></div>
-            <div class="skeleton-card"></div>
-        </div>
-    </section>
-</main>
 
 <div id="updateToast" class="hidden">
     <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
@@ -156,7 +117,6 @@
 <script src="/src/scripts/utils/continue-watching-manager.js"></script>
 <script src="/src/scripts/utils/youtube-player-utils.js"></script>
 <script src="/src/scripts/anime/animes.js"></script>
-<script src="/src/scripts/local-library.js"></script>
 <script src="/src/scripts/updateNotifier.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
 <script src="/src/scripts/settings.js"></script>

docker/views/anime/watch.html

@@ -1,184 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>WaifuBoard Watch</title>
-    <link rel="stylesheet" href="/views/css/globals.css">
-    <link rel="stylesheet" href="/views/css/anime/watch.css">
-    <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
-    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
-    <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
-    <script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
-    <link rel="icon" href="/public/assets/waifuboards.ico">
-</head>
-<body>
-
-<header class="top-bar">
-    <a href="#" id="back-link" class="back-btn">
-        <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
-            <path d="M15 19l-7-7 7-7"/>
-        </svg>
-        <span>Back to Series</span>
-    </a>
-</header>
-
-<div class="ui-scale-wrapper">
-    <main class="watch-container">
-
-        <section class="anime-details">
-            <div class="details-container">
-                <div class="details-cover">
-                    <img id="detail-cover-image" src="" alt="Anime Cover" class="cover-image">
-                </div>
-                <div class="details-content">
-                    <h1 id="anime-title-details">Loading...</h1>
-                    <div class="details-meta">
-                        <span id="detail-format" class="meta-badge">--</span>
-                        <span id="detail-season" class="meta-badge">--</span>
-                        <span id="detail-score" class="meta-badge meta-score">--</span>
-                    </div>
-                    <br>
-                    <p id="detail-description" class="details-description">Loading description...</p>
-                </div>
-            </div>
-        </section>
-
-        <section class="player-section">
-
-            <div class="player-toolbar">
-                <div class="control-group">
-                    <div class="sd-toggle" id="sd-toggle" data-state="sub" onclick="toggleAudioMode()">
-                        <div class="sd-bg"></div>
-                        <div class="sd-option active" id="opt-sub">Sub</div>
-                        <div class="sd-option" id="opt-dub">Dub</div>
-                    </div>
-                </div>
-                <div class="control-group">
-                    <select id="server-select" class="source-select" onchange="loadStream()" style="display:none;">
-                        <option value="">Server...</option>
-                    </select>
-                    <select id="extension-select" class="source-select" onchange="onExtensionChange()">
-                        <option value="" disabled selected>Source...</option>
-                    </select>
-                </div>
-            </div>
-
-            <div class="video-container">
-                <video id="player" controls crossorigin playsinline></video>
-                <div id="loading-overlay" class="loading-overlay">
-                    <div class="spinner"></div>
-                    <p id="loading-text">Select a source...</p>
-                </div>
-            </div>
-
-            <div class="episode-controls">
-                <div class="episode-info">
-                    <h1 id="anime-title-details2">Loading...</h1>
-                    <p id="episode-label">Episode --</p>
-                </div>
-                <div class="navigation-buttons">
-                    <button class="nav-btn prev-btn" id="prev-btn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"/></svg><span>Previous</span></button>
-                    <button class="nav-btn next-btn" id="next-btn"><span>Next</span><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 5l7 7-7 7"/></svg></button>
-                </div>
-            </div>
-
-            <div class="episode-carousel-compact">
-                <div class="carousel-header">
-                    <h2>Episodes</h2>
-                    <div class="carousel-nav">
-                        <button class="carousel-arrow-mini" id="ep-prev-mini"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M15 18l-6-6 6-6"/></svg></button>
-                        <button class="carousel-arrow-mini" id="ep-next-mini"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M9 6l6 6-6 6"/></svg></button>
-                    </div>
-                </div>
-                <div id="episode-carousel" class="episode-carousel-compact-list">
-                </div>
-            </div>
-        </section>
-    </main>
-</div>
-
-<script src="../../src/scripts/anime/player.js"></script>
-
-<script>
-    document.addEventListener('DOMContentLoaded', () => {
-        const carousel = document.getElementById('episode-carousel');
-        if (!carousel) return;
-
-        const prevBtn = document.getElementById('ep-prev-mini');
-        const nextBtn = document.getElementById('ep-next-mini');
-
-        const scrollAmount = 150;
-
-        prevBtn?.addEventListener('click', () => {
-            carousel.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
-        });
-
-        nextBtn?.addEventListener('click', () => {
-            carousel.scrollBy({ left: scrollAmount, behavior: 'smooth' });
-        });
-
-        const updateArrows = () => {
-            if (!prevBtn || !nextBtn) return;
-
-            prevBtn.style.opacity = carousel.scrollLeft <= 10 ? '0.3' : '1';
-            prevBtn.style.pointerEvents = carousel.scrollLeft <= 10 ? 'none' : 'auto';
-
-            const atEnd = carousel.scrollLeft + carousel.clientWidth >= carousel.scrollWidth - 10;
-            nextBtn.style.opacity = atEnd ? '0.3' : '1';
-            nextBtn.style.pointerEvents = atEnd ? 'none' : 'auto';
-        };
-
-        carousel.addEventListener('scroll', updateArrows);
-        window.addEventListener('resize', updateArrows);
-
-        const observer = new MutationObserver((mutations, obs) => {
-            updateArrows();
-            obs.disconnect();
-
-        });
-        observer.observe(carousel, { childList: true });
-
-    });
-
-    document.addEventListener('DOMContentLoaded', () => {
-        const expandBtn = document.getElementById('expand-characters-btn');
-        const characterList = document.getElementById('characters-list');
-        const btnText = expandBtn?.querySelector('span');
-
-        if (!expandBtn || !characterList) return;
-
-        expandBtn.addEventListener('click', () => {
-            const isExpanded = expandBtn.getAttribute('data-expanded') === 'true';
-
-            if (isExpanded) {
-
-                characterList.classList.remove('expanded');
-                expandBtn.setAttribute('data-expanded', 'false');
-                if (btnText) btnText.innerText = 'Show All';
-            } else {
-
-                characterList.classList.add('expanded');
-                expandBtn.setAttribute('data-expanded', 'true');
-                if (btnText) btnText.innerText = 'Show Less';
-            }
-        });
-    });
-</script>
-
-<div id="updateToast" class="hidden">
-    <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
-
-    <a
-            id="downloadButton"
-            href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
-            target="_blank"
-    >
-        Click To Download
-    </a>
-</div>
-
-<script src="/src/scripts/updateNotifier.js"></script>
-<script src="/src/scripts/auth-guard.js"></script>
-</body>
-</html>

docker/views/books/book.html

@@ -14,11 +14,12 @@
 <body>
 
 <a href="/books" class="back-btn">
-    <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
-    Back to Books
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/>
+    </svg>
+    Back
 </a>
 
-
 <div class="hero-wrapper">
     <div class="hero-background">
         <img id="hero-bg" src="" alt="">
@@ -28,106 +29,110 @@
 
 <div class="content-container">
 
+    <div class="book-header-section">
+        <h1 class="book-title" id="title">Loading...</h1>
 
-    <aside class="sidebar">
-        <div class="poster-card">
-            <img id="poster" src="" alt="">
+        <div class="hero-meta-info">
+            <span id="local-pill" class="pill-local" style="display:none;">Local</span>
+            <span id="extension-pill" class="pill-local" style="background:#8b5cf6; display:none;">Ext</span>
+
+            <span id="score">--% Score</span>
+            <span class="meta-separator">•</span>
+            <span id="published-date">----</span>
+            <span class="meta-separator">•</span>
+            <span id="status">--</span>
+            <span class="meta-separator">•</span>
+            <span id="format">--</span>
+            <span class="meta-separator">•</span>
+            <span id="chapters-count">-- Ch</span>
         </div>
 
-        <div class="info-grid">
-            <div class="info-item">
-                <h4>Format</h4>
-                <span id="format">--</span>
-            </div>
-            <div class="info-item">
-                <h4>Chapters</h4>
-                <span id="chapters">--</span>
-            </div>
-            <div class="info-item">
-                <h4>Status</h4>
-                <span id="status">--</span>
-            </div>
-            <div class="info-item">
-                <h4>Published</h4>
+        <div class="hero-description-mini" id="description"></div>
+        <div class="hero-tags" id="genres"></div>
 
-                <span id="published-date">--</span>
-            </div>
+        <div class="action-row">
+            <button class="btn-read" id="read-start-btn">
+                <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M2 9v12h5v-9h8v9h5v-12h2l-10 -9 -10 9z" transform="scale(0.8) translate(3,3)"/></svg>
+                Start Reading
+            </button>
+            <button class="btn-add-list" id="add-to-list-btn">+ Add to Library</button>
         </div>
-    </aside>
+    </div>
 
+    <div class="main-layout">
 
-    <main class="main-content">
-        <div class="book-header">
-            <h1 class="book-title" id="title">Loading...</h1>
-
-            <div class="meta-row">
-                <div class="pill extension-pill" id="extension-pill" style="display: none; background: #8b5cf6;"></div>
-                <div class="pill" id="local-pill" style="display: none; background: #8b5cf6;"></div>
-                <div class="pill score" id="score">--% Score</div>
-                <div class="pill" id="genres">Action</div>
+        <aside class="poster-section">
+            <div class="poster-card">
+                <img id="poster" src="" alt="">
             </div>
 
-            <div class="action-row">
-                <button class="btn-primary" id="read-start-btn">
-                    Start Reading
-                </button>
-                <button class="btn-secondary" id="add-to-list-btn" onclick="openAddToListModal()">+ Add to Library</button>
+            <div class="sidebar-extra-info" id="sidebar-info" style="display: none;">
+                <h4 class="sidebar-label">Alternative Titles</h4>
+                <ul class="synonyms-list" id="synonyms-list">
+                </ul>
             </div>
-        </div>
+        </aside>
 
-        <div class="chapters-section">
-            <div class="section-title">
-                <h2>Chapters</h2>
-                <div class="chapter-controls">
+        <div class="content-column">
 
-                    <select id="provider-filter" class="filter-select" style="display: none; margin-left: 15px;">
-                        <option value="all">All Providers</option>
-                    </select>
+            <div class="chapters-section">
+                <div class="chapters-header">
+                    <h2>Chapters</h2>
+
+                    <div class="chapter-controls">
+                        <select id="provider-filter" class="glass-select" style="display: none;">
+                            <option value="all">All Providers</option>
+                        </select>
+
+                        <div id="language-selector-container" class="control-group hidden">
+                            <select id="language-select" class="glass-select"></select>
+                        </div>
+
+                        <div class="search-box">
+                            <input type="text" id="chapter-search" placeholder="Search..." class="glass-input">
+                        </div>
+
+                        <button id="sort-btn" class="glass-btn-icon" title="Sort">
+                            <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12" />
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+
+                <div id="chapters-list" class="chapters-grid"></div>
+                <div id="loading-msg" style="text-align: center; padding: 2rem; display: none; color: #888;">Loading...</div>
+
+                <div class="pagination-controls" id="pagination" style="display:none;">
+                    <button class="page-btn" id="prev-page">Previous</button>
+                    <span class="page-info" id="page-info">Page 1</span>
+                    <button class="page-btn" id="next-page">Next</button>
                 </div>
             </div>
 
-            <div class="chapters-table-wrapper">
-                <table class="chapters-table">
-                    <thead>
-                    <tr>
-                        <th>#</th>
-                        <th>Title</th>
-
-                        <th>Provider</th>
-                        <th>Action</th>
-                    </tr>
-                    </thead>
-                    <tbody id="chapters-body">
-
-                    </tbody>
-                </table>
-            </div>
 
 
-            <div class="pagination-controls" id="pagination" style="display:none;">
-                <button class="page-btn" id="prev-page">Previous</button>
-                <span class="page-info" id="page-info">Page 1</span>
-                <button class="page-btn" id="next-page">Next</button>
-            </div>
         </div>
-    </main>
+    </div>
+
+    <div id="relations-section" style="display:none; margin-top: 3rem;">
+        <h3 class="subsection-title">Relations</h3>
+        <div class="relations-horizontal" id="relations-list"></div>
+    </div>
+
+    <section class="content-section">
+        <h2 class="subsection-title">Characters</h2>
+        <div class="characters-grid" id="characters-list"></div>
+    </section>
 
 </div>
 
 <div id="updateToast" class="hidden">
     <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
-
-    <a
-            id="downloadButton"
-            href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
-            target="_blank"
-    >
-        Click To Download
-    </a>
+    <a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">Click To Download</a>
 </div>
 
 <script src="/src/scripts/updateNotifier.js"></script>
-
 <script src="/src/scripts/utils/auth-utils.js"></script>
 <script src="/src/scripts/utils/notification-utils.js"></script>
 <script src="/src/scripts/utils/url-utils.js"></script>

docker/views/books/books.html

@@ -37,39 +37,7 @@
             </div>
         </div>
     </div>
-    <button class="library-mode-btn icon-only" id="library-mode-btn" onclick="toggleLibraryMode()" title="Switch library mode">
-        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
-            <polyline points="9 22 9 12 15 12 15 22"/>
-        </svg>
-    </button>
 </div>
-<main id="local-content" class="hidden">
-    <section class="section">
-        <div class="section-header">
-            <div class="section-title">Local Books Library</div>
-            <button class="btn-secondary" onclick="scanLocalLibrary()">
-                <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                    <path d="M21 12a9 9 0 1 1-9-9"/><path d="M21 3v6h-6"/>
-                </svg>
-                <span id="scan-text">Scan Library</span>
-            </button>
-        </div>
-        <div class="local-filters">
-            <div class="filter-group">
-                <button class="filter-btn active" data-filter="all">All</button>
-                <button class="filter-btn" data-filter="unlinked">Unlinked</button>
-            </div>
-            <div class="filter-group">
-                <button class="filter-btn" data-sort="az">A–Z</button>
-            </div>
-        </div>
-        <div class="local-library-grid" id="local-entries-grid">
-            <div class="skeleton-card"></div>
-            <div class="skeleton-card"></div>
-        </div>
-    </section>
-</main>
 <main id="online-content">
     <section class="section">
         <div class="section-header">
@@ -119,8 +87,8 @@
 <script src="/src/scripts/utils/list-modal-manager.js"></script>
 <script src="/src/scripts/utils/continue-watching-manager.js"></script>
 <script src="/src/scripts/books/books.js"></script>
-<script src="/src/scripts/local-library-books.js"></script>
 <script src="/src/scripts/updateNotifier.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
+<script src="/src/scripts/settings.js"></script>
 </body>
 </html>

docker/views/components/navbar.html

@@ -11,7 +11,6 @@
     <button class="nav-button" data-page="books" onclick="window.location.href='/books'">Books</button>
     <button class="nav-button" data-page="gallery" onclick="window.location.href='/gallery'">Gallery</button>
     <button class="nav-button" data-page="schedule" onclick="window.location.href='/schedule'">Schedule</button>
-    <button class="nav-button" data-page="my-list" onclick="window.location.href='/my-list'">My List</button>
     <button class="nav-button" data-page="marketplace" onclick="window.location.href='/marketplace'">Marketplace</button>
   </div>
 
@@ -39,6 +38,21 @@
           </div>
         </div>
 
+        <a href="/profile" class="dropdown-item">
+          <svg xmlns="http://www.w3.org/2000/svg"
+               width="18" height="18"
+               viewBox="0 0 24 24"
+               fill="none"
+               stroke="currentColor"
+               stroke-width="2"
+               stroke-linecap="round"
+               stroke-linejoin="round">
+            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
+            <circle cx="12" cy="7" r="4"/>
+          </svg>
+          <span>Profile</span>
+        </a>
+
         <button class="dropdown-item" id="nav-settings">
           <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
             <circle cx="12" cy="12" r="3"/>
@@ -47,14 +61,6 @@
           <span>Settings</span>
         </button>
 
-        <a href="/my-list" class="dropdown-item">
-          <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-            <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
-            <polyline points="17 21 17 13 7 13 7 21"/>
-            <polyline points="7 3 7 8 15 8"/>
-          </svg>
-          <span>My List</span>
-        </a>
         <button class="dropdown-item logout-item" id="nav-logout">
           <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
             <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>

docker/views/components/settings-modal.html

@@ -42,16 +42,15 @@
 </div>
 
 <style>
-  /* --- AMOLED THEME VARIABLES --- */
+  /* --- THEME VARIABLES (Heredadas y adaptadas de anime.css) --- */
   :root {
-    --amoled-black: #000000;
-    --amoled-surface: #080808;
-    --amoled-field: #0e0e0e;
-    --amoled-border: rgba(255, 255, 255, 0.08);
-    --accent-purple: #8b5cf6;
-    --accent-glow: rgba(139, 92, 246, 0.15);
-    --text-main: #ffffff;
-    --text-dim: #a1a1aa;
+    --modal-bg: #0b0b0b;
+    --modal-sidebar: rgba(255, 255, 255, 0.02);
+    --modal-border: rgba(255, 255, 255, 0.08);
+    --input-bg: rgba(255, 255, 255, 0.04);
+    --accent: #8b5cf6; /* Tu morado principal */
+    --text-primary: #ffffff;
+    --text-secondary: #a1a1aa;
   }
 
   /* --- MODAL BASE --- */
@@ -63,6 +62,7 @@
     align-items: center;
     justify-content: center;
     padding: 20px;
+    font-family: system-ui, -apple-system, sans-serif; /* Coherencia con anime.css */
   }
 
   .modal.hidden { display: none !important; }
@@ -70,55 +70,58 @@
   .modal-overlay {
     position: absolute;
     inset: 0;
-    background: rgba(0, 0, 0, 0.9);
-    backdrop-filter: blur(12px);
+    background: rgba(0, 0, 0, 0.85); /* Un poco menos opaco para profundidad */
+    backdrop-filter: blur(8px);
     z-index: -1;
+    animation: fadeIn 0.3s ease;
   }
 
   .modal-content {
     position: relative;
     display: flex;
-    flex-direction: row; /* Horizontal layout */
-    width: 95%;
-    max-width: 1200px; /* Increased size */
-    height: 85vh;
-    background: var(--amoled-black);
-    border: var(--amoled-border);
-    border-radius: 28px;
+    flex-direction: row;
+    width: 100%;
+    max-width: 1100px;
+    height: 80vh;
+    background: var(--modal-bg);
+    border: 1px solid var(--modal-border);
+    border-radius: 16px; /* Bordes menos exagerados, más elegantes */
     overflow: hidden;
-    box-shadow: 0 0 0 1px var(--amoled-border), 0 24px 60px rgba(0,0,0,0.8);
-    animation: modalScaleUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+    box-shadow: 0 40px 80px rgba(0,0,0,0.6);
+    animation: modalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
   }
 
   /* --- SIDEBAR --- */
   .modal-sidebar {
-    width: 280px;
-    background: var(--amoled-surface);
-    border-right: var(--amoled-border);
+    width: 260px;
+    background: var(--modal-sidebar);
+    border-right: 1px solid var(--modal-border);
     display: flex;
     flex-direction: column;
-    padding: 2rem;
+    padding: 2rem 1.5rem;
     flex-shrink: 0;
   }
 
+  .sidebar-header { margin-bottom: 2rem; }
+
   .sidebar-title {
-    font-size: 1.4rem;
+    font-size: 1.5rem;
     font-weight: 800;
-    margin-bottom: 2.5rem;
-    color: var(--text-main);
-    letter-spacing: -0.02em;
+    color: var(--text-primary);
+    margin: 0;
+    letter-spacing: -0.03em;
   }
 
-  .nav-list { flex: 1; }
+  .nav-list { flex: 1; display: flex; flex-direction: column; gap: 4px; }
 
   .nav-item {
-    padding: 12px 16px;
-    border-radius: 14px;
+    padding: 10px 14px;
+    border-radius: 8px;
     cursor: pointer;
-    color: var(--text-dim);
+    color: var(--text-secondary);
     transition: all 0.2s ease;
-    margin-bottom: 6px;
-    font-weight: 500;
+    font-weight: 600;
+    font-size: 0.95rem;
     display: flex;
     align-items: center;
     gap: 12px;
@@ -127,22 +130,23 @@
 
   .nav-item:hover {
     background: rgba(255, 255, 255, 0.05);
-    color: var(--text-main);
+    color: var(--text-primary);
   }
 
   .nav-item.active {
-    background: var(--accent-glow);
-    color: var(--accent-purple);
-    box-shadow: inset 3px 0 0 var(--accent-purple);
+    background: var(--accent);
+    color: white;
+    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25); /* Glow sutil */
   }
 
-  /* --- MAIN CONTENT & DYNAMIC INPUTS --- */
+  /* --- MAIN CONTENT area --- */
   .modal-main {
     flex: 1;
     display: flex;
     flex-direction: column;
-    background: var(--amoled-black);
+    background: transparent;
     min-width: 0;
+    position: relative;
   }
 
   .config-wrapper {
@@ -153,52 +157,54 @@
 
   .section-container {
     flex: 1;
-    padding: 3.5rem;
+    padding: 3rem;
     overflow-y: auto;
+    /* Custom Scrollbar sutil */
     scrollbar-width: thin;
-    scrollbar-color: #222 transparent;
+    scrollbar-color: #333 transparent;
   }
 
-  /* Styles for the injected section content */
+  /* --- INPUTS & FORMS (Estilo WaifuBoards/Anime) --- */
   .config-group {
-    margin-bottom: 2.5rem;
-    animation: fadeInSection 0.4s ease-out;
+    margin-bottom: 2rem;
+    animation: fadeInSection 0.3s ease-out;
   }
 
   .config-group label {
     display: block;
-    font-size: 0.75rem;
-    color: var(--accent-purple);
-    margin-bottom: 0.8rem;
-    letter-spacing: 0.05em;
-    font-weight: 800;
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+    margin-bottom: 0.6rem;
+    font-weight: 600;
     text-transform: uppercase;
+    letter-spacing: 0.05em;
   }
 
   .config-input {
     width: 100%;
-    padding: 1rem 1.2rem;
-    background: var(--amoled-field);
-    border: 1px solid #1a1a1a;
-    border-radius: 14px;
-    color: #fff;
+    padding: 0.9rem 1rem;
+    background: var(--input-bg);
+    border: 1px solid var(--modal-border);
+    border-radius: 8px;
+    color: var(--text-primary);
     font-size: 1rem;
-    transition: all 0.25s ease;
+    font-family: inherit;
+    transition: all 0.2s ease;
   }
 
   .config-input:focus {
     outline: none;
-    border-color: var(--accent-purple);
-    background: #121212;
-    box-shadow: 0 0 0 4px var(--accent-glow);
+    border-color: var(--accent);
+    background: rgba(255, 255, 255, 0.08);
+    box-shadow: 0 0 0 1px var(--accent);
   }
 
-  /* --- FOOTER --- */
+  /* --- FOOTER ACTION BAR --- */
   .modal-footer-sticky {
-    padding: 1.5rem 3.5rem;
-    background: rgba(0, 0, 0, 0.8);
+    padding: 1.2rem 3rem;
+    background: rgba(11, 11, 11, 0.8); /* Glass effect */
     backdrop-filter: blur(10px);
-    border-top: var(--amoled-border);
+    border-top: 1px solid var(--modal-border);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -206,32 +212,34 @@
 
   .footer-hint {
     font-size: 0.85rem;
-    color: var(--text-dim);
+    color: var(--text-secondary);
+    font-weight: 500;
   }
 
   /* --- BUTTONS --- */
   .btn-primary {
-    padding: 0.8rem 2.2rem;
-    background: #ffffff;
-    color: #000000;
+    padding: 0.7rem 2rem;
+    background: white; /* Estilo 'btn-watch' de anime.css */
+    color: black;
     border: none;
-    border-radius: 100px;
-    font-weight: 700;
+    border-radius: 6px;
+    font-weight: 800;
+    font-size: 0.95rem;
     cursor: pointer;
-    transition: transform 0.2s ease;
+    transition: transform 0.2s ease, filter 0.2s;
   }
 
   .btn-primary:hover {
-    transform: translateY(-2px);
-    background: #f0f0f0;
+    transform: scale(1.02);
+    filter: brightness(0.9);
   }
 
   .btn-exit {
-    background: #111;
-    border: 1px solid #222;
-    color: #ef4444;
+    background: transparent;
+    border: 1px solid var(--modal-border);
+    color: #ef4444; /* Rojo error sutil */
     padding: 10px;
-    border-radius: 12px;
+    border-radius: 8px;
     width: 100%;
     cursor: pointer;
     display: flex;
@@ -240,39 +248,63 @@
     gap: 8px;
     font-weight: 600;
     margin-top: auto;
+    transition: background 0.2s;
   }
 
-  /* --- ANIMATIONS & SKELETON --- */
-  @keyframes modalScaleUp {
-    from { opacity: 0; transform: scale(0.97) translateY(10px); }
+  .btn-exit:hover {
+    background: rgba(239, 68, 68, 0.1);
+    border-color: #ef4444;
+  }
+
+  /* --- SKELETON & ANIMATIONS --- */
+  @keyframes modalSlideUp {
+    from { opacity: 0; transform: scale(0.98) translateY(15px); }
     to { opacity: 1; transform: scale(1) translateY(0); }
   }
 
-  @keyframes fadeInSection {
-    from { opacity: 0; transform: translateY(8px); }
-    to { opacity: 1; transform: translateY(0); }
-  }
+  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+  @keyframes fadeInSection { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
 
-  .skeleton-loader { display: flex; flex-direction: column; gap: 2rem; }
+  .skeleton-loader { display: flex; flex-direction: column; gap: 1.5rem; }
   .skeleton {
-    background: linear-gradient(90deg, #080808 25%, #121212 50%, #080808 75%);
+    background: linear-gradient(90deg, #111 25%, #1a1a1a 50%, #111 75%);
     background-size: 200% 100%;
-    animation: shimmer 1.5s infinite;
-    border-radius: 12px;
+    animation: shimmer 2s infinite;
+    border-radius: 6px;
   }
-  @keyframes shimmer {
-    0% { background-position: 200% 0; }
-    100% { background-position: -200% 0; }
-  }
-  .title-skeleton { height: 35px; width: 40%; }
-  .field-skeleton { height: 55px; width: 100%; }
+  @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
 
-  /* Responsive Mobile View */
+  .title-skeleton { height: 28px; width: 30%; margin-bottom: 1rem; }
+  .field-skeleton { height: 48px; width: 100%; }
+
+  /* --- RESPONSIVE --- */
   @media (max-width: 850px) {
-    .modal-content { flex-direction: column; height: 95vh; width: 100vw; border-radius: 0; }
-    .modal-sidebar { width: 100%; height: auto; border-right: none; border-bottom: var(--amoled-border); padding: 1rem; }
-    .sidebar-title { margin-bottom: 1rem; font-size: 1.2rem; }
-    .section-container { padding: 2rem; }
-    .modal-footer-sticky { padding: 1.5rem 2rem; }
+    .modal-content { flex-direction: column; height: 100%; width: 100%; border-radius: 0; border: none; }
+    .modal-sidebar { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--modal-border); padding: 1.5rem; }
+    .sidebar-footer { display: none; } /* Ocultar btn salir sidebar en movil */
+    .section-container { padding: 1.5rem; }
+    .modal-footer-sticky { padding: 1rem 1.5rem; }
+
+    /* Añadir un botón de cierre flotante en móvil si fuera necesario,
+       pero el diseño actual debería funcionar bien con scroll */
+  }
+
+  /* --- Estilo para la nueva descripción --- */
+  .config-description {
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.5); /* Gris sutil */
+
+    /* Ajustes para posición inferior */
+    margin-top: 0.5rem;    /* Espacio entre el input y la descripción */
+    margin-bottom: 0;      /* Ya no necesitamos margen abajo */
+
+    line-height: 1.4;
+    font-weight: 400;
+  }
+
+  /* Ajuste para inputs vacíos (placeholder) */
+  .config-input::placeholder {
+    color: rgba(255, 255, 255, 0.2);
+    font-style: italic;
   }
 </style>

docker/views/css/anime/anime.css

@@ -1,297 +1,274 @@
+:root {
+    --bg-card: rgba(255, 255, 255, 0.04);
+    --border-subtle: rgba(255, 255, 255, 0.1);
+    --color-primary: #8b5cf6;
+    --player-height: 85vh;
+}
+
+body {
+    background: #0b0b0b;
+    color: white;
+
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden;
+    width: 100%;
+    font-family: system-ui, -apple-system, sans-serif;
+}
+
+.top-media-wrapper {
+    position: relative;
+
+    width: 100vw;
+    left: 0;
+    background: #000;
+    transition: all 0.5s ease-in-out;
+}
+
+.hero-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    overflow: hidden;
+    z-index: 1;
+}
+
 .video-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    pointer-events: none;
+    overflow: hidden;
+}
+.video-background iframe,
+.video-background #trailer-player {
     position: absolute;
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%) scale(1.35);
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    z-index: 0;
-    opacity: 0.6;
+
+    width: 100vw;
+    height: 56.25vw;
+    min-height: 100vh;
+    min-width: 177.77vh;
+
+    transform: translate(-50%, -50%);
+
+}
+
+.hero-overlay {
+    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.8) 70%, #0b0b0b 100%);
+    z-index: 2;
 }
 
 .content-container {
     position: relative;
     z-index: 10;
-    max-width: 1600px;
-    margin: -350px auto 0 auto;
+    max-width: 1400px;
+    margin: -45vh auto 0 auto;
     padding: 0 3rem 4rem 3rem;
-    display: grid;
-    grid-template-columns: 280px 1fr;
-    gap: 3rem;
-    animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+    transition: margin-top 0.5s ease;
 }
 
-.sidebar {
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
+body.watch-mode .content-container { margin-top: 0; }
+body.watch-mode .anime-header { margin-top: 2rem; }
+
+.anime-header { margin-bottom: 5rem; max-width: 900px; }
+.anime-title {
+    font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900;
+    margin-bottom: 0.5rem; text-shadow: 0 4px 30px rgba(0,0,0,0.6);
 }
+.hero-meta-info {
+    display: flex; align-items: center; gap: 0.8rem;
+    color: rgba(255,255,255,0.7); font-weight: 600; margin-bottom: 1.2rem;
+}
+.pill-local {
+    background: #22c55e; color: black; padding: 2px 8px;
+    border-radius: 4px; font-size: 0.75rem; font-weight: 900;
+}
+.hero-description-mini {
+    font-size: 1.05rem; line-height: 1.5; color: rgba(255,255,255,0.8);
+    margin-bottom: 1.2rem; max-width: 700px;
+    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+}
+.hero-tags {
+    display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem;
+    color: rgba(255,255,255,0.5); font-weight: 500;
+}
+
+.action-row { display: flex; align-items: center; gap: 1rem; }
+.btn-watch {
+    padding: 0.8rem 2.2rem; background: white; color: black;
+    border-radius: 8px; font-weight: 800; border: none; cursor: pointer;
+    display: flex; align-items: center; gap: 0.6rem; transition: 0.2s ease;
+}
+.btn-watch:hover { transform: scale(1.03); filter: brightness(0.9); }
+
+.btn-add-list {
+    padding: 0.8rem 1.5rem; background: rgba(255,255,255,0.1);
+    border: 1px solid rgba(255,255,255,0.2); color: white;
+    border-radius: 8px; font-weight: 700; cursor: pointer; transition: 0.2s;
+}
+.btn-add-list:hover { background: rgba(255,255,255,0.2); }
+
+.main-layout { display: grid; grid-template-columns: 300px 1fr; gap: 4rem; margin-top: 2rem; }
+.content-section { margin-top: 4rem; }
+h2, .subsection-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 1.5rem; color: white; }
 
 .poster-card {
-    width: 100%;
-    aspect-ratio: 2/3;
-    border-radius: var(--radius-lg);
-    overflow: hidden;
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
-    border: 1px solid rgba(255,255,255,0.1);
+    border-radius: 12px; overflow: hidden;
+    box-shadow: 0 30px 60px rgba(0,0,0,0.5); border: 1px solid var(--border-subtle);
 }
+.poster-card img { width: 100%; height: auto; display: block; }
 
-.poster-card img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+.relations-horizontal { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
+.relation-card-horizontal {
+    display: flex; background: var(--bg-card); border: 1px solid var(--border-subtle);
+    border-radius: 10px; overflow: hidden; transition: 0.2s; cursor: pointer;
 }
-
-.info-grid {
-    background: var(--color-bg-elevated);
-    border: 1px solid rgba(255,255,255,0.05);
-    border-radius: var(--radius-md);
-    padding: 1.5rem;
-    display: flex;
-    flex-direction: column;
-    gap: 1.25rem;
+.relation-card-horizontal:hover { background: rgba(255,255,255,0.08); transform: translateX(5px); }
+.rel-img { width: 85px; height: 110px; object-fit: cover; }
+.rel-info { padding: 1rem; display: flex; flex-direction: column; justify-content: center; }
+.rel-type {
+    font-size: 0.7rem; color: var(--color-primary); font-weight: 800;
+    margin-bottom: 4px; background: rgba(139, 92, 246, 0.1); width: fit-content; padding: 2px 6px; border-radius: 4px;
 }
+.rel-title { font-size: 0.95rem; font-weight: 700; color: #eee; }
 
-.info-item h4 { margin: 0 0 0.25rem 0; font-size: 0.85rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
-.info-item span { font-weight: 600; font-size: 1rem; color: var(--color-text-primary); }
+.characters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
+.character-item { display: flex; align-items: center; gap: 1rem; }
+.char-avatar { width: 60px; height: 60px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
+.char-avatar img { width: 100%; height: 100%; object-fit: cover; }
+.char-info { display: flex; flex-direction: column; gap: 2px; }
+.char-name { font-size: 1rem; font-weight: 700; color: #fff; }
+.char-role { font-size: 0.8rem; color: #888; font-weight: 500; }
+.btn-show-more { background: transparent; border: 1px solid var(--border-subtle); color: #aaa; padding: 10px; width: 100%; margin-top: 1rem; cursor: pointer; }
 
-.character-list {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
+.episodes-section { margin-top: 3rem; }
+.episodes-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
+.episode-search-input {
+    background: rgba(255,255,255,0.05); border: 1px solid var(--border-subtle);
+    color: white; padding: 8px 15px; border-radius: 8px; width: 100px;
 }
-.character-item { display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; }
-.char-dot { width: 6px; height: 6px; background: var(--color-primary); border-radius: 50%; }
-
-.main-content {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-}
-
-.anime-header {
-    margin-bottom: 2rem;
-}
-
-.anime-title {
-    font-size: 4rem;
-    font-weight: 900;
-    line-height: 1;
-    margin: 0 0 1.5rem 0;
-    text-shadow: 0 4px 30px rgba(0,0,0,0.8);
-}
-
-.meta-row {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    margin-bottom: 1.5rem;
-    flex-wrap: wrap;
-}
-
-.pill {
-    padding: 0.5rem 1.25rem;
-    background: rgba(255,255,255,0.1);
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255,255,255,0.1);
-    border-radius: var(--radius-full);
-    font-weight: 600;
-    font-size: 0.95rem;
-}
-.pill.score { background: rgba(34, 197, 94, 0.2); color: #4ade80; border-color: rgba(34, 197, 94, 0.2); }
-
-.action-row {
-    display: flex;
-    gap: 1rem;
-    margin-top: 1rem;
-}
-
-.btn-watch {
-    padding: 1rem 3rem;
-    background: var(--color-text-primary);
-    color: var(--color-bg-base);
-    border-radius: var(--radius-full);
-    font-weight: 800;
-    font-size: 1.1rem;
-    border: none;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    transition: transform 0.2s, box-shadow 0.2s;
-}
-
-.btn-watch:hover {
-    transform: scale(1.05);
-    box-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
-}
-
-.btn-secondary {
-    padding: 1rem 2rem;
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-    color: white;
-    border-radius: var(--radius-full);
-    font-weight: 700;
-    font-size: 1rem;
-    border: 1px solid rgba(255,255,255,0.2);
-    cursor: pointer;
-    transition: all 0.2s;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-.btn-secondary:hover {
-    background: rgba(255, 255, 255, 0.2);
-    transform: scale(1.05);
-}
-
-.description-box {
-    margin-top: 3rem;
-    font-size: 1.15rem;
-    line-height: 1.8;
-    color: #e4e4e7;
-    max-width: 900px;
-    background: rgba(255,255,255,0.03);
-    padding: 2rem;
-    border-radius: var(--radius-md);
-    border: 1px solid rgba(255,255,255,0.05);
-}
-
-.episodes-section {
-    margin-top: 4rem;
-}
-.section-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.8rem; }
-.section-title::before { content: ''; width: 4px; height: 28px; background: var(--color-primary); border-radius: 2px; }
-
 .episodes-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-    gap: 1rem;
-}
 
+    grid-template-columns: repeat(auto-fill, minmax(55px, 1fr));
+    gap: 0.6rem;
+}
 .episode-btn {
-    background: var(--color-bg-elevated);
-    border: 1px solid rgba(255,255,255,0.1);
-    padding: 1.25rem 1rem;
-    border-radius: var(--radius-md);
-    cursor: pointer;
-    transition: 0.2s;
+    background: rgba(255,255,255,0.03);
+    border: 1px solid var(--border-subtle);
+    padding: 0.6rem 0;
+    border-radius: 6px;
     text-align: center;
+    font-size: 0.9rem;
     font-weight: 600;
-    color: var(--color-text-secondary);
-}
-
-.episode-btn:hover {
-    background: var(--color-bg-elevated-hover);
-    color: white;
-    transform: translateY(-3px);
-    border-color: var(--color-primary);
-}
-
-@keyframes slideUp {
-    from { opacity: 0; transform: translateY(60px); }
-    to { opacity: 1; transform: translateY(0); }
-}
-
-@media (max-width: 1024px) {
-    .content-container {
-        grid-template-columns: 1fr;
-        margin-top: -100px;
-        padding: 0 1.5rem 4rem 1.5rem;
-    }
-    .poster-card { width: 220px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
-    .main-content { text-align: center; align-items: center; }
-    .anime-title { font-size: 2.5rem; }
-    .meta-row { justify-content: center; }
-    .sidebar { display: none;  }
-}
-
-.read-more-btn {
-    background: none;
-    border: none;
-    color: #8b5cf6;
     cursor: pointer;
-    font-weight: 600;
-    padding: 0;
-    margin-top: 0.5rem;
-    font-size: 0.95rem;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.25rem;
+    transition: all 0.2s;
+    color: #ccc;
+}
+.episode-btn:hover {
+    background: white;
+    color: black;
+    transform: translateY(-2px);
+}
+.episode-btn.active-playing {
+    background: var(--color-primary);
+    color: white;
+    border-color: var(--color-primary);
+    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
 }
-.read-more-btn:hover { text-decoration: underline; }
 
-.episodes-header-row {
+.metadata-sidebar {
+    margin-top: 2rem;
+    background: rgba(255,255,255,0.03);
+    padding: 1.5rem;
+    border-radius: 16px;
+    border: 1px solid rgba(255,255,255,0.08);
+    display: flex;
+    flex-direction: column;
+    gap: 1.2rem;
+}
+.meta-item-side {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 1.5rem;
-    flex-wrap: wrap;
-    gap: 1rem;
+    border-bottom: 1px solid rgba(255,255,255,0.05);
+    padding-bottom: 0.8rem;
 }
-.episodes-header-row h2 {
+.meta-item-side:last-child { border-bottom: none; padding-bottom: 0; }
+.meta-item-side span {
+    font-size: 0.8rem;
+    color: #888;
+    font-weight: 600;
+}
+.meta-item-side p {
+    font-size: 0.95rem;
+    font-weight: 500;
+    color: #fff;
     margin: 0;
-    font-size: 1.8rem;
-    border-left: 4px solid #8b5cf6;
-    padding-left: 1rem;
-}
-.episode-search-wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-}
-.episode-search-input {
-    background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 99px;
-    padding: 0.6rem 1rem;
-    color: white;
-    width: 140px;
-    text-align: center;
-    font-family: inherit;
-    transition: 0.2s;
-    -moz-appearance: textfield;
-}
-.episode-search-input:focus {
-    border-color: #8b5cf6;
-    background: rgba(255, 255, 255, 0.1);
-    outline: none;
+    text-align: right;
 }
 
-.episode-search-input::-webkit-outer-spin-button,
-.episode-search-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+@media (max-width: 1024px) {
+    .content-container { margin-top: -200px; padding: 0 1.5rem; }
+    .main-layout { grid-template-columns: 1fr; gap: 2rem; }
+    .poster-section { display: flex; flex-direction: column; align-items: center; }
+    .poster-card { width: 220px; }
+    .metadata-sidebar { width: 100%; max-width: 400px; }
+}
+
+.relation-card-horizontal.no-link {
+    cursor: default;
+    opacity: 0.7;
+}
+.relation-card-horizontal.no-link:hover {
+    transform: none;
+    background: var(--bg-card);
+}
 
 .pagination-controls {
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: 1rem;
+    gap: 1.5rem;
     margin-top: 2rem;
-    padding-top: 1rem;
+    padding-top: 1.5rem;
     border-top: 1px solid rgba(255, 255, 255, 0.05);
 }
+
+.page-info {
+    font-size: 0.9rem;
+    font-weight: 700;
+    color: #888;
+    min-width: 100px;
+    text-align: center;
+}
+
 .page-btn {
-    background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.2);
     color: white;
-    padding: 0.5rem 1rem;
+    padding: 0.6rem 1.2rem;
     border-radius: 8px;
+    font-size: 0.85rem;
+    font-weight: 600;
     cursor: pointer;
-    transition: 0.2s;
-    font-weight: 500;
+    transition: all 0.2s ease;
 }
+
 .page-btn:hover:not(:disabled) {
-    background: rgba(255, 255, 255, 0.15);
-    border-color: #8b5cf6;
+    background: white;
+    color: black;
+    border-color: white;
 }
+
 .page-btn:disabled {
     opacity: 0.4;
     cursor: not-allowed;
-}
-.page-info {
-    color: #a1a1aa;
-    font-size: 0.9rem;
-    font-weight: 500;
+    border-color: rgba(255, 255, 255, 0.1);
 }

docker/views/css/anime/player.css

@@ -0,0 +1,919 @@
+:root {
+    --brand-color: #8b5cf6;
+    --brand-color-light: #a78bfa;
+    --op-color: #fbbf24;
+    --ed-color: #38bdf8;
+    --overlay-gradient-top: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, transparent 100%);
+    --overlay-gradient-bottom: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 40%, transparent 100%);
+}
+
+body.stop-scrolling {
+    overflow: hidden !important;
+    height: 100vh;
+}
+
+.player-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #000;
+    z-index: 9999;
+    display: none;
+    overflow: hidden;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    color: #fff;
+}
+
+.player-wrapper * {
+    box-sizing: border-box;
+}
+
+.player-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+
+    margin: 0;
+    padding: 0;
+}
+.video-frame {
+
+    flex: 1;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background: #000;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.video-frame video {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+.video-frame .plyr {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.player-header {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    padding: 20px 30px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    z-index: 20;
+    background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, transparent 100%);
+    pointer-events: none; /* Permite clickear el video a través del header vacío */
+    transition: opacity 0.3s ease;
+}
+
+.header-left, .header-right {
+    pointer-events: auto;
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+.btn-icon-glass {
+    appearance: none;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255,255,255,0.1);
+    color: #fff;
+    padding: 10px;
+    border-radius: 20%;
+    cursor: pointer;
+    backdrop-filter: blur(4px);
+    transition: all 0.2s;
+}
+
+.btn-icon-glass:hover {
+    background: rgba(255, 255, 255, 0.25);
+    border-color: rgba(255, 255, 255, 0.3);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+    transform: translateY(-1px) scale(1.05);
+}
+
+.player-container:hover .player-header,
+.player-container.paused .player-header {
+    opacity: 1;
+    pointer-events: all;
+}
+
+.player-meta {
+    display: flex; flex-direction: column; gap: 0.5rem;
+}
+
+.btn-close-player {
+    background: transparent;
+    border: none;
+    color: rgba(255,255,255,0.7);
+    display: flex; align-items: center; gap: 10px;
+    font-size: 1.1rem; font-weight: 500;
+    cursor: pointer; padding: 0;
+    transition: color 0.2s;
+}
+.btn-close-player:hover { color: #fff; }
+.btn-close-player svg { width: 28px; height: 28px; }
+
+.episode-info {
+    display: flex;
+    flex-direction: column;
+}
+.ep-label {
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    color: rgba(255,255,255,0.7);
+    letter-spacing: 1px;
+}
+.ep-title {
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: white;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
+}
+
+.nav-capsule {
+    display: flex;
+    align-items: center;
+    background: rgba(0, 0, 0, 0.6);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 20px; /* Forma de pastilla */
+    overflow: hidden;
+    backdrop-filter: blur(10px);
+}
+
+.nav-btn {
+    background: transparent;
+    border: none;
+    color: white;
+    padding: 8px 16px;
+    cursor: pointer;
+    transition: background 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.nav-btn:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.nav-btn:disabled {
+    opacity: 0.3;
+    cursor: default;
+}
+
+.nav-capsule .divider {
+    width: 1px;
+    height: 20px;
+    background: rgba(255, 255, 255, 0.2);
+}
+
+#skip-overlay-btn {
+    position: absolute;
+    bottom: 80px; /* Encima de la barra de Plyr */
+    right: 30px;
+    background: white;
+    color: black;
+    padding: 10px 24px;
+    border-radius: 6px;
+    font-weight: 700;
+    font-size: 0.95rem;
+    border: none;
+    cursor: pointer;
+    z-index: 2147483647 !important; /* Siempre encima de todo */
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
+
+    opacity: 0;
+    transform: translateY(20px);
+    transition: opacity 0.3s, transform 0.3s, background 0.2s;
+    pointer-events: none;
+
+}
+
+#skip-overlay-btn.visible {
+    opacity: 1 !important;
+    pointer-events: auto !important;
+    cursor: pointer !important;
+    visibility: visible !important;
+    display: flex !important;
+}
+
+#skip-overlay-btn:hover {
+    background: #f0f0f0;
+    transform: translateY(-2px);
+}
+
+#skip-overlay-btn.is-next {
+    background: #8b5cf6;
+    color: white;
+}
+#skip-overlay-btn.is-next:hover {
+    background: #7c3aed;
+}
+
+
+/* --- BOTONES DE NAVEGACIÓN LATERALES (Side Chevrons) --- */
+.side-nav-btn {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background: rgba(0, 0, 0, 0.5);
+    color: rgba(255, 255, 255, 0.8);
+    border: none;
+    width: 60px;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    z-index: 30; /* Encima del video */
+    transition: all 0.3s ease;
+    opacity: 0; /* Invisibles por defecto */
+}
+
+/* Bordes redondeados según el lado */
+.side-nav-btn.left {
+    left: 0;
+    border-radius: 0 10px 10px 0;
+}
+
+.side-nav-btn.right {
+    right: 0;
+    border-radius: 10px 0 0 10px;
+}
+
+/* Mostrar solo cuando el mouse está sobre el reproductor */
+.player-container:hover .side-nav-btn {
+    opacity: 1;
+}
+
+/* Efecto Hover sobre el botón */
+.side-nav-btn:hover:not(:disabled) {
+    background: rgba(139, 92, 246, 0.6); /* Tu color brand morado pero transparente */
+    color: white;
+    width: 70px; /* Crecen un poco */
+}
+
+/* Estado deshabilitado (Primer/Último episodio) */
+.side-nav-btn:disabled {
+    cursor: default;
+    opacity: 0 !important; /* Totalmente oculto si no se puede usar */
+    pointer-events: none;
+}
+#player-episode-title {
+    font-size: 1.5rem; font-weight: 700;
+    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
+    margin-left: 2px;
+}
+
+.player-controls-top {
+    display: flex; gap: 1rem; align-items: center;
+}
+
+.glass-select {
+    appearance: none;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255,255,255,0.1);
+    color: #fff;
+    padding: 8px 16px;
+    border-radius: 4px;
+    font-size: 0.85rem; font-weight: 600;
+    cursor: pointer;
+    backdrop-filter: blur(4px);
+    transition: all 0.2s;
+}
+.glass-select:hover { background: rgba(255, 255, 255, 0.2); }
+.glass-select option { background: #111; color: #ccc; }
+
+.sd-toggle {
+    background: rgba(255,255,255,0.1);
+    border-radius: 4px;
+    display: flex;
+    padding: 2px;
+    cursor: pointer;
+    border: 1px solid rgba(255,255,255,0.1);
+}
+.sd-option {
+    padding: 4px 12px;
+    font-size: 0.75rem; font-weight: 700;
+    color: rgba(255,255,255,0.5);
+    border-radius: 2px;
+    transition: all 0.2s;
+}
+.sd-option.active {
+    background: #fff;
+    color: #000;
+}
+
+.btn-skip-intro {
+    position: absolute;
+    bottom: 120px; right: 40px;
+    background: #fff;
+    color: #000;
+    border: none;
+    padding: 10px 24px;
+    font-weight: 700; font-size: 0.9rem;
+    border-radius: 4px;
+    cursor: pointer;
+    z-index: 50;
+    display: flex; align-items: center; gap: 8px;
+    opacity: 0; transform: translateY(20px);
+    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+}
+.btn-skip-intro.visible {
+    opacity: 1; transform: translateY(0);
+}
+.btn-skip-intro:hover {
+    background: #e6e6e6;
+    transform: scale(1.02);
+}
+
+:root {
+    --plyr-color-main: var(--brand-color);
+    --plyr-video-control-color: #fff;
+    --plyr-video-control-background-hover: transparent;
+    --plyr-control-icon-size: 20px;
+    --plyr-range-track-height: 4px;
+    --plyr-range-thumb-height: 14px;
+    --plyr-range-thumb-background: #fff;
+    --plyr-menu-background: rgba(20, 20, 20, 0.95);
+    --plyr-menu-color: #fff;
+    --plyr-tooltip-background: rgba(255,255,255,0.9);
+    --plyr-tooltip-color: #000;
+}
+
+.plyr--video .plyr__controls {
+    padding-bottom: max(20px, env(safe-area-inset-bottom));
+}
+
+.plyr__progress__container:hover .plyr__progress input[type=range],
+.plyr__progress__container:hover .plyr__progress__buffer {
+    height: 8px;
+    transition: height 0.1s ease;
+}
+
+.plyr__progress {
+    position: relative;
+    cursor: pointer;
+}
+
+.skip-marker {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 4px;
+    z-index: 3;
+    pointer-events: none;
+    transition: height 0.1s ease;
+
+    background-color: rgba(255, 255, 255, 0.3);
+
+    border-left: 2px solid rgba(0,0,0,0);
+    border-right: 2px solid rgba(0,0,0,0);
+    background-clip: padding-box;
+}
+
+.plyr__progress__container:hover .skip-marker {
+    height: 8px;
+}
+
+.skip-marker.op {
+    background-color: var(--op-color);
+    box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
+}
+
+.skip-marker.ed {
+    background-color: var(--ed-color);
+}
+
+.player-loading-overlay {
+    background: #000;
+}
+.spinner {
+    border-width: 2px;
+    width: 50px; height: 50px;
+    border-top-color: #fff;
+    border-right-color: rgba(255,255,255,0.1);
+    border-bottom-color: rgba(255,255,255,0.1);
+    border-left-color: rgba(255,255,255,0.1);
+}
+
+.settings-group {
+    display: flex;
+    align-items: center;
+    gap: 12px; /* Espacio entre los elementos */
+}
+
+/* Opcional: Ajuste para pantallas móviles muy pequeñas */
+@media (max-width: 600px) {
+    .settings-group {
+        gap: 8px;
+    }
+    .glass-select {
+        padding: 6px 10px;
+        font-size: 0.75rem;
+    }
+}
+
+.player-container:fullscreen,
+.player-container:-webkit-full-screen {
+    width: 100vw;
+    height: 100vh;
+    background: #000;
+    position: fixed;
+    inset: 0;
+    z-index: 99999;
+}
+
+/* Controles custom SIEMPRE visibles encima */
+.player-container:fullscreen .player-header,
+.player-container:fullscreen .side-nav-btn,
+.player-container:fullscreen #skip-overlay-btn,
+.player-container:-webkit-full-screen .player-header,
+.player-container:-webkit-full-screen .side-nav-btn,
+.player-container:-webkit-full-screen #skip-overlay-btn {
+    z-index: 2147483647 !important;
+    visibility: visible;
+}
+
+/* Posición correcta del botón Skip en fullscreen */
+.player-container:fullscreen #skip-overlay-btn,
+.player-container:-webkit-full-screen #skip-overlay-btn {
+    bottom: 100px;
+    right: 50px;
+}
+
+/* ================= UI HIDDEN (UNA SOLA FUENTE DE VERDAD) ================= */
+
+.player-container.ui-hidden .player-header,
+.player-container.ui-hidden .side-nav-btn {
+    opacity: 0;
+    pointer-events: none;
+    cursor: none;
+}
+#skip-overlay-btn {
+    opacity: 0;
+    pointer-events: none;
+}
+
+#skip-overlay-btn.visible {
+    opacity: 1 !important;
+    pointer-events: auto !important;
+    visibility: visible !important;
+}
+
+.player-container.ui-hidden #skip-overlay-btn.visible {
+    opacity: 1 !important;
+    pointer-events: auto !important;
+    cursor: pointer !important;
+    visibility: visible !important;
+}
+.player-header,
+.side-nav-btn,
+#skip-overlay-btn {
+    transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.player-container:fullscreen #skip-overlay-btn,
+.player-container:-webkit-full-screen #skip-overlay-btn {
+    z-index: 2147483647 !important;
+    pointer-events: auto !important;
+}
+.player-container:fullscreen #skip-overlay-btn.visible,
+.player-container:-webkit-full-screen #skip-overlay-btn.visible {
+    opacity: 1 !important;
+    visibility: visible !important;
+    pointer-events: auto !important;
+}
+
+.glass-btn-mpv {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    color: white;
+    padding: 6px 12px;
+    border-radius: 8px;
+    font-weight: 700;
+    font-size: 0.85rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    backdrop-filter: blur(10px);
+    height: 36px;
+}
+
+.glass-btn-mpv:hover {
+    background: white;
+    color: black;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
+}
+
+.glass-btn-mpv svg {
+    margin-top: -1px;
+}
+
+.glass-btn-mpv:active {
+    transform: scale(0.95);
+}
+
+.plyr__custom-select-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 4px;
+}
+
+/* El select real: invisible pero clickable */
+.plyr__custom-select-wrapper select {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+    z-index: 2; /* Encima del botón visual */
+    appearance: none;
+    -webkit-appearance: none;
+}
+
+/* El botón visual que imita a Plyr */
+.plyr__custom-control-btn {
+    position: relative;
+    background: transparent;
+    border: none;
+    color: #fff; /* Plyr default white */
+    padding: 7px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background 0.3s ease, color 0.3s ease;
+    font-family: inherit;
+    font-size: 13px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    line-height: 1;
+}
+
+.plyr__custom-control-btn:hover {
+    background: rgba(255, 255, 255, 0.15); /* Plyr hover effect */
+    color: #fff;
+}
+
+.plyr__custom-control-btn svg {
+    width: 20px;
+    height: 20px;
+    fill: currentColor;
+    pointer-events: none;
+}
+
+/* Badge pequeño para indicar calidad actual (opcional) */
+.quality-badge {
+    background: var(--brand-color);
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+}
+
+.download-settings-content {
+    background: #1a1a1a;
+    width: 90%;
+    max-width: 500px;
+    max-height: 85vh;
+    border: 1px solid #333;
+    display: flex;
+    flex-direction: column;
+}
+
+.download-sections-wrapper {
+    overflow-y: auto;
+    padding-right: 5px;
+    margin-bottom: 20px;
+    flex: 1;
+}
+
+.dl-section {
+    margin-bottom: 1.5rem;
+}
+
+.dl-section h3 {
+    font-size: 0.9rem;
+    color: var(--brand-color-light);
+    margin-bottom: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    border-bottom: 1px solid rgba(255,255,255,0.1);
+    padding-bottom: 5px;
+}
+
+.dl-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.dl-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    background: rgba(255,255,255,0.05);
+    padding: 10px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background 0.2s;
+    user-select: none;
+}
+
+.dl-item:hover {
+    background: rgba(255,255,255,0.1);
+}
+
+.dl-item input[type="radio"],
+.dl-item input[type="checkbox"] {
+    accent-color: var(--brand-color);
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+}
+
+.dl-item span {
+    font-size: 0.9rem;
+    color: #eee;
+    flex: 1;
+}
+
+.dl-item .tag-info {
+    font-size: 0.75rem;
+    color: #aaa;
+    background: rgba(0,0,0,0.3);
+    padding: 2px 6px;
+    border-radius: 4px;
+}
+
+.dl-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    padding-top: 10px;
+    border-top: 1px solid rgba(255,255,255,0.1);
+}
+
+.btn-cancel {
+    background: transparent;
+    border: 1px solid #444;
+    color: #ccc;
+    padding: 8px 16px;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.btn-confirm {
+    background: var(--brand-color);
+    border: none;
+    color: white;
+    padding: 8px 20px;
+    border-radius: 4px;
+    font-weight: 600;
+    cursor: pointer;
+}
+.btn-confirm:hover {
+    background: #7c3aed;
+}
+/* =========================================
+   MODAL DE DESCARGAS - REDISEÑO "GLASS"
+   ========================================= */
+
+#download-modal {
+    position: fixed !important;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.6); /* Fondo oscurecido */
+    backdrop-filter: blur(8px); /* Desenfoque del fondo */
+    z-index: 2147483647 !important; /* Encima de todo */
+    display: none; /* Controlado por JS/Clases */
+    justify-content: center;
+    align-items: center;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: none; /* Por defecto no bloquea, JS lo activa */
+}
+
+/* Estado visible activado por JS */
+#download-modal.show {
+    display: flex !important;
+    opacity: 1 !important;
+    pointer-events: auto !important;
+    visibility: visible !important;
+}
+
+.download-settings-content {
+    background: rgba(20, 20, 20, 0.85); /* Fondo semitransparente oscuro */
+    width: 90%;
+    max-width: 480px;
+    max-height: 85vh;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 16px; /* Bordes más redondeados como anime.css */
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255,255,255,0.05);
+    display: flex;
+    flex-direction: column;
+    padding: 24px;
+    position: relative;
+    transform: scale(0.95);
+    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    color: #fff;
+    overflow: hidden;
+}
+
+#download-modal.show .download-settings-content {
+    transform: scale(1);
+}
+
+/* Botón de cerrar (X) */
+.download-settings-content .modal-close {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background: rgba(255, 255, 255, 0.1);
+    border: none;
+    color: white;
+    font-size: 1.2rem;
+    cursor: pointer;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+    z-index: 10;
+}
+
+.download-settings-content .modal-close:hover {
+    background: rgba(255, 255, 255, 0.3);
+    transform: rotate(90deg);
+}
+
+.modal-title {
+    margin: 0 0 20px 0;
+    font-size: 1.5rem;
+    font-weight: 800;
+    background: linear-gradient(to right, #fff, rgba(255,255,255,0.5));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+/* Wrappers internos */
+.download-sections-wrapper {
+    overflow-y: auto;
+    padding-right: 8px; /* Espacio para scrollbar */
+    margin-bottom: 20px;
+    flex: 1;
+}
+
+/* Scrollbar personalizado fino */
+.download-sections-wrapper::-webkit-scrollbar { width: 6px; }
+.download-sections-wrapper::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
+.download-sections-wrapper::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
+.download-sections-wrapper::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }
+
+.dl-section { margin-bottom: 1.5rem; }
+
+.dl-section h3 {
+    font-size: 0.75rem;
+    color: var(--brand-color-light); /* Morado claro */
+    margin-bottom: 1rem;
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.dl-section h3::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: linear-gradient(to right, rgba(139, 92, 246, 0.3), transparent);
+}
+
+.dl-list { display: flex; flex-direction: column; gap: 8px; }
+
+/* Items de la lista */
+.dl-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    background: rgba(255, 255, 255, 0.03);
+    padding: 12px 16px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border: 1px solid transparent;
+    user-select: none;
+}
+
+.dl-item:hover {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: rgba(255, 255, 255, 0.1);
+    transform: translateX(4px);
+}
+
+/* Inputs nativos con color de marca */
+.dl-item input[type="radio"],
+.dl-item input[type="checkbox"] {
+    accent-color: var(--brand-color);
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+    margin: 0;
+}
+
+.dl-item span {
+    font-size: 0.95rem;
+    color: rgba(255,255,255,0.9);
+    flex: 1;
+    font-weight: 500;
+}
+
+.dl-item .tag-info {
+    font-size: 0.7rem;
+    color: #ccc;
+    background: rgba(0, 0, 0, 0.4);
+    padding: 3px 8px;
+    border-radius: 4px;
+    font-weight: 600;
+    border: 1px solid rgba(255,255,255,0.1);
+}
+
+/* Pie del modal (Botones) */
+.dl-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    padding-top: 20px;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.btn-cancel {
+    background: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: rgba(255, 255, 255, 0.8);
+    padding: 10px 20px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-weight: 600;
+    transition: all 0.2s;
+}
+.btn-cancel:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+    border-color: white;
+}
+
+.btn-confirm {
+    background: var(--brand-color);
+    border: none;
+    color: white;
+    padding: 10px 24px;
+    border-radius: 8px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.2s;
+    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.btn-confirm:hover {
+    background: #7c3aed; /* Un tono más oscuro del brand */
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
+}

docker/views/css/anime/watch.css

@@ -1,830 +0,0 @@
-.top-bar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    padding: var(--spacing-lg) var(--spacing-xl);
-    background: linear-gradient(
-        180deg,
-        rgba(0, 0, 0, 0.8) 0%,
-        transparent 100%
-    );
-    z-index: 1000;
-    pointer-events: none;
-}
-
-.back-btn {
-    pointer-events: auto;
-    display: inline-flex;
-    align-items: center;
-    gap: var(--spacing-sm);
-    padding: 0.7rem 1.5rem;
-    background: var(--glass-bg);
-    backdrop-filter: blur(16px);
-    border: 1px solid var(--glass-border);
-    border-radius: var(--radius-full);
-    color: var(--color-text-primary);
-    text-decoration: none;
-    font-weight: 600;
-    font-size: 0.9rem;
-    transition: all var(--transition-smooth);
-    box-shadow: var(--shadow-sm);
-}
-
-.back-btn:hover {
-    background: rgba(255, 255, 255, 0.12);
-    border-color: var(--color-primary);
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-glow);
-}
-
-.watch-container {
-    max-width: 1600px;
-    margin: var(--spacing-2xl) auto;
-    padding: 0 var(--spacing-xl);
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-xl);
-    align-items: center;
-}
-
-.player-section {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-lg);
-}
-
-.player-toolbar {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-md);
-    flex-wrap: wrap;
-    background: var(--glass-bg);
-    backdrop-filter: blur(16px);
-    border: 1px solid var(--glass-border);
-    border-radius: var(--radius-lg);
-    padding: var(--spacing-md);
-    box-shadow: var(--shadow-sm);
-}
-
-.control-group {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-md);
-}
-
-.sd-toggle {
-    display: flex;
-    background: var(--color-bg-elevated);
-    border: var(--border-subtle);
-    border-radius: var(--radius-full);
-    padding: 4px;
-    position: relative;
-    cursor: pointer;
-}
-
-.sd-option {
-    padding: 0.6rem 1.5rem;
-    font-size: 0.875rem;
-    font-weight: 700;
-    color: var(--color-text-muted);
-    z-index: 2;
-    transition: color var(--transition-base);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-}
-
-.sd-option.active {
-    color: var(--color-text-primary);
-}
-
-.sd-bg {
-    position: absolute;
-    top: 4px;
-    left: 4px;
-    bottom: 4px;
-    width: calc(50% - 4px);
-    background: var(--color-primary);
-    border-radius: var(--radius-full);
-    transition: transform var(--transition-smooth);
-    box-shadow: 0 4px 12px var(--color-primary-glow);
-    z-index: 1;
-}
-
-.sd-toggle[data-state="dub"] .sd-bg {
-    transform: translateX(100%);
-}
-
-.source-select {
-    appearance: none;
-    background-color: var(--color-bg-elevated);
-    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: right 1.2rem center;
-    border: var(--border-subtle);
-    color: var(--color-text-primary);
-    padding: 0.7rem 2.8rem 0.7rem 1.2rem;
-    border-radius: var(--radius-full);
-    font-size: 0.9rem;
-    font-weight: 500;
-    cursor: pointer;
-    min-width: 160px;
-    transition: all var(--transition-base);
-}
-
-.source-select:hover {
-    border-color: var(--color-primary);
-    background-color: var(--color-bg-card);
-}
-.source-select:focus {
-    outline: none;
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px var(--color-primary-glow);
-}
-
-.video-container {
-    aspect-ratio: 16/9;
-    width: 100%;
-    background: var(--color-bg-base);
-    border-radius: var(--radius-xl);
-    overflow: hidden;
-    box-shadow:
-        var(--shadow-lg),
-        0 0 0 1px var(--glass-border);
-    position: relative;
-    transition: box-shadow var(--transition-smooth);
-}
-
-.video-container:hover {
-    box-shadow:
-        var(--shadow-lg),
-        0 0 0 1px var(--color-primary),
-        var(--shadow-glow);
-}
-
-#player {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-}
-
-.loading-overlay {
-    position: absolute;
-    inset: 0;
-    background: var(--color-bg-base);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    z-index: 20;
-    gap: var(--spacing-lg);
-}
-
-.spinner {
-    width: 48px;
-    height: 48px;
-    border: 3px solid rgba(255, 255, 255, 0.1);
-    border-top-color: var(--color-primary);
-    border-radius: 50%;
-    animation: spin 0.8s linear infinite;
-}
-
-@keyframes spin {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-.loading-overlay p {
-    color: var(--color-text-secondary);
-    font-size: 0.95rem;
-    font-weight: 500;
-}
-
-.episode-controls {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    gap: var(--spacing-lg);
-    background: var(--glass-bg);
-    backdrop-filter: blur(16px);
-    border: 1px solid var(--glass-border);
-    border-radius: var(--radius-lg);
-    padding: var(--spacing-lg);
-    box-shadow: var(--shadow-sm);
-}
-
-.episode-info h1 {
-    font-size: 1.75rem;
-    font-weight: 800;
-    margin: 0 0 var(--spacing-xs);
-}
-.episode-info p {
-    color: var(--color-primary);
-    font-weight: 600;
-    font-size: 1rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-}
-
-.navigation-buttons {
-    display: flex;
-    gap: var(--spacing-md);
-}
-
-.nav-btn {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-sm);
-    background: var(--color-bg-elevated);
-    border: var(--border-subtle);
-    color: var(--color-text-primary);
-    padding: 0.75rem 1.5rem;
-    border-radius: var(--radius-full);
-    font-weight: 600;
-    font-size: 0.9rem;
-    cursor: pointer;
-    transition: all var(--transition-base);
-}
-
-.nav-btn:hover:not(:disabled) {
-    background: var(--color-primary);
-    border-color: var(--color-primary);
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-glow);
-}
-.nav-btn:disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
-}
-
-.episode-carousel-compact {
-    width: 100%;
-    max-width: 1600px;
-    margin-top: var(--spacing-lg);
-    padding: 0;
-    background: transparent;
-    border-radius: var(--radius-lg);
-    overflow: hidden;
-}
-
-.carousel-header {
-    margin-bottom: var(--spacing-lg);
-    padding: 0 var(--spacing-xl);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.carousel-header h2 {
-    font-size: 1.6rem;
-    font-weight: 900;
-    color: var(--color-text-primary);
-    letter-spacing: -0.04em;
-    border-left: 4px solid var(--color-primary);
-    padding-left: var(--spacing-md);
-}
-
-.carousel-nav {
-    display: flex;
-    gap: var(--spacing-xs);
-}
-
-.carousel-arrow-mini {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    background: var(--color-bg-elevated);
-    border: var(--border-subtle);
-    border-radius: var(--radius-full);
-    color: var(--color-text-secondary);
-    cursor: pointer;
-    transition: all var(--transition-fast);
-}
-
-.carousel-arrow-mini:hover {
-    background: var(--color-primary);
-    border-color: var(--color-primary);
-    color: var(--color-text-primary);
-    box-shadow: var(--shadow-sm);
-}
-
-.carousel-arrow-mini[style*="opacity: 0.3"] {
-    background: var(--color-bg-elevated);
-    color: var(--color-text-muted);
-    border-color: var(--border-subtle);
-    box-shadow: none;
-}
-
-.episode-carousel-compact-list {
-    display: flex;
-    gap: var(--spacing-md);
-    padding: var(--spacing-sm) var(--spacing-xl);
-    overflow-x: auto;
-    scroll-snap-type: x mandatory;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-    mask-image: linear-gradient(
-        to right,
-        transparent,
-        black var(--spacing-md),
-        black calc(100% - var(--spacing-md)),
-        transparent
-    );
-}
-
-.episode-carousel-compact-list::-webkit-scrollbar {
-    display: none;
-}
-
-.carousel-item {
-    flex: 0 0 200px;
-    height: 112px;
-
-    background: var(--color-bg-card);
-    border: 2px solid var(--border-subtle);
-    border-radius: var(--radius-md);
-    overflow: hidden;
-    position: relative;
-    transition: all var(--transition-base);
-    text-decoration: none;
-    display: flex;
-    flex-direction: column;
-
-    scroll-snap-align: start;
-    box-shadow: var(--shadow-sm);
-}
-
-.carousel-item:hover {
-    border-color: var(--color-primary);
-    transform: scale(1.02);
-    box-shadow: var(--shadow-md), var(--shadow-glow);
-}
-
-.carousel-item.active-ep-carousel {
-    border-color: var(--color-primary);
-    background: rgba(139, 92, 246, 0.15);
-    box-shadow:
-        0 0 0 2px var(--color-primary),
-        var(--shadow-md);
-    transform: scale(1.02);
-}
-
-.carousel-item.active-ep-carousel::after {
-    content: "WATCHING";
-    position: absolute;
-    top: 0;
-    right: 0;
-    background: var(--color-primary);
-    color: var(--color-text-primary);
-    padding: 2px 8px;
-    font-size: 0.7rem;
-    font-weight: 800;
-    border-bottom-left-radius: var(--radius-sm);
-    letter-spacing: 0.05em;
-    z-index: 10;
-}
-
-.carousel-item-img-container {
-    height: 70px;
-    background: var(--color-bg-elevated);
-    overflow: hidden;
-    position: relative;
-}
-
-.carousel-item-img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    transition: transform var(--transition-smooth);
-    opacity: 0.8;
-}
-
-.carousel-item:hover .carousel-item-img {
-    transform: scale(1.1);
-    opacity: 1;
-}
-
-.carousel-item-info {
-    flex: 1;
-    padding: var(--spacing-xs) var(--spacing-sm);
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    background: var(--color-bg-elevated);
-}
-
-.carousel-item-info p {
-    font-size: 1rem;
-    font-weight: 600;
-    color: var(--color-text-primary);
-    margin: 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    letter-spacing: 0;
-    line-height: 1.2;
-}
-
-.carousel-item-info p::before {
-    content: attr(data-episode-number);
-    color: var(--color-primary);
-    font-weight: 800;
-    margin-right: var(--spacing-xs);
-    opacity: 0.7;
-}
-
-.carousel-item.no-thumbnail {
-    flex: 0 0 160px;
-    height: 90px;
-    background: var(--color-bg-elevated);
-    border: 2px solid var(--border-subtle);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: row;
-}
-
-.carousel-item.no-thumbnail .carousel-item-info {
-    padding: var(--spacing-sm);
-    background: transparent;
-    justify-content: center;
-}
-
-.carousel-item.no-thumbnail .carousel-item-info p {
-    color: var(--color-text-secondary);
-    font-size: 1.05rem;
-    font-weight: 700;
-    text-align: center;
-}
-
-.carousel-item.no-thumbnail:hover {
-    background: rgba(139, 92, 246, 0.12);
-    border-color: var(--color-primary);
-}
-
-.carousel-item.no-thumbnail.active-ep-carousel .carousel-item-info p {
-    color: var(--color-primary);
-}
-
-.anime-details,
-.anime-extra-content {
-    max-width: 1600px;
-    margin: var(--spacing-2xl) auto;
-}
-
-.details-container {
-    display: flex;
-    flex-direction: row;
-    gap: var(--spacing-xl);
-    background: var(--glass-bg);
-    backdrop-filter: blur(16px);
-    border: 1px solid var(--glass-border);
-    border-radius: var(--radius-lg);
-    padding: var(--spacing-xl);
-    box-shadow: var(--shadow-md);
-}
-
-.details-cover {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--spacing-md);
-    flex-shrink: 0;
-}
-
-.details-cover h1 {
-    font-size: 2.5rem;
-    font-weight: 900;
-    color: var(--color-text-primary);
-    line-height: 1.2;
-    margin: 0 0 var(--spacing-md) 0;
-    text-align: left;
-}
-
-.cover-image {
-    width: 220px;
-    border-radius: var(--radius-md);
-    box-shadow: var(--shadow-lg);
-}
-
-.details-content h1 {
-    font-size: 1.5rem;
-    font-weight: 800;
-    margin-bottom: var(--spacing-md);
-}
-
-.meta-badge {
-    background: rgba(139, 92, 246, 0.12);
-    color: var(--color-primary);
-    padding: 0.5rem 1rem;
-    border-radius: var(--radius-sm);
-    font-size: 0.875rem;
-    font-weight: 600;
-    border: 1px solid rgba(139, 92, 246, 0.2);
-}
-
-.meta-badge.meta-score {
-    background: var(--color-primary);
-    color: white;
-}
-.details-description {
-    font-size: 1rem;
-    line-height: 1.7;
-    color: var(--color-text-secondary);
-}
-
-.characters-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: var(--spacing-xl);
-}
-
-.characters-header h2 {
-    font-size: 1.75rem;
-    font-weight: 800;
-    color: var(--color-text-primary);
-    border-left: 5px solid var(--color-primary);
-    padding-left: var(--spacing-md);
-}
-
-.expand-btn {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-xs);
-    background: transparent;
-    border: none;
-    color: var(--color-primary);
-    font-weight: 600;
-    cursor: pointer;
-    font-size: 1rem;
-    padding: var(--spacing-xs);
-    border-radius: var(--radius-sm);
-}
-
-.expand-btn:hover {
-    background: rgba(139, 92, 246, 0.1);
-}
-.expand-btn svg {
-    transition: transform var(--transition-smooth);
-}
-.expand-btn[data-expanded="true"] svg {
-    transform: rotate(180deg);
-}
-
-.characters-carousel {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--spacing-lg);
-    align-content: flex-start;
-    overflow: hidden;
-
-    height: 208px;
-    transition: height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
-    padding: 0 var(--spacing-sm);
-
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-}
-
-.characters-carousel::-webkit-scrollbar {
-    display: none;
-}
-
-.characters-carousel.expanded {
-    height: auto;
-    max-height: 3200px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding: 0;
-
-    -ms-overflow-style: auto;
-    scrollbar-width: thin;
-}
-
-.characters-carousel.expanded::-webkit-scrollbar {
-    width: 6px;
-}
-
-.characters-carousel.expanded::-webkit-scrollbar-thumb {
-    background: rgba(139, 92, 246, 0.4);
-    border-radius: 3px;
-}
-
-.characters-carousel.expanded::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-.plyr--video {
-    border-radius: var(--radius-xl);
-}
-.plyr__controls {
-    background: linear-gradient(
-        to top,
-        rgba(0, 0, 0, 0.9) 0%,
-        rgba(0, 0, 0, 0.5) 50%,
-        transparent 100%
-    ) !important;
-    padding: 1rem 1.5rem 1.5rem !important;
-}
-.plyr--full-ui input[type="range"] {
-    color: var(--color-primary);
-}
-.plyr__control:hover {
-    background: rgba(255, 255, 255, 0.12) !important;
-}
-.plyr__menu__container {
-    background: var(--glass-bg) !important;
-    backdrop-filter: blur(16px);
-    border: 1px solid var(--glass-border);
-    box-shadow: var(--shadow-lg) !important;
-}
-
-@media (min-width: 1024px) {
-    .carousel-nav {
-        display: flex;
-    }
-    .watch-container {
-        padding-top: 5rem;
-    }
-
-    .details-cover {
-        align-items: center;
-        text-align: center;
-    }
-    .details-cover h1 {
-        text-align: center;
-        margin-bottom: var(--spacing-lg);
-    }
-}
-
-@media (max-width: 768px) {
-    .watch-container {
-        padding: 5rem 1rem 2rem 1rem;
-        margin: 0;
-        width: 100%;
-        overflow-x: hidden;
-    }
-
-    .player-toolbar {
-        flex-direction: column;
-        align-items: stretch;
-        gap: 1rem;
-        padding: 1rem;
-    }
-
-    .control-group {
-        justify-content: space-between;
-        width: 100%;
-    }
-
-    .source-select {
-        width: 100%;
-        background-position: right 1.5rem center;
-    }
-
-    .episode-controls {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 1.5rem;
-    }
-
-    .episode-info {
-        width: 100%;
-        text-align: left;
-    }
-
-    .episode-info h1 {
-        font-size: 1.4rem;
-        line-height: 1.3;
-    }
-
-    .navigation-buttons {
-        width: 100%;
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 0.8rem;
-    }
-
-    .nav-btn {
-        justify-content: center;
-        padding: 0.8rem;
-        width: 100%;
-    }
-
-    .details-container {
-        flex-direction: column;
-        padding: 1.5rem;
-        gap: 2rem;
-    }
-
-    .details-cover {
-        flex-direction: row;
-        align-items: flex-start;
-        width: 100%;
-        gap: 1.5rem;
-    }
-
-    @media (max-width: 480px) {
-        .details-cover {
-            flex-direction: column;
-            align-items: center;
-            text-align: center;
-        }
-
-        .details-cover h1 {
-            text-align: center;
-        }
-    }
-
-    .cover-image {
-        width: 140px;
-        flex-shrink: 0;
-        margin: 0 auto;
-    }
-
-    .details-content h1 {
-        font-size: 1.3rem;
-    }
-
-    .characters-carousel {
-        justify-content: center;
-        padding-bottom: 1rem;
-    }
-
-    .character-card {
-        width: calc(50% - 0.75rem);
-        flex: 0 0 calc(50% - 0.75rem);
-    }
-}
-
- .plyr__progress {
-     position: relative;
- }
-
-.plyr__markers {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 100%;
-    pointer-events: none;
-    z-index: 2;
-}
-
-.plyr__marker {
-    position: absolute;
-    bottom: 0;
-    width: 3px;
-    height: 100%;
-    background: rgba(255, 215, 0, 0.8); /* Color dorado para Opening */
-    pointer-events: all;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.plyr__marker[data-label*="Ending"] {
-    background: rgba(255, 100, 100, 0.8); /* Color rojo para Ending */
-}
-
-.plyr__marker:hover {
-    height: 120%;
-    width: 4px;
-    background: rgba(255, 215, 0, 1);
-}
-
-.plyr__marker[data-label*="Ending"]:hover {
-    background: rgba(255, 100, 100, 1);
-}
-
-/* Tooltip para mostrar el label */
-.plyr__marker::before {
-    content: attr(data-label);
-    position: absolute;
-    bottom: 100%;
-    left: 50%;
-    transform: translateX(-50%) translateY(-8px);
-    background: rgba(0, 0, 0, 0.9);
-    color: white;
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-size: 12px;
-    white-space: nowrap;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.2s ease;
-}
-
-.plyr__marker:hover::before {
-    opacity: 1;
-}
-.plyr__marker {
-    position: absolute;
-    height: 100%;
-    background: rgba(255, 255, 255, 0.35);
-    cursor: pointer;
-}

docker/views/css/books/book.css

@@ -1,547 +1,228 @@
-.back-btn {
-    position: fixed;
-    top: 2rem;
-    left: 2rem;
-    z-index: 100;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.8rem 1.5rem;
-    background: var(--color-glass-bg);
-    backdrop-filter: blur(12px);
-    border: var(--border-subtle);
-    border-radius: var(--radius-full);
-    color: white;
-    text-decoration: none;
-    font-weight: 600;
-    transition: all 0.2s ease;
-}
-.back-btn:hover {
-    background: rgba(255, 255, 255, 0.15);
-    transform: translateX(-5px);
+:root {
+    --bg-card: rgba(255, 255, 255, 0.04);
+    --border-subtle: rgba(255, 255, 255, 0.1);
+    --color-primary: #8b5cf6;
 }
 
-.hero-wrapper {
-    position: relative;
-    width: 100%;
-    height: 60vh;
-    overflow: hidden;
-}
-.hero-background {
-    position: absolute;
-    inset: 0;
-    z-index: 0;
-}
-.hero-background img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    opacity: 0.4;
-    filter: blur(8px);
-    transform: scale(1.1);
-}
-.hero-overlay {
-    position: absolute;
-    inset: 0;
-    z-index: 1;
-    background: linear-gradient(
-        to bottom,
-        transparent 0%,
-        var(--color-bg-base) 100%
-    );
+/* --- BASICS --- */
+.back-btn {
+    position: fixed; top: 2rem; left: 2rem; z-index: 100; display: flex; align-items: center; gap: 0.5rem;
+    padding: 0.8rem 1.5rem; background: var(--color-glass-bg); backdrop-filter: blur(12px);
+    border: var(--border-subtle); border-radius: 8px; /* Anime style */
+    color: white; text-decoration: none; font-weight: 600; transition: all 0.2s ease;
 }
+.back-btn:hover { background: rgba(255, 255, 255, 0.15); transform: translateX(-5px); }
+
+.hero-wrapper { position: relative; width: 100%; height: 60vh; overflow: hidden; }
+.hero-background { position: absolute; inset: 0; z-index: 0; }
+.hero-background img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; filter: blur(8px); transform: scale(1.1); }
+.hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, transparent 0%, var(--color-bg-base) 100%); }
 
 .content-container {
-    position: relative;
-    z-index: 10;
-    max-width: 1600px;
-    margin: -350px auto 0 auto;
+    position: relative; z-index: 10; max-width: 1400px; margin: -300px auto 0 auto;
     padding: 0 3rem 4rem 3rem;
-    display: grid;
-    grid-template-columns: 260px 1fr;
-    gap: 3rem;
-    align-items: flex-start;
-    animation: slideUp 0.8s ease;
 }
 
-.hero-content {
-    display: none;
-}
-
-.sidebar {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-    position: sticky;
-    top: calc(var(--nav-height) + 2rem);
-    align-self: flex-start;
-    z-index: 20;
-}
-
-.poster-card {
-    width: 100%;
-    aspect-ratio: 2/3;
-    border-radius: var(--radius-lg);
-    overflow: hidden;
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    background: #1a1a1a;
-}
-.poster-card img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.info-grid {
-    background: var(--color-bg-elevated);
-    border: var(--border-subtle);
-    border-radius: var(--radius-md);
-    padding: 1.25rem;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-.info-item h4 {
-    margin: 0 0 0.25rem 0;
-    font-size: 0.8rem;
-    color: var(--color-text-secondary);
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-}
-.info-item span {
-    font-weight: 600;
-    font-size: 0.95rem;
-}
-
-.main-content {
-    display: flex;
-    flex-direction: column;
-    padding-top: 4rem;
-    justify-content: flex-start;
-}
-
-.book-header {
-    margin-bottom: 1.5rem;
-}
+/* --- HEADER SECTION --- */
+.book-header-section { margin-bottom: 4rem; max-width: 900px; }
 .book-title {
-    font-size: 3.5rem;
-    font-weight: 900;
-    line-height: 1.1;
-    margin: 0 0 1rem 0;
-    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
+    font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900;
+    margin-bottom: 0.5rem; text-shadow: 0 4px 30px rgba(0,0,0,0.6); line-height: 1.1;
 }
 
-.meta-row {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    margin-bottom: 1.5rem;
+.hero-meta-info {
+    display: flex; align-items: center; gap: 0.8rem;
+    color: rgba(255,255,255,0.7); font-weight: 600; margin-bottom: 1.2rem;
     flex-wrap: wrap;
 }
-.pill {
-    padding: 0.4rem 1rem;
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 99px;
-    font-size: 0.9rem;
-    font-weight: 600;
-    border: var(--border-subtle);
-    backdrop-filter: blur(10px);
-}
-.pill.score {
-    background: rgba(34, 197, 94, 0.2);
-    color: #4ade80;
-    border-color: rgba(34, 197, 94, 0.2);
+.meta-separator { color: rgba(255,255,255,0.3); font-size: 0.8rem; }
+
+.pill-local {
+    background: #22c55e; color: black; padding: 2px 8px;
+    border-radius: 4px; font-size: 0.75rem; font-weight: 900;
 }
 
-#description {
-    display: none;
+.hero-description-mini {
+    font-size: 1.05rem; line-height: 1.5; color: rgba(255,255,255,0.8);
+    margin-bottom: 1.2rem; max-width: 700px;
+    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
 }
-#year {
-    display: none;
+.hero-tags {
+    display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem;
+    color: rgba(255,255,255,0.5); font-weight: 500;
 }
 
-.action-row {
-    display: flex;
-    gap: 1rem;
-}
-.btn-primary {
-    padding: 0.8rem 2rem;
-    background: white;
-    color: black;
-    border: none;
-    border-radius: 99px;
-    font-weight: 800;
-    cursor: pointer;
-    transition: transform 0.2s;
-}
-.btn-primary:hover {
-    transform: scale(1.05);
+/* --- BUTTONS --- */
+.action-row { display: flex; align-items: center; gap: 1rem; }
+.btn-read {
+    padding: 0.8rem 2.2rem; background: white; color: black;
+    border-radius: 8px; font-weight: 800; border: none; cursor: pointer;
+    display: flex; align-items: center; gap: 0.6rem; transition: 0.2s ease;
 }
+.btn-read:hover { transform: scale(1.03); filter: brightness(0.9); }
 
-.btn-secondary {
-    padding: 0.8rem 2rem;
-    background: rgba(255, 255, 255, 0.1);
-    color: white;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 99px;
-    font-weight: 700;
-    cursor: pointer;
-    transition: 0.2s;
-    backdrop-filter: blur(10px);
-}
-.btn-secondary:hover {
-    background: rgba(255, 255, 255, 0.2);
+.btn-add-list {
+    padding: 0.8rem 1.5rem; background: rgba(255,255,255,0.1);
+    border: 1px solid rgba(255,255,255,0.2); color: white;
+    border-radius: 8px; font-weight: 700; cursor: pointer; transition: 0.2s;
 }
+.btn-add-list:hover { background: rgba(255,255,255,0.2); }
 
-.btn-blur {
-    padding: 0.8rem 2rem;
-    background: rgba(255, 255, 255, 0.1);
-    color: white;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 99px;
-    font-weight: 700;
-    cursor: pointer;
-    transition: 0.2s;
-    backdrop-filter: blur(10px);
-}
-.btn-blur:hover {
-    background: rgba(255, 255, 255, 0.2);
-}
 
-.chapters-section {
-    margin-top: 1rem;
-}
-.section-title {
-    display: flex;
-    align-items: center;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    padding-bottom: 0.8rem;
-    margin-bottom: 1.5rem;
-}
-.section-title h2 {
-    font-size: 1.5rem;
-    margin: 0;
-    border-left: 4px solid var(--color-primary);
-    padding-left: 1rem;
-}
+/* --- MAIN LAYOUT --- */
+.main-layout { display: grid; grid-template-columns: 280px 1fr; gap: 4rem; margin-top: 2rem; }
 
-.chapters-table-wrapper {
-    background: var(--color-bg-elevated);
-    border-radius: var(--radius-md);
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    overflow: hidden;
-}
-.chapters-table {
-    width: 100%;
-    border-collapse: collapse;
-    text-align: left;
-}
-.chapters-table th {
-    padding: 0.8rem 1.2rem;
-    background: rgba(255, 255, 255, 0.03);
-    color: var(--color-text-secondary);
-    font-weight: 600;
-    font-size: 0.85rem;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-}
-.chapters-table td {
-    padding: 1rem 1.2rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-    color: var(--color-text-primary);
-    font-size: 0.95rem;
-}
-.chapters-table tr:last-child td {
-    border-bottom: none;
-}
-.chapters-table tr:hover {
-    background: var(--color-bg-elevated-hover);
+/* Sidebar */
+.poster-section { display: flex; flex-direction: column; gap: 1.5rem; }
+.poster-card {
+    border-radius: 12px; overflow: hidden; width: 100%;
+    box-shadow: 0 30px 60px rgba(0,0,0,0.5); border: 1px solid var(--border-subtle);
 }
+.poster-card img { width: 100%; height: auto; display: block; aspect-ratio: 2/3; object-fit: cover; }
 
-.filter-select {
-    appearance: none;
-    -webkit-appearance: none;
-    background-color: var(--color-bg-elevated);
-    color: var(--color-text-primary);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    padding: 0.5rem 2rem 0.5rem 1rem;
-    border-radius: 99px;
-    font-size: 0.9rem;
-    font-weight: 500;
-    cursor: pointer;
-    outline: none;
-    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: right 1rem center;
+/* Sidebar Extra Info (Synonyms) */
+.sidebar-extra-info {
+    background: rgba(255,255,255,0.03); padding: 1.5rem;
+    border-radius: 16px; border: 1px solid rgba(255,255,255,0.08);
 }
+.sidebar-label {
+    font-size: 0.8rem; color: #888; text-transform: uppercase; margin: 0 0 1rem 0; letter-spacing: 0.5px;
+}
+.synonyms-list {
+    list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem;
+}
+.synonyms-list li {
+    font-size: 0.9rem; color: #ddd; line-height: 1.4; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 0.5rem;
+}
+.synonyms-list li:last-child { border-bottom: none; }
 
-.filter-select:hover {
-    border-color: var(--color-primary);
-    background-color: var(--color-bg-elevated-hover);
-}
 
-.filter-select option {
-    background-color: var(--color-bg-elevated);
-    color: var(--color-text-primary);
-}
+/* --- CONTENT COLUMN --- */
+.content-section { margin-top: 4rem; }
+h2, .subsection-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 1.5rem; color: white; }
 
-.read-btn-small {
-    background: var(--color-primary);
-    color: white;
-    border: none;
-    padding: 0.4rem 0.9rem;
-    border-radius: 6px;
-    font-weight: 600;
-    cursor: pointer;
-    font-size: 0.8rem;
-    transition: 0.2s;
-}
-.read-btn-small:hover {
-    background: #7c3aed;
-}
+/* Chapters Section */
+.chapters-section { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1rem; }
+.chapters-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
 
-.pagination-controls {
-    display: flex;
-    justify-content: center;
-    gap: 1rem;
-    margin-top: 1.5rem;
-    align-items: center;
-}
-.page-btn {
-    background: var(--color-bg-elevated);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    color: white;
-    padding: 0.5rem 1rem;
-    border-radius: 8px;
-    cursor: pointer;
-    font-size: 0.9rem;
-}
-.page-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-.page-btn:hover:not(:disabled) {
-    border-color: var(--color-primary);
+/* Chapter Controls */
+.chapter-controls { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
+.glass-select, .glass-input {
+    appearance: none; -webkit-appearance: none;
+    background-color: rgba(0, 0, 0, 0.4);
+    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='rgba(255,255,255,0.7)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9);
+    padding: 0.4rem 2rem 0.4rem 0.8rem; border-radius: 6px; font-size: 0.8rem; font-weight: 500; height: 34px;
+    outline: none; backdrop-filter: blur(4px); transition: all 0.2s ease; cursor: pointer; min-width: 110px;
 }
+.glass-input { background-image: none; padding: 0.4rem 0.8rem; width: 180px; }
+.glass-input:focus { border-color: var(--color-primary); width: 220px; }
+.glass-btn-icon { width: 34px; height: 34px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; }
+.glass-btn-icon:hover { background: var(--color-primary); border-color: var(--color-primary); }
 
-@keyframes slideUp {
-    from {
-        opacity: 0;
-        transform: translateY(40px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+/* Chapters Grid */
+.chapters-grid { display: flex; flex-direction: column; gap: 0.5rem; }
+.chapter-item {
+    display: flex; align-items: center; justify-content: space-between;
+    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05);
+    padding: 0.8rem 1.2rem; border-radius: 8px;
+    transition: all 0.2s ease; cursor: pointer; position: relative; overflow: hidden;
 }
+.chapter-item:hover { background: rgba(255, 255, 255, 0.08); transform: translateX(5px); border-color: rgba(255, 255, 255, 0.2); }
+.chapter-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--color-primary); opacity: 0; transition: opacity 0.2s; }
+.chapter-info { display: flex; flex-direction: column; gap: 0.2rem; }
+.chapter-number { font-size: 0.85rem; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; }
+.chapter-title { font-size: 1rem; font-weight: 500; color: white; }
+.chapter-meta { display: flex; align-items: center; gap: 1rem; font-size: 0.85rem; color: #888; }
+.lang-tag { font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,0.1); text-transform: uppercase; color: #ccc; }
+
+
+/* --- RELATIONS (Horizontal Cards) --- */
+.relations-horizontal { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
+.relation-card-horizontal {
+    display: flex; background: var(--bg-card); border: 1px solid var(--border-subtle);
+    border-radius: 10px; overflow: hidden; transition: 0.2s; cursor: pointer;
+}
+.relation-card-horizontal:hover { background: rgba(255,255,255,0.08); transform: translateX(5px); }
+.rel-img { width: 85px; height: 110px; object-fit: cover; }
+.rel-info { padding: 1rem; display: flex; flex-direction: column; justify-content: center; }
+.rel-type {
+    font-size: 0.7rem; color: var(--color-primary); font-weight: 800;
+    margin-bottom: 4px; background: rgba(139, 92, 246, 0.1); width: fit-content; padding: 2px 6px; border-radius: 4px;
+}
+.rel-title { font-size: 0.95rem; font-weight: 700; color: #eee; }
+
+
+/* --- CHARACTERS (Grid Style) --- */
+.characters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 1rem; }
+.character-item { display: flex; align-items: center; gap: 1rem; }
+.char-avatar { width: 60px; height: 60px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
+.char-avatar img { width: 100%; height: 100%; object-fit: cover; }
+.char-info { display: flex; flex-direction: column; gap: 2px; }
+.char-name { font-size: 1rem; font-weight: 700; color: #fff; }
+.char-role { font-size: 0.8rem; color: #888; font-weight: 500; }
+
+/* --- PAGINATION --- */
+.pagination-controls { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; align-items: center; }
+.page-btn { background: var(--color-bg-elevated); border: 1px solid rgba(255, 255, 255, 0.1); color: white; padding: 0.5rem 1rem; border-radius: 8px; cursor: pointer; font-size: 0.9rem; }
+.page-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.page-btn:hover:not(:disabled) { border-color: var(--color-primary); }
+
 
 @media (max-width: 1024px) {
-    .hero-wrapper {
-        height: 40vh;
-    }
-    .content-container {
-        grid-template-columns: 1fr;
-        margin-top: -80px;
-        padding: 0 1.5rem 4rem 1.5rem;
-    }
-    .poster-card {
-        display: none;
-    }
-
-    .main-content {
-        padding-top: 0;
-        align-items: center;
-        text-align: center;
-    }
-    .book-title {
-        font-size: 2.2rem;
-    }
-    .meta-row {
-        justify-content: center;
-    }
-    .action-row {
-        justify-content: center;
-        width: 100%;
-    }
-    .btn-primary,
-    .btn-blur {
-        flex: 1;
-        justify-content: center;
-    }
-
-    .sidebar {
-        display: none;
-    }
-    .chapters-table th:nth-child(3),
-    .chapters-table td:nth-child(3) {
-        display: none;
-    }
-    .chapters-table th:nth-child(4),
-    .chapters-table td:nth-child(4) {
-        display: none;
-    }
+    .content-container { margin-top: -150px; padding: 0 1.5rem; }
+    .main-layout { grid-template-columns: 1fr; gap: 2rem; }
+    .poster-section { display: flex; flex-direction: column; align-items: center; }
+    .poster-card { width: 220px; }
+    .metadata-sidebar { width: 100%; max-width: 400px; }
 }
 
 @media (max-width: 768px) {
-    .hero-wrapper {
-        height: 35vh;
-    }
-
-    .content-container {
-        display: flex;
-        flex-direction: column;
-        margin-top: -60px;
-        padding: 0 1rem 3rem 1rem;
-        gap: 1.5rem;
-    }
-
-    .sidebar {
-        display: flex !important;
-        position: static;
-        width: 100%;
-        align-items: center;
-        order: 1;
-    }
-
-    .poster-card {
-        display: block !important;
-        width: 160px;
-        margin: 0 auto;
-        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
-        border: 2px solid rgba(255, 255, 255, 0.15);
-    }
-
-    .info-grid {
-        display: none;
-    }
-
-    .main-content {
-        order: 2;
-        padding-top: 0;
-        text-align: center;
-        align-items: center;
-    }
-
-    .book-title {
-        font-size: 2rem;
-        line-height: 1.2;
-        margin-bottom: 0.8rem;
-    }
-
-    .meta-row {
-        justify-content: center;
-        gap: 0.5rem;
-    }
-
-    .pill {
-        padding: 0.3rem 0.8rem;
-        font-size: 0.8rem;
-    }
-
-    .action-row {
-        flex-direction: column;
-        width: 100%;
-        gap: 0.8rem;
-    }
-
-    .btn-primary,
-    .btn-secondary,
-    .btn-blur {
-        width: 100%;
-        justify-content: center;
-        padding: 0.9rem;
-    }
-
-    .chapters-table-wrapper {
-        background: transparent;
-        border: none;
-    }
-
-    .chapters-table thead {
-        display: none;
-    }
-
-    .chapters-table tbody,
-    .chapters-table tr,
-    .chapters-table td {
-        display: block;
-        width: 100%;
-    }
-
-    .chapters-table tr {
-        background: var(--color-bg-elevated);
-        border: 1px solid rgba(255, 255, 255, 0.05);
-        border-radius: 12px;
-        margin-bottom: 0.8rem;
-        padding: 1rem;
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-    }
-
-    .chapters-table td {
-        padding: 0;
-        border: none;
-        text-align: left;
-    }
-
-    .chapters-table td:nth-child(1) {
-        font-size: 1rem;
-        font-weight: 700;
-        color: white;
-    }
-
-    .chapters-table td:nth-child(2) {
-        font-size: 0.8rem;
-        color: var(--color-text-secondary);
-        order: 3;
-    }
-
-    .chapters-table td:last-child {
-        margin-top: 0.5rem;
-        order: 4;
-    }
-
-    .chapters-table td:last-child,
-    .chapters-table td:nth-child(4) {
-        display: block !important;
-        width: 100%;
-        margin-top: 1rem;
-        padding-top: 0.75rem;
-        border-top: 1px solid rgba(255, 255, 255, 0.05);
-    }
-
-    .read-btn-small {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        padding: 0.8rem;
-        font-size: 0.95rem;
-        background: var(--color-primary);
-        border: none;
-        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
-    }
-
-    .chapters-table td:nth-child(3) {
-        display: block !important;
-        font-size: 0.8rem;
-        color: var(--color-text-secondary);
-        margin-bottom: 0.25rem;
-    }
-
-    .chapters-table td:nth-child(3)::before {
-        content: "Provider: ";
-        font-weight: 700;
-        color: #555;
-    }
-
-    .read-btn-small {
-        width: 100%;
-        padding: 0.7rem;
-        background: rgba(255, 255, 255, 0.1);
-        border: 1px solid rgba(255, 255, 255, 0.2);
-    }
+    .hero-wrapper { height: 40vh; }
+    .book-title { font-size: 2.5rem; }
+    .action-row { flex-direction: column; width: 100%; }
+    .btn-read, .btn-add-list { width: 100%; justify-content: center; }
+    .chapters-header { flex-direction: column; align-items: flex-start; }
+    .chapter-controls { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
+    .search-box { grid-column: span 2; }
+    .glass-input { width: 100%; }
+}
+
+.chapter-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    border-bottom: 1px solid rgba(255,255,255,0.1);
+}
+
+.chapter-actions {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+
+.download-btn {
+    background: transparent;
+    border: 1px solid rgba(255,255,255,0.3);
+    color: #ccc;
+    padding: 6px 10px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.download-btn:hover {
+    background: rgba(255,255,255,0.1);
+    border-color: #fff;
+    color: #fff;
+}
+
+.download-btn:disabled {
+    opacity: 0.7;
+    cursor: wait;
 }

docker/views/css/books/reader.css

@@ -613,3 +613,13 @@ input[type="color"] {
         object-fit: contain !important;
     }
 }
+
+.double-container.break-double {
+    display: block;
+}
+
+.double-container.break-double img {
+    width: 100%;
+    max-width: 100%;
+    display: block;
+}

docker/views/css/components/anilist-modal.css

@@ -1,335 +1,279 @@
+:root {
+
+    --color-primary: #8b5cf6;
+    --bg-modal: rgba(15, 15, 15, 0.95);
+    --border-subtle: rgba(255, 255, 255, 0.1);
+    --input-bg: rgba(0, 0, 0, 0.4);
+}
+
 .modal-overlay {
     position: fixed;
     inset: 0;
-    background: rgba(0, 0, 0, 0.9);
-    backdrop-filter: blur(10px);
+    background: rgba(0, 0, 0, 0.85);
+    backdrop-filter: blur(8px);
     z-index: 2000;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 1rem;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+}
+
+.modal-overlay.active {
+    opacity: 1;
+    visibility: visible;
 }
 
 .modal-content {
-    background: var(--color-bg-amoled);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: var(--radius-lg);
-    max-width: 900px;
+    background: var(--bg-modal);
+    border: 1px solid var(--border-subtle);
+    border-radius: 16px;
+    max-width: 850px;
     width: 95%;
-    padding: 0;
     position: relative;
-    animation: modalSlideUp 0.3s ease;
-    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
+    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.9),
+    0 0 0 1px rgba(255, 255, 255, 0.05);
     max-height: 90vh;
     display: flex;
     flex-direction: column;
+    transform: scale(0.95) translateY(10px);
+    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-@keyframes modalSlideUp {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+.modal-overlay.active .modal-content {
+    transform: scale(1) translateY(0);
 }
 
 .modal-close {
     position: absolute;
-    top: 1rem;
-    right: 1rem;
-    background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    color: white;
-    width: 36px;
-    height: 36px;
+    top: 1.2rem;
+    right: 1.2rem;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--border-subtle);
+    color: #ccc;
+    width: 32px;
+    height: 32px;
     border-radius: 8px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 1.2rem;
-    transition: 0.2s;
+    font-size: 1rem;
+    transition: all 0.2s;
     z-index: 2001;
 }
 
 .modal-close:hover {
-    background: var(--color-danger);
-    border-color: var(--color-danger);
+    background: #ef4444;
+    border-color: #ef4444;
+    color: white;
+    transform: rotate(90deg);
 }
 
 .modal-title {
-    font-size: 1.8rem;
+    font-size: 1.5rem;
     font-weight: 800;
-    padding: 1.5rem 2rem 0.5rem;
-    margin-bottom: 0;
-    color: var(--color-text-primary);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    padding: 2rem 2.5rem 1rem 2.5rem;
+    margin: 0;
+    color: white;
+    border-bottom: 1px solid var(--border-subtle);
+    letter-spacing: -0.02em;
+    background: linear-gradient(to right, #fff, #aaa);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
 }
 
 .modal-body {
-    display: flex;
-    flex-direction: column;
+    padding: 0 2.5rem;
     overflow-y: auto;
-    padding: 0 2rem;
     flex-grow: 1;
+
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255,255,255,0.2) transparent;
 }
 
+.modal-body::-webkit-scrollbar { width: 6px; }
+.modal-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
+
 .modal-fields-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.5rem 2rem;
-    padding: 1.5rem 0;
+    padding: 2rem 0;
 }
 
 .form-group {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
-}
-
-.form-group.notes-group {
-    grid-column: 1 / span 2;
-}
-.form-group.checkbox-group {
-    grid-column: 3 / 4;
-    align-self: flex-end;
-    margin-bottom: 0.5rem;
-}
-.form-group.full-width {
-    grid-column: 1 / -1;
+    gap: 0.6rem;
 }
 
 .form-group label {
-    font-size: 0.8rem;
+    font-size: 0.75rem;
     font-weight: 700;
-    color: var(--color-text-secondary);
+    color: rgba(255, 255, 255, 0.6);
     text-transform: uppercase;
-    letter-spacing: 0.5px;
+    letter-spacing: 0.05em;
 }
 
 .form-input {
-    background: var(--color-bg-field);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    color: var(--color-text-primary);
-    padding: 0.8rem 1rem;
-    border-radius: 8px;
+    background: var(--input-bg);
+    border: 1px solid var(--border-subtle);
+    color: white;
+    padding: 0.9rem 1rem;
+    border-radius: 10px;
     font-family: inherit;
-    font-size: 1rem;
-    transition: 0.2s;
+    font-size: 0.95rem;
+    font-weight: 500;
+    transition: all 0.2s ease;
 }
 
 .form-input:focus {
     outline: none;
+    background: rgba(0,0,0,0.6);
     border-color: var(--color-primary);
-    box-shadow: 0 0 10px var(--color-primary-glow);
+    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
 }
 
-.notes-textarea {
-    resize: vertical;
-    min-height: 100px;
-}
+.form-group.notes-group { grid-column: 1 / span 2; }
+.form-group.checkbox-group { grid-column: 3 / 4; align-self: end; margin-bottom: 0.8rem; }
+.form-group.full-width { grid-column: 1 / -1; }
+.notes-textarea { resize: vertical; min-height: 100px; line-height: 1.5; }
 
-.date-group {
-    display: flex;
-    gap: 1rem;
-}
-
-.date-input-pair {
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-}
+.date-group { display: flex; gap: 1.5rem; }
+.date-input-pair { flex: 1; display: flex; flex-direction: column; gap: 0.6rem; }
 
 .checkbox-group {
     flex-direction: row;
     align-items: center;
-    gap: 1rem;
+    background: rgba(255,255,255,0.02);
+    padding: 0.8rem;
+    border-radius: 8px;
+    border: 1px solid transparent;
+    transition: 0.2s;
 }
 
+.checkbox-group:hover { border-color: var(--border-subtle); }
+
 .form-checkbox {
-    width: 18px;
-    height: 18px;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    background: var(--color-bg-base);
-    border-radius: 4px;
+    width: 20px;
+    height: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    background: transparent;
+    border-radius: 5px;
     cursor: pointer;
-    -webkit-appearance: none;
     appearance: none;
     position: relative;
-    transition: all 0.2s;
-    flex-shrink: 0;
+    transition: 0.2s;
 }
 
 .form-checkbox:checked {
     background: var(--color-primary);
     border-color: var(--color-primary);
+    box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
 }
 
 .form-checkbox:checked::after {
     content: "✓";
     position: absolute;
-    top: 50%;
-    left: 50%;
+    top: 50%; left: 50%;
     transform: translate(-50%, -50%);
     color: white;
-    font-size: 14px;
+    font-size: 12px;
+    font-weight: 900;
 }
 
 .modal-actions {
     display: flex;
     gap: 1rem;
-    margin-top: 0;
-    justify-content: flex-end;
-    flex-shrink: 0;
-    padding: 1rem 2rem;
-    border-top: 1px solid rgba(255, 255, 255, 0.05);
-    background: var(--color-bg-amoled);
-    position: sticky;
-    bottom: 0;
-    z-index: 10;
+    padding: 1.5rem 2.5rem;
+    border-top: 1px solid var(--border-subtle);
+    background: rgba(10, 10, 10, 0.3);
+    border-bottom-left-radius: 16px;
+    border-bottom-right-radius: 16px;
+    backdrop-filter: blur(10px);
 }
 
-.btn-primary,
-.btn-secondary,
-.btn-danger {
-    padding: 0.8rem 1.5rem;
-    border-radius: 999px;
+.btn-primary, .btn-secondary, .btn-danger {
+    padding: 0.85rem 1.8rem;
+    border-radius: 10px;
     font-weight: 700;
-    font-size: 0.95rem;
+    font-size: 0.9rem;
     border: none;
     cursor: pointer;
-    transition:
-        transform 0.2s,
-        background 0.2s;
-    flex: none;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .btn-primary {
     background: var(--color-primary);
     color: white;
+    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
 }
 
 .btn-primary:hover {
-    transform: scale(1.05);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
+    filter: brightness(1.1);
 }
 
 .btn-secondary {
-    background: rgba(255, 255, 255, 0.1);
-    color: white;
-    border: 1px solid rgba(255, 255, 255, 0.2);
+    background: transparent;
+    border: 1px solid var(--border-subtle);
+    color: #ccc;
 }
 
 .btn-secondary:hover {
-    background: rgba(255, 255, 255, 0.15);
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+    border-color: white;
 }
 
 .btn-danger {
-    background: var(--color-danger);
-    color: white;
+    background: rgba(239, 68, 68, 0.1);
+    color: #ef4444;
+    border: 1px solid rgba(239, 68, 68, 0.2);
     margin-right: auto;
 }
 
 .btn-danger:hover {
-    opacity: 0.9;
+    background: #ef4444;
+    color: white;
+    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
 }
 
-.modal-overlay {
-    display: none;
-    opacity: 0;
-}
-.modal-overlay.active {
-    display: flex;
-    opacity: 1;
-}
-
-@media (max-width: 600px) {
+@media (max-width: 768px) {
     .modal-content {
         width: 100%;
         height: 100%;
         max-height: 100vh;
         border-radius: 0;
-        display: flex;
-        flex-direction: column;
+        border: none;
     }
 
-    .modal-title {
-        font-size: 1.4rem;
-        padding: 1rem;
+    .modal-title { padding: 1.5rem 1.5rem 1rem; }
+    .modal-body { padding: 0 1.5rem; }
+    .modal-fields-grid { display: flex; flex-direction: column; gap: 1.2rem; }
 
-        padding-right: 3rem;
-    }
-
-    .modal-close {
-        top: 0.8rem;
-        right: 0.8rem;
-        width: 40px;
-        height: 40px;
-        background: rgba(255, 255, 255, 0.08);
-    }
-
-    .modal-body {
-        padding: 0 1rem;
-    }
-
-    .modal-fields-grid {
-        display: flex;
-        flex-direction: column;
-        gap: 1.2rem;
-        padding: 1rem 0;
-    }
-
-    .form-group,
-    .form-group.notes-group,
-    .form-group.checkbox-group,
-    .form-group.full-width {
+    .form-group, .form-group.notes-group,
+    .form-group.checkbox-group, .form-group.full-width {
         grid-column: auto;
         width: 100%;
     }
 
-    .date-group {
-        flex-direction: column;
-        gap: 1rem;
-    }
-
-    .notes-textarea {
-        min-height: 120px;
-    }
-
+    .date-group { flex-direction: column; gap: 1rem; }
     .modal-actions {
         flex-direction: column;
         gap: 0.8rem;
-        padding: 1rem;
-        background: var(--color-bg-elevated);
+        padding: 1.5rem;
     }
 
-    .btn-primary,
-    .btn-secondary,
-    .btn-danger {
-        width: 100%;
-        padding: 1rem;
-        margin: 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-size: 1rem;
-    }
-
-    .btn-primary {
-        order: 1;
-    }
-    .btn-secondary {
-        order: 2;
-    }
-    .btn-danger {
-        order: 3;
-        margin-top: 0.5rem;
-        background: rgba(239, 68, 68, 0.2);
-        color: #f87171;
-        border: 1px solid rgba(239, 68, 68, 0.3);
-    }
+    .btn-primary, .btn-secondary, .btn-danger { width: 100%; padding: 1rem; }
+    .btn-primary { order: 1; }
+    .btn-secondary { order: 2; }
+    .btn-danger { order: 3; margin-top: 0.5rem; }
 }

docker/views/css/components/local-library.css

@@ -1,132 +0,0 @@
-.library-mode-btn {
-    padding: 0.6rem 1.2rem;
-    background: rgba(255, 255, 255, 0.05);
-    border-radius: var(--radius-full);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    color: var(--color-text-secondary);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-weight: 600;
-    font-size: 0.9rem;
-    transition: all 0.2s;
-}
-
-.library-mode-btn:hover {
-    background: rgba(255, 255, 255, 0.1);
-    color: white;
-}
-
-.library-mode-btn.active {
-    background: var(--color-primary);
-    color: white;
-    border-color: var(--color-primary);
-}
-
-.library-mode-btn svg {
-    width: 18px;
-    height: 18px;
-}
-
-.local-library-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-    gap: 1.5rem;
-    padding: 1rem 0;
-}
-
-.local-card {
-    cursor: pointer;
-    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
-}
-
-.local-card:hover {
-    transform: translateY(-8px);
-}
-
-.local-card-info {
-    padding: 0.8rem 0;
-}
-
-.local-card-title {
-    font-size: 1rem;
-    font-weight: 600;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    margin-bottom: 0.5rem;
-}
-
-.match-status {
-    font-size: 0.85rem;
-    display: inline-block;
-    padding: 0.25rem 0.75rem;
-    border-radius: var(--radius-sm);
-}
-
-.status-linked {
-    background: rgba(34, 197, 94, 0.2);
-    color: var(--color-success);
-}
-
-.status-unlinked {
-    background: rgba(239, 68, 68, 0.2);
-    color: var(--color-danger);
-}
-
-.hidden {
-    display: none !important;
-}
-
-.skeleton-card {
-    width: 100%;
-    aspect-ratio: 2/3;
-    background: linear-gradient(90deg, #18181b 25%, #27272a 50%, #18181b 75%);
-    background-size: 200% 100%;
-    animation: shimmer 1.5s infinite;
-    border-radius: var(--radius-md);
-}
-
-@keyframes shimmer {
-    0% { background-position: 200% 0; }
-    100% { background-position: -200% 0; }
-}
-
-.hero-wrapper {
-    position: relative;
-}
-
-.library-mode-btn.icon-only {
-    position: absolute;
-    bottom: 2rem;
-    right: 2rem;
-    z-index: 50;
-}
-
-
-.hero-mode-switch .library-mode-btn {
-    backdrop-filter: blur(10px);
-}
-
-.local-filters {
-    display: flex;
-    gap: 1rem;
-    margin-bottom: 1rem;
-    flex-wrap: wrap;
-}
-
-.filter-btn {
-    padding: 0.4rem 0.9rem;
-    border-radius: 999px;
-    background: rgba(255,255,255,0.06);
-    border: 1px solid rgba(255,255,255,0.12);
-    color: #bbb;
-    cursor: pointer;
-}
-
-.filter-btn.active {
-    background: var(--color-primary);
-    color: white;
-    border-color: var(--color-primary);
-}

docker/views/css/list.css

@@ -1,507 +0,0 @@
-.container {
-    max-width: 1600px;
-    margin: 0 auto;
-    padding: 3rem;
-}
-
-.header-section {
-    margin-bottom: 3rem;
-    margin-top: 3rem;
-}
-
-.page-title {
-    font-size: 3rem;
-    font-weight: 900;
-    margin-bottom: 2rem;
-    background: linear-gradient(135deg, var(--color-primary), #a78bfa);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-}
-
-.stats-row {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 1.5rem;
-}
-
-.stat-card {
-    background: var(--color-bg-elevated);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: var(--radius-lg);
-    padding: 1.5rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    transition:
-        transform 0.3s,
-        box-shadow 0.3s;
-    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
-}
-
-.stat-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 15px 35px var(--color-primary-glow);
-}
-
-.stat-value {
-    font-size: 2.5rem;
-    font-weight: 900;
-    color: var(--color-primary);
-}
-
-.stat-label {
-    font-size: 0.9rem;
-    color: var(--color-text-secondary);
-    font-weight: 600;
-}
-
-.filters-section {
-    display: flex;
-    gap: 1.5rem;
-    margin-bottom: 2rem;
-    padding: 1.5rem;
-    background: var(--color-bg-elevated);
-    border-radius: var(--radius-md);
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    flex-wrap: wrap;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
-}
-
-.filter-group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    flex: 1;
-    min-width: 150px;
-}
-
-.filter-group label {
-    font-size: 0.8rem;
-    font-weight: 700;
-    color: var(--color-text-secondary);
-    text-transform: uppercase;
-    letter-spacing: 1px;
-}
-
-.filter-select {
-    background: var(--color-bg-base);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    color: var(--color-text-primary);
-    padding: 0.7rem 1rem;
-    border-radius: 8px;
-    font-family: inherit;
-    cursor: pointer;
-    transition: 0.2s;
-    -webkit-appearance: none;
-    appearance: none;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23a1a1aa'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: right 0.7rem center;
-    background-size: 1.2em;
-    padding-right: 2.5rem;
-}
-
-.filter-select:hover {
-    border-color: var(--color-primary);
-}
-
-.filter-select:focus {
-    outline: none;
-    border-color: var(--color-primary);
-    box-shadow: 0 0 10px var(--color-primary-glow);
-}
-
-.view-toggle {
-    display: flex;
-    gap: 0.5rem;
-}
-
-.view-btn {
-    background: var(--color-bg-base);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    color: var(--color-text-secondary);
-    padding: 0.7rem;
-    border-radius: 8px;
-    cursor: pointer;
-    transition: 0.2s;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.view-btn:hover {
-    border-color: var(--color-primary);
-    color: white;
-}
-
-.view-btn.active {
-    background: var(--color-primary);
-    border-color: var(--color-primary);
-    color: white;
-}
-
-.loading-state {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 5rem 0;
-    gap: 1.5rem;
-}
-
-.spinner {
-    width: 50px;
-    height: 50px;
-    border: 4px solid rgba(139, 92, 246, 0.1);
-    border-top-color: var(--color-primary);
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-.empty-state {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 5rem 0;
-    gap: 1.5rem;
-    color: var(--color-text-secondary);
-}
-
-.empty-state svg {
-    opacity: 0.3;
-}
-
-.empty-state h2 {
-    font-size: 1.8rem;
-    color: var(--color-text-primary);
-}
-
-.list-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
-    gap: 2rem;
-}
-
-.list-grid.list-view {
-    grid-template-columns: 1fr;
-    gap: 1rem;
-}
-
-.list-item {
-    background: var(--color-bg-elevated-hover);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: var(--radius-md);
-    overflow: hidden;
-    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
-}
-
-.list-item:hover {
-    transform: translateY(-8px);
-    border-color: var(--color-primary);
-    box-shadow: 0 15px 30px var(--color-primary-glow);
-}
-
-.list-grid.list-view .list-item {
-    flex-direction: row;
-    align-items: center;
-    padding-right: 1rem;
-    transition: all 0.3s ease;
-}
-
-.list-grid.list-view .list-item:hover {
-    transform: none;
-    box-shadow: 0 4px 20px var(--color-primary-glow);
-}
-
-.item-poster-link {
-    display: block;
-    cursor: pointer;
-    flex-shrink: 0;
-}
-
-.item-poster {
-    width: 100%;
-    aspect-ratio: 2/3;
-    object-fit: cover;
-    background: #222;
-}
-
-.list-grid.list-view .item-poster {
-    width: 120px;
-    height: 180px;
-    aspect-ratio: auto;
-    border-radius: 8px;
-    margin: 1rem;
-}
-
-.item-content {
-    padding: 1rem;
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    justify-content: space-between;
-}
-
-.list-grid.list-view .item-content {
-    padding: 1rem 0;
-    flex-direction: row;
-    align-items: center;
-}
-.list-grid.list-view .item-content > div:first-child {
-    flex-basis: 75%;
-}
-
-.item-title {
-    font-size: 1rem;
-    font-weight: 800;
-    margin-bottom: 0.5rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    color: white;
-}
-
-.list-grid.list-view .item-title {
-    font-size: 1.3rem;
-    white-space: normal;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 400px;
-}
-
-.item-meta {
-    display: flex;
-    gap: 0.3rem;
-    margin-bottom: 0.5rem;
-    flex-wrap: wrap;
-
-    line-height: 1.4;
-}
-
-.meta-pill {
-    font-size: 0.65rem;
-    padding: 0.15rem 0.4rem;
-    border-radius: 999px;
-    font-weight: 700;
-    white-space: nowrap;
-    text-transform: uppercase;
-}
-
-.status-pill {
-    background: rgba(34, 197, 94, 0.2);
-    color: var(--color-success);
-    border: 1px solid rgba(34, 197, 94, 0.3);
-}
-
-.type-pill {
-    background: rgba(139, 92, 246, 0.15);
-    color: var(--color-primary);
-    border: 1px solid rgba(139, 92, 246, 0.3);
-}
-
-.source-pill {
-    background: rgba(255, 255, 255, 0.1);
-    color: var(--color-text-primary);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.repeat-pill {
-    background: rgba(59, 130, 246, 0.15);
-    color: #3b82f6;
-    border: 1px solid rgba(59, 130, 246, 0.3);
-    text-transform: none;
-}
-.private-pill {
-    background: rgba(251, 191, 36, 0.15);
-    color: #facc15;
-    border: 1px solid rgba(251, 191, 36, 0.3);
-    text-transform: none;
-}
-
-.progress-bar-container {
-    background: rgba(255, 255, 255, 0.08);
-    border-radius: 999px;
-    height: 10px;
-    overflow: hidden;
-    margin-bottom: 0.5rem;
-    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
-}
-
-.progress-bar {
-    height: 100%;
-    background: linear-gradient(90deg, var(--color-primary), #a78bfa);
-    border-radius: 999px;
-    transition: width 0.3s;
-}
-
-.progress-text {
-    font-size: 0.9rem;
-    color: var(--color-text-secondary);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-weight: 500;
-}
-
-.score-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.3rem;
-    font-weight: 700;
-    color: #facc15;
-    background: rgba(250, 204, 21, 0.1);
-    padding: 0.1rem 0.5rem;
-    border-radius: 4px;
-}
-
-.edit-icon-btn {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    z-index: 50;
-    background: rgba(18, 18, 21, 0.9);
-    backdrop-filter: blur(8px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    color: white;
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    transition:
-        opacity 0.3s,
-        transform 0.2s,
-        background 0.2s;
-}
-
-.list-item:hover .edit-icon-btn {
-    opacity: 1;
-    transform: scale(1.05);
-}
-
-.edit-icon-btn:hover {
-    background: var(--color-primary);
-    border-color: var(--color-primary);
-}
-
-.list-grid.list-view .edit-icon-btn {
-    position: relative;
-    top: auto;
-    right: auto;
-    margin-left: auto;
-    opacity: 1;
-    transform: none;
-    background: var(--color-bg-elevated);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-}
-.list-grid.list-view .list-item:hover .edit-icon-btn {
-    opacity: 1;
-    background: var(--color-primary);
-    border-color: var(--color-primary);
-    transform: none;
-}
-
-@media (max-width: 768px) {
-    .container {
-        padding: 1rem;
-        width: 100%;
-    }
-
-    .header-section {
-        margin-top: 1rem;
-        margin-bottom: 1.5rem;
-    }
-
-    .page-title {
-        font-size: 2rem;
-        text-align: center;
-        margin-bottom: 1.5rem;
-    }
-
-    .stats-row {
-        grid-template-columns: 1fr;
-        gap: 1rem;
-    }
-
-    .stat-card {
-        padding: 1rem;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-    }
-
-    .stat-value {
-        font-size: 1.8rem;
-        order: 2;
-    }
-
-    .stat-label {
-        font-size: 1rem;
-        order: 1;
-    }
-
-    .filters-section {
-        flex-direction: column;
-        padding: 1rem;
-        gap: 1rem;
-    }
-
-    .filter-group {
-        min-width: 100%;
-    }
-
-    .filter-select {
-        width: 100%;
-        padding: 0.8rem;
-    }
-
-    .view-toggle {
-        width: 100%;
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-    }
-
-    .view-btn {
-        justify-content: center;
-    }
-
-    .list-grid {
-        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-        gap: 1rem;
-    }
-
-    .item-title {
-        font-size: 0.9rem;
-    }
-
-    .item-meta {
-        gap: 0.2rem;
-    }
-
-    .meta-pill {
-        font-size: 0.6rem;
-        padding: 0.1rem 0.3rem;
-    }
-
-    .edit-icon-btn {
-        opacity: 1;
-        background: rgba(0, 0, 0, 0.6);
-        width: 35px;
-        height: 35px;
-    }
-}

docker/views/css/profile.css

@@ -0,0 +1,707 @@
+/* =========================================
+   1. LAYOUT & ESTRUCTURA BASE
+   ========================================= */
+.main-wrapper {
+    width: 100%;
+    min-height: 100vh;
+    padding-bottom: 6rem;
+    position: relative;
+    overflow-x: hidden;
+}
+
+/* Efecto de fondo ambiental (Glow superior) */
+.main-wrapper::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    height: 60vh;
+    background: radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.15), transparent 70%);
+    z-index: -1;
+    pointer-events: none;
+}
+
+.content-container {
+    max-width: 1600px;
+    margin: 0 auto;
+    padding: 0 3rem;
+    animation: fadeInUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+@keyframes fadeInUp {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* =========================================
+   2. PERFIL (Modern Header)
+   ========================================= */
+.profile-header {
+    background: var(--color-bg-elevated, #18181b);
+    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.05));
+    padding-bottom: 0;
+    margin-bottom: 2rem;
+    position: relative;
+}
+
+.profile-banner {
+    height: 200px;
+    background: linear-gradient(120deg, #2e1065, #8b5cf6);
+    width: 100%;
+    position: relative;
+}
+
+.profile-body {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 0 3rem;
+    display: flex;
+    align-items: flex-end;
+    gap: 2rem;
+    margin-top: -60px; /* Superposición sobre el banner */
+    position: relative;
+    z-index: 2;
+}
+
+/* Avatar */
+.profile-avatar-wrapper {
+    position: relative;
+    width: 160px;
+    height: 160px;
+    flex-shrink: 0;
+}
+
+.avatar-img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border: 5px solid var(--color-bg-base, #09090b);
+    object-fit: cover;
+    background: var(--color-bg-elevated, #18181b);
+}
+
+.avatar-edit-overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(0,0,0,0.5);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    opacity: 0;
+    cursor: pointer;
+    transition: 0.2s;
+    border: 5px solid transparent;
+}
+
+.profile-avatar-wrapper:hover .avatar-edit-overlay {
+    opacity: 1;
+}
+
+/* Detalles de Texto y Badges */
+.profile-details {
+    flex-grow: 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding-bottom: 1rem;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.username-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.profile-text h1 {
+    font-size: 2.5rem;
+    margin: 0;
+    line-height: 1.2;
+}
+
+.header-anilist-badge {
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    overflow: hidden;
+    transition: transform 0.2s, box-shadow 0.2s;
+    display: flex;
+}
+
+.header-anilist-badge img { width: 100%; height: 100%; object-fit: cover; }
+.header-anilist-badge:hover { transform: scale(1.1); box-shadow: 0 0 15px rgba(61, 180, 242, 0.5); }
+
+/* Estadísticas */
+.profile-stats-grid { display: flex; gap: 1.5rem; }
+
+.stat-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: rgba(255,255,255,0.03);
+    padding: 0.5rem 1.5rem;
+    border-radius: 12px;
+    border: 1px solid rgba(255,255,255,0.05);
+}
+
+.stat-value { font-size: 1.4rem; font-weight: 800; color: white; }
+.stat-label { font-size: 0.8rem; color: var(--color-text-secondary, #a1a1aa); text-transform: uppercase; letter-spacing: 0.5px; }
+
+/* Responsive Profile */
+@media (max-width: 900px) {
+    .profile-body { flex-direction: column; align-items: center; margin-top: -100px; text-align: center; }
+    .profile-details { flex-direction: column; align-items: center; width: 100%; }
+    .profile-stats-grid { justify-content: center; width: 100%; }
+    .username-wrapper { justify-content: center; }
+}
+
+/* =========================================
+   3. NAVEGACIÓN (Pills Modernos)
+   ========================================= */
+.hub-navigation-modern {
+    display: flex;
+    gap: 1rem;
+    max-width: 1400px;
+    margin: 1rem auto 0 auto;
+    padding: 0 3rem 1rem 3rem;
+}
+
+.nav-pill {
+    background: transparent;
+    border: none;
+    color: var(--color-text-secondary, #a1a1aa);
+    padding: 0.6rem 1.2rem;
+    font-size: 0.95rem;
+    font-weight: 600;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: 0.2s;
+}
+
+.nav-pill:hover { background: rgba(255,255,255,0.05); color: white; }
+.nav-pill.active { background: var(--color-primary, #8b5cf6); color: white; }
+
+@media (max-width: 768px) {
+    .hub-navigation-modern { justify-content: center; padding-left: 1rem; padding-right: 1rem; flex-wrap: wrap; }
+}
+
+.tab-section {
+    display: none;
+    opacity: 0;
+    transform: translateY(10px);
+    transition: opacity 0.3s, transform 0.3s;
+}
+
+.tab-section.active {
+    display: block;
+    opacity: 1;
+    transform: translateY(0);
+}
+
+/* =========================================
+   4. TOOLBAR & CONTROLES
+   ========================================= */
+.toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2.5rem;
+    background: rgba(255,255,255,0.03);
+    border: 1px solid rgba(255,255,255,0.05);
+    padding: 0.75rem 1rem;
+    border-radius: 12px;
+    backdrop-filter: blur(5px);
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+/* Local Toolbar Variant */
+.toolbar.local-toolbar {
+    display: grid;
+    grid-template-columns: 1fr auto auto;
+    gap: 1.5rem;
+}
+
+.search-box {
+    position: relative;
+    flex-grow: 1;
+    max-width: 400px;
+}
+
+.search-box svg {
+    position: absolute;
+    left: 14px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--color-text-muted, #71717a);
+    pointer-events: none;
+}
+
+.search-input {
+    width: 100%;
+    background: rgba(0,0,0,0.2);
+    border: 1px solid transparent;
+    padding: 0.7rem 1rem 0.7rem 2.8rem;
+    border-radius: 8px;
+    color: white;
+    font-family: inherit;
+    font-size: 0.95rem;
+    transition: all 0.2s;
+}
+
+.search-input:focus {
+    background: rgba(0,0,0,0.4);
+    border-color: var(--color-primary, #8b5cf6);
+    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
+}
+
+.filters-inline {
+    display: flex;
+    gap: 0.8rem;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.minimal-select {
+    background: rgba(255,255,255,0.05);
+    border: 1px solid rgba(255,255,255,0.08);
+    color: var(--color-text-secondary, #a1a1aa);
+    padding: 0.6rem 2rem 0.6rem 1rem;
+    border-radius: 8px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.9rem;
+    font-weight: 500;
+    transition: 0.2s;
+    appearance: none;
+    -webkit-appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a1a1aa'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0.7rem center;
+    background-size: 1rem;
+}
+
+.minimal-select:hover { background: rgba(255,255,255,0.1); color: white; }
+.minimal-select:focus { border-color: var(--color-primary, #8b5cf6); color: white; }
+
+.view-toggle {
+    display: flex;
+    background: rgba(0,0,0,0.3);
+    border-radius: 8px;
+    padding: 2px;
+}
+
+.view-btn {
+    background: transparent;
+    border: none;
+    color: var(--color-text-muted, #71717a);
+    padding: 0.5rem 0.8rem;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 1.1rem;
+    line-height: 1;
+}
+
+.view-btn.active, .view-btn:hover { background: rgba(255,255,255,0.1); color: white; }
+
+/* Switcher Local (Segmented Control) */
+.local-type-switcher {
+    display: flex;
+    background: rgba(0,0,0,0.3);
+    padding: 4px;
+    border-radius: 10px;
+    border: 1px solid rgba(255,255,255,0.05);
+}
+
+.type-pill-btn {
+    background: transparent;
+    border: none;
+    color: var(--color-text-secondary, #a1a1aa);
+    padding: 0.5rem 1.2rem;
+    font-size: 0.9rem;
+    font-weight: 600;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.type-pill-btn:hover { color: white; }
+.type-pill-btn.active {
+    background: var(--color-bg-elevated, #18181b);
+    color: white;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+/* Action Buttons (Scan) */
+.actions-group {
+    display: flex;
+    gap: 0.5rem;
+    border-left: 1px solid rgba(255,255,255,0.1);
+    padding-left: 1.5rem;
+}
+
+.action-icon-btn {
+    background: rgba(255,255,255,0.05);
+    border: 1px solid rgba(255,255,255,0.1);
+    color: var(--color-text-secondary, #a1a1aa);
+    width: 40px; height: 40px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: 0.2s;
+}
+
+.action-icon-btn:hover { background: var(--color-primary, #8b5cf6); border-color: var(--color-primary, #8b5cf6); color: white; }
+.action-icon-btn.danger:hover { background: rgba(239, 68, 68, 0.2); border-color: #ef4444; color: #ef4444; }
+
+@media (max-width: 768px) {
+    .toolbar { flex-direction: column; align-items: stretch; }
+    .toolbar.local-toolbar { grid-template-columns: 1fr; gap: 1rem; }
+    .actions-group { border-left: none; padding-left: 0; justify-content: flex-end; }
+    .local-type-switcher, .type-pill-btn { width: 100%; flex: 1; }
+    .search-box { max-width: 100%; }
+    .filters-inline { justify-content: space-between; }
+    .minimal-select { flex: 1; }
+}
+
+/* =========================================
+   5. LIST GRID (Cards)
+   ========================================= */
+.list-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 2rem 1.5rem;
+}
+
+.list-item {
+    position: relative;
+    border-radius: 8px;
+    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s;
+    cursor: pointer;
+}
+
+.list-item:hover { transform: scale(1.05); z-index: 10; }
+
+.item-poster-link {
+    display: block;
+    position: relative;
+    border-radius: 8px;
+    overflow: hidden;
+    aspect-ratio: 2/3;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
+}
+
+.item-poster {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: filter 0.3s;
+}
+
+.list-item:hover .item-poster { filter: brightness(1.1); }
+
+.item-content { padding-top: 0.8rem; }
+
+.item-title {
+    font-size: 0.95rem;
+    font-weight: 700;
+    margin: 0 0 0.4rem 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: rgba(255,255,255,0.9);
+}
+
+.list-item:hover .item-title { color: var(--color-primary, #8b5cf6); }
+
+.item-meta {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    margin-bottom: 0.5rem;
+}
+
+.meta-pill {
+    font-size: 0.65rem;
+    padding: 0.15rem 0.4rem;
+    border-radius: 4px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.status-pill { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
+.type-pill { background: rgba(255, 255, 255, 0.1); color: #e4e4e7; }
+.source-pill { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
+.repeat-pill { background: rgba(234, 179, 8, 0.15); color: #facc15; }
+.private-pill { background: rgba(239, 68, 68, 0.15); color: #f87171; }
+
+.progress-bar-container {
+    height: 4px;
+    background: rgba(255,255,255,0.1);
+    border-radius: 2px;
+    margin-bottom: 0.4rem;
+    overflow: hidden;
+}
+
+.progress-bar {
+    height: 100%;
+    background: var(--color-primary, #8b5cf6);
+    border-radius: 2px;
+}
+
+.progress-text {
+    font-size: 0.8rem;
+    color: var(--color-text-secondary, #a1a1aa);
+    display: flex;
+    justify-content: space-between;
+}
+
+/* Edit Button (Hover) */
+.edit-icon-btn {
+    position: absolute;
+    top: 10px; right: 10px;
+    background: rgba(0,0,0,0.7);
+    backdrop-filter: blur(4px);
+    border: 1px solid rgba(255,255,255,0.2);
+    color: white;
+    width: 32px; height: 32px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transform: translateY(-5px);
+    transition: all 0.2s;
+    z-index: 20;
+    cursor: pointer;
+}
+
+.list-item:hover .edit-icon-btn { opacity: 1; transform: translateY(0); }
+.edit-icon-btn:hover { background: var(--color-primary, #8b5cf6); border-color: var(--color-primary, #8b5cf6); }
+
+/* Badges adicionales */
+.unmatched-badge {
+    position: absolute;
+    top: 10px; left: 10px;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(4px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 4px 8px;
+    border-radius: 6px;
+    font-size: 0.7rem;
+    font-weight: 700;
+    color: #fbbf24;
+    display: flex; align-items: center; gap: 4px;
+}
+
+.folder-path-tooltip {
+    font-size: 0.75rem;
+    color: var(--color-text-muted, #71717a);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-top: 0.2rem;
+}
+
+/* --- LIST VIEW MODE --- */
+.list-grid.list-view { grid-template-columns: 1fr; gap: 1rem; }
+
+.list-grid.list-view .list-item {
+    display: flex;
+    align-items: center;
+    background: var(--color-bg-elevated, #18181b);
+    padding: 1rem;
+    border: 1px solid rgba(255,255,255,0.05);
+}
+
+.list-grid.list-view .list-item:hover {
+    transform: scale(1.01);
+    border-color: var(--color-primary, #8b5cf6);
+}
+
+.list-grid.list-view .item-poster-link { width: 60px; aspect-ratio: 2/3; margin-right: 1.5rem; flex-shrink: 0; }
+.list-grid.list-view .item-content { padding-top: 0; flex-grow: 1; display: flex; align-items: center; justify-content: space-between; }
+.list-grid.list-view .item-title { font-size: 1.1rem; margin-bottom: 0.2rem; }
+.list-grid.list-view .edit-icon-btn { position: static; opacity: 1; transform: none; background: transparent; border: 1px solid rgba(255,255,255,0.1); }
+
+/* =========================================
+   6. CONFIGURACIÓN (Stream Style)
+   ========================================= */
+.stream-settings-container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding-top: 1rem;
+    color: #e5e5e5;
+}
+
+.stream-section {
+    margin-bottom: 2.5rem;
+    padding-bottom: 2.5rem;
+    border-bottom: 1px solid rgba(255,255,255,0.1);
+}
+
+.stream-section.no-border { border-bottom: none; }
+
+.section-label {
+    font-size: 1.1rem;
+    color: #a1a1aa;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: 1.5rem;
+    font-weight: 600;
+}
+
+/* Row de Perfil */
+.stream-profile-row { display: flex; gap: 3rem; align-items: flex-start; }
+
+.stream-avatar-wrapper {
+    position: relative;
+    width: 120px; height: 120px;
+    border-radius: 8px;
+    overflow: hidden;
+    flex-shrink: 0;
+    background: #27272a;
+}
+
+.stream-avatar-wrapper img { width: 100%; height: 100%; object-fit: cover; }
+
+.avatar-overlay {
+    position: absolute; inset: 0;
+    background: rgba(0,0,0,0.6);
+    display: flex; align-items: center; justify-content: center;
+    opacity: 0; cursor: pointer; transition: 0.2s;
+    font-weight: 600; text-transform: uppercase; font-size: 0.8rem;
+}
+
+.stream-avatar-wrapper:hover .avatar-overlay { opacity: 1; }
+
+.stream-inputs-col { flex-grow: 1; display: flex; flex-direction: column; gap: 1.5rem; }
+
+/* Formularios */
+.stream-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: end; }
+
+.stream-input-group { display: flex; flex-direction: column; gap: 0.5rem; }
+.stream-input-group label { font-size: 0.85rem; color: #d4d4d8; font-weight: 500; }
+
+.stream-input {
+    background: #27272a;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    padding: 0.8rem 1rem;
+    color: white;
+    font-size: 1rem;
+    transition: 0.2s;
+}
+
+.stream-input:focus { background: #3f3f46; outline: none; border-color: var(--color-primary, #8b5cf6); }
+
+/* Botones Settings */
+.stream-actions { margin-top: 0.5rem; }
+
+.btn-stream-primary {
+    background: white; color: black;
+    border: none; padding: 0.7rem 2rem;
+    font-weight: 700; border-radius: 4px;
+    cursor: pointer; transition: 0.2s;
+}
+.btn-stream-primary:hover { background: #d4d4d8; }
+
+.btn-stream-ghost {
+    background: transparent; border: 1px solid #52525b;
+    color: white; padding: 0.75rem 1.5rem;
+    border-radius: 4px; cursor: pointer;
+    font-weight: 600; height: 46px;
+}
+.btn-stream-ghost:hover { border-color: white; background: rgba(255,255,255,0.05); }
+
+/* Integraciones */
+.stream-integration-row {
+    display: flex; justify-content: space-between; align-items: center;
+    background: rgba(255,255,255,0.03);
+    padding: 1rem 1.5rem;
+    border-radius: 6px;
+}
+
+.int-info { display: flex; align-items: center; gap: 1rem; }
+.int-logo { width: 32px; height: 32px; }
+.int-text { display: flex; flex-direction: column; }
+.int-name { font-weight: 700; font-size: 1rem; }
+.int-status { font-size: 0.85rem; color: #a1a1aa; }
+
+.btn-stream-outline {
+    background: transparent; border: none;
+    color: var(--color-primary, #8b5cf6);
+    font-weight: 600; cursor: pointer; font-size: 0.95rem;
+}
+.btn-stream-outline:hover { text-decoration: underline; }
+.btn-danger-outline { color: #ef4444; border: 1px solid #ef4444; padding: 0.5rem 1rem; border-radius: 4px; }
+
+.link-danger {
+    background: transparent; border: none;
+    color: #ef4444; font-size: 1rem;
+    cursor: pointer; padding: 0;
+    text-decoration: underline; opacity: 0.8;
+}
+.link-danger:hover { opacity: 1; }
+
+@media (max-width: 768px) {
+    .stream-profile-row { flex-direction: column; align-items: center; text-align: center; gap: 2rem; }
+    .stream-form-row { grid-template-columns: 1fr; }
+    .btn-stream-ghost { width: 100%; }
+    .stream-actions { display: flex; justify-content: center; }
+}
+
+/* =========================================
+   7. UTILIDADES & ESTADOS (Loading/Console)
+   ========================================= */
+.loading-state {
+    display: flex; flex-direction: column; align-items: center;
+    justify-content: center; padding: 4rem 0;
+    color: var(--color-text-secondary, #a1a1aa);
+}
+
+.spinner {
+    width: 40px; height: 40px;
+    border: 3px solid rgba(139, 92, 246, 0.1);
+    border-top-color: var(--color-primary, #8b5cf6);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    margin-bottom: 1rem;
+}
+.spinner.small { width: 20px; height: 20px; border-width: 2px; margin-bottom: 0; }
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.empty-state {
+    text-align: center; padding: 5rem 2rem;
+    background: rgba(255,255,255,0.02);
+    border-radius: 20px;
+    border: 2px dashed rgba(255,255,255,0.05);
+}
+.empty-state p { font-size: 1.2rem; color: var(--color-text-secondary, #a1a1aa); margin-bottom: 1.5rem; }
+
+.btn-blur {
+    background: rgba(255,255,255,0.1); backdrop-filter: blur(10px);
+    border: 1px solid rgba(255,255,255,0.2);
+    color: white; padding: 0.8rem 1.5rem;
+    border-radius: 99px; text-decoration: none;
+    display: inline-block; transition: 0.2s;
+}
+.btn-blur:hover { background: white; color: black; }
+
+.console-output {
+    background: #09090b; border: 1px solid #27272a;
+    padding: 1.5rem; border-radius: 12px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.9rem; color: #4ade80;
+    display: flex; align-items: center; gap: 1rem;
+    box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);
+    margin-bottom: 1.5rem;
+}
+
+.hidden { display: none !important; }