/* Styles de base pour les thèmes */
:root {
    /* Common variables for star colors */
    --star-filled-color-light: #facc15; /* yellow-400 */
    --star-filled-color-dark: #facc15; /* yellow-400 */
    --star-filled-color-black: #ffd700; /* gold */
    --star-filled-color-contrasted: #facc15; /* yellow-400 */
    --star-filled-color-samurai: #facc15; /* yellow-400 */
    --star-filled-color-sakura: #facc15; /* yellow-400 */
    --star-filled-color-cyberpunk: #facc15; /* yellow-400 */
    --star-filled-color-cyberpunk77: #facc15; /* yellow-400 */
    --star-filled-color-otaku: #facc15; /* yellow-400 */
    --star-filled-color-fantasy: #d4af37; /* Gold */
    --star-filled-color-retro: #ffff00; /* yellow */
    --star-filled-color-night: #f08080; /* Light coral */

    /* Light Theme */
    --bg-color-light: #f8fafc; /* slate-50 */
    --text-color-light: #1e293b; /* slate-800 */
    --primary-color-light: #3b82f6; /* blue-500 */
    --secondary-color-light: #60a5fa; /* blue-400 */
    --series-drawer-bg-light: #f1f5f9; /* slate-100 */
    --card-bg-light: #ffffff; 
    --border-color-light: #e2e8f0; /* slate-200 */
    --gray-text-light: #64748b; /* slate-500 */
    --input-bg-light: #f1f5f9; /* slate-100 */
    --shadow-light: rgba(0, 0, 0, 0.08);

    /* Dark Theme */
    --bg-color-dark: #1e293b; /* slate-800 */
    --text-color-dark: #f8fafc; /* slate-50 */
    --primary-color-dark: #60a5fa; /* blue-400 */
    --secondary-color-dark: #3b82f6; /* blue-500 */
    --series-drawer-bg-dark: #334155; /* slate-700 */
    --card-bg-dark: #475569; /* slate-600 */
    --border-color-dark: #475569; /* slate-600 */
    --gray-text-dark: #94a3b8; /* slate-400 */
    --input-bg-dark: #475569; /* slate-600 */
    --shadow-dark: rgba(0, 0, 0, 0.3);

    /* Black Theme */
    --bg-color-black: #000000;
    --text-color-black: #e0e0e0;
    --primary-color-black: #818cf8; /* indigo-400 */
    --secondary-color-black: #6366f1; /* indigo-500 */
    --series-drawer-bg-black: #1a1a1a; 
    --card-bg-black: #2a2a2a;
    --border-color-black: #333333;
    --gray-text-black: #a0a0a0;
    --input-bg-black: #2a2a2a;
    --shadow-black: rgba(0, 0, 0, 0.5);

    /* Contrasted Theme */
    --bg-color-contrasted: #f0f0f0;
    --text-color-contrasted: #000000;
    --primary-color-contrasted: #ff007f; /* bright pink */
    --secondary-color-contrasted: #00bfff; /* bright blue */
    --series-drawer-bg-contrasted: #e0e0e0; 
    --card-bg-contrasted: #ffffff;
    --border-color-contrasted: #333333;
    --gray-text-contrasted: #555555;
    --input-bg-contrasted: #e0e0e0;
    --shadow-contrasted: rgba(0, 0, 0, 0.2);

    /* Samurai Theme */
    --bg-color-samurai: #2a2a2a; 
    --text-color-samurai: #e0e0e0; 
    --primary-color-samurai: #a0522d; /* Sienna/rusty red */
    --secondary-color-samurai: #d2691e; /* Chocolate/dark orange */
    --series-drawer-bg-samurai: #3a3a3a; 
    --card-bg-samurai: #4a4a4a;
    --border-color-samurai: #555555;
    --gray-text-samurai: #b0b0b0;
    --input-bg-samurai: #4a4a4a;
    --shadow-samurai: rgba(0, 0, 0, 0.6);

    /* Sakura Theme */
    --bg-color-sakura: #fef2f2; 
    --text-color-sakura: #4a2323; 
    --primary-color-sakura: #f472b6; /* Bright pink */
    --secondary-color-sakura: #f8a4c8; /* Lighter pink */
    --series-drawer-bg-sakura: #ffe4e6; 
    --card-bg-sakura: #ffffff;
    --border-color-sakura: #fbcfe8; 
    --gray-text-sakura: #785a5a;
    --input-bg-sakura: #ffe4e6; 
    --shadow-sakura: rgba(0, 0, 0, 0.08);

    /* Cyberpunk Theme */
    --bg-color-cyberpunk: #05080f;
    --text-color-cyberpunk: #e2e8f0;
    --primary-color-cyberpunk: #00d4ff; /* Electric cyan */
    --secondary-color-cyberpunk: #7c3aed; /* Deep purple */
    --series-drawer-bg-cyberpunk: #0d1320;
    --card-bg-cyberpunk: #111827;
    --border-color-cyberpunk: #1e3a5f;
    --gray-text-cyberpunk: #64748b;
    --input-bg-cyberpunk: #2a0a2a;
    --shadow-cyberpunk: rgba(255, 0, 255, 0.4); 

    /* Cyberpunk 77 Theme */
    --bg-color-cyberpunk77: #1a1a1a; 
    --text-color-cyberpunk77: #facc15; 
    --primary-color-cyberpunk77: #facc15; 
    --secondary-color-cyberpunk77: #eab308; 
    --series-drawer-bg-cyberpunk77: #2a2a2a; 
    --card-bg-cyberpunk77: #333333; 
    --border-color-cyberpunk77: #3a3a3a; 
    --gray-text-cyberpunk77: #94a3b8; 
    --input-bg-cyberpunk77: #333333;
    --shadow-cyberpunk77: rgba(250, 204, 21, 0.3); 

    /* Otaku Classique Theme */
    --bg-color-otaku: #f0f0f0; 
    --text-color-otaku: #333333; 
    --primary-color-otaku: #ef4444; 
    --secondary-color-otaku: #dc2626; 
    --series-drawer-bg-otaku: #f9fafb; 
    --card-bg-otaku: #ffffff;
    --border-color-otaku: #e5e7eb; 
    --gray-text-otaku: #6b7280; 
    --input-bg-otaku: #f9fafb; 
    --shadow-otaku: rgba(0, 0, 0, 0.1);
    --font-family-otaku: 'Zen Kaku Gothic New', sans-serif;

    /* Fantasy Library Theme */
    --bg-color-fantasy: #3e2723; 
    --text-color-fantasy: #f5deb3; 
    --primary-color-fantasy: #d4af37; 
    --secondary-color-fantasy: #b8860b; 
    --series-drawer-bg-fantasy: #4e342e; 
    --card-bg-fantasy: #5d4037; 
    --border-color-fantasy: #8d6e63; 
    --gray-text-fantasy: #a1887f; 
    --input-bg-fantasy: #4e342e; 
    --shadow-fantasy: rgba(0, 0, 0, 0.7);
    --font-family-fantasy: 'Merriweather', serif; 

    /* Retro Pixel Theme */
    --bg-color-retro: #222222; 
    --text-color-retro: #00ff00; 
    --primary-color-retro: #ff00ff; 
    --secondary-color-retro: #ffff00; 
    --series-drawer-bg-retro: #333333; 
    --card-bg-retro: #444444;
    --border-color-retro: #555555;
    --gray-text-retro: #aaaaaa;
    --input-bg-retro: #444444;
    --shadow-retro: rgba(0, 255, 0, 0.3);
    --font-family-retro: 'DotGothic16', monospace;

    /* Anti Blue Light / Night Reading Theme */
    --bg-color-night: #282c34; 
    --text-color-night: #e0e0e0; 
    --primary-color-night: #f08080; 
    --secondary-color-night: #fa8072; 
    --series-drawer-bg-night: #3a4049; 
    --card-bg-night: #474d56; 
    --border-color-night: #525c68;
    --gray-text-night: #b0b0b0;
    --input-bg-night: #474d56;
    --shadow-night: rgba(0, 0, 0, 0.2);

    /* Recommendation Specific Colors */
    --random-rec-bg: #e0f2fe; 
    --random-rec-text: #0c4a6e; 
    --random-rec-border: #38bdf8; 
    --random-rec-icon: #0ea5e9; 

    --long-unread-rec-text: #9d174d; 
    --long-unread-rec-border: #ec4899; 
    --long-unread-rec-icon: #db2777; 
    --long-unread-rec-glow: rgba(236, 72, 153, 0.5); 
    --long-unread-pulse-start: #ec4899; 
    --long-unread-pulse-end: #f472b6;   
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color); 
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Default (Light) Theme */
body {
    --bg-color: var(--bg-color-light);
    --text-color: var(--text-color-light);
    --primary-color: var(--primary-color-light);
    --secondary-color: var(--secondary-color-light);
    --series-drawer-bg: var(--series-drawer-bg-light); 
    --card-bg: var(--card-bg-light);
    --border-color: var(--border-color-light);
    --gray-text: var(--gray-text-light);
    --input-bg: var(--input-bg-light);
    --shadow: var(--shadow-light);
    --star-filled-color: var(--star-filled-color-light);
    --font-family-main: 'Inter', sans-serif; 
}

