@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
:root {
    --bg-color: #111;
    --text-color: #fff;
    --btn-bg: #fff;
    --btn-text: #111;
    --btn-hover-bg: #ddd;
    --btn-hover-border: #ddd;
    --input-bg: #111;
    --input-text: #fff;
    --input-border: #fff;
    --dots-color: #666;
    --cover-blur: 0px;
}
* { font-family: 'Plus Jakarta Sans', sans-serif; }
body { margin: 0; padding: 0; background: var(--bg-color); color: var(--text-color); font-size: 14px; }
a { color: inherit; text-decoration: none; }
.action-btn { cursor: pointer; }
button, input, select { font-family: inherit; font-size: inherit; line-height: inherit; box-sizing: border-box; padding: 4px 12px; margin: 0; border-radius: 0; appearance: none; -webkit-appearance: none; vertical-align: middle; }
button { background: var(--btn-bg); color: var(--btn-text); border: 1px solid var(--btn-bg); cursor: pointer; }
input, select { border: 1px solid var(--input-border); color: var(--input-text); background: var(--input-bg); }
select { cursor: pointer; appearance: auto; -webkit-appearance: auto; }
input:focus, select:focus { outline: none; }
main { max-width: 1200px; margin: 0 auto; padding: 20px 20px 60px 20px; }
@media (min-width: 1281px) {
    main {
        width: calc(100% - 80px);
        max-width: 1440px;
    }
}
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding: 12px 0; }
.topbar h1 { margin: 0; }
.topbar-controls { display: flex; gap: 5px; align-items: center; }
.topbar-controls form { display: flex; gap: 5px; align-items: center; }
.pagination-container { display: flex; justify-content: center; margin-top: 30px; }
.pagination { display: flex; gap: 5px; align-items: center; }
.page-link { padding: 5px 10px; color: var(--text-color); text-decoration: none; border: none; background: transparent; }
.page-link.active { background: var(--btn-bg); color: var(--btn-text); border: 1px solid var(--btn-bg); font-weight: bold; }
.page-dots { color: var(--dots-color); padding: 0 4px; }
.footer { margin-top: 30px; display: flex; justify-content: space-between; align-items: center; gap: 15px; flex-wrap: wrap; }
.footer-credits { line-height: 1.5; }
.footer-credits a:hover, .footer-links a:hover, .top-menu-link:hover { text-decoration: underline; }
.ui-text { }

/* Search UI */
.search-container { position: relative; display: flex; }
#search-form { margin: 0; padding: 0; display: flex; flex-direction: column; width: 100%; }
.search-wrapper { display: flex; width: 100%; }
.search-input { width: 250px; }
.search-input:focus, .search-input:not(:placeholder-shown) { width: 210px; outline: none; }
.search-btn { width: 40px; background: var(--btn-bg); color: var(--btn-text); border: 1px solid var(--btn-bg); padding: 4px 0; cursor: pointer; display: none; text-align: center; }
.search-input:focus + .search-btn, .search-input:not(:placeholder-shown) + .search-btn { display: block; }
.autocomplete-results { position: absolute; top: 100%; left: 0; width: 100%; background: var(--bg-color); border: 1px solid var(--input-border); border-top: none; z-index: 100; display: none; max-height: 200px; overflow-y: auto; text-align: left; }
.autocomplete-item { padding: 5px 12px; cursor: pointer; }
.autocomplete-item:hover { background: var(--btn-bg); color: var(--btn-text); }

/* Grid specific */
.sort-container { margin-bottom: 15px; text-align: left; }
.sort-container label { font-weight: bold; margin-right: 8px; }

.grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.item { text-align: center; }
.item img { width: 100%; height: auto; display: block; filter: blur(var(--cover-blur, 0px)); clip-path: inset(0); }
.item-title { margin-top: 6px; }
@media (max-width: 1360px) {
    .grid { grid-template-columns: repeat(5, 1fr); gap: 15px; }
    .related-section .item:nth-child(6) { display: none; }
}
@media (max-width: 1200px) {
    main { padding: 10px 10px 40px 10px; }
}
@media (max-width: 900px) {
    .grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .related-section .item:nth-child(6) { display: block; }
}
@media (max-width: 768px) {
    .container { flex-direction: column; gap: 8px; }
    .topbar-controls { flex-wrap: wrap; gap: 5px; }
    
    .search-input { width: 160px; }
    .search-input:focus, .search-input:not(:placeholder-shown) { width: 120px; }
    .topbar.search-active #topbar-title, .topbar.search-active .top-menu-link { display: none; }
    .topbar.search-active #topbar-controls { width: 100%; justify-content: stretch; }
    .topbar.search-active .search-container { flex-grow: 1; }
    .topbar.search-active .search-input { width: 100%; }
    .topbar.search-active .search-input:focus, .topbar.search-active .search-input:not(:placeholder-shown) { width: calc(100% - 40px); outline: none; }
    
    .footer { flex-direction: column; align-items: flex-end; gap: 12px; }
    .footer-credits { text-align: right; order: 1; }
}
@media (max-width: 600px) {
    .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .topbar-controls { flex-wrap: wrap; gap: 5px; }
    
    .search-input { width: 160px; }
    .search-input:focus, .search-input:not(:placeholder-shown) { width: 120px; }
    .topbar.search-active #topbar-title, .topbar.search-active .top-menu-link { display: none; }
    .topbar.search-active #topbar-controls { width: 100%; justify-content: stretch; }
    .topbar.search-active .search-container { flex-grow: 1; }
    .topbar.search-active .search-input { width: 100%; }
    .topbar.search-active .search-input:focus, .topbar.search-active .search-input:not(:placeholder-shown) { width: calc(100% - 40px); outline: none; }
    
    .footer { flex-direction: column; align-items: flex-end; gap: 12px; }
    .footer-credits { text-align: right; order: 1; }
}
@media (max-width: 450px) {
    .topbar { flex-direction: column; align-items: center; gap: 10px; text-align: center; }
    .topbar h1 { text-align: center; width: 100%; }
    .topbar-controls { width: 100%; justify-content: center; align-items: center; gap: 8px; flex-wrap: nowrap; }
    .search-input { width: 180px; }
    .search-input:focus, .search-input:not(:placeholder-shown) { width: 140px; }
    .footer { align-items: center; text-align: center; }
    .footer-credits { text-align: center; }
    .footer-links { text-align: center; }
}

/* Gallery specific */
.container { display: flex; gap: 20px; }
.info { flex: 1; }
.info p { margin: 6px 0; line-height: 1.5; }
.related-section { margin-top: 50px; }
.related-section h3 { text-align: left; margin-bottom: 20px; }
.tag-item { display: inline-block; text-decoration: none; cursor: pointer; margin-right: 12px; margin-bottom: 4px; }
.tag-item:hover { text-decoration: underline; background: transparent; }
.preview-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 30px; }
.preview-grid img { width: 100%; height: auto; aspect-ratio: 1 / 1.414; display: block; object-fit: cover; filter: blur(var(--cover-blur, 0px)); clip-path: inset(0); }
.preview-grid a { display: block; text-decoration: none; }
.cover img { width: 100%; height: auto; max-width: 350px; filter: blur(var(--cover-blur, 0px)); clip-path: inset(0); }
@media (max-width: 768px) {
    .container { flex-direction: column; gap: 8px; }
    .cover img { max-width: 90%; margin: 0 auto; display: block; }
    .narrow-page .cover img { max-width: 70%; }
    .preview-grid { grid-template-columns: repeat(2, 1fr); gap: 5px; }
    .info { width: 100%; }
    .related-section h3 { text-align: center; }
}

/* Reader specific */
#viewer { display: flex; justify-content: center; align-items: center; min-height: 90vh; margin-bottom: 10px; }
#manga-page { max-width: 100%; max-height: 98vh; height: auto; object-fit: contain; cursor: pointer; }
.controls { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 25px; margin-bottom: 20px; }
@media (max-width: 768px) {
    #viewer { min-height: auto; }
}

/* Settings */
.settings-content { margin-top: 30px; }
.settings-content button { margin-left: 10px; }

