:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #10131a; color: #edf2f7; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at top, #202a3b, #10131a 45rem); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
#app { max-width: 1180px; min-height: 100vh; margin: 0 auto; padding: 0 20px 48px; }
.topbar { display: flex; gap: 18px; align-items: center; justify-content: space-between; min-height: 76px; border-bottom: 1px solid #30394a; position: relative; }
.brand { padding: 0; border: 0; color: #fff; font-weight: 800; letter-spacing: .04em; background: transparent; white-space: nowrap; }
.nav-menu { display: flex; gap: 6px; align-items: center; }
.nav-link { background: transparent; border: none; color: #94a3b8; font-size: 0.92rem; font-weight: 600; padding: 8px 14px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer; }
.nav-link:hover { color: #edf2f7; background: rgba(255, 255, 255, 0.06); }
.nav-link.active { color: #e9c96f; background: rgba(233, 201, 111, 0.12); font-weight: 700; }
.searchbar { position: relative; display: flex; flex: 1; max-width: 420px; gap: 8px; justify-content: flex-end; }
.searchbar input, .chapter-select { min-width: 0; width: 100%; padding: 10px 12px; color: inherit; background: #171d28; border: 1px solid #3d485b; border-radius: 8px; }
.search-dropdown { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #151b26; border: 1px solid #354256; border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7); z-index: 100; overflow: hidden; max-height: 380px; overflow-y: auto; text-align: left; }
.dropdown-loading, .dropdown-empty { padding: 14px 16px; font-size: 0.88rem; color: #94a3b8; text-align: center; }
.dropdown-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #242c3b; cursor: pointer; transition: background 0.15s ease; }
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover, .dropdown-item:focus { background: #202938; outline: none; }
.dropdown-thumb { width: 42px; height: 56px; object-fit: cover; border-radius: 5px; background: #2a3446; flex-shrink: 0; }
.dropdown-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.dropdown-title { font-size: 0.92rem; font-weight: 700; color: #edf2f7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dropdown-meta { font-size: 0.76rem; color: #8a99ad; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.button, .compact { padding: 9px 12px; color: #dce6f5; border: 1px solid #45546a; border-radius: 8px; background: #202938; }
.button.primary { background: #d7b354; border-color: #e9c96f; color: #1b170d; font-weight: 700; }
.compact { padding: 7px 10px; font-size: .88rem; }
.hero { max-width: 700px; padding: 82px 0 52px; }
.hero h1, .detail h1, .reader h1 { margin: 4px 0 14px; line-height: 1.08; }
.hero h1 { font-size: clamp(2.1rem, 7vw, 4.4rem); }
.eyebrow { margin: 0; color: #e9c96f; font-size: .8rem; font-weight: 800; letter-spacing: .16em; }
.muted, .empty, figcaption { color: #aab5c4; }
.section { margin: 24px 0 42px; }
.section h2 { margin: 0; font-size: 1.25rem; }
.section-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-tab { padding: 6px 14px; border-radius: 20px; border: 1px solid #354256; background: #19202c; color: #94a3b8; font-size: 0.85rem; font-weight: 600; transition: all 0.2s ease; cursor: pointer; }
.filter-tab:hover { border-color: #e9c96f; color: #dce6f5; }
.filter-tab.active { background: #d7b354; border-color: #e9c96f; color: #10131a; font-weight: 700; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 32px; padding: 10px 0; }
.page-btn { min-width: 42px; height: 42px; padding: 0 12px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #1b212d; border: 1px solid #333d4f; color: #dce6f5; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; }
.page-btn:hover:not(:disabled) { border-color: #8b5cf6; color: #fff; transform: translateY(-1px); }
.page-btn.active { background: #7c3aed; border-color: #8b5cf6; color: #ffffff; font-weight: 700; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4); }
.page-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.page-btn.prev-btn, .page-btn.next-btn { color: #a78bfa; border-color: #5b21b6; font-size: 1.1rem; font-weight: 700; }
.recommendation-slider { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #3d485b transparent; }
.recommendation-slider::-webkit-scrollbar { height: 6px; }
.recommendation-slider::-webkit-scrollbar-thumb { background: #3d485b; border-radius: 3px; }
.poster-card { flex: 0 0 160px; width: 160px; aspect-ratio: 2 / 3.2; position: relative; border-radius: 10px; overflow: hidden; cursor: pointer; background: #1e2636; scroll-snap-align: start; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease; border: 1px solid rgba(255, 255, 255, 0.08); }
.poster-card:hover { transform: scale(1.04); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6); z-index: 2; }
.poster-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poster-topbar { position: absolute; top: 6px; left: 6px; right: 6px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; z-index: 2; }
.poster-badges-left { display: flex; gap: 4px; align-items: center; }
.poster-badge { padding: 2px 6px; border-radius: 4px; font-size: 0.68rem; font-weight: 700; line-height: 1.2; }
.time-badge { background: rgba(16, 19, 26, 0.85); color: #fff; backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.15); }
.up-badge { background: #e11d48; color: #fff; font-weight: 800; letter-spacing: 0.04em; }
.flag-badge { background: rgba(16, 19, 26, 0.75); font-size: 0.85rem; padding: 1px 4px; }
.poster-title-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 8px 8px; background: linear-gradient(to top, rgba(16, 19, 26, 0.95) 0%, rgba(16, 19, 26, 0.6) 60%, transparent 100%); color: #fff; font-size: 0.8rem; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px 16px; }
.comic-card { display: flex; flex-direction: column; border: 1px solid #2a3446; border-radius: 12px; background: #141a24; overflow: hidden; cursor: pointer; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.25s ease, box-shadow 0.25s ease; position: relative; }
.comic-card:hover, .comic-card:focus-visible { transform: translateY(-5px); border-color: #d7b354; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45); outline: none; }
.cover-wrapper { position: relative; width: 100%; aspect-ratio: 3 / 4.2; overflow: hidden; background: #1e2636; }
.cover-wrapper .cover { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.comic-card:hover .cover { transform: scale(1.06); }
.cover-wrapper.no-cover::after { content: 'No Image'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #718096; font-size: 0.85rem; }
.badge { position: absolute; padding: 4px 8px; border-radius: 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; backdrop-filter: blur(8px); z-index: 1; }
.rating-badge { top: 8px; left: 8px; background: rgba(16, 19, 26, 0.82); color: #f5c518; border: 1px solid rgba(245, 197, 24, 0.35); }
.type-badge { top: 8px; right: 8px; background: rgba(215, 179, 84, 0.9); color: #10131a; text-transform: uppercase; }
.card-content { padding: 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card-content .title { margin: 0; font-size: 0.95rem; font-weight: 700; line-height: 1.35; color: #edf2f7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.card-content .meta { margin: 0; font-size: 0.78rem; color: #94a3b8; text-transform: capitalize; }
.card-content .last-read { color: #10b981; font-size: 0.75rem; font-weight: 600; text-transform: none; margin-top: 2px; }
.continue-card, .history-row { display: flex; gap: 14px; padding: 13px; border: 1px solid #30394a; border-radius: 12px; background: #151b25; }
.continue-card { display: block; max-width: 430px; }
.continue-card h3 { margin: 0; }
.history-list { display: grid; gap: 10px; max-width: 800px; }
.history-row { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border: 1px solid #30394a; border-radius: 10px; background: #141a24; transition: border-color 0.2s ease, transform 0.2s ease; }
.history-row:hover { border-color: #8b5cf6; transform: translateY(-1px); }
.history-cover-wrapper { width: 46px; height: 62px; border-radius: 6px; overflow: hidden; background: #252d3a; flex-shrink: 0; position: relative; }
.history-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.history-cover-wrapper.no-cover::after { content: '📚'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.history-info { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.history-title { font-size: 0.95rem; font-weight: 700; color: #edf2f7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detail { display: flex; gap: 28px; padding: 42px 0 12px; }
.detail-cover { width: 230px; max-height: 345px; object-fit: cover; border-radius: 12px; background: #252d3a; }
.detail-info { max-width: 750px; }
.description { line-height: 1.65; white-space: pre-line; }
.tags { color: #e9c96f; }
.detail-actions { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.chapter-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin-top: 16px; }
.chapter-card { display: flex; align-items: center; gap: 14px; padding: 10px 12px; background: #141a24; border: 1px solid #283344; border-radius: 10px; text-align: left; color: inherit; width: 100%; cursor: pointer; transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease; }
.chapter-card:hover { transform: translateY(-2px); border-color: #8b5cf6; background: #1c2433; }
.chapter-card.read { background: #0d1117; border-color: #1f293d; opacity: 0.78; }
.chapter-card.read:hover { opacity: 1; background: #151c28; border-color: #10b981; }
.chapter-card.read .chapter-main-title { color: #94a3b8; font-weight: 600; }
.chapter-card.read .chapter-thumb { filter: brightness(0.75); }
.chapter-thumb-wrapper { width: 110px; height: 68px; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: #202938; position: relative; }
.chapter-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.chapter-thumb-wrapper.no-thumb::after { content: '📖'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.chapter-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.chapter-main-title { font-size: 0.95rem; font-weight: 700; color: #edf2f7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chapter-subtitle { font-size: 0.78rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.chapter-time { font-size: 0.75rem; color: #718096; margin-top: 2px; }
.chapter-up-badge { display: inline-block; align-self: flex-start; padding: 1px 5px; background: #e11d48; color: #fff; font-size: 0.65rem; font-weight: 800; border-radius: 4px; letter-spacing: 0.04em; margin-top: 2px; }
.reader-controls, .chapter-nav { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 18px 0; }
.reader-controls .chapter-select { width: min(480px, 100%); }
.reader { max-width: 900px; margin: 0 auto; padding: 10px 0; }
.reader h1 { text-align: center; font-size: 1.15rem; color: #d8e0ea; }
.page-list { display: grid; gap: 0; }
.page { margin: 0; min-height: 320px; text-align: center; }
.page img { display: block; max-width: 100%; min-height: 320px; margin: 0 auto; background: #171d28; }
.page figcaption { display: none; }
.resume-prompt { position: fixed; z-index: 2; right: 20px; bottom: 20px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; max-width: calc(100% - 40px); padding: 13px; border: 1px solid #e9c96f; border-radius: 10px; background: #27200e; box-shadow: 0 8px 28px #0008; }
@media (max-width: 768px) {
  #app { padding: 0 14px 36px; }

  /* Topbar: stack vertically */
  .topbar { min-height: auto; padding: 14px 0; gap: 10px; flex-wrap: wrap; }
  .brand { font-size: 0.95rem; }

  /* Nav menu: full width row */
  .nav-menu { order: 3; width: 100%; justify-content: center; gap: 4px; }
  .nav-link { font-size: 0.84rem; padding: 7px 12px; }

  /* Searchbar: full width */
  .searchbar { order: 2; max-width: 100%; flex: 1 1 100%; }
  .searchbar input { flex: 1; font-size: 0.9rem; }
  .search-dropdown { max-height: 320px; }

  /* Sections */
  .section { margin: 18px 0 28px; }
  .section h2 { font-size: 1.1rem; }
  .section-header { gap: 10px; margin-bottom: 12px; }

  /* Filter tabs */
  .filter-tabs { gap: 6px; }
  .filter-tab { padding: 5px 11px; font-size: 0.8rem; }

  /* Recommendation slider */
  .poster-card { flex: 0 0 130px; width: 130px; }
  .poster-title-overlay { font-size: 0.72rem; padding: 16px 6px 6px; }
  .poster-badge { font-size: 0.6rem; padding: 1px 4px; }

  /* Comic grid: 2 columns on mobile */
  .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px 10px; }
  .card-content { padding: 8px 10px; }
  .card-content .title { font-size: 0.85rem; }
  .card-content .meta { font-size: 0.72rem; }

  /* Detail page */
  .detail { flex-direction: column; padding-top: 24px; gap: 18px; }
  .detail-cover { width: 160px; max-height: 240px; }
  .detail-info { max-width: 100%; }
  .detail h1 { font-size: 1.3rem; }
  .description { font-size: 0.9rem; }

  /* Chapter list: single column */
  .chapter-list { grid-template-columns: 1fr; gap: 10px; }
  .chapter-card { padding: 8px 10px; gap: 10px; }
  .chapter-thumb-wrapper { width: 80px; height: 52px; }
  .chapter-main-title { font-size: 0.88rem; }
  .chapter-subtitle { font-size: 0.72rem; }

  /* Pagination */
  .pagination { gap: 5px; margin-top: 20px; }
  .page-btn { min-width: 36px; height: 36px; font-size: 0.85rem; }

  /* Reader */
  .page { min-height: 180px; }
  .page img { min-height: 180px; }
  .reader h1 { font-size: 1rem; }
  .reader-controls { gap: 6px; padding: 12px 0; }

  /* History rows */
  .history-list { max-width: 100%; }
  .history-row { gap: 10px; padding: 8px 10px; }
  .history-cover-wrapper { width: 38px; height: 52px; }
  .history-title { font-size: 0.88rem; }

  /* Resume prompt */
  .resume-prompt { right: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 10px; font-size: 0.88rem; }
}

@media (max-width: 420px) {
  #app { padding: 0 10px 28px; }
  .brand { font-size: 0.85rem; letter-spacing: 0.02em; }
  .nav-link { font-size: 0.78rem; padding: 6px 10px; }
  .poster-card { flex: 0 0 115px; width: 115px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px 8px; }
  .detail-cover { width: 130px; max-height: 200px; }
  .chapter-thumb-wrapper { width: 65px; height: 42px; }
  .page-btn { min-width: 32px; height: 32px; font-size: 0.8rem; padding: 0 8px; }
}