:root { color-scheme: light; font-family: "Microsoft YaHei UI", system-ui, sans-serif; color: #202629; background: #f7f7f3; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input { font: inherit; }
button { cursor: pointer; }
.page-shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.topbar { min-height: 74px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #d9ddda; }
.brand { color: #122f2b; font-size: 25px; font-weight: 800; letter-spacing: 0; text-decoration: none; }
.site-nav { display: flex; align-items: center; gap: 14px; color: #415c57; font-size: 13px; }
.site-nav a { color: inherit; text-decoration: none; }
.site-nav a:hover, .nav-logout:hover { color: #ad542d; }
.nav-account { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #69756f; }
.nav-logout { border: 0; border-bottom: 1px solid currentColor; background: transparent; color: #415c57; padding: 0; font-size: 13px; }
.search-panel { padding: 72px 0 48px; max-width: 760px; }
.eyebrow { margin: 0 0 12px; color: #ab542d; font-size: 12px; font-weight: 700; letter-spacing: 0; }
h1 { margin: 0; color: #17211f; font-size: 42px; line-height: 1.16; letter-spacing: 0; }
.search-form { display: flex; gap: 10px; margin-top: 28px; }
.search-form input { height: 52px; min-width: 0; flex: 1; border: 1px solid #a7b1ac; border-radius: 6px; background: #fff; padding: 0 16px; color: #17211f; outline-color: #19766a; }
.search-form button { width: 104px; border: 0; border-radius: 6px; background: #19766a; color: #fff; font-weight: 700; }
.search-form button:disabled { opacity: .65; cursor: wait; }
.source-picker { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 0; border: 0; }
.source-picker legend { float: left; margin-right: 12px; color: #5f6c67; font-size: 13px; }
.source-picker label { position: relative; display: inline-flex; }
.source-picker input { position: absolute; opacity: 0; pointer-events: none; }
.source-picker span { min-width: 88px; padding: 7px 10px; border: 1px solid #a7b1ac; border-radius: 5px; background: #fff; color: #415c57; font-size: 13px; font-weight: 700; text-align: center; }
.source-picker input:checked + span { border-color: #19766a; background: #19766a; color: #fff; }
.source-picker input:focus-visible + span { outline: 2px solid #d07146; outline-offset: 2px; }
.session-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; color: #5f6c67; font-size: 13px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #d07146; }
.text-button { border: 0; border-bottom: 1px solid currentColor; background: transparent; color: #415c57; padding: 0; font-size: 13px; }
.results-section { border-top: 1px solid #d9ddda; padding: 24px 0 64px; }
.results-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.results-heading p { margin: 0; color: #33413c; font-weight: 700; }
#source-status { color: #69756f; font-size: 13px; white-space: nowrap; }
.results-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: #d9ddda; border: 1px solid #d9ddda; }
.comic-card { display: grid; grid-template-columns: 114px minmax(0, 1fr); gap: 16px; min-height: 214px; padding: 16px; background: #fff; }
.cover-wrap { width: 114px; height: 168px; background: #eef0ec; overflow: hidden; }
.cover { width: 100%; height: 100%; object-fit: cover; }
.card-content { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.card-content h2 { margin: 1px 0 8px; color: #18231f; font-size: 18px; line-height: 1.35; letter-spacing: 0; }
.chapter { margin: 0; color: #a24c2e; font-size: 13px; font-weight: 700; }
.description { margin: 12px 0; color: #56615c; font-size: 14px; line-height: 1.55; }
.author { margin: auto 0 12px; color: #6a746e; font-size: 13px; }
.source { margin: 0 0 12px; color: #8a4b30; font-size: 12px; font-weight: 700; }
.source-link { color: #176c62; font-size: 13px; font-weight: 700; text-decoration: none; }
.source-link:hover, .text-button:hover { color: #ad542d; }
.back-link { color: #415c57; font-size: 14px; text-decoration: none; }
.secondary-button { display: inline-flex; align-items: center; min-height: 40px; border: 1px solid #19766a; border-radius: 5px; background: #fff; color: #176c62; padding: 8px 14px; font-weight: 700; }
.secondary-button:hover, .secondary-button.is-added { background: #19766a; color: #fff; }
.secondary-button:disabled { opacity: .65; cursor: wait; }
.narrow-page { max-width: 760px; }
.auth-panel { max-width: 480px; padding: 72px 0; }
.auth-intro, .bookshelf-status { color: #56615c; line-height: 1.6; }
.auth-form { display: grid; gap: 8px; margin-top: 28px; }
.auth-form label { color: #415c57; font-size: 13px; font-weight: 700; }
.auth-form input { height: 46px; border: 1px solid #a7b1ac; border-radius: 5px; background: #fff; padding: 0 12px; outline-color: #19766a; }
.auth-form button { min-height: 46px; margin-top: 8px; border: 0; border-radius: 5px; background: #19766a; color: #fff; font-weight: 700; }
.auth-form button:disabled { opacity: .65; cursor: wait; }
.form-status { min-height: 22px; margin: 4px 0 0; color: #a24c2e; font-size: 13px; }
.auth-switch { margin-top: 18px; }
.bookshelf-heading { padding: 52px 0 28px; border-bottom: 1px solid #d9ddda; }
.bookshelf-heading h1 { font-size: 36px; }
.bookshelf-status { margin: 14px 0 0; }
.bookshelf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 24px 0 64px; background: #d9ddda; border: 1px solid #d9ddda; }
.bookshelf-card { display: grid; grid-template-columns: 114px minmax(0, 1fr); gap: 16px; min-height: 214px; padding: 16px; background: #fff; }
.bookshelf-cover { width: 114px; height: 168px; object-fit: cover; background: #eef0ec; }
.bookshelf-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.bookshelf-copy .source { margin: 0 0 7px; color: #8a4b30; font-size: 12px; font-weight: 700; }
.bookshelf-copy h2 { margin: 0; color: #18231f; font-size: 18px; line-height: 1.35; }
.bookshelf-progress { margin: 12px 0; color: #56615c; font-size: 13px; }
.bookshelf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; }
.secondary-link { color: #176c62; font-size: 13px; font-weight: 700; text-decoration: none; }
.secondary-link:hover { color: #ad542d; }
.remove-button { font-size: 12px; }
.reader-site-nav { margin-left: auto; }
.detail-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; padding: 48px 0; border-bottom: 1px solid #d9ddda; }
.detail-cover { width: 260px; aspect-ratio: 3 / 4; object-fit: cover; background: #eef0ec; }
.detail-copy { align-self: center; }
.detail-copy h1 { font-size: 34px; }
.meta { color: #a24c2e; font-weight: 700; }
.detail-description { max-width: 600px; color: #56615c; line-height: 1.7; }
.chapters-section { padding: 28px 0 64px; }
.chapters-section h2 { margin: 0; font-size: 20px; }
.chapter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.chapter-link { min-height: 44px; display: flex; align-items: center; padding: 10px 12px; border: 1px solid #d9ddda; background: #fff; color: #274740; text-decoration: none; }
.chapter-link:hover { border-color: #19766a; color: #19766a; }
.reader-body { background: #202622; color: #edf1ed; }
.reader-header { min-height: 58px; width: min(1180px, calc(100% - 32px)); margin: 0 auto; display: flex; align-items: center; gap: 18px; }
.reader-header .brand { color: #fff; }
.reader-header p { min-width: 0; flex: 1; margin: 0; color: #d7ddd8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-header .back-link { color: #c6ddd8; }
.reader-fullscreen-button { min-height: 34px; border: 1px solid #718078; background: transparent; color: #eef6f1; padding: 5px 9px; font-size: 13px; }
.reader-fullscreen-button:hover { border-color: #8dd4c4; color: #8dd4c4; }
.reader-main { width: min(1100px, calc(100% - 24px)); margin: 0 auto; text-align: center; }
#reader-status { color: #c9d1cb; padding: 80px 0; }
#reader-pages { display: grid; justify-items: center; }
.reader-page-image { display: block; width: 100%; max-width: 1100px; min-height: 360px; background: #2c342f; pointer-events: none; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; }
#reader-sentinel { min-height: 1px; }
.reader-nav { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 22px 0 42px; }
.reader-nav a { min-width: 82px; padding: 10px; border: 1px solid #718078; color: #eef6f1; text-decoration: none; }
.reader-nav a:hover { border-color: #8dd4c4; color: #8dd4c4; }
.reader-nav span { min-width: 72px; color: #cbd4ce; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
@media (max-width: 720px) { .page-shell { width: min(100% - 24px, 1180px); } .topbar { min-height: 62px; } .search-panel { padding: 48px 0 36px; } h1 { font-size: 32px; } .results-grid, .bookshelf-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .topbar { gap: 12px; } .site-nav { gap: 10px; } .nav-account { display: none; } .detail-layout { grid-template-columns: 116px minmax(0, 1fr); gap: 18px; padding: 28px 0; } .detail-cover { width: 116px; } .detail-copy h1 { font-size: 25px; } .detail-description { font-size: 14px; } .chapter-grid { grid-template-columns: 1fr 1fr; } .reader-header { width: min(100% - 24px, 1180px); gap: 10px; } .reader-header p { font-size: 13px; } .reader-site-nav { display: none; } .reader-main { width: 100%; } #reader-pages { display: block; } .reader-page-image { width: 100%; max-width: none; min-height: 0; height: auto; background: transparent; } :fullscreen .reader-header { display: none; } :fullscreen .reader-main { width: 100vw; } :fullscreen .reader-page-image { min-height: 0; height: auto; } .bookshelf-card { grid-template-columns: 90px minmax(0, 1fr); min-height: 174px; padding: 12px; } .bookshelf-cover { width: 90px; height: 140px; } }
@media (max-width: 430px) { .search-form { gap: 8px; } .search-form button { width: 80px; } .source-picker { flex-wrap: wrap; } .source-picker legend { width: 100%; margin-bottom: 2px; } .comic-card { grid-template-columns: 90px minmax(0, 1fr); min-height: 174px; padding: 12px; } .cover-wrap { width: 90px; height: 140px; } }