/* Dark Theme */
body.dark-theme {
    --bg-color: var(--bg-color-dark);
    --text-color: var(--text-color-dark);
    --primary-color: var(--primary-color-dark);
    --secondary-color: var(--secondary-color-dark);
    --series-drawer-bg: var(--series-drawer-bg-dark); 
    --card-bg: var(--card-bg-dark);
    --border-color: var(--border-color-dark);
    --gray-text: var(--gray-text-dark);
    --input-bg: var(--input-bg-dark);
    --shadow: var(--shadow-dark);
    --star-filled-color: var(--star-filled-color-dark);
    --font-family-main: 'Inter', sans-serif;
}
body.dark-theme input,
body.dark-theme select,
body.dark-theme textarea {
    background-color: var(--input-bg-dark) !important; 
    color: var(--text-color-dark) !important; 
}

/* Black Theme */
body.black-theme {
    --bg-color: var(--bg-color-black);
    --text-color: var(--text-color-black);
    --primary-color: var(--primary-color-black);
    --secondary-color: var(--secondary-color-black);
    --series-drawer-bg: var(--series-drawer-bg-black); 
    --card-bg: var(--card-bg-black);
    --border-color: var(--border-color-black); 
    --gray-text: var(--gray-text-black); 
    --input-bg: var(--input-bg-black); 
    --shadow: var(--shadow-black);
    --star-filled-color: var(--star-filled-color-black);
    --font-family-main: 'Inter', sans-serif;
}
body.black-theme input,
body.black-theme select,
body.black-theme textarea {
    background-color: var(--input-bg-black) !important; 
    color: var(--text-color-black) !important; 
}

