/* =========================================================
   ASMR Database - Shared Stylesheet
   Templates: base / index / works / work / ranking / ranking_month
   ========================================================= */

/* 01. Theme and reset */
:root {
    color-scheme: dark;
    --bg: #121212;
    --surface: #1c1c1c;
    --surface-light: #242424;
    --surface-hover: #2d2d2d;
    --border: #353535;
    --text: #f1f1f1;
    --text-sub: #aaa;
    --text-muted: #777;
    --accent: #1686d9;
    --accent-hover: #1173bd;
    --dlsite: #1686d9;
    --dlsite-hover: #1173bd;
    --fanza: #e23b3b;
    --fanza-hover: #c93030;
    --rating: #f5c542;
    --radius: 10px;
    --content-width: 1100px;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }
body {
    margin: 0;
    min-width: 320px;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
    line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { color: var(--text); line-height: 1.4; }
h1 { margin: 0 0 22px; font-size: 30px; }
h2 { font-size: 23px; }
p { margin-top: 0; }

/* 02. Shared layout and header */
main, .container {
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 30px 20px 60px;
}
header, .site-header {
    background: #181818;
    border-bottom: 1px solid var(--border);
}
.header-inner {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 30px;
}
.logo, .site-title { flex-shrink: 0; font-size: 20px; font-weight: 750; white-space: nowrap; }
.logo a, .site-title { color: var(--text); }
.logo a:hover, .site-title:hover { color: #fff; }
.search-form, .header-search { display: flex; align-items: center; flex: 1; min-width: 0; gap: 8px; }
.search-form input, .header-search input, .top-search input {
    width: 100%; min-width: 0; padding: 10px 14px;
    background: var(--surface-light); color: var(--text);
    border: 1px solid var(--border); border-radius: 7px; font-size: 14px;
}
.search-form input::placeholder, .header-search input::placeholder, .top-search input::placeholder { color: var(--text-muted); }
.search-form input:focus, .header-search input:focus, .top-search input:focus { outline: none; border-color: var(--accent); }
.search-form button, .top-search button {
    flex-shrink: 0; padding: 10px 18px; border: 0; border-radius: 7px;
    background: var(--accent); color: #fff; font-weight: 700;
}
.search-form button:hover, .top-search button:hover { background: var(--accent-hover); }
.breadcrumb { margin-bottom: 22px; color: var(--text-sub); font-size: 13px; }
.breadcrumb a { color: var(--text-sub); }
.breadcrumb a:hover { color: var(--text); }
.section { margin: 32px 0; }
.section-title { margin: 0 0 18px; font-size: 22px; }
.empty { color: var(--text-muted); }
.empty-message {
    padding: 36px 24px; background: var(--surface); color: var(--text-sub);
    border: 1px solid var(--border); border-radius: var(--radius); text-align: center;
}
.search-result-count { margin: 0 0 18px; color: var(--text-sub); font-size: 14px; }

/* 03. Shared metadata and chips */
.voice-actors, .circle, .work-meta, .platform { color: var(--text-sub); font-size: 13px; }
.voice-actors, .circle { margin: 7px 0; }
.filter-link { color: #75bfff; }
.filter-link:hover { color: #addbff; text-decoration: underline; }
.tags, .tag-list, .top-link-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tags { margin-top: 10px; }
.tag {
    display: inline-flex; align-items: center; max-width: 100%;
    padding: 5px 11px; background: var(--surface-light); color: var(--text-sub);
    border: 1px solid var(--border); border-radius: 999px;
    font-size: 12px; line-height: 1.5; overflow-wrap: anywhere;
}
a.tag:hover { background: var(--surface-hover); border-color: #555; color: var(--text); }
.rating { color: var(--rating); font-weight: 700; }
.review-count { color: var(--text-sub); font-size: 13px; font-weight: 400; }
.price { margin-top: 8px; color: var(--text); font-weight: 700; }

/* 04. Platform and purchase buttons */
.platform-filters, .actions, .products { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.platform-button, .action-button, .product-button, .purchase-button {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 9px 15px; border: 0; border-radius: 7px;
    color: #fff; font-size: 13px; font-weight: 700; text-align: center;
    transition: background .15s, opacity .15s;
}
.platform-button { min-width: 82px; min-height: 34px; padding: 6px 14px; }
.platform-button:hover, a.action-button:hover, a.product-button:hover, a.purchase-button:hover { color: #fff; opacity: .88; }
.dlsite-button, .product-button.dlsite, .purchase-button.dlsite { background: var(--dlsite); }
.fanza-button, .product-button.fanza, .purchase-button.fanza { background: var(--fanza); }
.platform-button.platform-off { background: #4b4b4b; color: #aaa; }
.preview-button { background: #454545; color: #d0d0d0; cursor: default; }
.product-button:not(.dlsite):not(.fanza) { background: var(--accent); }
.purchase-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* 05. Works list and filters */
.works-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-bottom: 22px; }
.works-title-row h1 { margin: 0; }
.active-filters, .filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.filter-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; background: var(--surface-light); color: var(--text);
    border: 1px solid var(--border); border-radius: 999px; font-size: 12px;
}
.filter-chip:hover { background: var(--surface-hover); color: var(--text); }
.work-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.work-card {
    display: flex; flex-direction: column; min-width: 0; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.work-card:hover { border-color: #555; }
.work-card .work-image {
    display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
    object-fit: cover; object-position: center; background: var(--surface-light);
}
.work-content { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 16px; min-width: 0; }
.work-card .work-title { margin: 0 0 10px; font-size: 16px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.work-card a:hover .work-title { color: var(--accent); }
.work-card .tags { margin: 10px 0; }
.work-card .actions { margin-top: auto; padding-top: 16px; }

/* 06. Work detail */
.work-header {
    display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    align-items: start; gap: 28px;
}
.work-header-image, .work-header-content { min-width: 0; }
.work-header .work-image {
    display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
    object-fit: contain; background: var(--surface-light); border-radius: var(--radius);
}
.work-header .work-title { margin: 0 0 14px; font-size: 24px; line-height: 1.5; overflow-wrap: anywhere; }
.work-header .rating { margin: 16px 0 12px; }
.work-header .products { margin: 16px 0 10px; }
.product-info { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--text-sub); font-size: 13px; }
.description { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.85; color: var(--text); }
.info-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); }
.info-table th, .info-table td { padding: 13px 16px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.info-table tr:last-child th, .info-table tr:last-child td { border-bottom: 0; }
.info-table th { width: 150px; color: var(--text-sub); font-size: 13px; font-weight: 600; background: var(--surface-light); }
.info-table td { overflow-wrap: anywhere; }

/* Grouped circle / voice actors / tags under work title */
.work-meta-links { display: flex; flex-direction: column; gap: 16px; margin: 20px 0; }
.work-meta-row { display: grid; grid-template-columns: 75px minmax(0, 1fr); align-items: start; gap: 12px; }
.work-meta-label { padding-top: 6px; color: var(--text-sub); font-size: 13px; }
.work-meta-values { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.work-meta-values .tag { padding: 6px 12px; font-size: 12px; }
.work-meta-values .filter-link { display: inline-block; padding-top: 5px; overflow-wrap: anywhere; }

/* Related works */
.related-work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.related-work-card { min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.related-work-card:hover { border-color: var(--accent); }
.related-work-image {
    display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
    object-fit: contain; background: var(--surface-light);
}
.related-work-content { padding: 14px; }
.related-work-title {
    display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; color: var(--text); font-size: 14px;
    font-weight: 700; line-height: 1.5; overflow-wrap: anywhere;
}
.related-work-title:hover { color: var(--accent); }
.related-work-date { margin-top: 8px; color: var(--text-muted); font-size: 12px; }

/* 07. Ranking */
.ranking-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 28px; }
.ranking-tabs a {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 9px 18px; background: var(--surface-light); color: var(--text-sub);
    border: 1px solid var(--border); border-radius: 8px; font-weight: 600;
}
.ranking-tabs a:hover { background: var(--surface-hover); color: var(--text); }
.ranking-tabs a.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.ranking-filter { margin: 0 0 32px; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.ranking-filter form { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.ranking-filter label { font-weight: 700; }
.ranking-filter select { min-width: 140px; padding: 10px 14px; background: var(--surface-light); color: var(--text); border: 1px solid #555; border-radius: 8px; }
.ranking-filter button { padding: 10px 20px; background: var(--accent); color: #fff; border: 0; border-radius: 8px; font-weight: 700; }
.ranking-filter button:hover { background: var(--accent-hover); }
.ranking-list { display: grid; gap: 18px; }
.ranking-card {
    display: grid; grid-template-columns: 72px minmax(0, 310px) minmax(0, 1fr);
    align-items: start; overflow: hidden; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
}
.ranking-number { padding: 18px 8px; color: var(--rating); font-size: 21px; font-weight: 800; text-align: center; white-space: nowrap; }
.ranking-card > a { display: block; min-width: 0; }
.ranking-image { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: var(--surface-light); }
.ranking-content { min-width: 0; padding: 18px 20px; }
.ranking-title { margin-bottom: 10px; font-size: 18px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.ranking-content a:hover .ranking-title { color: var(--accent); }
.ranking-content .tags { margin: 10px 0; }
.ranking-content .price { margin-top: 10px; }
.work-meta { margin-top: 8px; }

/* 08. Calendar-month ranking index */
.year-section { margin-bottom: 24px; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.year-title { margin-bottom: 16px; font-size: 22px; font-weight: 700; }
.month-list { display: flex; flex-wrap: wrap; gap: 10px; }
.month-button {
    display: inline-flex; align-items: center; justify-content: center; min-width: 80px;
    padding: 10px 18px; background: var(--surface-light); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px; font-weight: 600;
}
.month-button:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* 09. Top page */
.top-hero {
    margin-bottom: 40px; padding: 40px 36px;
    background: linear-gradient(135deg, #202e3b, #1c1c1c 65%);
    border: 1px solid var(--border); border-radius: 14px;
}
.top-hero h1 { margin: 0 0 12px; font-size: 32px; }
.top-hero p { margin: 0 0 22px; color: var(--text-sub); }
.top-search { display: flex; gap: 10px; max-width: 660px; }
.top-section { margin: 40px 0; }
.top-section-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.top-section-header h2 { margin: 0; font-size: 23px; }
.section-more { color: #75bfff; font-size: 13px; white-space: nowrap; }
.section-more:hover { text-decoration: underline; }
.top-ranking-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.new-work-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.top-work-card { min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.top-work-card:hover { border-color: #555; }
.top-work-image-link { display: block; position: relative; }
.top-work-image { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: var(--surface-light); }
.top-ranking-number { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 3px 10px; background: rgba(0,0,0,.84); color: var(--rating); border-radius: 6px; font-size: 15px; font-weight: 800; }
.top-work-content { padding: 14px; }
.top-work-title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--text); font-weight: 700; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.top-work-title:hover { color: var(--accent); }
.top-work-circle { margin-top: 10px; color: var(--text-sub); font-size: 12px; }
.top-work-circle a:hover { color: var(--accent); }
.top-work-date { margin-top: 8px; color: var(--text-muted); font-size: 12px; }
.top-work-content .rating, .top-work-content .price { margin-top: 8px; font-size: 13px; }
.top-link-list { gap: 10px; }
.top-link-chip { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 13px; background: var(--surface-light); border: 1px solid var(--border); border-radius: 999px; font-size: 13px; }
.top-link-chip:hover { background: var(--surface-hover); border-color: #555; }
.top-link-chip span { color: var(--text-muted); font-size: 11px; }

/* 10. Image fallbacks */
.work-image.empty, .ranking-image.empty, .related-work-image.empty, .top-work-image.empty {
    display: flex; align-items: center; justify-content: center;
    min-height: 110px; color: var(--text-muted); font-size: 13px; text-align: center;
}

/* 11. Responsive */
@media (max-width: 900px) {
    .work-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ranking-card { grid-template-columns: 60px minmax(0, 260px) minmax(0, 1fr); }
    .ranking-content { padding: 15px; }
    .new-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    main, .container { padding: 22px 14px 44px; }
    h1 { font-size: 25px; }
    h2, .section-title { font-size: 20px; }
    .header-inner { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
    .logo, .site-title { font-size: 19px; }
    .search-form, .header-search { width: 100%; }
    .works-title-row { align-items: flex-start; flex-direction: column; gap: 12px; }
    .work-list { grid-template-columns: 1fr; }
    .work-card .work-image { object-fit: contain; }
    .work-header { grid-template-columns: 1fr; gap: 20px; }
    .work-header .work-title { font-size: 22px; }
    .work-meta-row { grid-template-columns: 1fr; gap: 6px; }
    .work-meta-label { padding-top: 0; }
    .work-meta-links { gap: 14px; }
    .info-table th { width: 105px; }
    .info-table th, .info-table td { padding: 11px 12px; }
    .related-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .ranking-tabs { gap: 6px; }
    .ranking-tabs a { flex: 1; padding: 8px 9px; font-size: 12px; text-align: center; }
    .ranking-filter { padding: 16px; }
    .ranking-filter form { align-items: stretch; flex-direction: column; }
    .ranking-filter select { width: 100%; }
    .ranking-card { grid-template-columns: 54px minmax(0, 1fr); }
    .ranking-number { grid-column: 1; grid-row: 1; padding: 14px 5px; font-size: 17px; }
    .ranking-card > a { grid-column: 2; grid-row: 1; }
    .ranking-content { grid-column: 1 / -1; grid-row: 2; padding: 15px; }
    .ranking-title { font-size: 16px; }
    .year-section { padding: 18px; }
    .top-hero { padding: 28px 20px; }
    .top-hero h1 { font-size: 25px; }
    .top-ranking-grid { grid-template-columns: 1fr; }
    .new-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .top-section-header h2 { font-size: 20px; }
}

@media (max-width: 420px) {
    .top-search { flex-direction: column; }
    .top-search button { width: 100%; }
    .top-ranking-grid, .new-work-grid { grid-template-columns: 1fr; }
    .related-work-grid { gap: 9px; }
    .related-work-content { padding: 10px; }
    .month-button { min-width: 70px; padding: 8px 12px; }
}


/* ========================================
   New Works Page
======================================== */

.new-page-header {
    margin-bottom: 26px;
}

.new-page-header h1 {
    margin-bottom: 8px;
}

.new-page-header p {
    margin: 0;
    color: var(--text-sub);
    font-size: 14px;
}

.new-work-grid .top-work-card {
    min-width: 0;
}

.header-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.header-nav a {
    color: var(--text-sub);
    font-size: 13px;
    white-space: nowrap;
}

.header-nav a:hover {
    color: var(--accent);
}

@media (max-width: 700px) {
    .header-nav {
        justify-content: center;
        gap: 18px;
    }
}


/* Header Navigation */

.header-inner {
    flex-wrap: wrap;
}

.header-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-left: auto;
}

.header-nav a {
    color: var(--text-sub);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.header-nav a:hover,
.header-nav a.active {
    color: var(--accent);
}

@media (max-width: 700px) {
    .header-nav {
        width: 100%;
        justify-content: center;
        margin-left: 0;
        gap: 20px;
    }
}


/* ========================================
   New Works
======================================== */

.new-page-header {
    margin-bottom: 26px;
}

.new-page-header h1 {
    margin-bottom: 8px;
}

.new-page-header p {
    margin: 0;
    color: var(--text-sub);
    font-size: 14px;
}

.new-work-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.new-work-grid .top-work-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.new-work-grid .top-work-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
}

.new-work-actors {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 12px;
    font-size: 13px;
}

.new-work-label {
    flex-shrink: 0;
    color: var(--text-sub);
}

.new-work-actor-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    min-width: 0;
}

.new-work-actor {
    color: var(--accent);
    overflow-wrap: anywhere;
}

.new-work-actor:hover {
    text-decoration: underline;
}

.new-work-products {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 18px;
}

.new-work-products .product-button {
    flex: 1 1 110px;
    min-width: 0;
    padding: 10px 8px;
    font-size: 12px;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .new-work-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .new-work-grid {
        grid-template-columns: 1fr;
    }
}

/* ranking.html: FANZA / DLsite two-column layout */
.ranking-explanation { color: var(--text-sub); font-size: 13px; margin-bottom: 18px; }
.ranking-tabs { display: flex; gap: 12px; margin: 20px 0 26px; flex-wrap: wrap; }
.ranking-tabs a { padding: 9px 18px; background: var(--surface-light); border: 1px solid var(--border); border-radius: 8px; color: var(--text); }
.ranking-tabs a.active, .ranking-tabs a:hover { border-color: var(--accent); color: var(--accent); }
.platform-ranking-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.platform-ranking-column { min-width: 0; }
.platform-ranking-heading { padding: 13px 16px; border-radius: 8px; font-size: 19px; color: #fff; margin: 0 0 16px; }
.platform-ranking-heading.fanza { background: #b82c2c; }
.platform-ranking-heading.dlsite { background: #1269b3; }
.platform-ranking-card { display: grid; grid-template-columns: 36px 112px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); align-items: start; }
.platform-ranking-rank { font-weight: 700; font-size: 16px; }
.platform-ranking-image-link img, .platform-ranking-no-image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 6px; background: var(--surface-light); }
.platform-ranking-no-image { display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--text-sub); }
.platform-ranking-info { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.platform-ranking-title { color: var(--text); font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.platform-ranking-meta { color: var(--text-sub); font-size: 12px; overflow-wrap: anywhere; }
.platform-ranking-meta a { color: var(--accent); }
.platform-ranking-price { font-weight: 700; font-size: 14px; }
.platform-ranking-buy { display: inline-block; padding: 9px 12px; font-size: 12px; text-align: center; border-radius: 6px; color: #fff; }
.platform-ranking-buy.fanza { background: #e23b3b; }
.platform-ranking-buy.dlsite { background: #1686d9; }
@media (max-width: 800px) { .platform-ranking-grid { grid-template-columns: 1fr; } }
@media (max-width: 440px) { .platform-ranking-card { grid-template-columns: 28px 86px minmax(0, 1fr); gap: 9px; } }

/* Works listing pagination */
.works-page-count { margin: 12px 0 18px; color: var(--text-sub); font-size: 13px; }
.works-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 30px 0; }
.works-pagination .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-light); color: var(--text); text-decoration: none; }
.works-pagination a.page-link:hover { border-color: var(--accent); color: var(--accent); }
.works-pagination .page-link.current { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: bold; }
.works-pagination .page-ellipsis { padding: 0 3px; color: var(--text-sub); }

/* New releases: date groups and pagination */
.new-release-group { margin: 0 0 34px; }
.new-release-date { font-size: 19px; margin: 0 0 16px; padding: 0 0 10px; border-bottom: 1px solid var(--border); }
.new-release-date span { font-size: 13px; font-weight: 400; color: var(--text-sub); margin-left: 8px; }
.new-pagination { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: 8px; margin: 30px 0; }
.new-pagination a, .new-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 38px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); text-decoration: none; }
.new-pagination .current { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.new-pagination a:hover { border-color: var(--accent); }

/* New releases: distinct full-width date header bars */
.new-release-group { margin-bottom: 36px; }
.new-release-date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    padding: 13px 18px;
    border: 1px solid #3b4659;
    border-bottom: 1px solid #3b4659;
    border-radius: 8px;
    background: #292e39;
    color: #f7f9ff;
    font-size: 18px;
    line-height: 1.4;
}
.new-release-date-title { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-size: inherit; font-weight: 700; color: inherit; }
.new-release-calendar { color: #8dbfff; font-size: 22px; font-weight: 400; line-height: 1; }
.new-release-date .new-release-count { flex-shrink: 0; margin-left: auto; color: #cbd5e1; font-size: 13px; font-weight: 400; }
@media (max-width: 600px) {
    .new-release-date { padding: 11px 12px; font-size: 15px; }
    .new-release-date-title { gap: 7px; }
    .new-release-calendar { font-size: 19px; }
}

/* Date bar typography: override legacy .new-release-date span rule */
.new-release-date {
    min-height: 60px;
    padding: 14px 20px;
}
.new-release-date .new-release-date-title {
    margin-left: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: #f7f9ff;
}
.new-release-date .new-release-count {
    font-size: 15px;
    font-weight: 600;
    color: #cbd5e1;
}
.new-release-date .new-release-calendar {
    margin-left: 0;
    font-size: 20px;
    color: #8dbfff;
}
@media (max-width: 600px) {
    .new-release-date { padding: 12px 14px; }
    .new-release-date .new-release-date-title { font-size: 16px; }
    .new-release-date .new-release-count { font-size: 13px; }
    .new-release-date .new-release-calendar { font-size: 18px; }
}

/* All-ages indicator: top-right of product thumbnail */
.top-work-image-link .all-ages-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 5px;
    background: #16803d;
    color: #fff;
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: 0 1px 5px rgba(0,0,0,.55);
    font-size: 12px;
    line-height: 1.25;
    font-weight: 800;
    white-space: nowrap;
    pointer-events: none;
}
@media (max-width: 600px) {
    .top-work-image-link .all-ages-badge { top: 7px; right: 7px; font-size: 11px; padding: 3px 6px; }
}

/* Voice actor, circle and tag landing pages */
.entity-page { margin: 20px 0 45px; }
.entity-page h1 { margin: 0 0 8px; font-size: clamp(23px, 3vw, 32px); }
.entity-subtitle, .entity-work-meta { color: #9ba9b8; }
.entity-subtitle { margin: 0 0 20px; }
.entity-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 18px 0 24px; }
.entity-controls label { display: grid; gap: 5px; font-size: 13px; }
.entity-controls select, .entity-controls input { padding: 9px 12px; border-radius: 6px; border: 1px solid #66788c; background: #fff; color: #202c38; min-height: 40px; }
.entity-controls button { padding: 10px 22px; border-radius: 6px; border: 0; background: #426587; color: white; font-weight: 700; cursor: pointer; }
.entity-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 20px 14px; }
.entity-work-card { min-width: 0; }
.entity-cover { position: relative; display: block; aspect-ratio: 3/4; overflow: hidden; border-radius: 6px; background: #293440; }
.entity-cover img { width: 100%; height: 100%; object-fit: cover; }
.entity-cover .all-ages-badge { position: absolute; top: 8px; right: 8px; }
.entity-image-empty { height: 100%; display: grid; place-items: center; color: #aaa; }
.entity-work-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 700; margin-top: 7px; line-height: 1.45; }
.entity-work-meta { font-size: 12px; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entity-pages { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-top: 32px; }
.entity-pages a, .entity-pages strong, .entity-pages span { padding: 7px 11px; border: 1px solid #68798b; border-radius: 5px; }
.entity-pages strong { background: #426587; color: white; }
.entity-directory-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.entity-directory-grid a { display: block; padding: 12px; border: 1px solid #596b7e; border-radius: 6px; overflow-wrap: anywhere; }
@media (max-width: 800px) { .entity-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .entity-directory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 500px) { .entity-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 10px; } .entity-directory-grid { grid-template-columns: 1fr; } }

/* Entity directory: count of distinct works next to each name */
.entity-directory-grid a.entity-directory-entry { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.entity-directory-entry > span:first-child { min-width:0; overflow-wrap:anywhere; }
.entity-work-count { color:#a9bfce; font-size:.83em; white-space:nowrap; flex-shrink:0; }

/* Entity pages: landscape thumbnails and compact dark cards */
.entity-page-modern .entity-profile-header { margin: 0 0 22px; }
.entity-page-modern .entity-profile-title { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.entity-page-modern .entity-profile-title h1 { margin:0; }
.entity-all-ages-label { display:inline-flex; align-items:center; flex-shrink:0; padding:4px 9px; border-radius:5px; background:#16803d; border:1px solid rgba(255,255,255,.2); color:#fff; font-size:12px; font-weight:800; line-height:1.35; white-space:nowrap; }
.entity-page-modern .entity-subtitle { margin:10px 0 0; }
.entity-page-modern .entity-subtitle strong { color:#86b8ff; font-size:19px; }
.entity-page-modern .entity-modern-controls { display:flex; justify-content:space-between; align-items:center; margin:0 0 20px; gap:14px; }
.entity-sort-controls { display:flex; overflow:hidden; border:1px solid #39495c; border-radius:9px; background:#202a37; }
.entity-page-modern .entity-sort-controls button { border:0; border-radius:0; padding:11px 19px; min-height:43px; background:transparent; color:#e5ebf5; cursor:pointer; font-size:14px; }
.entity-page-modern .entity-sort-controls button.active { background:#326bd1; color:#fff; }
.entity-page-modern .entity-sort-controls button:hover:not(.active) { background:#344457; }
.entity-page-modern .entity-platform-label { display:flex; align-items:center; gap:9px; color:#aebbd0; font-size:13px; }
.entity-page-modern .entity-platform-label select { min-width:126px; background:#202a37; color:#f1f5fb; border-color:#53657b; }
.entity-page-modern .entity-modern-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.entity-page-modern .entity-modern-card { display:flex; flex-direction:column; min-width:0; border:1px solid #3d4c60; border-radius:9px; overflow:hidden; background:#141b25; }
.entity-page-modern .entity-modern-card .entity-cover { aspect-ratio: 16/9; border-radius:0; width:100%; }
.entity-page-modern .entity-modern-card .entity-cover img { width:100%; height:100%; object-fit:cover; object-position:center; }
.entity-page-modern .entity-modern-card .entity-cover .all-ages-badge { top:8px; right:8px; background:#16803d; color:#fff; border-radius:5px; padding:4px 8px; font-size:12px; font-weight:800; z-index:2; }
.entity-page-modern .entity-card-body { display:flex; flex:1; flex-direction:column; padding:11px 12px 12px; min-width:0; }
.entity-page-modern .entity-work-title { margin:0; color:#f2f6ff; font-size:14px; line-height:1.5; }
.entity-page-modern .entity-work-title:hover { color:#93c5fd; }
.entity-page-modern .entity-circle-name { margin:7px 0 12px; font-size:12px; }
.entity-page-modern .entity-card-footer { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:5px; margin-top:auto; color:#d5dce7; font-size:12px; }
.entity-page-modern .entity-card-rating > span:first-child { color:#ffbf50; }
.entity-page-modern .entity-card-reviews { color:#9ba9b8; }
.entity-page-modern .entity-card-date { color:#b5c0cf; }
.entity-directory-name { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.entity-directory-age { font-size:10px; padding:2px 6px; }
@media(max-width:1100px) { .entity-page-modern .entity-modern-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:720px) { .entity-page-modern .entity-modern-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .entity-page-modern .entity-modern-controls { align-items:flex-start; flex-wrap:wrap; } }
@media(max-width:430px) { .entity-page-modern .entity-modern-grid { grid-template-columns:1fr; } .entity-page-modern .entity-sort-controls button { padding:10px 13px; } }

/* Entity cards: representative tags and purchase actions */
.entity-page-modern .entity-circle-name { margin-bottom:8px; }
.entity-page-modern .entity-card-tags { display:flex; flex-wrap:wrap; gap:5px; margin:2px 0 11px; }
.entity-page-modern .entity-card-tag { display:inline-block; max-width:100%; padding:3px 8px; border-radius:6px; background:#303b4b; color:#e0e8f2; font-size:11px; line-height:1.5; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.entity-page-modern .entity-card-purchase { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 12px; }
.entity-page-modern .entity-buy-button { flex:1 1 100px; display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:33px; padding:6px 9px; border-radius:6px; color:#fff; font-size:12px; font-weight:700; text-align:center; text-decoration:none; }
.entity-page-modern .entity-buy-dlsite { background:#276acb; }
.entity-page-modern .entity-buy-fanza { background:#b93e60; }
.entity-page-modern .entity-buy-button:hover { filter:brightness(1.15); color:#fff; }
.entity-page-modern .entity-card-footer { margin-top:auto; }

/* Advanced multi-tag search */
.advanced-search-form{background:#151c27;border:1px solid #354357;border-radius:10px;padding:20px;margin:20px 0}
.advanced-search-form>label{display:block;font-weight:600;margin-bottom:10px}
.advanced-search-form input[type=search]{width:100%;background:#0e141d;color:#fff;border:1px solid #52617a;border-radius:7px;padding:12px;margin-bottom:18px}
.advanced-search-heading{font-weight:700;margin-bottom:12px}.advanced-search-heading span{font-size:12px;font-weight:400;color:#a5b6ca;margin-left:8px}
.advanced-tag-list{display:flex;flex-wrap:wrap;gap:8px;max-height:260px;overflow:auto;padding:3px 0 12px}
.advanced-tag-chip{cursor:pointer;display:inline-flex;gap:7px;align-items:center;background:#273344;border:1px solid #4a5b72;border-radius:20px;padding:7px 11px;color:#e7eef8;font-size:13px}
.advanced-tag-chip.is-selected{background:#174e86;border-color:#4d9bff}.advanced-tag-chip input{accent-color:#63b3ff}.advanced-tag-chip small{color:#b3c8df}
.advanced-search-filters{display:flex;gap:14px;align-items:end;flex-wrap:wrap;margin-top:16px}.advanced-search-filters label{display:flex;flex-direction:column;gap:6px;font-size:13px}.advanced-search-filters select{background:#0e141d;color:#fff;border:1px solid #52617a;border-radius:7px;padding:9px}
.advanced-search-filters button{background:#3172d9;border:0;border-radius:7px;color:#fff;padding:10px 18px;cursor:pointer}.advanced-search-filters a{color:#b6c7e0;padding:10px 4px}.advanced-search-count{margin:18px 0;font-weight:600}

/* Hover/focus date picker on new-release navigation */
.new-date-navigation { overflow: visible; }
.new-date-picker { position: relative; display: inline-flex; }
.new-date-picker-trigger { min-height: 38px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); cursor: pointer; font: inherit; }
.new-date-picker-trigger:hover, .new-date-picker:focus-within .new-date-picker-trigger { border-color: var(--accent); }
.new-date-picker-panel { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 30; width: min(290px, 85vw); padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 8px 28px rgba(0,0,0,.24); flex-direction: column; gap: 10px; }
.new-date-picker:hover .new-date-picker-panel, .new-date-picker:focus-within .new-date-picker-panel { display: flex; }
.new-date-picker-panel label { font-weight: 700; }
.new-date-picker-panel input { width: 100%; min-height: 38px; padding: 6px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color-scheme: dark; }
.new-date-picker-panel button { min-height: 38px; border: 0; border-radius: 6px; background: var(--accent); color: #fff; cursor: pointer; }
.new-date-picker-panel small { font-size: 12px; color: var(--text-muted, #9ca3af); }

/* Top navigation calendar opens downward; bottom navigation opens upward. */
.new-date-navigation-top .new-date-picker-panel { top: calc(100% + 6px); bottom: auto; }