/* Archives, rankings and categories */
.harbor-catalogue, .harbor-categories, main.harbor-taxonomy, .harbor-top, .directory-page, .generic-archive .section, .author-page, .dashboard-page, .prose-page, .not-found { min-height: 620px; color: var(--gl-ink); background: var(--gl-bg); }
.harbor-catalogue, .harbor-categories, main.harbor-taxonomy, .harbor-top { padding: 34px 0 46px; }
.harbor-catalogue > .container, .harbor-categories > .container, main.harbor-taxonomy > .container, .harbor-top > .container, .directory-page > .container, .not-found > .container { max-width: var(--gl-width); background: transparent; }
.harbor-page-title, .harbor-section__head h1, .directory-hero h1 { margin: 0 0 26px; color: #fff; font-size: clamp(23px,2vw,34px); font-weight: 900; letter-spacing: -.025em; }
.harbor-page-title::first-letter { color: var(--gl-accent); }
.harbor-filter-bar { display: grid; grid-template-columns: repeat(4,minmax(150px,1fr)) minmax(120px,.7fr) auto; gap: 14px; align-items: end; padding: 18px; margin-bottom: 26px; background: var(--gl-panel); border: 1px solid var(--gl-line); border-left: 4px solid var(--gl-accent); }
.harbor-filter-bar label { display: grid; gap: 7px; color: #bbb; font-size: 11px; }
.harbor-filter-bar select, .harbor-filter-bar input { width: 100%; min-width: 0; height: 41px; padding: 0 11px; color: #eee; background: #1b1b1b; border: 1px solid #444; }
.harbor-filter-bar button { height: 41px; padding: 0 20px; color: #fff; background: var(--gl-accent); border: 0; cursor: pointer; }
.harbor-series-grid, .harbor-grid, .harbor-grid--ranking, .comic-grid, .latest-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; }
.harbor-range-tabs { width: max-content; max-width: 100%; display: flex; margin: 0 auto 28px; overflow: hidden; background: var(--gl-panel); border: 1px solid var(--gl-line); }
.harbor-range-tabs a { min-width: 105px; padding: 14px 20px; color: #c6c9cf; text-align: center; }
.harbor-range-tabs a:hover, .harbor-range-tabs .is-current { color: #fff; background: var(--gl-accent); }
.harbor-ranked { min-width:0; display:flex; flex-direction:column; gap:9px; }
.harbor-ranked > span { align-self:flex-start; min-width:36px; padding:6px 10px; color:#fff; background:var(--gl-accent); border-radius:5px; font-size:12px; font-weight:700; line-height:1.4; text-align:center; font-variant-numeric:tabular-nums; }
.harbor-category-search, .harbor-taxonomy__head { padding: 18px; margin-bottom: 26px; background: var(--gl-panel); border: 1px solid var(--gl-line); border-left: 4px solid var(--gl-accent); }
.harbor-category-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.harbor-category-card { position: relative; aspect-ratio: 16/9; display: grid; place-items: center; overflow: hidden; color: #fff; background: var(--gl-panel); border: 1px solid var(--gl-line); isolation: isolate; }
.harbor-category-card img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.harbor-category-card::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.78)); content: ""; }
.harbor-category-card:hover { border-color: var(--gl-accent); }
.harbor-category-card:hover img { transform: scale(1.04); }
.harbor-category-card span { font-size: clamp(18px,1.8vw,30px); font-weight: 900; text-align: center; }
.harbor-category-card small { position: absolute; right: 10px; bottom: 8px; color: #ddd; font-size: 10px; }

/* Series dossier */
.harbor-detail { padding-bottom: 44px; color: var(--gl-ink); background: var(--gl-bg); }
.harbor-detail-hero { position: relative; min-height: 430px; overflow: hidden; border-bottom: 3px solid var(--gl-accent); isolation: isolate; }
.harbor-detail-hero::before { position: absolute; z-index: -2; inset: 0; background-image: linear-gradient(90deg,rgba(18,20,24,.98) 0%,rgba(18,20,24,.88) 42%,rgba(18,20,24,.22) 78%), var(--harbor-cover); background-position: center, 78% 24%; background-size: cover; content: ""; filter: saturate(.78); }
.harbor-detail-hero::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg,var(--gl-bg),transparent 42%); content: ""; }
.harbor-detail-hero .container { min-height: 430px; display: flex; flex-direction: column; justify-content: space-between; padding-top: 22px; padding-bottom: 58px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; color: #b0b4bd; font-size: 11px; }
.breadcrumbs a:hover { color: var(--gl-accent-2); }
.harbor-detail-hero__copy { max-width: 840px; }
.harbor-kicker, .harbor-summary > span, .harbor-chapters header span { color: var(--gl-accent-2); font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.harbor-detail-hero h1 { margin: 9px 0 8px; color: #fff; font-size: clamp(40px,5.5vw,82px); font-weight: 950; letter-spacing: -.045em; line-height: .98; }
.harbor-detail-hero__copy > p { margin: 0 0 14px; color: #c8cbd1; }
.harbor-hero-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.harbor-hero-tags a { padding: 6px 10px; color: #fff; background: rgba(43,47,56,.9); border: 1px solid #4b515d; font-size: 10px; }
.harbor-detail-body { display: grid; grid-template-columns: minmax(230px,330px) minmax(0,1fr); gap: 34px; margin-top: -34px; }
.harbor-media-card { position: relative; z-index: 3; align-self: start; overflow: hidden; background: var(--gl-panel); border: 1px solid var(--gl-line); box-shadow: 0 20px 55px rgba(0,0,0,.42); }
.harbor-media-card > img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.harbor-media-card__stats { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--gl-line); }
.harbor-media-card__stats span { display: grid; gap: 3px; padding: 12px; color: var(--gl-muted); font-size: 9px; text-align: center; text-transform: uppercase; }
.harbor-media-card__stats span + span { border-left: 1px solid var(--gl-line); }
.harbor-media-card__stats strong { color: #fff; font-size: 19px; }
.harbor-actions { display: grid; gap: 8px; padding: 12px; }
.harbor-read, .bookshelf-button, .share-button { min-height: 43px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; background: var(--gl-accent); border: 1px solid var(--gl-accent); font-weight: 850; cursor: pointer; }
.bookshelf-button, .share-button { background: #30343c; border-color: #424752; }
.harbor-read:hover, .bookshelf-button:hover, .share-button:hover, .bookshelf-button.is-added { background: var(--gl-accent-2); border-color: var(--gl-accent-2); }
.harbor-dossier { min-width: 0; padding-top: 62px; }
.harbor-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-bottom: 28px; border-top: 1px solid var(--gl-line); border-left: 1px solid var(--gl-line); }
.harbor-facts > div { min-width: 0; display: grid; gap: 5px; padding: 15px; border-right: 1px solid var(--gl-line); border-bottom: 1px solid var(--gl-line); }
.harbor-facts span { color: var(--gl-muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.harbor-facts strong { overflow: hidden; color: #fff; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.harbor-summary { padding: 28px; background: var(--gl-panel); border: 1px solid var(--gl-line); }
.harbor-summary h2 { margin: 7px 0 14px; color: #fff; font-size: 25px; }
.harbor-summary .prose { color: #bdc1c9; font-size: 14px; line-height: 1.8; }
.harbor-taxonomy { padding-top: 22px; }
.harbor-taxonomy h2 { margin: 0 0 10px; font-size: 13px; }
.harbor-taxonomy > div { display: flex; flex-wrap: wrap; gap: 7px; }
.harbor-taxonomy a { padding: 7px 9px; color: #b9bdc5; background: #282c34; border: 1px solid #393e48; font-size: 10px; }
.harbor-taxonomy a:hover { color: #fff; border-color: var(--gl-accent); }
.harbor-chapters { padding: 40px 0; margin-top: 40px; background: #181a1f; border-block: 1px solid #2b2f37; }
.harbor-chapters header { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.harbor-chapters h2 { margin: 5px 0 0; font-size: 25px; }
.harbor-chapter-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--gl-line); }
.harbor-chapter-list a { display: grid; grid-template-columns: 50px minmax(0,1fr) 30px; align-items: center; min-height: 70px; color: #ddd; border-right: 1px solid var(--gl-line); border-bottom: 1px solid var(--gl-line); }
.harbor-chapter-list a:hover { color: #fff; background: var(--gl-panel); }
.harbor-chapter-list a > b { color: var(--gl-accent-2); text-align: center; }
.harbor-chapter-list a > span { display: grid; gap: 3px; }
.harbor-chapter-list small { color: var(--gl-muted); }
.harbor-chapter-list i { color: var(--gl-accent); font-style: normal; }

/* Reader and secondary screens */
.inkwave-reader-page, .reader { color: #eee; background: #0d0f12; }
.reader-toolbar { color: #eee; background: #171717; border-top: 3px solid var(--gl-accent); border-bottom-color: #393939; }
.reader-toolbar__back:hover, .reader-tool:hover, .reader-settings button.is-active, .reader-progress span { color: #fff; background: var(--gl-accent); }
.reader-settings { color: #ddd; background: #222; border-color: #444; }
.reader-page { background: #111; }
.reader-chapter-nav { background: #222; border-color: #444; }
.reader-chapter-nav a:hover { color: #fff; background: #303030; }
.reader-chapter-nav__catalog { background: var(--gl-accent) !important; }
.reader-end { color: #ddd; }
.dashboard-hero, .author-profile, .profile-card, .settings-card, .login-card, .text-card, .guest-shelf, .history-list, .prose-page article { color: #ddd; background: var(--gl-panel); border-color: var(--gl-line); }
.dashboard-layout, .account-wrap, .author-page > .container { padding: 34px clamp(18px,3.1vw,64px); background: var(--gl-bg); }
.dashboard-nav { background: #242424; border-color: var(--gl-line); }
.dashboard-nav a { color: #ddd; border-color: var(--gl-line); }
.dashboard-nav a:hover, .dashboard-nav a.is-active { color: #fff; background: var(--gl-accent); }
.profile-form input, .profile-form textarea, .profile-form select { color: #eee; background: #1b1b1b; border-color: #444; }
.prose-page { padding: 38px clamp(18px,3.1vw,64px) 55px; background: var(--gl-bg); }
.recommendations { color: #eee; background: #171717; border-color: var(--gl-line); }





/** DM Harbor — charcoal catalogue and six live tag entrances. */
:root {
 --gl-bg:#1a1d1e; --gl-header:#101010; --gl-panel:#252929; --gl-panel-2:#303535;
 --gl-ink:#d5d7d7; --gl-muted:#979f9f; --gl-line:#333939; --gl-accent:#2799ca;
 --gl-accent-2:#39b9ee; --gl-green:#91c6a8; --gl-width:1520px;
 --blue:var(--gl-accent); --bg:var(--gl-bg); --text:var(--gl-ink); --muted:var(--gl-muted); --line:var(--gl-line); --container:var(--gl-width);
}
html { min-height:100%; scroll-behavior:smooth; background:var(--gl-bg); }
body { margin:0; color:var(--gl-ink); background:var(--gl-bg); font-family:Arial,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif; }
*,*::before,*::after { box-sizing:border-box; }
a { color:inherit; transition:color .15s,background .15s,border-color .15s; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:2px solid #59caff; outline-offset:3px; }
.container { width:100%; max-width:var(--gl-width); padding-inline:20px; margin-inline:auto; }
.button { color:#eee; background:var(--gl-panel-2); border:1px solid #505c5c; border-radius:5px; }
.button--primary,.button:hover { color:#fff; background:var(--gl-accent); border-color:var(--gl-accent); }
.harbor-icon { width:21px; height:21px; flex:0 0 21px; fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.empty-state { min-height:220px; display:grid; align-content:center; gap:10px; padding:30px; color:var(--gl-muted); border:1px solid var(--gl-line); border-radius:8px; text-align:center; }
.empty-state p { margin:0; }
/* Two header bands keep the brand, search and local destinations distinct. */
.harbor-header { position:relative; z-index:100; color:#ccc; background:var(--gl-header); }
.harbor-header-inner { min-height:69px; display:grid; grid-template-columns:minmax(175px,285px) minmax(230px,650px) 1fr; align-items:center; gap:28px; padding-block:10px; }
.harbor-brand { min-width:0; display:flex; align-items:center; gap:11px; color:#e1e5e5; font-size:24px; font-weight:750; letter-spacing:-.035em; line-height:1.1; }
.harbor-brand__icon { display:block; width:44px; height:44px; flex:0 0 44px; object-fit:contain; }
.harbor-brand > span { min-width:0; overflow-wrap:anywhere; }
.harbor-brand:hover { color:var(--gl-accent-2); }
.harbor-header-search { display:flex; align-items:stretch; height:42px; margin:0; overflow:hidden; background:#fafafa; border:1px solid #d1d1d1; border-radius:13px; }
.harbor-header-search input[type="search"] { min-width:0; width:100%; padding:0 16px; color:#333; background:#fafafa; border:0; outline:none; font-size:14px; }
.harbor-header-search input::placeholder { color:#8c9295; }
.harbor-header-search button { display:grid; place-items:center; flex:0 0 45px; padding:0; color:var(--gl-accent); background:transparent; border:0; cursor:pointer; }
.harbor-header-search button:hover { background:#e7f5fc; }
.harbor-account { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:12px 23px; }
.harbor-account a { display:flex; align-items:center; justify-content:center; gap:6px; color:#cbd0d0; font-size:14px; line-height:1.2; }
.harbor-account a:hover { color:var(--gl-accent-2); }
.harbor-account .harbor-icon { width:16px; height:16px; flex-basis:16px; }
.harbor-nav-band { background:#262a2a; }
#harbor-navigation { min-height:53px; display:flex; align-items:center; justify-content:space-between; gap:15px; }
#harbor-navigation ul { min-width:0; display:flex; align-items:center; flex-wrap:wrap; gap:4px 24px; margin:0; padding:0; list-style:none; }
#harbor-navigation a { display:block; padding:12px 2px; color:#c9cece; font-size:14px; }
#harbor-navigation a:hover,#harbor-navigation a[aria-current="page"] { color:var(--gl-accent-2); }
.harbor-nav-language .language-switcher > button { height:40px; color:#b4bdbd; }
.harbor-nav-language .language-switcher__menu { top:44px; background:#292f2f; border-color:#424a4a; }
.harbor-nav-language .language-switcher__menu a { padding:8px 11px!important; color:#cdd4d4; }
.harbor-menu-toggle { display:none; }
/* Exactly the live terms populate the six colored cells. */
.harbor-home { min-height:550px; padding:26px 0 30px; }
.harbor-discovery { margin-bottom:23px; overflow:hidden; border-radius:8px; box-shadow:0 5px 18px #0002; }
.harbor-popular-tags { display:grid; grid-template-columns:repeat(var(--tag-count,6),minmax(0,1fr)); gap:4px; margin:0 0 4px; }
.harbor-popular-tag { min-width:0; min-height:56px; display:flex; align-items:center; justify-content:center; padding:9px 13px; color:#ede6df; font-size:17px; line-height:1.25; text-align:center; }
.harbor-popular-tag > span { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; }
.harbor-popular-tag:hover { filter:brightness(1.25); color:#fff; }
.harbor-tag-color-0 { background:#572a7f; }
.harbor-tag-color-1 { background:#7c241b; }
.harbor-tag-color-2 { background:#4d2c06; }
.harbor-tag-color-3 { background:#7d2c6b; }
.harbor-tag-color-4 { background:#81570d; }
.harbor-tag-color-5 { background:#42684a; }
.harbor-catalogue-search { min-height:46px; display:grid; grid-template-columns:minmax(0,1fr) 170px 150px 140px; gap:4px; margin:0; }
.harbor-catalogue-search input[type="search"] { width:100%; min-width:0; height:46px; padding:0 15px; color:#333; background:#fff; border:1px solid #c8cece; border-radius:0; font-size:14px; }
.harbor-catalogue-search input::placeholder { color:#858d8f; }
.harbor-catalogue-search button,.harbor-catalogue-search > a { display:flex; align-items:center; justify-content:center; gap:7px; padding:10px; color:#f4f9ff; background:#337eb2; border:0; border-radius:0; font-size:14px; text-align:center; cursor:pointer; }
.harbor-catalogue-search button:hover,.harbor-catalogue-search > a:hover { background:#3e9bd5; }
.harbor-catalogue-search .harbor-icon { width:16px; height:16px; flex-basis:16px; }
.harbor-languages { display:flex; flex-wrap:wrap; gap:4px; padding-top:4px; background:#1b1f20; }
.harbor-languages a { flex:1 0 100px; padding:12px 14px; color:#b8c0c0; background:#262b2c; font-size:12px; text-align:center; }
.harbor-languages a:hover,.harbor-languages a[aria-current="true"] { color:#e7f5ff; background:#2f4149; }
.harbor-catalogue-heading h1 { display:flex; align-items:center; gap:9px; margin:20px 0 13px; color:#d9e0e2; font-size:26px; font-weight:500; line-height:1.35; overflow-wrap:anywhere; }
.harbor-catalogue-heading h1 > .harbor-icon { color:var(--gl-accent); }
.harbor-catalogue-heading p { margin:0 0 16px; color:#9fa9aa; font-size:13px; line-height:1.7; }
.harbor-sort-tabs { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:20px; margin:0 0 16px; }
.harbor-sort-tabs a { padding:5px 1px; color:#8c999c; border-bottom:2px solid transparent; font-size:11px; }
.harbor-sort-tabs a:hover,.harbor-sort-tabs a[aria-current="page"] { color:var(--gl-accent-2); border-bottom-color:var(--gl-accent); }
/* Cover rows use a quiet caption and genuine language/page metadata. */
.harbor-gallery-grid,.harbor-series-grid,.harbor-grid,.harbor-grid--ranking,.comic-grid,.latest-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:start; gap:22px 14px; }
.harbor-card { min-width:0; margin:0; padding:0; background:var(--gl-panel); border:0; border-radius:7px; box-shadow:0 8px 20px #0002; overflow:hidden; }
.harbor-card__link { display:block; }
.harbor-card__genre { min-height:32px; display:flex; align-items:center; padding:5px 13px; overflow:hidden; color:#e7ded7; font-size:15px; line-height:1.4; text-overflow:ellipsis; white-space:nowrap; }
.harbor-card__cover { aspect-ratio:3/4; overflow:hidden; background:#202729; }
.harbor-card__cover img { width:100%; height:100%; display:block; object-fit:cover; transition:opacity .18s; }
.harbor-card:hover img { opacity:.84; }
.harbor-card h3 { max-height:58px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin:0; padding:11px 13px 0; color:#cbd5d7; font-size:14px; font-weight:700; line-height:1.55; overflow-wrap:anywhere; }
.harbor-card__stats { min-height:36px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 13px 10px; color:#c2cccc; font-size:12px; }
.harbor-card__stats > span { display:flex; align-items:center; gap:7px; }
.harbor-card__stats .harbor-icon { width:18px; height:18px; flex-basis:18px; }
.harbor-card__language { color:#d9f1f8; font-size:10px; font-weight:700; }
.harbor-pagination-wrap { display:flex; align-items:center; justify-content:center; gap:8px; padding:35px 0; }
.harbor-pagination { display:flex; justify-content:center; padding:0; }
.harbor-pagination ul { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; margin:0; padding:0; list-style:none; }
.harbor-pagination a,.harbor-pagination span,.harbor-last-page { min-width:35px; height:38px; display:grid; place-items:center; padding:0 12px; color:#b5bebe; background:#282d2e; border:0; border-radius:5px; font-size:15px; font-weight:400; }
.harbor-pagination .current,.harbor-pagination a:hover,.harbor-last-page:hover { color:#fff; background:#188ab9; box-shadow:none; }
.harbor-pagination .dots { min-width:20px; background:transparent; }
/* Introduction after pagination, followed by a compact black footer. */
.harbor-home-about { padding:24px; margin-top:10px; color:#aeb8b9; background:#151818; border-radius:4px; }
.harbor-home-about header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:13px; }
.harbor-home-about h2 { margin:0; color:var(--gl-accent-2); font-size:25px; font-weight:400; line-height:1.3; overflow-wrap:anywhere; }
.harbor-home-about header a { flex-shrink:0; color:#66b7dc; font-size:12px; }
.harbor-home-about p { margin:0; color:#b0b7b8; font-size:14px; line-height:1.85; overflow-wrap:anywhere; }
.harbor-footer { padding:23px 0 19px; color:#879394; background:#101212; border-top:1px solid #292f2f; }
.harbor-footer__top { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:17px; }
.harbor-footer__brand { color:#4bb4df; font-size:19px; font-weight:700; overflow-wrap:anywhere; }
.harbor-footer__nav,.harbor-footer__nav .site-footer__menu { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:12px 23px; margin:0; padding:0; list-style:none; }
.harbor-footer__nav a { color:#c0c8c8; font-size:13px; }
.harbor-footer__nav a:hover { color:var(--gl-accent-2); }
.harbor-footer__bottom { display:flex; justify-content:space-between; gap:30px; padding-top:15px; border-top:1px solid #293131; }
.harbor-footer__bottom p { max-width:850px; margin:0; color:#7f8c8e; font-size:10px; line-height:1.7; }
.harbor-footer__bottom p a { color:#9ab8c3; text-decoration:underline; }
.harbor-footer__bottom small { color:#7f8c8e; font-size:10px; line-height:1.7; text-align:right; }
/* Real tag index and matching secondary pages. */
.harbor-filter-bar { grid-template-columns:repeat(3,minmax(0,1fr)); border-radius:5px; }
.harbor-alphabet { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin:22px 0; }
.harbor-alphabet a { min-width:29px; min-height:31px; display:grid; place-items:center; padding:4px 7px; color:#b8c6c8; background:#252d2e; border-radius:3px; font-size:12px; }
.harbor-alphabet a:hover,.harbor-alphabet a[aria-current="page"] { color:#fff; background:#237fa4; }
.harbor-tag-search { max-width:650px; height:43px; display:flex; align-items:center; gap:10px; margin:0 0 30px; padding-left:13px; background:#262d2e; border:1px solid #394546; border-radius:5px; overflow:hidden; }
.harbor-tag-search input { width:100%; min-width:0; padding:0; color:#ddd; background:transparent; border:0; }
.harbor-tag-search button { align-self:stretch; flex-shrink:0; padding:0 18px; color:#fff; background:#327fa5; border:0; cursor:pointer; }
.harbor-tag-grid { columns:4; column-gap:18px; padding-top:25px; border-top:1px solid var(--gl-line); }
.harbor-tag-group { break-inside:auto; margin-bottom:18px; padding:10px; background:#202728; border-radius:6px; }
.harbor-tag-group h2 { margin:0 0 12px; color:#aec6ce; font-size:18px; text-align:center; }
.harbor-tag-row { min-height:34px; display:flex; justify-content:space-between; align-items:stretch; gap:10px; margin-bottom:7px; color:#c5d0d2; background:#354244; border-radius:3px; font-size:12px; break-inside:avoid; }
.harbor-tag-row:hover { color:#fff; background:#315f6f; }
.harbor-tag-row > span { padding:7px 10px; overflow-wrap:anywhere; }
.harbor-tag-row small { min-width:36px; display:grid; place-items:center; padding:5px 7px; color:#bccbcc; background:#263234; font-size:10px; }
body[data-reader] > main { width:100%; margin:0; }
@media(max-width:1190px) {
 .harbor-header-inner { grid-template-columns:minmax(175px,245px) minmax(200px,1fr) auto; gap:20px; }
 .harbor-gallery-grid,.harbor-series-grid,.harbor-grid,.harbor-grid--ranking,.comic-grid,.latest-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
 .harbor-catalogue-search { grid-template-columns:minmax(0,1fr) 130px 120px 120px; }
 .harbor-tag-grid { columns:3; }
}
@media(max-width:900px) {
 .harbor-header-inner { grid-template-columns:minmax(170px,220px) minmax(180px,1fr) auto; gap:14px; }
 .harbor-account { gap:12px; }
 .harbor-account a { font-size:12px; }
 #harbor-navigation ul { gap:4px 18px; }
 #harbor-navigation a { font-size:12px; }
 .harbor-popular-tag { padding-inline:9px; font-size:15px; }
 .harbor-catalogue-search { grid-template-columns:minmax(0,1fr) 95px 110px 100px; }
 .harbor-detail-body { grid-template-columns:minmax(190px,270px) minmax(0,1fr); gap:22px; }
}
@media(max-width:700px) {
 .container { padding-inline:15px; }
 .harbor-range-tabs a { flex:1 1 0; min-width:0; padding:12px 15px; }
 .harbor-header-inner { grid-template-columns:minmax(0,1fr) auto 28px; gap:13px; padding-block:12px; }
 .harbor-brand { font-size:21px; }
 .harbor-brand__icon { width:34px; height:34px; flex-basis:34px; }
 .harbor-header-search { grid-column:1/-1; grid-row:2; height:38px; border-radius:8px; }
 .harbor-account { grid-column:2; grid-row:1; }
 .harbor-account .harbor-icon { display:none; }
 .harbor-menu-toggle { grid-column:3; grid-row:1; display:grid; place-items:center; width:28px; height:32px; padding:0; color:#a6bbbf; background:transparent; border:0; cursor:pointer; }
 #harbor-navigation { min-height:0; display:none; padding-block:10px; }
 #harbor-navigation.is-open { display:flex; align-items:flex-start; flex-direction:column; gap:8px; }
 #harbor-navigation ul { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:0 10px; }
 #harbor-navigation a { padding:10px 7px; font-size:13px; }
 .harbor-home { padding-top:20px; }
 .harbor-popular-tags { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .harbor-popular-tag { min-height:47px; font-size:14px; }
 .harbor-catalogue-search { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .harbor-catalogue-search input[type="search"] { grid-column:1/-1; height:43px; font-size:13px; }
 .harbor-catalogue-search button,.harbor-catalogue-search > a { padding:10px 8px; font-size:12px; }
 .harbor-languages a { flex-basis:80px; padding:9px 7px; font-size:11px; }
 .harbor-gallery-grid,.harbor-series-grid,.harbor-grid,.harbor-grid--ranking,.comic-grid,.latest-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 12px; }
 .harbor-card__genre { min-height:28px; padding:4px 10px; font-size:12px; }
 .harbor-card h3 { padding:9px 10px 0; font-size:12px; }
 .harbor-card__stats { padding:7px 10px 9px; font-size:11px; }
 .harbor-home-about { padding:21px; }
 .harbor-home-about h2 { font-size:22px; }
 .harbor-home-about p { font-size:13px; }
 .harbor-tag-grid { columns:2; }
 .harbor-footer__top { align-items:flex-start; flex-direction:column; gap:15px; }
 .harbor-footer__nav,.harbor-footer__nav .site-footer__menu { justify-content:flex-start; gap:10px 20px; }
 .harbor-footer__bottom { flex-direction:column; gap:10px; }
 .harbor-footer__bottom small { text-align:left; }
}
@media(max-width:480px) {
 .container { padding-inline:12px; }
 .harbor-popular-tags { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .harbor-gallery-grid,.harbor-series-grid,.harbor-grid,.harbor-grid--ranking,.comic-grid,.latest-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 11px; }
 .harbor-card h3 { max-height:55px; font-size:12px; }
 .harbor-card__stats .harbor-icon { width:15px; height:15px; flex-basis:15px; }
 .harbor-home-about { padding:20px; }
 .harbor-home-about header { gap:12px; align-items:flex-start; }
 .harbor-home-about h2 { font-size:20px; }
 .harbor-home-about header a { font-size:11px; }
 .harbor-pagination-wrap { gap:5px; padding-block:26px; }
 .harbor-pagination ul { gap:5px; }
 .harbor-pagination a,.harbor-pagination span,.harbor-last-page { min-width:29px; height:35px; padding-inline:7px; font-size:13px; }
 .harbor-tag-grid { columns:1; }
 .harbor-detail-body { display:block; }
 .harbor-media-card { width:min(78%,310px); margin:-14px auto 24px; }
 .harbor-dossier { padding-top:0; }
 .harbor-detail-hero h1 { font-size:40px; }
 .harbor-chapter-list { grid-template-columns:1fr; }
 .harbor-filter-bar { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; } }