/* Contrasted Theme */
body.contrasted-theme {
    --bg-color: var(--bg-color-contrasted);
    --text-color: var(--text-color-contrasted);
    --primary-color: var(--primary-color-contrasted);
    --secondary-color: var(--secondary-color-contrasted);
    --series-drawer-bg: var(--series-drawer-bg-contrasted); 
    --card-bg: var(--card-bg-contrasted);
    --border-color: var(--border-color-contrasted);
    --gray-text: var(--gray-text-contrasted);
    --input-bg: var(--input-bg-contrasted);
    --shadow: var(--shadow-contrasted); 
    --star-filled-color: var(--star-filled-color-contrasted);
    --font-family-main: 'Inter', sans-serif;
}
body.contrasted-theme input,
body.contrasted-theme select,
body.contrasted-theme textarea {
    background-color: var(--input-bg-contrasted) !important;
    color: var(--text-color-contrasted) !important;
}


/* Samurai Theme */
body.samurai-theme {
    --bg-color: var(--bg-color-samurai);
    --text-color: var(--text-color-samurai);
    --primary-color: var(--primary-color-samurai);
    --secondary-color: var(--secondary-color-samurai);
    --series-drawer-bg: var(--series-drawer-bg-samurai); 
    --card-bg: var(--card-bg-samurai);
    --border-color: var(--border-color-samurai);
    --gray-text: var(--gray-text-samurai);
    --input-bg: var(--input-bg-samurai);
    --shadow: var(--shadow-samurai);
    --star-filled-color: var(--star-filled-color-samurai);
    --font-family-main: 'Inter', sans-serif; 
}
body.samurai-theme input,
body.samurai-theme select,
body.samurai-theme textarea {
    background-color: var(--input-bg-samurai) !important;
    color: var(--text-color-samurai) !important;
}

