/*
 * jo.to scans — theme-pages.css
 * ===============================
 * Page-specific styles for: search, browse/archive, tag archive,
 * account page, tags index, collections, bookmarks, artists, groups,
 * contact, DMCA, 404, and generic page fallback.
 * Enqueued globally after joto-main.css.
 */

/*
 * jo.to scans — Shared page styles
 * ===================================
 * Used by: search.php, archive-comic.php, page-account.php,
 *          taxonomy-post_tag.php, front-page.php
 *
 * Enqueue in functions.php:
 *   wp_enqueue_style('joto-pages', get_template_directory_uri() . '/theme-pages.css', [], JOTO_VERSION);
 */


/* ============================================================
   SHARED UTILITIES
   ============================================================ */

.page-eyebrow {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.4px; color: var(--pink); margin-bottom: 6px;
}
.btn-pink {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 20px; background: var(--pink); color: #fff;
  border-radius: 8px; font-size: 13px; font-weight: 700;
  text-decoration: none; transition: background .18s ease;
}
.btn-pink:hover { background: var(--pink-hi); }

/* Card grid loading state */
.card-grid.loading {
  opacity: .4; pointer-events: none;
  transition: opacity .2s ease;
}

/* ── Shared pagination ── */
.joto-pagination {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  padding: 20px 0 8px;
}
.pag-info { font-size: 11.5px; color: var(--text-dim); font-family: var(--font-mono); }
.pag-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.pag-btn {
  padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border-hi); color: var(--text-muted);
  background: none; cursor: pointer; font-family: inherit;
  transition: all .16s ease;
}
.pag-btn:hover     { border-color: var(--pink); color: var(--pink); }
.pag-btn.active    { background: var(--pink); border-color: var(--pink); color: #fff; }
.pag-btn.pag-prev,
.pag-btn.pag-next  { color: var(--text-dim); }

/* ── Shared filter toolbar (stb) ── */
.stb-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.stb-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: var(--text-dim); white-space: nowrap;
}
.stb-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.stb-pill {
  padding: 4px 11px; border-radius: 20px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border-hi); color: var(--text-muted);
  background: none; cursor: pointer; font-family: inherit;
  transition: all .16s ease;
}
.stb-pill:hover  { border-color: var(--pink); color: var(--text); }
.stb-pill.active { background: var(--pink); border-color: var(--pink); color: #fff; }
.stb-select {
  padding: 5px 10px; border-radius: 7px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border-hi); color: var(--text-muted);
  background: var(--bg-card); cursor: pointer; font-family: inherit;
}
.stb-select:focus { outline: none; border-color: var(--pink); }
.stb-found {
  margin-left: auto; font-size: 11.5px; color: var(--text-dim);
  font-family: var(--font-mono);
}
.stb-found span { color: var(--text); font-weight: 700; }

/* Active filter chips */
.active-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; min-height: 0; }
.chip-active {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 600;
  border: 1px solid var(--border-pink); color: var(--pink);
  background: var(--pink-dim); cursor: pointer;
  transition: opacity .16s ease;
}
.chip-active:hover { opacity: .75; }

/* Empty states */
.search-empty, .browse-empty {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
  padding: 60px 20px; gap: 12px;
}
.search-empty-icon, .browse-empty-icon, .account-empty-icon {
  font-size: 42px; line-height: 1;
}
.search-empty h3, .browse-empty h3 { font-size: 18px; font-weight: 700; color: var(--text); }
.search-empty p,  .browse-empty p  { font-size: 13px; color: var(--text-dim); max-width: 380px; }


/* ============================================================
   SEARCH PAGE  (search.php)
   ============================================================ */

.search-page-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px 60px; }

.search-hero {
  padding: 44px 0 28px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.search-hero-inner { max-width: 600px; }
.search-headline {
  font-family: var(--font-head); font-size: 30px; font-weight: 900;
  color: var(--text); margin-bottom: 8px; line-height: 1.2;
}
.search-headline em { color: var(--pink); font-style: normal; }
.search-found { font-size: 12.5px; color: var(--text-dim); margin-bottom: 20px; }
.search-found strong { color: var(--text); }

.search-bar-form {
  display: flex; gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-hi);
  border-radius: 10px; overflow: hidden;
  transition: border-color .2s ease;
  max-width: 540px;
}
.search-bar-form:focus-within { border-color: var(--pink); }
.search-bar-input {
  flex: 1; padding: 11px 16px; background: none;
  border: none; color: var(--text); font-size: 14px;
  font-family: inherit; outline: none;
}
.search-bar-input::placeholder { color: var(--text-dim); }
.search-bar-btn {
  padding: 0 16px; background: var(--pink); border: none;
  color: #fff; cursor: pointer; display: flex; align-items: center;
  transition: background .16s ease;
}
.search-bar-btn:hover { background: var(--pink-hi); }

.search-toolbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 0 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.search-results-wrap { }
#searchGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 14px; }


/* ============================================================
   ARCHIVE / BROWSE PAGE  (archive-comic.php)
   ============================================================ */

.browse-page-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px 60px; }

.browse-topbar {
  padding: 36px 0 22px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.browse-topbar-inner {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px;
}
.browse-headline {
  font-family: var(--font-head); font-size: 28px; font-weight: 900;
  color: var(--text); line-height: 1.15;
}
.browse-found { font-size: 12px; color: var(--text-dim); font-family: var(--font-mono); margin-bottom: 4px; }
.browse-found span { color: var(--text); font-weight: 700; font-size: 16px; }

.browse-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding-top: 22px;
}

/* Sidebar */
.browse-sidebar {
  position: sticky; top: 110px;
  align-self: start;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 18px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
}
.bsb-section { }
.bsb-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--text-dim);
  margin-bottom: 8px;
}
.bsb-pills { display: flex; flex-direction: column; gap: 3px; }
.bsb-pill {
  padding: 5px 10px; border-radius: 7px; font-size: 12px; font-weight: 600;
  border: 1px solid transparent; color: var(--text-muted);
  background: none; cursor: pointer; font-family: inherit;
  text-align: left; transition: all .16s ease;
}
.bsb-pill:hover  { background: var(--bg-elev); color: var(--text); }
.bsb-pill.active { background: var(--pink-dim); border-color: var(--border-pink); color: var(--pink); }

