/* permanently hide the rescan FAB – it is still in the markup for
   future use but invisible and unfocusable */
		.rescan-btn {
			display: none !important;
			pointer-events: none !important
		}


		/* ===== RESET ===== */
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box
		}

body {
                        background: #1a1a1a;
                        color: #fff;
                        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                        min-height: 100vh;
                        padding: 20px;
                        font-size: .95rem;
                        overflow-y: auto;
                        overflow-anchor: none
                }

		/* ===== LAYOUT ===== */
.library-container {
        max-width: none;
        width: 100%;
        margin: 0
}

		.reader-view {
			display: none;
			position: fixed;
			inset: 0;
			background: #000;
			z-index: 1000
		}

		.reader-view.active {
			display: flex;
			flex-direction: column
		}

		.reader-container {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			/* ← back to centred – prevents height mis-calculation */
			position: relative;
			overflow: hidden;
			/* ← keep the page inside the pane, so the bottom is visible */
		}

		/* ===== HEADER ===== */
                .header {
                        text-align: center;
                        margin-bottom: 28px;
                        position: relative
                }

.header h1 {
    font-size: 2.2rem;
    font-weight: 700;
    background: linear-gradient(45deg, #4a9eff, #00d4ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: pointer
}

.stats {
        color: #888;
        font-size: .85rem;
        margin-top: 2px
}

.info-link {
        position: absolute;
        top: 0;
        right: 0;
        color: #4a9eff;
        font-size: 1rem;
        padding: 4px 8px;
        border: 1px solid #4a9eff;
        border-radius: 6px;
        text-decoration: none
}

.info-link:hover {
        text-decoration: underline
}

.random-btn {
        position: absolute;
        top: 0;
        left: 0;
        background: #4a9eff;
        color: #fff;
        font-size: 1rem;
        padding: 4px 8px;
        border: none;
        border-radius: 6px;
        cursor: pointer
}

.random-btn:hover {
        background: #358cf3
}

		/* ===== SEARCH BAR ===== */
		.search-container {
			margin-bottom: 16px;
			position: sticky;
                        top: 12px;
			z-index: 120;
			background: rgba(26, 26, 26, .9);
			backdrop-filter: blur(8px);
			padding: 8px 12px;
			border-radius: 8px;
			border: 1px solid #333;
			transition: .25s ease
		}

.search-container.compact {
        padding: 3px 6px;
        opacity: .85
}

		.search-bar {
			width: 100%;
			padding: 8px 12px;
			font-size: .9rem;
			background: #2a2a2a;
			border: 2px solid #444;
			color: #fff;
			border-radius: 6px
		}

		.search-bar:focus {
			outline: none;
			border-color: #4a9eff;
			background: #333;
			box-shadow: 0 0 0 2px rgba(74, 158, 255, .15)
		}

		.search-hint {
			margin-top: 3px;
			color: #aaa;
			font-size: .7rem;
			text-align: center
		}

		.search-hint kbd {
			background: #333;
			padding: 0 3px;
			border-radius: 3px;
			font-size: .68rem;
			color: #4a9eff
		}

		/* ===== CONTROLS BAR ===== */
		.controls-bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 8px
		}

		.results-count {
			color: #888;
			font-size: .78rem
		}

		.view-toggle {
			display: flex;
			gap: 6px
		}

		.toggle-btn {
			padding: 3px 9px;
			background: #2a2a2a;
			border: 1px solid #444;
			color: #fff;
			border-radius: 6px;
			font-size: .78rem;
			cursor: pointer
		}

		.toggle-btn.active {
			background: #4a9eff;
			border-color: #4a9eff
		}

		#previewToggle {
			min-width: 80px
		}

		/* ===== GRID ===== */
.manga-container {
        border: 1px solid #222;
        border-radius: 6px
}

		.manga-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
			gap: 14px;
			padding: 14px
		}

.manga-grid.compact {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 9px
}

.manga-grid.compact .manga-tags {
    display: none
}

.manga-grid.compact .manga-info:nth-of-type(n+3) {
    display: none
}