/* Sakura Theme */
body.sakura-theme {
    --bg-color: var(--bg-color-sakura);
    --text-color: var(--text-color-sakura);
    --primary-color: var(--primary-color-sakura);
    --secondary-color: var(--secondary-color-sakura);
    --series-drawer-bg: var(--series-drawer-bg-sakura); 
    --card-bg: var(--card-bg-sakura);
    --border-color: var(--border-color-sakura);
    --gray-text: var(--gray-text-sakura);
    --input-bg: var(--input-bg-sakura);
    --shadow: var(--shadow-sakura);
    --star-filled-color: var(--star-filled-color-sakura);
    --font-family-main: 'Inter', sans-serif;
}
body.sakura-theme input,
body.sakura-theme select,
body.sakura-theme textarea {
    background-color: var(--input-bg-sakura) !important;
    color: var(--text-color-sakura) !important;
}

/* Cyberpunk Theme */
body.cyberpunk-theme {
    --bg-color: var(--bg-color-cyberpunk);
    --text-color: var(--text-color-cyberpunk);
    --primary-color: var(--primary-color-cyberpunk);
    --secondary-color: var(--secondary-color-cyberpunk);
    --series-drawer-bg: var(--series-drawer-bg-cyberpunk); 
    --card-bg: var(--card-bg-cyberpunk);
    --border-color: var(--border-color-cyberpunk);
    --gray-text: var(--gray-text-cyberpunk);
    --input-bg: var(--input-bg-cyberpunk);
    --shadow: var(--shadow-cyberpunk);
    --star-filled-color: var(--star-filled-color-cyberpunk);
    --font-family-main: 'Inter', sans-serif;
}
body.cyberpunk-theme input,
body.cyberpunk-theme select,
body.cyberpunk-theme textarea {
    background-color: var(--input-bg-cyberpunk) !important;
    color: var(--text-color-cyberpunk) !important;
}

/* Cyberpunk 77 Theme */
body.cyberpunk77-theme {
    --bg-color: var(--bg-color-cyberpunk77);
    --text-color: var(--text-color-cyberpunk77);
    --primary-color: var(--primary-color-cyberpunk77);
    --secondary-color: var(--secondary-color-cyberpunk77);
    --series-drawer-bg: var(--series-drawer-bg-cyberpunk77); 
    --card-bg: var(--card-bg-cyberpunk77);
    --border-color: var(--border-color-cyberpunk77);
    --gray-text: var(--gray-text-cyberpunk77);
    --input-bg: var(--input-bg-cyberpunk77);
    --shadow: var(--shadow-cyberpunk77);
    --star-filled-color: var(--star-filled-color-cyberpunk77);
    --font-family-main: 'Inter', sans-serif;
}
body.cyberpunk77-theme input,
body.cyberpunk77-theme select,
body.cyberpunk77-theme textarea {
    background-color: var(--input-bg-cyberpunk77) !important;
    color: var(--text-color-cyberpunk77) !important;
}

body.otaku-theme {
    --bg-color: var(--bg-color-otaku);
    --text-color: var(--text-color-otaku);
    --primary-color: var(--primary-color-otaku);
    --secondary-color: var(--secondary-color-otaku);
    --series-drawer-bg: var(--series-drawer-bg-otaku); 
    --card-bg: var(--card-bg-otaku);
    --border-color: var(--border-color-otaku);
    --gray-text: var(--gray-text-otaku);
    --input-bg: var(--input-bg-otaku);
    --shadow: var(--shadow-otaku);
    --star-filled-color: var(--star-filled-color-otaku);
    --font-family-main: var(--font-family-otaku);
    font-family: var(--font-family-otaku); 
}
body.otaku-theme input,
body.otaku-theme select,
body.otaku-theme textarea {
    background-color: var(--input-bg-otaku) !important;
    color: var(--text-color-otaku) !important;
}

body.fantasy-theme {
    --bg-color: var(--bg-color-fantasy);
    --text-color: var(--text-color-fantasy);
    --primary-color: var(--primary-color-fantasy);
    --secondary-color: var(--secondary-color-fantasy);
    --series-drawer-bg: var(--series-drawer-bg-fantasy); 
    --card-bg: var(--card-bg-fantasy);
    --border-color: var(--border-color-fantasy);
    --gray-text: var(--gray-text-fantasy);
    --input-bg: var(--input-bg-fantasy);
    --shadow: var(--shadow-fantasy);
    --star-filled-color: var(--star-filled-color-fantasy);
    --font-family-main: var(--font-family-fantasy);
    font-family: var(--font-family-fantasy); 
}
body.fantasy-theme input,
body.fantasy-theme select,
body.fantasy-theme textarea {
    background-color: var(--input-bg-fantasy) !important;
    color: var(--text-color-fantasy) !important;
}