.bsb-tag-cloud { display: flex; flex-wrap: wrap; gap: 4px; }
.genre-scroll   { display:flex; flex-wrap:wrap; gap:4px; max-height:108px; overflow-y:auto; padding:6px; background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:7px; }
.genre-scroll::-webkit-scrollbar { width:3px; }
.genre-scroll::-webkit-scrollbar-track { background:transparent; }
.genre-scroll::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.bsb-tag {
  padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--border); color: var(--text-dim);
  background: none; cursor: pointer; font-family: inherit;
  transition: all .16s ease; display: flex; align-items: center; gap: 4px;
}
.bsb-tag:hover  { border-color: var(--border-hi); color: var(--text); }
.bsb-tag.active { border-color: var(--border-pink); color: var(--pink); background: var(--pink-dim); }
.bsb-tag-count { font-size: 9.5px; opacity: .6; }

.bsb-reset {
  padding: 7px; border-radius: 7px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border-hi); color: var(--text-dim);
  background: none; cursor: pointer; font-family: inherit;
  transition: all .16s ease; text-align: center;
}
.bsb-reset:hover { border-color: var(--pink); color: var(--pink); }

/* Browse main */
.browse-main { min-width: 0; }
.browse-filter-toggle {
  display: none; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--border-hi); color: var(--text-muted);
  background: var(--bg-card); cursor: pointer; font-family: inherit;
  margin-bottom: 14px;
}

#browseGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px,1fr)); gap: 14px; }


/* ============================================================
   TAXONOMY PAGE  (taxonomy-post_tag.php)
   ============================================================ */

.tax-page-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px 60px; }

.tag-hero {
  padding: 44px 0 28px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.tag-hero-inner { max-width: 560px; }
.tag-headline {
  font-family: var(--font-head); font-size: 32px; font-weight: 900;
  color: var(--text); margin-bottom: 8px;
}
.tag-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.tag-stats { font-size: 12px; color: var(--text-dim); font-family: var(--font-mono); }

.tag-related-wrap {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.tag-related-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--text-dim); margin-bottom: 10px;
}
.tag-related-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-related-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border-hi); color: var(--text-muted);
  text-decoration: none; transition: all .16s ease;
}
.tag-related-pill:hover { border-color: var(--pink); color: var(--pink); }
.tag-related-count { font-size: 10px; opacity: .6; }

.tax-toolbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

#taxGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 14px; }


/* ============================================================
   ACCOUNT PAGE  (page-account.php)
   ============================================================ */

.account-page-wrap {
  max-width: 1060px; margin: 0 auto;
  padding: 36px 24px 60px;
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 28px;
}

/* Sidebar */
.account-sidebar {
  position: sticky; top: 110px; align-self: start;
}
.account-avatar-wrap {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 20px 16px; text-align: center;
  margin-bottom: 10px;
}
.account-avatar { width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--border-pink); }
.account-name   { font-size: 15px; font-weight: 700; color: var(--text); margin-top: 10px; }
.account-email  { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.account-since  { font-size: 10.5px; color: var(--text-dim); font-family: var(--font-mono); margin-top: 6px; }

.account-nav { display: flex; flex-direction: column; gap: 2px; }
.account-nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--text-muted); text-decoration: none; transition: all .16s ease;
}
.account-nav-item:hover  { background: var(--bg-card); color: var(--text); }
.account-nav-item.active { background: var(--pink-dim); color: var(--pink); }
.account-nav-icon        { font-size: 15px; width: 22px; text-align: center; }
.account-logout          { color: var(--text-dim); margin-top: 8px; border-top: 1px solid var(--border); padding-top: 12px; }
.account-logout:hover    { color: #ff4d4d; background: rgba(255,77,77,.07); }

/* Main */
.account-main { min-width: 0; }
.account-section {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 24px;
}
.account-section-title {
  font-size: 16px; font-weight: 800; color: var(--text);
  margin-bottom: 6px;
}
.account-section-sub { font-size: 12.5px; color: var(--text-dim); margin-bottom: 16px; }
.account-msg {
  padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
  margin-bottom: 14px;
}
.account-msg-ok    { background: rgba(34,160,90,.12); border: 1px solid rgba(34,160,90,.3);  color: #22a05a; }
.account-msg-error { background: rgba(255,77,77,.10); border: 1px solid rgba(255,77,77,.28); color: #ff4d4d; }
.account-loading { color: var(--text-dim); font-size: 13px; padding: 20px 0; }
.account-empty {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 10px; padding: 40px 0;
}
.account-empty p { font-size: 13px; color: var(--text-dim); }

/* Profile form */
.account-form { display: flex; flex-direction: column; gap: 14px; }
.af-group      { display: flex; flex-direction: column; gap: 5px; }
.af-label { font-size: 11.5px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; }
.af-input {
  padding: 9px 12px; border-radius: 8px; font-size: 14px;
  border: 1px solid var(--border-hi); color: var(--text);
  background: var(--bg-elev); font-family: inherit; outline: none;
  transition: border-color .18s ease;
}
.af-input:focus  { border-color: var(--pink); }
.af-hint  { font-size: 11px; color: var(--text-dim); }
.af-divider {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: var(--text-dim);
  border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px;
}
.af-btn {
  padding: 10px 24px; background: var(--pink); color: #fff;
  border: none; border-radius: 8px; font-size: 13.5px; font-weight: 700;
  cursor: pointer; font-family: inherit; align-self: flex-start;
  transition: background .16s ease;
}
.af-btn:hover { background: var(--pink-hi); }

/* Bookmarks toolbar */
.account-bm-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.account-bm-count { font-size: 12px; color: var(--text-dim); font-family: var(--font-mono); }
.account-bm-clear {
  padding: 5px 12px; border-radius: 7px; font-size: 11.5px; font-weight: 600;
  border: 1px solid var(--border-hi); color: var(--text-dim);
  background: none; cursor: pointer; font-family: inherit;
  transition: all .16s ease;
}
.account-bm-clear:hover { border-color: #ff4d4d; color: #ff4d4d; }
.bm-remove-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 5px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--border); color: var(--text-dim);
  background: none; cursor: pointer; font-family: inherit;
  transition: all .16s ease;
}
.bm-remove-btn:hover { border-color: #ff4d4d; color: #ff4d4d; }

/* Account settings rows */
.account-settings-list { display: flex; flex-direction: column; gap: 0; }
.as-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--border);
}
.as-row:last-child { border-bottom: none; }
.as-label { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.as-sub   { font-size: 11.5px; color: var(--text-dim); }
.as-select {
  padding: 6px 10px; border-radius: 7px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--border-hi); color: var(--text-muted);
  background: var(--bg-elev); cursor: pointer; font-family: inherit; flex-shrink: 0;
}
.as-toggle {
  width: 42px; height: 24px; border-radius: 12px;
  background: var(--bg-elev); border: 1px solid var(--border-hi);
  cursor: pointer; position: relative; transition: background .2s ease;
  flex-shrink: 0;
}
.as-toggle.on { background: var(--pink); border-color: var(--pink); }
.as-toggle-knob {
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  transition: transform .2s ease;
}
.as-toggle.on .as-toggle-knob { transform: translateX(18px); }

/* Bookmarks / history card grid */
.account-section .card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 12px;
}
.wrc-time { font-size: 10.5px; color: var(--text-dim); font-family: var(--font-mono); margin-top: 4px; }


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  .browse-layout { grid-template-columns: 1fr; }
  .browse-sidebar {
    position: fixed; top: 0; left: -280px; bottom: 0;
    width: 260px; z-index: 200; border-radius: 0;
    transition: left .28s cubic-bezier(.4,0,.2,1);
    max-height: 100vh;
  }
  .browse-sidebar.open { left: 0; box-shadow: 4px 0 40px rgba(0,0,0,.5); }
  .browse-filter-toggle { display: flex; }
}

