.reading-hub { max-width: 1320px; margin: 0 auto; }
.reading-heading, .reading-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.reading-heading h1 { margin: 8px 0; }
.reading-heading p, .reading-section-heading p { color: var(--muted); margin: 6px 0 0; }
.reading-eyebrow { display: flex; align-items: center; gap: 8px; color: var(--green); font-size: .75rem; font-family: system-ui, sans-serif; font-weight: 650; letter-spacing: .035em; }
.reading-heading .reading-eyebrow { text-transform: uppercase; }
.reading-dashboard { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin: 24px 0; }
.reading-goal, .reading-streak { padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; min-width: 0; }
.reading-goal--year { background: var(--sage); border-color: color-mix(in srgb,var(--green) 20%,var(--line)); }
.reading-goal--month { background: color-mix(in srgb,var(--peach) 30%,var(--surface)); }
.reading-goal .reading-eyebrow > span { margin-left: auto; font-size: .7rem; color: var(--muted); font-weight: 400; }
.reading-score { font-size: 2.4rem; line-height: 1; font-weight: bold; margin: 16px 0 12px; font-variant-numeric: tabular-nums; }
.reading-score > span { font-size: 1rem; font-weight: normal; color: var(--muted); }
.reading-goal > p:not(.reading-score), .reading-streak > p:not(.reading-score) { margin: 10px 0; font-size: .88rem; line-height: 1.5; }
.reading-goal > a { font-size: .86rem; display: inline-flex; align-items: center; gap: 12px; color: var(--green); margin-top: 5px; text-decoration: underline; text-underline-offset: 4px; }
.reading-hub progress { display: block; appearance: none; border: 0; width: 100%; height: 7px; border-radius: 7px; overflow: hidden; background: var(--track); accent-color: var(--green); }
.reading-hub progress::-webkit-progress-bar { background: var(--track); border-radius: 7px; }
.reading-hub progress::-webkit-progress-value { background: var(--green); border-radius: 7px; }
.reading-hub progress::-moz-progress-bar { background: var(--green); border-radius: 7px; }
.reading-weeks { display: flex; gap: 7px; }
.reading-weeks > span { display: grid; place-items: center; flex: 1; max-width: 32px; aspect-ratio: 1; border-radius: 50%; background: var(--surface-soft); color: var(--line-strong); font-size: .68rem; }
.reading-weeks > .is-active { background: var(--green); color: var(--surface); }
.reading-weeks > .is-current { outline: 1px solid var(--green); outline-offset: 3px; }
.reading-streak small { font-size: .7rem; color: var(--muted); }
.reading-navigation { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--line); padding: 0 0 12px; margin: 32px 0 28px; }
.reading-navigation a { display: inline-flex; align-items: center; gap: 9px; padding: 12px 15px; border-radius: 9px; color: var(--muted); font-size: .95rem; }
.reading-navigation a:hover, .reading-navigation .is-active { color: var(--green); background: var(--sage); }
.reading-navigation .is-active { font-weight: bold; }
.reading-filters { display: grid; grid-template-columns: minmax(180px,1fr) 160px 180px auto; gap: 10px; align-items: start; }
.reading-filters label { margin: 0; font-weight: normal; min-width: 0; }
.reading-filters input, .reading-filters select { font-size: .88rem; height: 46px; min-width: 0; }
.reading-search { position: relative; }
.reading-search > i { position: absolute; top: 16px; left: 14px; color: var(--muted); font-size: .9rem; }
.reading-search input { padding-left: 38px; }
.reading-view-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 18px 0 26px; font-size: .82rem; }
.reading-view-row > a { display: inline-flex; gap: 10px; align-items: center; }
.reading-books { display: grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 30px 24px; }
.reading-book { min-width: 0; }
.reading-book-cover { display: block; position: relative; aspect-ratio: 264/350; border-radius: 4px 10px 10px 4px; perspective: 1000px; background: repeating-linear-gradient(to bottom,var(--surface) 0 2px,var(--line) 2px 3px); box-shadow: 4px 6px 14px var(--shadow); margin: 0 5px 16px 0; }
.reading-book-cover .book-cover { width: calc(100% - 5px); height: 100%; transform-origin: left center; border-radius: 4px 8px 8px 4px; transition: transform 240ms ease, box-shadow 240ms ease; }
.reading-book-cover:hover .book-cover, .reading-book-cover:focus-visible .book-cover { transform: rotateY(-12deg); box-shadow: 10px 6px 15px var(--shadow); }
.reading-book-cover .book-cover--text { background: var(--green); color: var(--spine-light); border: 0; padding: 50px 22px 30px; box-shadow: inset 4px 0 0 var(--shadow-strong), inset 0 0 0 10px var(--green), inset 0 0 0 11px color-mix(in srgb,var(--spine-light) 35%,var(--green)); }
.reading-book-cover .book-cover--text small { color: var(--spine-light); opacity: .85; }
.reading-book:nth-child(3n+2) .book-cover--text { background: var(--primary-hover); box-shadow: inset 4px 0 0 var(--shadow-strong), inset 0 0 0 10px var(--primary-hover), inset 0 0 0 11px var(--line-strong); }
.reading-book:nth-child(3n) .book-cover--text { background: var(--ink); box-shadow: inset 4px 0 0 var(--shadow-strong), inset 0 0 0 10px var(--ink), inset 0 0 0 11px var(--muted); }
.reading-book-status, .reading-book-favorite { position: absolute; top: 10px; right: 14px; padding: 5px 9px; background: var(--surface); color: var(--ink); border-radius: 20px; font: 500 .7rem/1.3 system-ui,sans-serif; box-shadow: 0 2px 8px var(--shadow); }
.reading-book-status--reading { background: var(--peach); }
.reading-book-status--read { background: var(--sage); color: var(--green); }
.reading-book-favorite { right: auto; left: 10px; color: var(--primary); border-radius: 50%; width: 29px; height: 29px; display: grid; place-items: center; padding: 0; }
.reading-book h3 { font-size: 1.1rem; line-height: 1.3; margin: 0 0 6px; overflow-wrap: anywhere; }
.reading-book-author, .reading-book-time { color: var(--muted); font-size: .82rem; margin: 6px 0; line-height: 1.4; }
.reading-book-time { font-size: .75rem; min-height: 1.4em; }
.reading-book-time i { margin-right: 4px; }
.reading-book-actions { display: flex; flex-wrap: wrap; gap: 9px 16px; padding-top: 10px; margin-top: 12px; border-top: 1px solid var(--line); }
.reading-book-actions a, .reading-book-actions button { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: .78rem; border: 0; padding: 4px 0; background: transparent; text-decoration: none; }
.reading-book-actions button:hover, .reading-book-actions a:hover { text-decoration: underline; }
.reading-book-rating { color: #96712f; font-size: .75rem; letter-spacing: 3px; margin: 9px 0; }
.reading-books--list { display: block; }
.reading-books--list .reading-book { display: flex; align-items: center; gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.reading-books--list .reading-book-cover { flex: 0 0 130px; margin: 0; }
.reading-books--list .reading-book-body { flex: 1; }
.reading-collections { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap: 20px; }
.reading-collection { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.reading-collection > a:first-child { display: block; padding: 26px; }
.reading-collection-emblem { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; border: 2px solid var(--collection-color); background: color-mix(in srgb,var(--collection-color) 17%,var(--surface)); color: var(--ink); font-size: 1.6rem; margin-bottom: 22px; }
.reading-collection h3 { margin: 0 0 6px; font-size: 1.2rem; overflow-wrap: anywhere; }
.reading-collection p { margin: 0; color: var(--muted); font-size: .85rem; }
.reading-collection-edit { position: absolute; top: 14px; right: 16px; padding: 10px; color: var(--muted); }
.reading-empty { padding: 42px 24px; border: 1px dashed var(--line-strong); border-radius: 16px; text-align: center; grid-column: 1/-1; }
.reading-empty > i { font-size: 2rem; color: var(--green); }
.reading-empty h3 { margin: 16px 0 10px; }
.reading-empty p { max-width: 500px; margin: 0 auto 20px; color: var(--muted); }
.reading-decor, .reading-method { margin: 28px 0; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: .88rem; }
.reading-method p { max-width: 900px; line-height: 1.7; }
.reading-year { display: flex; gap: 10px; align-items: center; }
.reading-year label { margin: 0; }
.reading-year input { width: 110px; }
.reading-stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin: 24px 0; }
.reading-stat-grid article { padding: 24px 16px; border-left: 2px solid var(--line); }
.reading-stat-grid strong { display: block; font-size: 2.4rem; margin-bottom: 7px; }
.reading-stat-grid span { display: block; font-size: .86rem; }
.reading-stat-grid small { display: block; color: var(--muted); font-size: .73rem; margin-top: 6px; }
.reading-stat-panels { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 20px; }
.reading-chart-panel { border: 1px solid var(--line); border-radius: 16px; padding: 24px; background: var(--surface); min-width: 0; }
.reading-chart-panel h2 { font-size: 1.3rem; margin: 0 0 12px; }
.reading-chart-panel p { font-size: .85rem; }
.reading-months { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 8px; margin-top: 30px; }
.reading-month { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: .7rem; }
.reading-month strong { font-family: system-ui,sans-serif; font-size: .72rem; }
.reading-month-track { width: 100%; max-width: 28px; height: 160px; display: flex; align-items: end; background: var(--surface-soft); border-radius: 6px; overflow: hidden; }
.reading-month-track span { width: 100%; height: var(--month-height); background: var(--green); border-radius: 6px; min-height: 2px; }
.reading-genres > div { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 20px 0; font-size: .85rem; }
.reading-genres progress { grid-column: 1/-1; }
body.reading-dialog-open { overflow: hidden; }
.reading-dialog { width: min(620px,calc(100vw - 32px)); max-height: min(90dvh,900px); border: 1px solid var(--line); border-radius: 20px; padding: 0; color: var(--ink); background: var(--surface); box-shadow: 0 24px 70px var(--shadow-strong); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.reading-dialog::backdrop { background: color-mix(in srgb,var(--ink) 38%,transparent); backdrop-filter: blur(4px); }
.reading-dialog-close { position: sticky; top: 12px; left: calc(100% - 54px); float: right; margin: 12px 12px 0 0; z-index: 2; border-radius: 50%; background: var(--surface); }
.reading-editor { padding: 34px; max-width: 660px; margin: 0 auto; }
.reading-editor h1 { font-size: 1.8rem; line-height: 1.25; margin: 12px 0; padding-right: 16px; }
.reading-editor > p { font-size: .9rem; }
.reading-editor form { margin-top: 24px; }
.reading-editor form > div { margin-bottom: 18px; }
.reading-editor label { font-size: .86rem; }
.reading-editor input, .reading-editor select, .reading-editor textarea { font-size: .9rem; }
.reading-form-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; align-items: start; }
.reading-form-pair > div { margin: 0; min-width: 0; }
.reading-form-pair > [hidden] { display: none; }
.reading-checks { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.reading-editor .reading-checks > div { margin: 0; }
.reading-editor div:has(> input[type=checkbox]) { display: flex; align-items: center; gap: 9px; }
.reading-editor div:has(> input[type=checkbox]) > label { order: 2; margin: 0; }
.reading-editor input[type=checkbox] { margin: 0; flex: 0 0 18px; width: 18px; min-height: 18px; }
.reading-collection-choices > div { display: flex; flex-wrap: wrap; gap: 10px; }
.reading-collection-choices > div > label { display: inline-flex; align-items: center; gap: 8px; margin: 0 12px 8px 0; }
.reading-editor input[type=color] { width: 100%; height: 48px; padding: 6px; cursor: pointer; }
.reading-editor .form-help, .reading-editor .help-text { color: var(--muted); font-size: .76rem; line-height: 1.5; margin-top: 6px; }
.reading-editor-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 20px; margin-top: 24px; }
.reading-editor-actions .button { font-size: .88rem; }
.reading-remove { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 24px; color: var(--muted); font-size: .82rem; }
.reading-loading { padding: 70px 30px; text-align: center; color: var(--muted); }
.reading-notice { position: fixed; left: 50%; bottom: 25px; transform: translateX(-50%); max-width: min(92vw,560px); width: max-content; padding: 16px 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--green); color: var(--surface); box-shadow: 0 8px 30px var(--shadow-strong); z-index: 150; font-size: .9rem; }
.reading-notice[hidden] { display: none; }
.book-reading-tracking { min-width: 0; }
@media(max-width:1100px) {
    .reading-goal, .reading-streak { padding: 18px; }
    .reading-filters { grid-template-columns: 1fr 1fr; }
    .reading-dashboard { gap: 12px; }
    .reading-books { grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); }
}
@media(max-width:700px) {
    .reading-heading { align-items: start; flex-direction: column; gap: 16px; }
    .reading-dashboard { grid-template-columns: 1fr 1fr; }
    .reading-streak { grid-column: 1/-1; }
    .reading-eyebrow { flex-wrap: wrap; font-size: .68rem; }
    .reading-score { font-size: 2.3rem; }
    .reading-navigation { gap: 4px; margin: 22px 0; }
    .reading-navigation a { padding: 10px; font-size: .8rem; }
    .reading-view-row { flex-wrap: wrap; }
    .reading-view-row > a { display: none; }
    .reading-books { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 26px 16px; }
    .reading-book-cover .book-cover--text { font-size: .84rem; padding: 40px 16px 16px; }
    .reading-book h3 { font-size: 1rem; }
    .reading-section-heading { flex-wrap: wrap; gap: 12px; }
    .reading-stat-grid { grid-template-columns: 1fr 1fr; }
    .reading-stat-panels { grid-template-columns: 1fr; }
    .reading-months { gap: 5px; }
    .reading-month { font-size: .6rem; }
    .reading-chart-panel { padding: 18px; }
    .reading-editor { padding: 24px; }
    .reading-editor-actions .button { padding: 12px; }
    .reading-dialog { max-height: 92dvh; }
}
@media(max-width:380px) {
    .reading-dashboard { grid-template-columns: 1fr; }
    .reading-books { grid-template-columns: 1fr; }
    .reading-form-pair { grid-template-columns: 1fr; }
}
@media(prefers-reduced-motion:reduce) {
    .reading-book-cover .book-cover { transition: none; transform: none !important; }
}
.reading-inline-error { margin: 18px 24px; padding: 14px; border: 1px solid var(--error); border-radius: 9px; background: var(--error-bg); color: var(--error); font-size: .88rem; }

.reading-collection-title-icon { color: var(--collection-color, var(--green)); }