body.retro-pixel-theme { 
    --bg-color: var(--bg-color-retro);
    --text-color: var(--text-color-retro);
    --primary-color: var(--primary-color-retro);
    --secondary-color: var(--secondary-color-retro);
    --series-drawer-bg: var(--series-drawer-bg-retro); 
    --card-bg: var(--card-bg-retro);
    --border-color: var(--border-color-retro);
    --gray-text: var(--gray-text-retro);
    --input-bg: var(--input-bg-retro);
    --shadow: var(--shadow-retro);
    --star-filled-color: var(--star-filled-color-retro);
    --font-family-main: var(--font-family-retro);
    font-family: var(--font-family-retro); 
}
body.retro-pixel-theme input, 
body.retro-pixel-theme select, 
body.retro-pixel-theme textarea { 
    background-color: var(--input-bg-retro) !important;
    color: var(--text-color-retro) !important;
}

body.anti-blue-light-theme {
    --bg-color: var(--bg-color-night);
    --text-color: var(--text-color-night);
    --primary-color: var(--primary-color-night);
    --secondary-color: var(--secondary-color-night);
    --series-drawer-bg: var(--series-drawer-bg-night); 
    --card-bg: var(--card-bg-night);
    --border-color: var(--border-color-night);
    --gray-text: var(--gray-text-night);
    --input-bg: var(--input-bg-night);
    --shadow: var(--shadow-night);
    --star-filled-color: var(--star-filled-color-night);
    --font-family-main: 'Inter', sans-serif;
}
body.anti-blue-light-theme input,
body.anti-blue-light-theme select,
body.anti-blue-light-theme textarea {
    background-color: var(--input-bg-night) !important;
    color: var(--text-color-night) !important;
}


/* Apply main font variable to all elements that should inherit it */
body, input, select, textarea, button {
    font-family: var(--font-family-main);
}

.bg-page { 
    background-color: var(--bg-color);
}
.bg-card { 
    background-color: var(--card-bg);
}
.bg-series-drawer { 
    background-color: var(--series-drawer-bg);
}

/* Styles spécifiques pour les types de collection */
.type-manga { border-left: 8px solid #ef4444; }
.type-bd { border-left: 8px solid #22c55e; }
.type-comics { border-left: 8px solid #3b82f6; }
.type-light-novel { border-left: 8px solid #a855f7; }


.unowned-thumbnail {
    filter: grayscale(100%);
    opacity: 0.6;
}

.star-rating .fa-star {
    color: #d1d5db; 
    cursor: pointer;
    transition: color 0.2s ease;
}
.star-rating .fa-star.filled {
    color: var(--star-filled-color);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-color); 
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

.btn-primary {
    background-color: var(--primary-color);
    color: white; 
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 6px -1px var(--shadow);
}
.btn-primary:hover {
    background-color: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 8px -2px var(--shadow);
}
.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px -1px var(--shadow);
}

.btn-secondary {
    background-color: var(--card-bg); 
    color: var(--text-color); 
    border: 1px solid var(--border-color);
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    box_shadow: 0 1px 3px 0 var(--shadow);
}
.btn-secondary:hover {
    background-color: var(--input-bg); 
    transform: translateY(-2px);
    box-shadow: 0 3px 6px 0 var(--shadow);
}
.btn-secondary:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px 0 var(--shadow);
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); 
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-overlay.show {
    opacity: 1;
    visibility: visible;
}
.modal-content {
    background-color: var(--card-bg);
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 15px 25px -5px var(--shadow); 
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto;
    position: relative;
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}
.modal-overlay.show .modal-content {
    transform: translateY(0);
}
.modal-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--gray-text);
    transition: color 0.2s ease;
}
.modal-close-btn:hover {
    color: var(--primary-color);
}