@media (max-width: 760px) {
  .account-page-wrap { grid-template-columns: 1fr; }
  .account-sidebar { position: static; }
  .search-toolbar, .tax-toolbar { flex-direction: column; align-items: flex-start; }
  .stb-group { width: 100%; }
  .stb-found { margin-left: 0; }
}

@media (max-width: 540px) {
  #searchGrid, #browseGrid, #taxGrid, .account-section .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .browse-headline, .tag-headline, .search-headline { font-size: 22px; }
}


/* ══════════════════════════════════════════════
   404 PAGE
══════════════════════════════════════════════ */
.error-page-wrap {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}
.error-page-inner {
    text-align: center;
    max-width: 480px;
}
.error-code {
    font-size: clamp(80px, 18vw, 140px);
    font-weight: 900;
    font-family: var(--font-display);
    line-height: 1;
    background: linear-gradient(135deg, var(--pink), #ff6b9d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
}
.error-title { font-size: 24px; font-weight: 700; margin-bottom: 10px; }
.error-sub   { color: var(--text-muted); margin-bottom: 28px; }
.error-search { display: flex; gap: 8px; margin-bottom: 20px; }
.error-search-input {
    flex: 1; padding: 10px 14px; border-radius: 8px;
    background: var(--bg-card); border: 1px solid var(--border);
    color: var(--text); font-size: 14px;
}
.error-links { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.btn-outline {
    padding: 9px 18px; border-radius: 8px; font-size: 13px; font-weight: 600;
    border: 1px solid var(--border); background: transparent; color: var(--text);
    cursor: pointer; text-decoration: none; transition: border-color .2s, color .2s;
}
.btn-outline:hover { border-color: var(--pink); color: var(--pink); }

/* ══════════════════════════════════════════════
   GENERIC PAGE / INDEX FALLBACK
══════════════════════════════════════════════ */
.generic-page-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 60px 20px 80px;
}
.generic-page-hero { margin-bottom: 40px; }
.generic-page-title {
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 800;
    font-family: var(--font-display);
    margin-bottom: 8px;
}
.generic-page-sub { color: var(--text-muted); font-size: 16px; }
.generic-page-content {
    line-height: 1.75;
    color: var(--text-dim);
}
.generic-page-content h2 { font-size: 22px; font-weight: 700; margin: 28px 0 10px; }
.generic-page-content p  { margin-bottom: 14px; }
.generic-page-content a  { color: var(--pink); }

/* ══════════════════════════════════════════════
   TAGS INDEX PAGE
══════════════════════════════════════════════ */
.tags-hero {
    padding: 56px 0 32px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 28px;
}
.tags-hero-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.tags-hero-eyebrow {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--pink); margin-bottom: 10px;
}
.tags-hero-title {
    font-size: clamp(28px, 5vw, 52px); font-weight: 900;
    font-family: var(--font-display); margin-bottom: 8px;
}
.tags-hero-sub   { color: var(--text-muted); font-size: 15px; margin-bottom: 20px; }
.tags-hero-stats { display: flex; gap: 32px; }
.tags-stat-val   { font-size: 22px; font-weight: 700; font-family: var(--font-display); display: block; }
.tags-stat-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }

.tags-controls {
    max-width: 1280px; margin: 0 auto; padding: 0 24px 16px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.tcsearch {
    position: relative; flex: 1; min-width: 180px; max-width: 280px;
}
.tcsearch input {
    width: 100%; padding: 8px 14px 8px 34px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 8px; color: var(--text); font-size: 13px;
}
.tcsearch-ico {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); pointer-events: none;
}
.tc-sort { display: flex; gap: 4px; }
.tc-sort-btn {
    padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600;
    background: var(--bg-card); border: 1px solid var(--border); color: var(--text-dim);
    cursor: pointer; transition: all .15s;
}
.tc-sort-btn.on { background: var(--pink); border-color: var(--pink); color: #fff; }
.tc-alpha { display: flex; flex-wrap: wrap; gap: 3px; }
.tc-alpha-btn {
    width: 26px; height: 26px; border-radius: 5px; font-size: 11px; font-weight: 600;
    background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted);
    cursor: pointer; transition: all .15s; display: flex; align-items: center; justify-content: center;
}
.tc-alpha-btn.on { background: var(--pink); border-color: var(--pink); color: #fff; }
.tc-count { font-size: 12px; color: var(--text-muted); margin-left: auto; }

.tags-grid {
    max-width: 1280px; margin: 0 auto; padding: 0 24px 60px;
    display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start;
}
.tag-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px; border-radius: 20px;
    background: var(--bg-card); border: 1px solid var(--border);
    text-decoration: none; color: var(--text); font-size: 13px;
    transition: border-color .15s, background .15s; position: relative;
}
.tag-chip:hover          { border-color: var(--pink); }
.tag-chip.followed       { border-color: var(--pink); background: rgba(225,34,123,.08); }
.tag-chip--lg            { font-size: 15px; padding: 8px 13px; }
.tag-chip--sm            { font-size: 11px; padding: 4px 8px; }
.tag-chip-count          { font-size: 10px; color: var(--text-muted); }
.tag-follow-btn {
    background: none; border: none; cursor: pointer; padding: 0;
    color: var(--text-muted); font-size: 13px; line-height: 1;
    transition: color .15s;
}
.tag-follow-btn:hover    { color: var(--pink); }
.tag-chip.followed .tag-follow-btn { color: var(--pink); }
.tags-empty { padding: 40px; text-align: center; color: var(--text-muted); width: 100%; }

/* ══════════════════════════════════════════════
   ARTISTS / GROUPS PAGE
══════════════════════════════════════════════ */
.artist-letter-group  { margin-bottom: 32px; }
.artist-letter-head   {
    font-size: 13px; font-weight: 800; color: var(--pink);
    letter-spacing: .1em; padding-bottom: 6px;
    border-bottom: 1px solid var(--border); margin-bottom: 12px;
}
.artist-row { display: flex; flex-wrap: wrap; gap: 8px; }
.artist-card, .group-card {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 10px;
    background: var(--bg-card); border: 1px solid var(--border);
    text-decoration: none; color: var(--text);
    transition: border-color .15s;
}
.artist-card:hover, .group-card:hover { border-color: var(--pink); }
.artist-avatar, .group-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, var(--pink), #ff6b9d);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 14px; color: #fff; flex-shrink: 0;
}
.artist-name, .group-name { font-size: 13px; font-weight: 600; }
.artist-count, .group-count { font-size: 11px; color: var(--text-muted); }
#groupGrid { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 40px; }

/* ══════════════════════════════════════════════
   COLLECTIONS PAGE
══════════════════════════════════════════════ */
#collectionsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px; padding-bottom: 60px;
}
.col-card {
    border-radius: 12px; overflow: hidden;
    background: var(--bg-card); border: 1px solid var(--border);
    text-decoration: none; color: var(--text);
    transition: border-color .15s, transform .15s;
}
.col-card:hover { border-color: var(--pink); transform: translateY(-2px); }
.col-cover {
    aspect-ratio: 16/9; background-size: cover; background-position: center;
    position: relative;
}
.col-personal-badge {
    position: absolute; top: 8px; right: 8px;
    background: var(--pink); color: #fff;
    font-size: 9px; font-weight: 700; padding: 2px 6px;
    border-radius: 4px; text-transform: uppercase; letter-spacing: .06em;
}
.col-body   { padding: 12px; }
.col-title  { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.col-meta   { font-size: 11px; color: var(--text-muted); }
.col-date   { font-size: 10px; color: var(--text-muted); margin-top: 4px; }
.col-empty  { grid-column: 1/-1; text-align: center; padding: 60px 20px; color: var(--text-muted); }
.col-empty-icon { font-size: 48px; margin-bottom: 12px; }

/* ══════════════════════════════════════════════
   CONTACT / DMCA SUCCESS & ERROR MESSAGES
══════════════════════════════════════════════ */
.contact-success-msg, .dmca-success-msg {
    max-width: 640px; margin: 16px auto;
    padding: 14px 18px; border-radius: 8px;
    background: rgba(34, 197, 94, .12);
    border: 1px solid rgba(34, 197, 94, .3);
    color: #4ade80; font-size: 14px;
}
.contact-error-msg, .dmca-error-msg {
    max-width: 640px; margin: 16px auto;
    padding: 14px 18px; border-radius: 8px;
    background: rgba(239, 68, 68, .1);
    border: 1px solid rgba(239, 68, 68, .3);
    color: #f87171; font-size: 14px;
}


/* ============================================================
   SINGLE / READER PAGE  (single.php)
   ============================================================ */

.breadcrumb{padding:10px 22px;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-dim);border-bottom:1px solid var(--border);background:rgba(6,7,10,.65);backdrop-filter:blur(6px);flex-wrap:wrap}
.breadcrumb a{color:var(--text-muted);transition:color var(--dur) var(--ease)}
.breadcrumb a:hover{color:var(--pink)}
.bc-sep{opacity:.4}
.bc-cur{color:var(--text-muted);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;max-width:280px}

/* ══════════════════════════════════════════════
   HERO / METADATA SECTION
══════════════════════════════════════════════ */
.work-hero{
  display:flex;gap:28px;
  padding:28px 22px 24px;
  max-width:1400px;margin:0 auto;width:100%;
}

/* cover */
.work-cover-wrap{flex-shrink:0;position:relative}
.work-cover{
  width:200px;height:280px;
  border-radius:10px;overflow:hidden;
  border:1px solid var(--border-hi);
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  position:relative;
}
.work-cover-img{width:100%;height:100%;object-fit:cover;display:flex;align-items:center;justify-content:center}
.work-cover-badge{
  position:absolute;top:8px;left:8px;
  padding:3px 8px;border-radius:5px;
  font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  background:linear-gradient(90deg,var(--gold),#ffcc44);color:#000;
}
.work-cover-lang{
  position:absolute;top:8px;right:8px;
  padding:3px 7px;border-radius:5px;
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  background:rgba(0,0,0,.7);backdrop-filter:blur(6px);
  border:1px solid var(--border-hi);color:var(--text-muted);
}

/* info column */
.work-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}

.work-eyebrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.work-type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;padding:3px 9px;border-radius:12px;border:1px solid rgba(225,34,123,.3);color:var(--pink);background:var(--pink-dim)}