/* Utilities / Component Classes */
.reader-topbar { flex-direction: column; gap: 4px; text-align: center; }
.reader-sitename { font-size: 1rem; font-weight: bold; width: 100%; text-align: center; }
.reader-sitename a:hover { text-decoration: underline; }
.reader-title { font-size: 1rem; font-weight: normal; text-align: center; width: 100%; }
.reader-title a:hover { text-decoration: underline; }
.cancel-btn-group { margin-top: 15px; }
.action-btn-group { display: flex; gap: 5px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.action-btn-group.wrap { flex-wrap: wrap; }
.hidden { display: none !important; }
.show-more-wrapper { width: 100%; text-align: center; margin-top: 20px; }
.show-more-wrapper.hidden { display: none; }
#sort-select, #cat-select { height: 28px; }
.top-menu-link { margin-left: 5px; color: var(--text-color); }
.hidden-option { display: none; }
.download-label { margin-right: 4px; }
.back-link-wrapper { margin-top: 15px; }
.back-link-wrapper a:hover { text-decoration: underline; }
.warning-text { margin-top: 12px; margin-bottom: 0; line-height: 1.5; }

.error-text { color: red; margin-bottom: 15px; }

/* Local cartridge-library behavior added without changing the LocalNH page layout. */
#library-status { margin: 0 0 15px; }
#library-status.error-text { color: #ff7777; }
.library-item { cursor: pointer; }
.library-item img { aspect-ratio: 1 / 1.414; background: #1a1a1a; object-fit: cover; }
#preview-grid .preview-link { cursor: pointer; }
#preview-grid .preview-link:focus { outline: 1px solid var(--text-color); outline-offset: 2px; }

/* Form / Admin */
.remote-input { width: 250px; }
.remote-field { margin-bottom: 15px; }
.remote-field-sm { margin-bottom: 10px; }
.login-btn { margin-left: 0 !important; }

/* Utilities */
.reset-search-link { cursor: pointer; }
.reset-search-link:hover { text-decoration: underline; }
.tag-item.static { cursor: default; }
.tag-item.static:hover { text-decoration: none; }
.copyable-id { font-weight: bold; cursor: pointer; }
.copyable-id:hover { text-decoration: underline; }

/* User Session / Account */
.user-save-row { display: flex; align-items: center; gap: 10px; }
.user-action-group { display: flex; gap: 5px; margin-top: 15px; align-items: center; flex-wrap: wrap; }
.user-action-group button, .user-form button { margin-left: 0; }
.feedback-text { margin-left: 5px; }
.user-feedback { margin-top: 12px; margin-bottom: 0; line-height: 1.5; }
.user-feedback:empty { display: none; }
.user-desc { margin-top: 20px; line-height: 1.6; max-width: 600px; }

/* Favorites UI */
.fav-entry-count { margin: 10px 0 15px 0; }
.fav-entry-count a { cursor: pointer; }
.fav-entry-count a:hover { text-decoration: underline; }
.fav-btn-wrapper { margin-top: 8px; text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.cum-reset-btn { position: relative; cursor: pointer; }
.cum-reset-btn .cum-text-hover { display: none; }
.cum-reset-btn:hover:not(.cum-is-reset) .cum-text-normal { display: none; }
.cum-reset-btn:hover:not(.cum-is-reset) .cum-text-hover { display: inline; }
.item.fav-removed .fav-item-link { pointer-events: none; }
.item.fav-removed .item-title { color: var(--dots-color); }
.empty-favorites-msg { margin-top: 20px; }

/* Orphaned Favorites List */
.orphan-list { margin-top: 20px; display: flex; flex-direction: column; gap: 18px; }
.orphan-row { display: flex; align-items: center; gap: 20px; justify-content: space-between; }
.orphan-id { flex-shrink: 0; font-weight: bold; min-width: 65px; color: var(--text-color); }
.orphan-title { flex: 1; min-width: 0; line-height: 1.5; word-break: break-word; }
.orphan-actions { display: flex; gap: 5px; flex-shrink: 0; align-items: center; }
.orphan-row.fav-removed .orphan-title { color: var(--dots-color); }
@media (max-width: 768px) {
    .orphan-row { flex-direction: column; align-items: flex-start; gap: 6px; }
    .orphan-id { min-width: auto; }
    .orphan-actions { margin-top: 4px; }
}

/* Directory */
.dir-filters { margin-bottom: 30px; }
#dir-form { display: flex; gap: 15px; align-items: center; width: 100%; flex-wrap: wrap; }
.dir-filter-group { display: flex; gap: 8px; align-items: center; }
.dir-columns { column-count: 4; column-gap: 20px; }
.dir-item { break-inside: avoid-column; page-break-inside: avoid; margin-bottom: 8px; display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
.dir-count { font-weight: normal; color: var(--text-color); }
.dir-name { font-weight: bold; color: var(--text-color); text-decoration: none; }
.dir-name:hover { text-decoration: underline; }
@media (max-width: 1200px) { .dir-columns { column-count: 3; } }
@media (max-width: 900px) { .dir-columns { column-count: 2; } }
@media (max-width: 600px) { .dir-columns { column-count: 1; } }