.message-box {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: white; 
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.message-box.show {
    opacity: 1;
}

.autocomplete-suggestions {
    position: absolute;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
    z-index: 500;
    width: calc(100% - 2rem); 
}
.autocomplete-suggestions div {
    padding: 0.5rem 1rem;
    cursor: pointer;
    color: var(--text-color);
}
.autocomplete-suggestions div:hover {
    background-color: var(--input-bg);
}

.volume-card {
    position: relative;
    background-color: var(--card-bg); 
    border-radius: 0.75rem; 
    box-shadow: 0 2px 4px -1px var(--shadow);
    overflow: hidden;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.75rem; 
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.volume-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px -2px var(--shadow);
}

.volume-card.read-volume {
    opacity: 0.8; 
    border-color: #22c55e; 
}
.volume-card.priority-volume {
    border-color: #facc15; 
    box-shadow: 0 0 10px #facc15; 
}

.volume-card .volume-actions {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    gap: 0.25rem;
    background-color: rgba(var(--card-bg-rgb, 255, 255, 255), 0.8); 
    backdrop-filter: blur(4px); 
    border-radius: 0.5rem;
    padding: 0.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
body.dark-theme .volume-card .volume-actions,
body.black-theme .volume-card .volume-actions,
body.samurai-theme .volume-card .volume-actions,
body.cyberpunk-theme .volume-card .volume-actions,
body.cyberpunk77-theme .volume-card .volume-actions,
body.fantasy-theme .volume-card .volume-actions,
body.retro-pixel-theme .volume-card .volume-actions,
body.anti-blue-light-theme .volume-card .volume-actions {
    background-color: rgba(50, 50, 50, 0.8); 
}


.volume-card:hover .volume-actions {
    opacity: 1;
    visibility: visible;
}
.volume-card .volume-actions button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-text);
    font-size: 0.9rem;
    padding: 0.2rem;
    border-radius: 0.3rem;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.volume-card .volume-actions button:hover {
    color: var(--primary-color);
    background-color: var(--input-bg);
}

.volume-status-icons {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    display: flex;
    gap: 0.25rem;
}
.volume-status-icons .status-icon {
    color: var(--primary-color);
    font-size: 0.9rem;
    background-color: var(--card-bg); 
    padding: 0.2rem 0.4rem;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.volume-status-icons .status-icon.read {
    color: #22c55e; 
}
.volume-status-icons .status-icon.priority {
    color: #facc15; 
}
.volume-status-icons .status-icon.collector {
    color: #a855f7; 
}


.volume-grid.compact-mode-volumes .volume-thumbnail-container {
    width: 90px;  
    height: 135px; 
    flex-shrink: 0; 
    position: relative; 
    border-radius: 0.375rem; 
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); 
}
.volume-grid.compact-mode-volumes .volume-thumbnail-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.volume-grid.compact-mode-volumes .volume-info {
    margin-top: 0.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%; 
}
.volume-grid.compact-mode-volumes .volume-info p {
    font-size: 0.75rem; 
}
.volume-grid.compact-mode-volumes .volume-thumbnail-container .star-rating-overlay {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 0.2rem 0.4rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 1px;
}
.volume-grid.compact-mode-volumes .volume-thumbnail-container .fa-star {
    font-size: 0.65rem;
    color: #d1d5db; 
}
.volume-grid.compact-mode-volumes .volume-thumbnail-container .fa-star.filled {
    color: var(--star-filled-color);
}


.volume-grid.cover-centric-mode-volumes {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.volume-grid.cover-centric-mode-volumes .volume-card {
    padding: 0.5rem;
    height: 300px;
    justify-content: space-between;
}
.volume-grid.cover-centric-mode-volumes .volume-thumbnail-container {
    width: 100%;
    height: 200px;
    margin-bottom: 0.5rem;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 0.375rem; 
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); 
}
.volume-grid.cover-centric-mode-volumes .volume-thumbnail-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.volume-grid.cover-centric-mode-volumes .volume-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    text-align: center;
}
.volume-grid.cover-centric-mode-volumes .volume-info p {
    font-size: 0.875rem; 
    font-weight: 500; 
}
.volume-grid.cover-centric-mode-volumes .volume-info .text-xs { 
    font-size: 0.75rem;
}
.volume-grid.cover-centric-mode-volumes .volume-thumbnail-container .star-rating-overlay {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 0.2rem 0.4rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 1px;
}
.volume-grid.cover-centric-mode-volumes .volume-thumbnail-container .fa-star {
    font-size: 0.75rem;
    color: #d1d5db;
}
.volume-grid.cover-centric-mode-volumes .volume-thumbnail-container .fa-star.filled {
    color: var(--star-filled-color);
}