.work-title{
  font-family:'Noto Serif JP',serif;
  font-size:26px;font-weight:700;line-height:1.25;
  color:var(--text);
}
.work-title-jp{font-size:13px;color:var(--text-muted);margin-top:3px;font-family:'Noto Serif JP',serif;font-weight:300}

/* metadata grid */
.work-meta-grid{display:flex;flex-direction:column;gap:1px;background:rgba(6,7,10,.55);border:1px solid rgba(255,255,255,.06);border-radius:10px;overflow:hidden;backdrop-filter:blur(8px)}
.wmg-row{display:flex;align-items:baseline;gap:0;font-size:13px;padding:7px 12px;transition:background var(--dur) var(--ease)}
.wmg-row:hover{background:rgba(255,255,255,.03)}
.wmg-label{width:90px;flex-shrink:0;color:#d3d3d8b5;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;padding-top:1px}
.wmg-val{color:var(--text-muted);flex:1;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.wmg-link{color:var(--pink);font-weight:600;transition:color var(--dur) var(--ease)}
.wmg-link:hover{color:var(--pink-hi)}

/* stat pills */
.work-stats{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.wstat{
  display:flex;align-items:center;gap:5px;
  padding:5px 12px;border-radius:20px;
  background:var(--bg-elev);border:1px solid var(--border);
  font-size:12px;color:var(--text-muted);
}
.wstat-val{color:var(--text);font-weight:700;font-family:'JetBrains Mono',monospace}

/* rating stars */
.work-rating{display:flex;align-items:center;gap:6px}
.stars{display:flex;gap:2px}
.star{color:var(--gold);font-size:14px;line-height:1}
.star.empty{color:var(--text-dim)}
.rating-num{font-size:15px;font-weight:800;color:var(--text);font-family:'JetBrains Mono',monospace}
.rating-count{font-size:11px;color:#d3d3d8b5}

/* tag cloud */
.work-tags{display:flex;flex-wrap:wrap;gap:5px}
.wtag{
  font-size:11.5px;font-weight:600;
  padding:3px 10px;border-radius:12px;
  border:1px solid var(--border);
  color:var(--text-muted);background:var(--bg-elev);
  transition:all var(--dur) var(--ease);cursor:pointer;
}
.wtag:hover{border-color:var(--border-pink);color:var(--pink);background:var(--pink-dim)}

/* action buttons */
.work-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.wact{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 18px;border-radius:9px;
  font-size:13px;font-weight:600;
  transition:all var(--dur) var(--ease);
  border:1px solid var(--border);
  color:var(--text-muted);background:var(--bg-elev);
}
.wact:hover{border-color:var(--border-hi);color:var(--text)}
.wact.primary{background:var(--pink);border-color:var(--pink);color:#fff;box-shadow:0 4px 18px rgba(225,34,123,.3)}
.wact.primary:hover{background:var(--pink-hi);transform:translateY(-1px);box-shadow:0 6px 24px rgba(225,34,123,.4)}
.wact.fav{transition:all var(--dur) var(--ease)}
.wact.fav.on{border-color:var(--pink);color:var(--pink);background:var(--pink-dim)}
.wact svg{flex-shrink:0}

/* ══════════════════════════════════════════════
   READER SECTION
══════════════════════════════════════════════ */
.reader-section{
  display:flex;
  position:relative;
  background:rgba(8,9,14,.92);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

/* ── SIDEBAR THUMBNAILS ─────────────────── */
.reader-sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  background:rgba(10,11,15,.95);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  position:sticky;
  top:56px;
  height:calc(100vh - 56px);
  overflow:hidden;
}
.rsb-header{
  padding:10px 14px 9px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;
}
.rsb-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted)}
.rsb-count{font-size:11px;color:var(--text-dim);font-family:'JetBrains Mono',monospace}
.rsb-thumbs{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:5px}
.rsb-thumbs::-webkit-scrollbar{width:3px}
.rsb-thumbs::-webkit-scrollbar-track{background:transparent}
.rsb-thumbs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px}
.rsb-thumb{
  position:relative;border-radius:6px;overflow:hidden;
  border:2px solid transparent;
  cursor:pointer;flex-shrink:0;
  transition:all var(--dur) var(--ease);
  background:var(--bg-elev);
}
.rsb-thumb:hover{border-color:var(--border-hi)}
.rsb-thumb.active{border-color:var(--pink);box-shadow:0 0 0 1px var(--pink)}
.rsb-thumb-img{
  width:100%;height:auto;aspect-ratio:5/7;
  display:flex;align-items:center;justify-content:center;
}
.rsb-thumb-num{
  position:absolute;bottom:4px;right:5px;
  font-size:9px;font-family:'JetBrains Mono',monospace;
  color:rgba(255,255,255,.6);background:rgba(0,0,0,.65);
  padding:1px 5px;border-radius:3px;
  line-height:1.4;
}

/* ── READER MAIN ────────────────────────── */
.reader-main{flex:1;display:flex;flex-direction:column;min-width:0}

/* toolbar */
.reader-toolbar{
  position:sticky;top:56px;z-index:50;
  background:rgba(10,11,15,.96);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  padding:0 16px;
  height:var(--toolbar-h);
  display:flex;align-items:center;gap:10px;
}
.rt-group{display:flex;align-items:center;gap:4px}
.rt-divider{width:1px;height:22px;background:var(--border);margin:0 6px}
.rt-btn{
  width:32px;height:32px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-input);border:1px solid var(--border);
  color:var(--text-muted);line-height:0;
  transition:all var(--dur) var(--ease);
}
.rt-btn:hover{border-color:var(--border-hi);color:var(--text)}
.rt-btn.on{background:var(--pink-dim);border-color:var(--border-pink);color:var(--pink)}
.rt-label{
  padding:5px 12px;border-radius:7px;
  background:var(--bg-input);border:1px solid var(--border);
  font-size:12px;font-family:'JetBrains Mono',monospace;
  color:var(--text-muted);white-space:nowrap;
  transition:all var(--dur) var(--ease);cursor:default;
  min-width:72px;text-align:center;
}
.rt-mode-toggle{
  display:flex;gap:2px;
  background:rgba(255,255,255,.03);border:1px solid var(--border);
  padding:3px;border-radius:8px;
}
.rt-mode-btn{
  padding:4px 12px;border-radius:5px;
  font-size:11.5px;font-weight:600;color:var(--text-muted);
  transition:all var(--dur) var(--ease);
  display:flex;align-items:center;gap:5px;
}
.rt-mode-btn:hover{color:var(--text)}
.rt-mode-btn.on{background:var(--pink);color:#fff;box-shadow:0 2px 8px rgba(225,34,123,.35)}
.rt-spacer{flex:1}
.rt-progress{
  flex:1;max-width:160px;
  height:4px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden;
}
.rt-progress-fill{height:100%;background:linear-gradient(90deg,var(--pink),var(--pink-hi));border-radius:2px;transition:width .3s var(--ease)}

/* ── VERTICAL READER ────────────────────── */
.reader-vertical{
  display:flex;flex-direction:column;align-items:center;
  padding:20px;gap:4px;
  min-height:400px;
}
.reader-horizontal{
  display:none;
  align-items:center;justify-content:center;
  min-height:calc(100vh - 56px - var(--toolbar-h));
  padding:20px;
  position:relative;
}
.reader-horizontal.active{display:flex}
.reader-vertical.active{display:flex}

/* page image wrapper */
.rpage{
  position:relative;
  width:100%;max-width:800px;
  border-radius:4px;overflow:hidden;
  background:var(--bg-elev);
  animation:pageIn .2s var(--ease) both;
}
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.rpage-img{
  width:100%;aspect-ratio:5/7;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.rpage-num{
  position:absolute;bottom:8px;right:10px;
  font-size:10px;font-family:'JetBrains Mono',monospace;
  color:rgba(255,255,255,.35);background:rgba(0,0,0,.5);
  padding:2px 7px;border-radius:3px;
  pointer-events:none;
}

/* horizontal single page */
.rpage-single{
  position:relative;width:100%;max-width:700px;
  border-radius:6px;overflow:hidden;
  background:var(--bg-elev);
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.rpage-single .rpage-img{aspect-ratio:5/7}

/* horizontal nav arrows */
.hreader-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:10;
  width:44px;height:80px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,11,15,.7);backdrop-filter:blur(8px);
  border:1px solid var(--border-hi);color:var(--text-muted);
  transition:all var(--dur) var(--ease);line-height:0;
}
.hreader-arrow:hover{background:rgba(225,34,123,.2);border-color:var(--border-pink);color:var(--pink)}
.hreader-arrow.prev{left:8px}
.hreader-arrow.next{right:8px}
.hreader-arrow.disabled{opacity:.2;pointer-events:none}

/* placeholder page artwork */
.page-art{
  width:100%;height:100%;
  position:absolute;inset:0;
}

/* ══════════════════════════════════════════════
   BELOW READER CONTENT
══════════════════════════════════════════════ */
.below-reader{max-width:1400px;width:100%;margin:0 auto;padding:32px 22px 60px;display:flex;flex-direction:column;gap:28px}
.section-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.9px;color:var(--text-muted);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.section-title::after{content:'';flex:1;height:1px;background:var(--border)}

/* ── DOWNLOAD & SHARE ───────────────────── */
.ds-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.ds-col{flex:1;min-width:220px}
.ds-col-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#d3d3d8b5;margin-bottom:12px}
/* format rows */
.ds-format-list{display:flex;flex-direction:column;gap:7px}
.ds-format-row{display:flex;align-items:center;gap:8px;background:var(--bg-elev);border:1px solid var(--border);border-radius:9px;padding:8px 10px;transition:border-color var(--dur) var(--ease)}
.ds-format-row:hover{border-color:var(--border-hi)}
.ds-format-icon{width:30px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text-muted);line-height:0;flex-shrink:0}
.ds-format-label{font-size:12px;font-weight:700;color:var(--text);min-width:42px;flex-shrink:0}
.ds-format-url{flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.11);border-style:dashed;border-radius:6px;padding:5px 9px;color:#525270;font-size:10.5px;font-family:'JetBrains Mono',monospace;outline:none;transition:all var(--dur) var(--ease);min-width:0}
.ds-format-url:focus{border-style:solid;border-color:var(--border-pink);color:var(--text-muted);background:var(--pink-glow)}
.ds-format-url::placeholder{color:#525270;opacity:.7}
.ds-format-dl{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:6px;font-size:11px;font-weight:700;border:1px solid rgba(225,34,123,.3);color:var(--pink);background:var(--pink-dim);transition:all var(--dur) var(--ease);white-space:nowrap;flex-shrink:0}
.ds-format-dl:hover{border-color:var(--pink);background:rgba(225,34,123,.22);transform:translateY(-1px)}
.ds-format-dl.no-url{opacity:.3;pointer-events:none}
.ds-meta{font-size:11.5px;color:var(--text-dim);margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.ds-meta span{color:#d3d3d8b5}
/* share */
.ds-btns{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.ds-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:8px;font-size:12.5px;font-weight:600;border:1px solid var(--border);color:var(--text-muted);background:var(--bg-elev);transition:all var(--dur) var(--ease)}
.ds-btn:hover{border-color:var(--border-hi);color:var(--text);transform:translateY(-1px)}
.share-link-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:#d3d3d8b5;margin-bottom:6px;margin-top:14px}
.share-link-row{display:flex;gap:6px}
.share-link-input{flex:1;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;padding:7px 12px;color:var(--text-muted);font-size:11px;outline:none;font-family:'JetBrains Mono',monospace;transition:border-color var(--dur) var(--ease);min-width:0}
.share-link-input:focus{border-color:var(--border-pink)}
.share-copy-btn{padding:7px 14px;border-radius:6px;background:var(--pink);color:#fff;font-size:12px;font-weight:700;transition:all var(--dur) var(--ease);white-space:nowrap}
.share-copy-btn:hover{background:var(--pink-hi)}
.share-copy-btn.copied{background:#22a05a}
.ds-divider{width:1px;background:var(--border);align-self:stretch;flex-shrink:0}
@media(max-width:700px){.ds-divider{display:none}.ds-panel{flex-direction:column}}

/* ── COMMENTS ───────────────────────────── */
.comments-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px}
.comment-compose{display:flex;gap:10px;margin-bottom:22px}
.compose-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--pink),#ff6ba8);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;flex-shrink:0;margin-top:2px}
.compose-input-wrap{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
/* MCE container override — dark skin */
.tox-tinymce{border:1px solid var(--border) !important;border-radius:9px !important;overflow:hidden !important;background:var(--bg-input) !important}
.tox-tinymce:focus-within{border-color:var(--border-pink) !important;box-shadow:0 0 0 3px var(--pink-glow) !important}
.tox .tox-toolbar-overlord,.tox .tox-toolbar__primary{background:var(--bg-elev) !important;border-bottom:1px solid var(--border) !important}
.tox .tox-tbtn{color:var(--text-muted) !important;border-radius:5px !important}
.tox .tox-tbtn:hover{background:rgba(255,255,255,.07) !important;color:var(--text) !important}
.tox .tox-tbtn--enabled,.tox .tox-tbtn--enabled:hover{background:var(--pink-dim) !important;color:var(--pink) !important}
.tox .tox-tbtn svg{fill:currentColor !important}
.tox .tox-edit-area__iframe{background:transparent !important}
.tox .tox-statusbar{background:var(--bg-elev) !important;border-top:1px solid var(--border) !important;color:var(--text-dim) !important}
.tox .tox-statusbar a,.tox .tox-statusbar__branding{color:var(--text-dim) !important;opacity:.4}
.tox .tox-statusbar__wordcount{color:var(--text-dim) !important}
.tox-tinymce .tox-toolbar__group{border:none !important}
.tox .tox-split-button:hover,.tox .tox-split-button:focus{background:rgba(255,255,255,.06) !important}
/* spoiler button custom */
.tox .tox-tbtn[data-mce-name="spoiler"]{font-size:10px;font-weight:800;letter-spacing:.3px}
/* compose bottom bar */
.compose-footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:2px}
.compose-hint{font-size:11.5px;color:#d3d3d8b5;margin-right:auto}
.compose-submit{padding:7px 18px;border-radius:7px;background:var(--pink);color:#fff;font-size:12.5px;font-weight:700;transition:all var(--dur) var(--ease)}
.compose-submit:hover{background:var(--pink-hi);transform:translateY(-1px)}
/* char counter */
.compose-charcount{font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--text-dim)}
.compose-charcount.warn{color:var(--gold)}
.compose-charcount.over{color:#f55}

/* comment list */
.comment-list{display:flex;flex-direction:column;gap:18px}
.comment{display:flex;gap:10px}
.ca{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;flex-shrink:0}
.comment-body{flex:1;min-width:0}
.comment-header{display:flex;align-items:baseline;gap:8px;margin-bottom:5px;flex-wrap:wrap}
.comment-author{font-size:13px;font-weight:700;color:var(--text)}
.comment-time{font-size:11px;color:#d3d3d8b5;font-family:'JetBrains Mono',monospace}
.comment-badge{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:1px 6px;border-radius:3px}
.cb-mod{background:rgba(0,212,255,.12);border:1px solid rgba(0,212,255,.2);color:var(--cyan)}
.cb-op{background:var(--pink-dim);border:1px solid rgba(225,34,123,.2);color:var(--pink)}
.comment-text{font-size:13px;color:var(--text-muted);line-height:1.7}
.comment-actions{display:flex;align-items:center;gap:12px;margin-top:7px}
.ca-btn{font-size:11.5px;color:var(--text-dim);display:flex;align-items:center;gap:4px;transition:color var(--dur) var(--ease)}
.ca-btn:hover{color:var(--text)}
.ca-btn.liked{color:var(--pink)}
.ca-btn svg{opacity:.6}
.comment-divider{border:none;border-top:1px solid var(--border);margin:4px 0}

/* ── PAGINATION ─────────────────────────── */
.comment-pgn{display:flex;align-items:center;gap:6px;margin-top:20px;justify-content:center}
.cpbn{padding:5px 12px;border-radius:6px;font-size:12px;font-family:'JetBrains Mono',monospace;color:var(--text-muted);border:1px solid var(--border);background:var(--bg-card);transition:all var(--dur) var(--ease);cursor:pointer}
.cpbn:hover{border-color:var(--border-hi);color:var(--text)}
.cpbn.on{background:var(--pink);border-color:var(--pink);color:#fff;font-weight:700}

/* ══════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════ */
.site-footer{background:var(--bg-panel);border-top:1px solid var(--border);padding:28px 22px;position:relative;z-index:1}
.footer-inner{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px}
.fbrand .logo{margin-bottom:9px}
.fbrand p{font-size:12px;color:var(--text-muted);line-height:1.75;max-width:270px}
.fcol h4{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.1px;color:var(--text-dim);margin-bottom:9px}
.fcol a{display:block;font-size:12.5px;color:var(--text-muted);padding:2.5px 0;transition:color var(--dur) var(--ease)}
.fcol a:hover{color:var(--pink)}
.footer-btm{max-width:1400px;margin:18px auto 0;padding-top:14px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:11.5px;color:var(--text-dim);flex-wrap:wrap;gap:7px}

/* ══════════════════════════════════════════════
   BG SETTINGS PANEL
══════════════════════════════════════════════ */
@keyframes mdrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.bgsettings-overlay{display:none;position:fixed;inset:0;z-index:149;background:rgba(0,0,0,.35);backdrop-filter:blur(2px)}
.bgsettings-overlay.vis{display:block}
.bgsettings-panel{position:fixed;top:64px;right:18px;width:310px;background:var(--bg-elev);border:1px solid var(--border-hi);border-radius:14px;box-shadow:0 18px 56px rgba(0,0,0,.7);z-index:150;display:none;overflow:hidden;animation:mdrop .16s ease}
.bgsettings-panel.vis{display:block}
.bgsp-header{display:flex;align-items:center;justify-content:space-between;padding:13px 16px 11px;border-bottom:1px solid var(--border)}
.bgsp-title{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--text)}
.bgsp-close{width:24px;height:24px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--text-dim);transition:all var(--dur) var(--ease)}
.bgsp-close:hover{background:rgba(255,255,255,.07);color:var(--text)}
.bgsp-section{padding:12px 16px;border-bottom:1px solid var(--border)}
.bgsp-section:last-child{border-bottom:none}
.bgsp-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.9px;color:var(--text-muted);margin-bottom:8px}
.bgsp-label{font-size:12.5px;font-weight:600;color:var(--text)}
.bgsp-sublabel{font-size:11px;color:var(--text-dim);margin-top:1px}
.bgsp-row{display:flex;align-items:center;justify-content:space-between;padding:5px 0;gap:10px}
.bgtoggle{width:36px;height:20px;border-radius:10px;background:rgba(255,255,255,.1);border:1px solid var(--border);position:relative;flex-shrink:0;transition:all .22s var(--ease)}
.bgtoggle.on{background:var(--pink);border-color:var(--pink)}
.bgtoggle-knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4);transition:transform .22s var(--ease)}
.bgtoggle.on .bgtoggle-knob{transform:translateX(16px)}
.bgsp-presets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.bgsp-preset{width:46px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;gap:2px;border:2px solid var(--border);background:rgba(255,255,255,.03);overflow:hidden;transition:all var(--dur) var(--ease);cursor:pointer;padding:0}
.bgsp-preset span{flex:1;height:100%;display:block}
.bgsp-preset:hover{border-color:var(--border-hi);transform:translateY(-1px)}
.bgsp-preset.active{border-color:var(--pink);box-shadow:0 0 0 2px var(--pink-dim)}
.bgsp-swatch-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;min-height:32px}
.bgsp-swatch{width:30px;height:30px;border-radius:6px;border:2px solid rgba(255,255,255,.12);position:relative;cursor:pointer;transition:all var(--dur) var(--ease);display:flex;align-items:center;justify-content:center}
.bgsp-swatch:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.35)}
.bgsp-swatch-del{position:absolute;top:-5px;right:-5px;width:14px;height:14px;border-radius:50%;background:rgba(20,20,30,.9);border:1px solid var(--border);display:none;align-items:center;justify-content:center;font-size:8px;color:var(--text-muted);line-height:0}
.bgsp-swatch:hover .bgsp-swatch-del{display:flex}
.bgsp-swatch-del:hover{background:#f55;color:#fff;border-color:#f55}
.bgsp-add-color{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:6px;border:1px dashed var(--border-hi);color:var(--text-muted);font-size:12px;transition:all var(--dur) var(--ease)}
.bgsp-add-color:hover{border-color:var(--pink);color:var(--pink);background:var(--pink-dim)}
.bgsp-footer{padding:10px 16px;border-top:1px solid var(--border)}
.bgsp-reset{font-size:12px;color:var(--text-dim);padding:4px 10px;border-radius:5px;border:1px solid transparent;transition:all var(--dur) var(--ease)}
.bgsp-reset:hover{color:#f55;border-color:rgba(255,50,50,.25)}
.bgsp-blob-row{display:flex;gap:12px;align-items:flex-start}
.bgsp-blob-swatch-wrap{display:flex;flex-direction:column;align-items:center;gap:5px}
.bgsp-blob-swatch{width:46px;height:46px;border-radius:50%;border:2px solid rgba(255,255,255,.15);cursor:pointer;transition:all var(--dur) var(--ease);box-shadow:0 0 14px rgba(0,0,0,.4);position:relative}
.bgsp-blob-swatch:hover{transform:scale(1.1);border-color:rgba(255,255,255,.4)}
.bgsp-blob-swatch::after{content:'✎';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;color:rgba(255,255,255,0);transition:color var(--dur) var(--ease);text-shadow:0 1px 3px rgba(0,0,0,.6)}
.bgsp-blob-swatch:hover::after{color:rgba(255,255,255,.85)}
.bgsp-blob-label{font-size:10px;color:var(--text-dim);white-space:nowrap}

/* ══════════════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════════════ */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.15)}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media(max-width:1000px){
  .reader-sidebar{width:170px;--sidebar-w:170px}
}
@media(max-width:780px){
  .reader-sidebar{display:none}
  .work-hero{flex-direction:column;gap:18px}
  .work-cover{width:140px;height:196px}
  .work-title{font-size:20px}
  .nav,.hdr-search{display:none}
  .hbg{display:flex}
  .footer-inner{grid-template-columns:1fr 1fr}
  .fbrand{grid-column:1/-1}
}
@media(max-width:500px){
  .work-hero{padding:16px 14px}
  .footer-inner{grid-template-columns:1fr}
  .below-reader{padding:20px 14px 40px}
}


