/* Reader statistics · Figma 2195:18243. Shared dock remains outside this screen. */
#reader-stats-screen.stats-clean { background: #0b0c0a !important; color: #f1e2c9 !important; font-family: "Geologica Pilcrow", sans-serif; isolation: isolate; overscroll-behavior: contain; scrollbar-width: none; }
#reader-stats-screen.stats-clean::-webkit-scrollbar { display: none; }
.stats-clean *, .stats-clean *::before, .stats-clean *::after { box-sizing: border-box; }
.stats-clean [hidden] { display: none !important; }
.stats-clean h1, .stats-clean h2, .stats-clean h3, .stats-clean p { margin: 0; color: inherit; letter-spacing: normal; }
.stats-clean button, .stats-clean input { font-family: inherit; }
.stats-clean button { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.stats-clean button:focus-visible, .stats-clean input:focus-visible { outline: 2px solid #ff6c4b; outline-offset: 2px; }
.stats-clean img { display: block; max-width: none; }
.stats-background-clip { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.stats-background { position: absolute; top: -105.43px; left: 0; }
.stats-header { display: flex; align-items: center; justify-content: space-between; height: max(125px, calc(env(safe-area-inset-top) + 82px)); padding: max(54px, calc(env(safe-area-inset-top) + 11px)) 18px 35px 21px; }
.stats-header h1 { font-size: 24px; font-weight: 700; line-height: 32px; }
.stats-header .shelf-world-switch { flex-shrink: 0; }
.stats-body { position: relative; padding: 0 21px calc(125px + env(safe-area-inset-bottom)); }
.stats-today { display: flex; flex-direction: column; gap: 8px; font-variation-settings: "CRSV" 0, "SHRP" 0; }
.stats-streak { position: relative; display: flex; align-items: center; gap: 24px; height: 92px; padding: 0 21px; border-radius: 14px; background: #171919; }
.stats-streak.is-active { background: linear-gradient(67.145deg, #8e211c 9%, #401b1b 28.68%, #1f1116 55.74%, #562215 75.42%, #ff701d 91%); }
.stats-streak.is-active, .stats-daily[data-state="complete"] { box-shadow: 1px 0 10px #ff6c4b29, inset 0 0 8px #ff6c4ba8; }
.stats-streak.is-active::after, .stats-daily[data-state="complete"]::after { position: absolute; content: ""; inset: 0; border: 1px solid #ff6c4b; border-radius: inherit; pointer-events: none; }
.stats-streak-art { position: relative; flex: 0 0 54px; height: 72px; overflow: hidden; pointer-events: none; }
.stats-streak-flame { position: absolute; width: 96.77%; height: 98.05%; top: .81%; left: 1.11%; }
.stats-streak-empty { position: absolute; top: 0; left: 0; }
.stats-streak:not(.is-active) .stats-streak-flame, .stats-streak.is-active .stats-streak-empty { display: none; }
.stats-streak-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; }
.stats-streak-copy strong { display: block; font-size: 24px; font-weight: 700; line-height: 32px; }
.stats-streak-copy span { display: block; font-size: 14px; font-weight: 300; line-height: 20px; color: #cbc0ad; }
.stats-daily { position: relative; height: 120px; padding: 12px 21px; border-radius: 14px; background: #171919; }
.stats-daily[data-state="complete"] { background: linear-gradient(72.092deg, #8e211c 9%, #401b1b 28.68%, #1f1116 55.74%, #562215 75.42%, #ff701d 91%); }
.stats-daily-heading { display: flex; align-items: center; gap: 8px; height: 24px; }
.stats-daily h2 { flex: 1; min-width: 0; font-size: 18px; font-weight: 400; line-height: 24px; }
.stats-daily[data-state="progress"] h2 { font-size: 14px; line-height: 18px; }
.stats-edit { position: absolute; display: grid; place-items: center; border: 0; padding: 0; width: 38px; height: 38px; background: none; color: inherit; }
.stats-daily .stats-edit-daily { position: relative; flex: 0 0 24px; width: 24px; height: 24px; z-index: 1; }
.stats-edit-daily::before { position: absolute; content: ""; inset: -8px; }
.stats-daily-minutes { display: flex; align-items: baseline; gap: 8px; height: 40px; margin-top: 6px; white-space: nowrap; }
.stats-daily-minutes strong { font-size: 32px; line-height: 40px; font-weight: 700; }
.stats-daily-minutes span { font-size: 18px; line-height: 24px; font-weight: 400; color: #cbc0ad; }
.stats-daily-meter { height: 10px; margin-top: 8px; border-radius: 5px; background: #2b2b2a; overflow: hidden; }
.stats-daily-meter i { display: block; height: 100%; border-radius: inherit; background: #ff6c4b; }
.stats-daily[data-state="complete"] .stats-daily-meter i { background: linear-gradient(90deg, #ffd964, #fff5b0); }
.stats-first-goal { height: 116px; margin-top: 12px; padding: 11px 20px 15px; border: 1px solid #ff6c4b30; border-radius: 14px; background: #171919; }
.stats-first-goal h2 { font-size: 18px; font-weight: 400; line-height: 24px; }
.stats-first-goal p { margin-top: 4px; font-size: 12px; line-height: 16px; font-weight: 300; color: #bccbd9; }
.stats-first-goal button { display: block; width: 100%; height: 36px; margin-top: 8px; border: 0; border-radius: 999px; background: #ff6c4b; color: #f1e2c9; font-size: 12px; line-height: 16px; font-weight: 600; }
.stats-history { position: relative; height: 360px; margin-top: 20px; border-radius: 14px; background: #171919; overflow: hidden; }
.stats-history h2 { padding: 12px 21px 0; font-size: 18px; font-weight: 400; line-height: 24px; }
.stats-tabs { display: flex; position: relative; height: 23px; margin: 8px 21px 0; gap: 1px; }
.stats-tabs button { position: relative; flex: 1; padding: 0 0 7px; border: 0; border-bottom: 2px solid #353637; background: none; color: #505050; font-size: 12px; font-weight: 300; line-height: 16px; }
.stats-tabs button[aria-selected="true"] { color: #f1e2c9; }
.stats-tabs button[aria-selected="true"]::after { content: ""; position: absolute; bottom: -2px; left: 6px; right: 6px; height: 2px; background: #f1e2c9; }
.stats-period { display: flex; align-items: center; justify-content: space-between; height: 43px; padding: 0 10px; }
.stats-period button { display: grid; place-items: center; width: 42px; height: 43px; border: 0; padding: 0; background: none; }
.stats-period span { color: #ff6c4b; font-size: 14px; font-weight: 300; line-height: 20px; text-align: center; }
.stats-period > * { position: relative; top: 3.5px; }
#stats-history-content { position: absolute; top: 120px; left: 0; width: 100%; height: 221px; padding: 0 21px; }
.stats-history[data-view="list"], .stats-history[data-view="month"] { height: auto; padding-bottom: 18px; }
#stats-history-content.stats-history-list, #stats-history-content.stats-history-month { position: relative; top: auto; height: auto; margin-top: 10px; }
.stats-list-toggle { display: block; width: 100%; min-height: 44px; margin: 8px 0 0; padding: 8px 12px; border: 0; border-radius: 10px; background: #202121; color: #f1e2c9; font-size: 12px; font-weight: 400; line-height: 18px; }
.stats-history-list ol { list-style: none; padding: 0; margin: 0; }
.stats-history-list li { display: flex; align-items: center; justify-content: space-between; height: 37px; border-bottom: 1px solid #444545; }
.stats-history-list li:last-child { border-bottom: 0; }
.stats-history-list time { font-size: 11px; font-weight: 300; line-height: 16px; }
.stats-history-list strong { font-size: 14px; font-weight: 600; line-height: 20px; }
.stats-empty-history { padding: 18px 12px; text-align: center; color: #969794 !important; font-size: 12px; font-weight: 300; }
.stats-calendar { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: 18px; grid-auto-rows: 33px; min-height: 183px; justify-items: center; }
.stats-calendar.has-six-weeks { grid-auto-rows: 28px; }
.stats-weekday { color: #969794; font-size: 10px; font-weight: 400; line-height: 14px; }
.stats-day { position: relative; display: grid; place-items: center; width: 32px; height: 32px; color: #969794; font-size: 11px; font-weight: 400; line-height: 14px; }
.stats-day img { position: absolute; }
.stats-day .stats-read-day { top: 3px; left: 3px; }
.stats-day .stats-today-ring { top: 1px; left: 1px; }
.stats-day > span { position: relative; }
.stats-day.is-past { color: #fafaf7; }
.stats-day.is-read { color: #0b0c0a; }
.stats-legend { display: flex; align-items: center; gap: 14px; margin-top: 6px; padding-left: 5px; color: #969794; font-size: 10px; font-weight: 400; line-height: 14px; }
.stats-legend > span { display: flex; gap: 7px; align-items: center; }
.stats-legend i { position: relative; display: grid; place-items: center; width: 14px; height: 14px; }
.stats-legend i img { position: absolute; }
#stats-history-content.stats-history-month { padding: 0 14px; }
.stats-history-month .stats-calendar { margin: 0 7px; }
.stats-history-month .stats-legend { padding-left: 12px; }
#stats-history-content.stats-history-week, #stats-history-content.stats-history-year { padding: 0 14px; height: 240px; }
.stats-bars { display: grid; grid-template-columns: repeat(var(--bar-count), minmax(0, 1fr)); gap: 2px; height: 152px; }
.stats-bar { min-width: 0; text-align: center; }
.stats-bar-track { display: flex; align-items: end; justify-content: center; height: 108px; }
.stats-bar-track i { position: relative; display: block; width: 28px; border-radius: 4px; background: #2b2b2a; }
.stats-bar.has-reading i { background: #ff6c4b; }
.stats-bar i > span { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; color: #f1e2c9; font: 300 11px/14px "Geologica Pilcrow", sans-serif; }
.stats-bar.is-future i { border: 1px dashed #353637; background: none; }
.stats-bar-date { position: relative; display: grid; place-items: center; margin-top: 8px; height: 16px; font-size: 12px; font-weight: 300; line-height: 16px; }
.stats-bar-date img { position: absolute; top: -4px; left: calc(50% - 12px); }
.stats-bar.is-future .stats-bar-date { color: #969794; }
.stats-bar small { display: block; margin-top: 4px; color: #505050; font-size: 11px; font-weight: 300; line-height: 14px; }
.stats-history-year .stats-bars { height: 152px; }
.stats-history-year .stats-bar-track { height: 120px; }
.stats-history-year .stats-bar-track i { width: 19px; border-radius: 5px; }
.stats-history-year .stats-bar i > span { color: #969794; font-weight: 400; font-size: 10px; }
.stats-history-year .stats-bar.is-future i { border: 0; background: #2b2b2a; }
.stats-history-year .stats-bar.is-current i { outline: 1px solid #f1e2c9; outline-offset: 1px; }
.stats-history-year .stats-bar small { margin-top: 8px; color: #969794; font-size: 12px; line-height: 16px; }
.stats-history-year .stats-bar.is-current small { color: #f1e2c9; }
.stats-chart-total { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 10px 3px 0; border-top: 1px solid #353637; padding-top: 10px; text-align: center; }
.stats-chart-total > div { position: relative; min-width: 0; }
.stats-chart-total > div + div::before { content: ""; position: absolute; top: 5px; left: 0; width: 1px; height: 40px; background: #353637; }
.stats-chart-total strong { display: block; font-size: 24px; font-weight: 700; line-height: 32px; white-space: nowrap; }
.stats-chart-total span { display: block; margin-top: 2px; font-size: 12px; font-weight: 300; line-height: 16px; color: #969794; }
.stats-goals { margin-top: 8px; }
.stats-goals > h2 { margin: 0 21px; padding-top: 6px; font-size: 18px; font-weight: 400; line-height: 24px; }
.stats-goals > h2 + .stats-book-goal { margin-top: 6px; }
.stats-book-goal { position: relative; height: 68px; margin-top: 8px; border-radius: 14px; background: #171919; padding: 14px 39px 0 21px; }
.stats-book-goal h3 { font-size: 14px; font-weight: 600; line-height: 20px; }
.stats-book-count { position: absolute; top: 16px; right: 39px; font-size: 12px; font-weight: 300; line-height: 16px; }
.stats-book-goal .stats-edit { top: 3px; right: 0; }
.stats-book-meter { position: absolute; left: 21px; right: 13px; top: 44px; height: 7px; border-radius: 4px; background: #2b2b2a; overflow: hidden; }
.stats-book-meter i { display: block; height: 100%; border-radius: inherit; background: #ff6c4b; }
.stats-undated { margin: 12px 8px 0 !important; font-size: 10px; line-height: 1.4; color: #969794 !important; }
.stats-goal-dialog { width: calc(100% - 42px); max-width: 351px; max-height: calc(100dvh - 40px); margin: auto; padding: 15px 19px 19px; border: 1px solid #353637; border-radius: 16px; background: linear-gradient(90deg, #171919, #111312); color: #f1e2c9; font-family: inherit; overflow-y: auto; }
.stats-goal-dialog::backdrop { background: #000b; }
.stats-goal-dialog fieldset { padding: 0; margin: 0; border: 0; min-width: 0; }
.stats-goal-dialog h2 { font-size: 24px; font-weight: 700; line-height: 32px; }
.stats-goal-hint { margin-top: 4px !important; color: #969794 !important; font-size: 12px; font-weight: 300; line-height: 16px; }
.stats-goal-close { position: absolute; top: 9px; right: 6px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none; }
.stats-goal-fields { margin-top: 12px; }
.stats-goal-row { height: 64px; border-top: 1px solid #353637; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stats-goal-row label { display: grid; gap: 2px; font-size: 14px; font-weight: 400; line-height: 18px; }
.stats-goal-row label small { color: #969794; font-size: 12px; font-weight: 300; line-height: 16px; }
.stats-goal-stepper { flex: 0 0 120px; height: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); align-items: center; border: 1px solid #353637; border-radius: 12px; background: #202121; }
.stats-goal-stepper button { display: grid; place-items: center; width: 100%; height: 44px; margin: 0; padding: 0; border: 0; background: none; align-self: center; }
.stats-goal-stepper input { width: 100%; height: 34px; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; color: #f1e2c9; text-align: center; font-size: 14px; font-weight: 600; line-height: 34px; appearance: textfield; -webkit-appearance: none; -moz-appearance: textfield; }
.stats-goal-stepper input::-webkit-inner-spin-button, .stats-goal-stepper input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.stats-goal-stepper input:focus { font-size: 16px; }
.stats-goal-save { display: block; width: 100%; height: 44px; margin-top: 16px; border: 0; border-radius: 12px; background: #ff6c4b; color: #fafaf7; font-size: 15px; font-weight: 400; line-height: 20px; }
.stats-goal-error { margin-top: 4px !important; font-size: 12px; line-height: 16px; color: #ff6c4b !important; }
.stats-goal-dialog button:disabled { opacity: .5; cursor: default; }
@media (prefers-reduced-motion: no-preference) { .stats-clean button { transition: transform 120ms ease; } .stats-clean button:active:not(:disabled) { transform: scale(.94); } }