.series-card-compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: auto;
    background-color: var(--card-bg);
    border-radius: 0.75rem; 
    box-shadow: 0 4px 6px -1px var(--shadow), 0 2px 4px -1px var(--shadow); 
    overflow: hidden;
    border: 1px solid var(--border-color);
    cursor: pointer; 
}
.series-card-compact:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px var(--shadow), 0 4px 6px -2px var(--shadow); 
}
.series-card-compact .series-cover-container {
    width: 100%;
    height: 250px;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.series-card-compact .series-cover-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.1); 
    transition: transform 0.3s ease; 
}
.series-card-compact:hover .series-cover-container img {
    transform: scale(1.2); 
}

.series-card-compact .text-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));
    color: white;
    padding: 0.75rem;
    text-align: left;
}
.series-card-compact .text-overlay .series-title {
    font-size: 1.1rem; 
    font-weight: 600; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.series-card-compact .series-stats {
    font-size: 0.85rem; 
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.series-card-compact .series-rating-overlay {
    position: absolute;
    top: 0.5rem; 
    left: 0.5rem; 
    background-color: rgba(0, 0, 0, 0.6);
    padding: 0.25rem 0.5rem; 
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 2px; 
    color: white;
    font-size: 0.8rem; 
}
.series-card-compact .series-rating-overlay .fa-star {
    font-size: 0.8rem; 
    color: #d1d5db;
}
.series-card-compact .series-rating-overlay .fa-star.filled {
    color: var(--star-filled-color);
}


.series-card-compact .series-publisher-info {
    padding: 0.75rem;
    width: 100%;
    text-align: left;
    color: var(--gray-text);
    font-size: 0.8rem; 
    border-top: 1px solid var(--border-color);
}

.priority-series-indicator {
    box-shadow: 0 0 15px 5px rgba(252, 211, 77, 0.7); 
    border-color: #fcd34d !important; 
}

.collector-text {
    color: #a855f7; 
    font-weight: 600;
}

.series-card-compact .series-favorite-btn {
    background-color: rgba(0, 0, 0, 0.5);
    color: #f8fafc; 
    border-radius: 9999px; 
    padding: 0.5rem;
    font-size: 1.25rem; 
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10;
}

.series-card-compact .series-favorite-btn.favorited {
    color: #ef4444; 
}
.series-card-compact .series-favorite-btn:hover {
    background-color: rgba(0, 0, 0, 0.7);
    color: #f87171; 
}

.series-drawer details summary .series-favorite-btn { 
    position: absolute;
    top: 0.5rem; 
    right: 0.5rem; 
    background-color: rgba(0, 0, 0, 0.5);
    color: #f8fafc;
    border-radius: 9999px;
    padding: 0.5rem; 
    font-size: 1.25rem; 
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    z-index: 10; 
}
.series-drawer details summary .series-favorite-btn.favorited {
    color: #ef4444;
}
.series-drawer details summary .series-favorite-btn:hover {
    background-color: rgba(0, 0, 0, 0.7);
    color: #f87171;
}

.series-drawer details summary .relative { 
    width: 96px; 
    height: 144px; 
    flex-shrink: 0;
    border-radius: 0.375rem; 
    overflow: hidden; 
}
.series-drawer details summary .relative img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.1); 
    transition: transform 0.3s ease;
}
.series-drawer details summary:hover .relative img { 
    transform: scale(1.2);
}