/* ── Light mode overrides for single page ── */
[data-theme="light"] .breadcrumb {
  background: rgba(240,240,248,.8);
  border-bottom-color: rgba(0,0,0,.08);
}

[data-theme="light"] .work-meta-grid {
  background: rgba(240,240,248,.7);
  border-color: rgba(0,0,0,.08);
}

[data-theme="light"] .wmg-row:hover {
  background: rgba(0,0,0,.03);
}

[data-theme="light"] .wmg-label,
[data-theme="light"] .rating-count,
[data-theme="light"] .compose-hint,
[data-theme="light"] .comment-time { color: #6b6b80; }

[data-theme="light"] .ds-col-title,
[data-theme="light"] .ds-meta span,
[data-theme="light"] .share-link-label { color: #6b6b80; }

[data-theme="light"] .ds-format-url {
  color: #52527a;
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.12);
}
[data-theme="light"] .ds-format-url::placeholder { color: #52527a; }

/* ══════════════════════════════════════════════
   BROWSE A–Z LETTER FILTER
══════════════════════════════════════════════ */
.browse-alpha {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 10px 0 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.ba-btn {
  min-width: 26px;
  height: 26px;
  padding: 0 5px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all .14s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ba-btn:hover {
  border-color: var(--border-hi);
  color: var(--text);
}
.ba-btn.active {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
}
@media (max-width: 600px) {
  .browse-alpha { gap: 2px; }
  .ba-btn { min-width: 22px; height: 22px; font-size: 10px; }
}