.manga-card {
                        position: relative;
                        background: linear-gradient(135deg, #2a2a2a, #252525);
                        border-radius: 8px;
                        padding: 10px;
                        cursor: pointer;
                        border: 2px solid transparent;
                        transition: .2s;
                        display: flex;
                        flex-direction: column;
  align-items: center
}

                .download-btn {
                        position: absolute;
                        top: 6px;
                        right: 6px;
                        background: rgba(74, 158, 255, .8);
                        border: none;
                        color: #fff;
                        border-radius: 4px;
                        font-size: .75rem;
                        padding: 2px 5px;
                        cursor: pointer;
                        display: none;
                        opacity: .75;
                        transition: opacity .2s
                }

                .manga-card:hover .download-btn {
                        display: block;
                        opacity: 1
                }

.manga-grid.compact .download-btn {
                        display: none !important
                }

                .download-menu {
                        position: absolute;
                        top: 28px;
                        right: 6px;
                        background: rgba(42, 42, 42, .95);
                        border: 1px solid #555;
                        border-radius: 4px;
                        padding: 4px 0;
                        display: none;
                        flex-direction: column;
                        box-shadow: 0 4px 8px rgba(0, 0, 0, .4);
                        backdrop-filter: blur(4px);
                        z-index: 50
                }

                .download-menu button {
                        background: transparent;
                        color: #fff;
                        border: none;
                        padding: 4px 12px;
                        font-size: .75rem;
                        text-align: left;
                        cursor: pointer;
                        white-space: nowrap
                }

                .download-menu button:hover {
                        background: #4a9eff;
                        color: #fff
                }

		.manga-card:hover {
			transform: translateY(-4px);
			border-color: #4a9eff;
			box-shadow: 0 5px 16px rgba(74, 158, 255, .18)
		}

.manga-thumb {
                        width: 100%;
                        height: 220px;
                        object-fit: cover;
                        object-position: top;
                        border-radius: 5px;
                        margin-bottom: 6px;
                        background: #222;
                        display: block;
                        user-select: none;
                        -webkit-user-select: none
                }

		.no-previews .manga-thumb {
			display: none !important
		}

		.manga-number {
			font-size: 1.5rem;
			font-weight: 800;
			color: #4a9eff;
			text-shadow: 0 0 10px rgba(74, 158, 255, .3);
			margin-bottom: 3px
		}

		.manga-info {
			font-size: .7rem;
			color: #bbb;
			margin-bottom: 2px;
			display: flex;
			align-items: center;
			gap: 4px
		}

		.manga-info::before {
			content: '•';
			color: #4a9eff
		}

		.manga-tags {
			margin-top: 5px;
			display: flex;
			flex-wrap: wrap;
			gap: 3px;
			justify-content: center
		}

		.tag {
			background: linear-gradient(45deg, #3a3a3a, #444);
			padding: 2px 6px;
			border-radius: 9px;
			font-size: .55rem;
			color: #ddd;
			border: 1px solid #555;
			white-space: nowrap
		}

		.tag:hover {
			background: linear-gradient(45deg, #4a9eff, #00d4ff);
			color: #fff
		}

		.tag.artist {
			background: linear-gradient(45deg, #ff6b6b, #ff8e8e)
		}

		.tag.character {
			background: linear-gradient(45deg, #4ecdc4, #7dd3d8)
		}

		.tag.parody {
			background: linear-gradient(45deg, #ffd93d, #ffe066);
			color: #333
		}

		.tag.category {
			background: linear-gradient(45deg, #a8e6cf, #c8f7c5);
			color: #333
		}

		.tag.language {
			background: linear-gradient(45deg, #ff8b94, #ffa8a8)
		}

		.tag.group {
			background: linear-gradient(45deg, #b4a7d6, #c5b9d9)
		}

		.no-results {
			text-align: center;
			color: #888;
			font-size: 1rem;
			margin-top: 40px;
			padding: 22px;
			background: #2a2a2a;
			border-radius: 8px;
			border: 2px dashed #444
		}

		/* ===== LOADER ===== */
		.loading-library {
			text-align: center;
			padding: 32px;
			font-size: .85rem;
			color: #888
		}

		.loading-spinner {
			width: 34px;
			height: 34px;
			border: 3px solid #333;
			border-top: 3px solid #4a9eff;
			border-radius: 50%;
			animation: spin 1s linear infinite;
			margin: 12px auto
		}

		@keyframes spin {
			0% {
				transform: rotate(0)
			}

			100% {
				transform: rotate(360deg)
			}
		}

		.progress-bar {
			width: 100%;
			height: 6px;
			background: #333;
			border-radius: 3px;
			margin: 10px 0;
			overflow: hidden
		}

		.progress-fill {
			height: 100%;
			background: linear-gradient(90deg, #4a9eff, #00d4ff);
			width: 0%
		}

		/* ===== RESCAN FAB ===== */
		.rescan-btn {
			position: fixed;
			bottom: 18px;
			right: 18px;
			width: 38px;
			height: 38px;
			border-radius: 50%;
			background: #4a9eff;
			border: none;
			color: #fff;
			font-size: 1.3rem;
			cursor: pointer;
			opacity: .12;
			transition: .3s;
			z-index: 1500
		}

		.rescan-btn:hover {
			opacity: 1
		}

		/* ===== READER ===== */
.manga-image {
    /* let the image scale so the whole page is visible without cropping */
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 7px 22px rgba(0, 0, 0, .5);
    display: none;
    user-select: none;
    -webkit-user-select: none;
}

		.manga-image.active {
			display: block;
		}

		@keyframes fadeIn {
			from {
				opacity: 0;
				transform: scale(.96)
			}

			to {
				opacity: 1;
				transform: scale(1)
			}
		}

		.nav-button {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			background: rgba(0, 0, 0, .7);
			border: none;
			color: #fff;
			font-size: 1.9rem;
			width: 60px;
			height: 90px;
			cursor: pointer;
			backdrop-filter: blur(10px);
			opacity: .75;
			transition: .2s
		}

		.nav-button:hover {
			background: rgba(74, 158, 255, .8);
			opacity: 1
		}

		.nav-button.prev {
			left: 12px;
			border-radius: 0 12px 12px 0
		}

		.nav-button.next {
			right: 12px;
			border-radius: 12px 0 0 12px
		}

		.top-controls {
			position: absolute;
			top: 12px;
			left: 12px;
			right: 12px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			z-index: 20
		}

		.back-button,
		.fullscreen-btn {
			background: rgba(0, 0, 0, .7);
			border: none;
			color: #fff;
			padding: 6px 12px;
			border-radius: 8px;
			font-size: .85rem;
			cursor: pointer
		}

		.back-button:hover,
		.fullscreen-btn:hover {
			background: rgba(74, 158, 255, .8)
		}

		.controls {
			background: linear-gradient(135deg, #2a2a2a, #252525);
			padding: 12px;
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 20px;
			border-top: 1px solid #333
		}

		.page-input {
			width: 66px;
			padding: 4px;
			background: #3a3a3a;
			border: 2px solid #555;
			color: #fff;
			text-align: center;
			border-radius: 6px;
			font-size: .85rem
		}

		.page-input:focus {
			outline: none;
			border-color: #4a9eff;
			box-shadow: 0 0 0 2px rgba(74, 158, 255, .15)
		}

		.loading,
		.error {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center
		}

		.loading {
			color: #666;
			font-size: .95rem
		}

		.error {
			color: #ff6b6b;
			font-size: .9rem;
			padding: 18px;
			background: rgba(255, 107, 107, .1);
			border: 2px solid #ff6b6b;
			border-radius: 8px
		}

		/* ===== FULLSCREEN ===== */
		:fullscreen .top-controls,
		:fullscreen .controls,
		:fullscreen .nav-button {
			display: none !important
		}

		:fullscreen .manga-image {
			width: 100vw;
			height: 100vh;
			border-radius: 0;
			box-shadow: none
		}

		/* ===== RESPONSIVE ===== */
@media(max-width:768px) {
        .manga-grid {
                grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
                gap: 8px
        }

			.manga-number {
				font-size: 1.25rem
			}

        .nav-button {
                width: 48px;
                height: 82px;
                font-size: 1.5rem
        }
}

@media(max-width:480px) {
        body {
                padding: 12px;
                font-size: .85rem
        }

        .search-container {
                top: 8px;
                padding: 6px 8px
        }

        .search-hint {
                display: none
        }

        .manga-grid {
                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))
        }

        .header h1 {
                font-size: 1.6rem
        }

        .nav-button {
                width: 40px;
                height: 70px;
                font-size: 1.25rem
        }

        .controls {
                gap: 12px
        }
}

@media (pointer: coarse) {
        .nav-button {
                display: none
        }
}

                /* ===== PAGINATION ===== */
                .pagination {
                        margin: 16px 0;
                        text-align: center;
                        display: flex;
                        justify-content: center;
                        gap: 6px
                }

                .page-btn {
                        padding: 4px 10px;
                        background: #2a2a2a;
                        border: 1px solid #444;
                        color: #fff;
                        border-radius: 6px;
                        font-size: .85rem;
                        cursor: pointer
                }

.page-btn.active {
        background: #4a9eff;
        border-color: #4a9eff
}

/* ===== SCROLL TO TOP BUTTON ===== */
.scroll-top-btn {
        position: fixed;
        right: 18px;
        bottom: 70px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #4a9eff;
        border: none;
        color: #fff;
        font-size: 1rem;
        cursor: pointer;
        opacity: 1;
        transition: opacity .2s;
        display: none
}

.scroll-top-btn:hover {
        opacity: .9
}