.theme-indicator, .display-indicator {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    margin-left: 1rem;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.theme-indicator.active, .display-indicator.active {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
    color: white; 
    box-shadow: 0 4px 6px -1px var(--shadow);
}

.theme-indicator.light { background-color: #f8fafc; color: #1e293b; border-color: #e2e8f0; }
.theme-indicator.dark { background-color: #1e293b; color: #f8fafc; border-color: #475569; }
.theme-indicator.black { background-color: #000000; color: #e0e0e0; border-color: #333333; }
.theme-indicator.contrasted { background-color: #f0f0f0; color: #000000; border-color: #333333; }
.theme-indicator.samurai { background-color: #2a2a2a; color: #a0522d; border-color: #555555; }
.theme-indicator.sakura { background-color: #fef2f2; color: #f472b6; border-color: #fbcfe8; }
.theme-indicator.cyberpunk { background-color: #0a0a0a; color: #00ffff; border-color: #330033; }
.theme-indicator.cyberpunk77 { background-color: #1a1a1a; color: #facc15; border-color: #3a3a3a; }
.theme-indicator.otaku { background-color: #f0f0f0; color: #ef4444; border-color: #e5e7eb; } 
.theme-indicator.fantasy { background-color: #3e2723; color: #d4af37; border-color: #8d6e63; } 
.theme-indicator.retro-pixel { background-color: #222222; color: #00ff00; border-color: #555555; } 
.theme-indicator.anti-blue-light { background-color: #282c34; color: #f08080; border-color: #525c68; } 


.display-indicator.active {
    background-color: var(--primary-color) !important;
    color: white !important; 
}
.display-indicator:not(.active) {
    color: var(--text-color);
    border-color: var(--border-color);
    background-color: var(--card-bg);
}

.bg-primary { 
    background-color: var(--primary-color) !important;
}

.status-in-progress { color: #fbbf24; }
.status-up-to-date { color: #22c55e; }
.status-error { color: #ef4444; }
.status-stopped { color: #94a3b8; }

footer {
    background-color: var(--card-bg);
    color: var(--gray-text);
    padding: 1rem;
    text-align: center;
    font-size: 0.8rem;
    border-top: 1px solid var(--border-color);
}

.random-recommendation-card {
    background-color: var(--random-rec-bg);
    color: var(--random-rec-text);
    border: 2px solid var(--random-rec-border);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    position: relative;
}
.random-recommendation-card .type-label { 
    color: var(--random-rec-icon);
}
.random-recommendation-card .remove-recommendation-btn {
    background-color: rgba(255, 255, 255, 0.7); 
    color: var(--random-rec-text); 
}
.random-recommendation-card .remove-recommendation-btn:hover {
    color: #ef4444; 
}

.long-unread-recommendation-card {
    color: var(--long-unread-rec-text);
    border: 2px solid var(--long-unread-rec-border);
    box-shadow: 0 0 8px var(--long-unread-rec-glow); 
    position: relative;
}
.long-unread-recommendation-card .type-label {
    color: var(--long-unread-rec-icon);
}

.text-primary { color: var(--primary-color); }
.text-gray-custom { color: var(--gray-text); } 
.text-text-main { color: var(--text-color); } 
.border-border-main { border-color: var(--border-color); }
.bg-input { background-color: var(--input-bg); }
.shadow-custom { box-shadow: 0 4px 6px -1px var(--shadow), 0 2px 4px -1px var(--shadow); } 


@keyframes color-pulse {
    0% { color: var(--primary-color); text-shadow: none; }
    50% { color: var(--secondary-color); text-shadow: 0 0 10px var(--secondary-color), 0 0 20px var(--secondary-color); } 
    100% { color: var(--primary-color); text-shadow: none; }
}

.shuffle-random-recommendation-btn i.fa-random {
    animation: color-pulse 1.8s infinite alternate; 
}

@keyframes pink-color-pulse {
    0% { color: var(--long-unread-pulse-start); text-shadow: none; }
    50% { color: var(--long-unread-pulse-end); text-shadow: 0 0 10px var(--long-unread-pulse-end), 0 0 20px var(--long-unread-pulse-end); }
    100% { color: var(--long-unread-pulse-start); text-shadow: none; }
}

.cycle-long-unread-btn i.fa-sync-alt {
    animation: pink-color-pulse 1.8s infinite alternate;
}

/* Theme Selector Buttons in Settings */
.theme-selector-button {
    padding: 0.6rem 1rem; 
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    min-width: 130px; 
    border-width: 1px; 
    border-style: solid; 
}

.theme-selector-button:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.theme-selector-button.active {
    box-shadow: 0 0 0 2px var(--bg-page), 0 0 0 4px var(--active-theme-primary-color, var(--primary-color));
    /* The active-theme-primary-color will be set via inline style for the specific active theme */
}


.theme-selector-button i {
    font-size: 0.9em; 
}