.hero, .panel { border-radius: 28px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); border: 1px solid rgba(23,32,51,.06); overflow: hidden; }
    .hero-grid { display: grid; grid-template-columns: 320px 1fr; }
    .hero-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .hero-copy { display: grid; gap: 22px; padding: 30px; align-content: start; }
    .hero-copy h1 { line-height: 1.08; overflow-wrap: anywhere; word-break: break-word; }
    .hero-topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
    .genre-cluster {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      min-width: 0;
      flex: 1 1 auto;
    }
    .genre-cluster details {
      display: contents;
    }
    .genre-cluster summary {
      list-style: none;
    }
    .genre-cluster summary::-webkit-details-marker { display: none; }
    .chip {
      display: inline-flex;
      align-items: center;
      padding: 8px 12px;
      border-radius: 999px;
      background: var(--surface-soft);
      color: var(--blue-700);
      font-weight: 800;
      font-size: .86rem;
      line-height: 1.1;
      max-width: 100%;
    }
    .chip-button {
      border: 0;
      cursor: pointer;
    }
    .chip-muted {
      background: rgba(23, 32, 51, 0.06);
      color: var(--muted);
    }
    .title-signals {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }
    .title-signal {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      border-radius: 999px;
      font-size: 0.82rem;
      font-weight: 800;
      line-height: 1;
      background: #edf6ff;
      color: var(--blue-700);
    }
    .title-signal.is-trending {
      background: #fff1ec;
      color: #d4572e;
    }
    .title-signal.is-popular {
      background: #eefbf2;
      color: #247a4f;
    }
    .title-signal.is-top10 {
      background: #fff8df;
      color: #9a6b00;
    }
    .title-signal.is-new-part {
      background: #eaf7ff;
      color: #0e6aa8;
    }
    .meta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .meta-card {
      padding: 18px;
      border-radius: 22px;
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--blue-500) 18%, var(--surface) 82%), color-mix(in srgb, var(--rose-500) 16%, var(--surface) 84%));
      border: 1px solid color-mix(in srgb, var(--blue-500) 18%, rgba(23, 32, 51, 0.08));
      box-shadow: 0 16px 34px rgba(89, 102, 153, 0.12);
    }
    .bookmark-btn.active { background: linear-gradient(135deg, var(--blue-500), var(--rose-500)); color: #fff; border-color: transparent; }
    .bookmark-btn { flex-shrink: 0; margin-left: auto; }
    .stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
    .rating-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; border-radius: 20px; background: var(--surface-soft); }
    .rating-copy { min-width: 0; }
    .rating-copy h2 { margin: 0 0 4px; font-size: 1.08rem; }
    .rating-copy p { margin: 0; font-size: .92rem; color: var(--muted); }
    .chapter-bookmark-btn.active { background: var(--surface-strong); color: var(--blue-700); border-color: rgba(59, 167, 248, 0.26); }
    .stars { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
    .star-btn { border: 0; background: transparent; font-size: 1.45rem; color: #c2cedf; padding: 0; line-height: 1; }
    .star-btn.active, .star-btn:hover, .star-btn:focus-visible { color: #ffb02e; }
    .star-btn:disabled { opacity: 1; cursor: default; }
    .star-btn:disabled:hover, .star-btn:disabled:focus-visible { color: inherit; }
    .table-responsive { overflow-x: auto; }
    .table { table-layout: fixed; }
    .table th, .table td { vertical-align: top; overflow-wrap: anywhere; word-break: break-word; }
    .chapters-mobile { display: block; }
    .chapter-groups { display: grid; gap: 12px; }
    .chapter-group {
      border: 1px solid rgba(23,32,51,.08);
      border-radius: 22px;
      background: rgba(255,255,255,.96);
      box-shadow: 0 14px 26px rgba(45, 97, 146, 0.08);
      overflow: hidden;
    }
    .chapter-group summary {
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 16px 18px;
      cursor: pointer;
    }
    .chapter-group summary::-webkit-details-marker { display: none; }
    .chapter-group-label { min-width: 0; }
    .chapter-group-label strong {
      display: block;
      line-height: 1.2;
    }
    .chapter-group-label small {
      display: block;
      color: var(--muted);
      margin-top: 4px;
    }
    .chapter-group-icon {
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: var(--surface-soft);
      color: var(--blue-700);
      flex-shrink: 0;
      transition: transform 0.2s ease;
    }
    .chapter-group[open] .chapter-group-icon { transform: rotate(180deg); }
    .chapter-group-body {
      padding: 0 14px 14px;
      display: grid;
      gap: 10px;
    }
    .chapter-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 14px;
      border-radius: 18px;
      background: linear-gradient(180deg, #ffffff, #f7fbff);
      border: 1px solid rgba(23,32,51,.06);
    }
    .chapter-row-main { min-width: 0; }
    .chapter-row-main a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      font-weight: 800;
      line-height: 1.2;
      color: inherit;
    }
    .chapter-part-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      color: inherit;
      text-decoration: none;
    }
    .chapter-inline-new {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      border-radius: 999px;
      background: #eaf7ff;
      color: #0e6aa8;
      font-size: 0.72rem;
      font-weight: 800;
      line-height: 1;
      white-space: nowrap;
      vertical-align: middle;
    }
    .chapter-row-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 10px;
      margin-top: 6px;
      color: var(--muted);
      font-size: 0.84rem;
    }
    .chapter-row-meta span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .chapter-row-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-shrink: 0;
    }
    .chapter-action-btn {
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border-radius: 50%;
      flex: 0 0 34px;
    }
    body.dark-theme .hero,
    body.dark-theme .panel {
      background: linear-gradient(180deg, rgba(16, 27, 43, 0.96), rgba(11, 21, 34, 0.98));
      border-color: rgba(147, 167, 199, 0.12);
    }
    body.dark-theme .chip {
      background: rgba(33, 69, 118, 0.65);
      color: #d6e7ff;
    }
    body.dark-theme .chip-muted {
      background: rgba(147, 167, 199, 0.12);
      color: #c8d8ef;
    }
    body.dark-theme .title-signal {
      background: rgba(33, 69, 118, 0.65);
      color: #d6e7ff;
    }
    body.dark-theme .title-signal.is-trending {
      background: rgba(87, 42, 22, 0.92);
      color: #ffd7c8;
    }
    body.dark-theme .title-signal.is-popular {
      background: rgba(24, 75, 56, 0.92);
      color: #cdf3df;
    }
    body.dark-theme .title-signal.is-top10 {
      background: rgba(99, 73, 17, 0.94);
      color: #ffe7a3;
    }
    body.dark-theme .title-signal.is-new-part {
      background: rgba(14, 106, 168, 0.24);
      color: #9ddcff;
    }
    body.dark-theme .meta-card {
      background: linear-gradient(135deg, rgba(29, 51, 82, 0.92), rgba(55, 39, 71, 0.9));
      border-color: rgba(147, 167, 199, 0.12);
      box-shadow: 0 18px 34px rgba(0, 0, 0, 0.24);
    }
    body.dark-theme .meta-card small,
    body.dark-theme .rating-copy p,
    body.dark-theme .text-secondary {
      color: #9fb4d5 !important;
    }
    body.dark-theme .meta-card strong,
    body.dark-theme .hero-copy h1,
    body.dark-theme .rating-copy h2,
    body.dark-theme .table a,
    body.dark-theme .table th,
    body.dark-theme .table td {
      color: #edf4ff;
    }
    body.dark-theme .rating-card {
      background: rgba(21, 38, 61, 0.88);
    }
    body.dark-theme .table {
      --bs-table-bg: transparent;
      --bs-table-color: #edf4ff;
      --bs-table-hover-color: #edf4ff;
      --bs-table-hover-bg: rgba(29, 51, 82, 0.42);
      --bs-table-border-color: rgba(147, 167, 199, 0.14);
    }
    body.dark-theme .chapter-group {
      background: rgba(18, 32, 51, 0.92);
      border-color: rgba(147, 167, 199, 0.12);
      box-shadow: 0 18px 30px rgba(0, 0, 0, 0.24);
    }
    body.dark-theme .chapter-group-icon {
      background: rgba(33, 69, 118, 0.65);
      color: #d6e7ff;
    }
    body.dark-theme .chapter-row {
      background: rgba(21, 38, 61, 0.88);
      border-color: rgba(147, 167, 199, 0.12);
    }
    body.dark-theme .chapter-row-main a,
    body.dark-theme .chapter-group-label strong {
      color: #edf4ff;
    }
    body.dark-theme .chapter-inline-new {
      background: rgba(14, 106, 168, 0.24);
      color: #9ddcff;
    }
    body.dark-theme .chapter-group-label small,
    body.dark-theme .chapter-row-meta {
      color: #9fb4d5;
    }
    @media (max-width: 991.98px) {
      .hero-grid { grid-template-columns: 1fr; }
      .hero-grid img { max-height: 520px; }
      .stats-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 575.98px) {
      .hero, .panel { border-radius: 24px; }
      .page-card {
        padding: 18px;
      }
      .hero-grid img {
        width: min(72vw, 240px);
        max-width: 100%;
        height: auto;
        aspect-ratio: auto;
        justify-self: center;
      }
      .hero-copy { gap: 16px; padding: 18px; }
      .hero-copy h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
      .genre-cluster {
        width: 100%;
        flex: 1 1 100%;
      }
      .chip { font-size: 0.82rem; }
      .hero-topbar, .rating-card { align-items: stretch; flex-direction: column; }
      .meta-grid, .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }
      .meta-card { padding: 14px; border-radius: 18px; }
      .meta-card small { font-size: 0.72rem; }
      .meta-card strong { font-size: 0.95rem; line-height: 1.3; }
      .title-signals {
        gap: 6px;
      }
      .title-signal {
        max-width: 100%;
      }
      .stars { justify-content: flex-start; }
      .bookmark-btn { width: 100%; margin-left: 0; }
      .rating-card { padding: 16px; }
      .star-btn { font-size: 1.75rem; }
      .chapter-group summary {
        padding: 14px;
      }
      .chapter-group-body {
        padding: 0 10px 10px;
      }
      .chapter-row {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 10px;
      }
      .chapter-row-actions {
        position: static;
        width: auto;
        justify-content: flex-end;
        align-self: start;
      }
      .chapter-row-actions .chapter-action-btn {
        flex: 0 0 34px;
      }
      .chapter-row-main {
        padding-right: 0;
      }
    }