/* Minimal E-Ink book reader UI */
:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);

    --app-bg: #f4f4ef;
    --app-bg-2: #ededeb;
    --app-bg-3: #fafaf6;
    --surface: #f8f8f3;
    --surface-2: #ffffff;
    --surface-alpha-2: 1;
    --surface-border: #c9c9c1;
    --text: #171717;
    --text-muted: #5b5b56;
    --line: #d8d8d0;
    --accent: #111111;
    --accent-soft: #ecece7;
    --neon: #111111;
    --accent-a: #595955;
    --accent-b: #171717;
    --accent-c: #eeeeea;
    --status-unread: #8a8a82;
    --status-in-progress: #565650;
    --status-completed: #1f1f1d;
    --bookmark-active: #171717;
    --progress-track: #dfdfd8;

    --reader-font-size: 19px;
    --reader-line-height: 1.78;
    --reader-width: 780px;
    --reader-max-width: 78ch;
    --reader-font: "Padauk", "Myanmar Text", "Pyidaungsu", serif;
    --reader-ui-font: "Inter", "SF Pro Display", system-ui, sans-serif;

    --shadow-strong: none;
    --shadow-soft: none;
    --squircle: 6px;
    --squircle-large: 8px;
    --panel-blur: 0px;
    --transition-fast: 120ms ease;
    --transition-normal: 180ms ease;
    --transition-slow: 240ms ease;
    --transition-spring: 180ms ease;
}

html[data-theme="light"],
html[data-theme="eink"] {
    --app-bg: #f4f4ef;
    --app-bg-2: #ededeb;
    --app-bg-3: #fafaf6;
    --surface: #f8f8f3;
    --surface-2: #ffffff;
    --surface-border: #c9c9c1;
    --text: #171717;
    --text-muted: #5b5b56;
    --line: #d8d8d0;
    --accent: #111111;
    --accent-soft: #ecece7;
    --status-unread: #8a8a82;
    --status-in-progress: #565650;
    --status-completed: #1f1f1d;
    --bookmark-active: #171717;
    --progress-track: #dfdfd8;
}

html[data-theme="eink-warm"],
html[data-theme="sepia"] {
    --app-bg: #f3efe4;
    --app-bg-2: #ebe5d6;
    --app-bg-3: #fbf8ef;
    --surface: #f8f4e9;
    --surface-2: #fffdf5;
    --surface-border: #d0c6b2;
    --text: #201d17;
    --text-muted: #615b4f;
    --line: #d9cfba;
    --accent: #211d17;
    --accent-soft: #eee7d8;
    --progress-track: #ded4bf;
}

html[data-theme="eink-contrast"] {
    --app-bg: #ffffff;
    --app-bg-2: #ffffff;
    --app-bg-3: #ffffff;
    --surface: #ffffff;
    --surface-2: #ffffff;
    --surface-border: #111111;
    --text: #000000;
    --text-muted: #222222;
    --line: #111111;
    --accent: #000000;
    --accent-soft: #eeeeee;
    --progress-track: #d8d8d8;
}

html[data-theme="dark"],
html[data-theme="eink-night"] {
    --app-bg: #12130f;
    --app-bg-2: #12130f;
    --app-bg-3: #171812;
    --surface: #171812;
    --surface-2: #1e1f18;
    --surface-border: #3a3b32;
    --text: #e9e7dc;
    --text-muted: #aaa79b;
    --line: #33342d;
    --accent: #f0eee5;
    --accent-soft: #292a22;
    --status-unread: #6b6d62;
    --status-in-progress: #beb9a5;
    --status-completed: #e9e7dc;
    --bookmark-active: #f0eee5;
    --progress-track: #30312a;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
}

html {
    background: var(--app-bg);
    color: var(--text);
}

body {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    font-family: var(--reader-ui-font);
    color: var(--text);
    background: var(--app-bg);
    overscroll-behavior: none;
}

button,
input,
select {
    font: inherit;
}

button {
    color: inherit;
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
.content-stage:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.app-orbital-glow,
.reader-bg-layer,
.ripple-layer {
    display: none !important;
}

.app-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    height: 100vh;
    height: 100dvh;
    background: var(--app-bg);
}

.app-shell.sidebar-visible {
    grid-template-columns: min(352px, 82vw) 1fr;
}

aside.sidebar {
    position: fixed;
    z-index: 180;
    inset: 0 auto 0 0;
    width: min(352px, 82vw);
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    gap: 0;
    padding: calc(18px + var(--safe-top)) 14px calc(14px + var(--safe-bottom)) calc(14px + var(--safe-left));
    overflow: hidden;
    background: var(--surface-2);
    border-right: 1px solid var(--line);
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
}

.app-shell.sidebar-visible .sidebar {
    transform: translateX(0);
}

.sidebar-scrim {
    position: fixed;
    z-index: 170;
    inset: 0;
    display: none;
    border: 0;
    background: color-mix(in srgb, var(--text) 34%, transparent);
}

.app-shell.sidebar-visible .sidebar-scrim {
    display: block;
}

.sidebar-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--line);
}

.sidebar-top h1,
.chapter-meta-top h1,
.detail-head h2 {
    margin: 0;
    color: var(--text);
    font-family: var(--reader-ui-font);
    letter-spacing: 0;
}

.sidebar-top h1 {
    margin-top: 3px;
    font-size: 1.12rem;
    font-weight: 650;
    line-height: 1.25;
}

.eyebrow {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
}

.meta {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.search-wrap {
    display: grid;
    gap: 8px;
    padding: 14px 0 12px;
    color: var(--text-muted);
    font-size: 0.82rem;
    border-bottom: 1px solid var(--line);
}

.search-input-wrap {
    position: relative;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    pointer-events: none;
    transform: translateY(-50%);
}

.search-wrap input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px 10px 38px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--squircle);
    appearance: none;
}

.search-wrap input::placeholder {
    color: color-mix(in srgb, var(--text-muted) 76%, transparent);
}

.source-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 7px 10px;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--squircle);
    font-size: 0.78rem;
    white-space: nowrap;
}

.filter-chip:hover,
.filter-chip.active {
    color: var(--text);
    background: var(--accent-soft);
    border-color: var(--text);
}

.filter-chip.active {
    font-weight: 650;
}

.filter-chip-icon {
    width: 14px;
    height: 14px;
}

.chapter-list {
    min-height: 0;
    margin: 0;
    padding: 12px 0 0;
    overflow: auto;
    list-style: none;
    scrollbar-width: thin;
    scrollbar-color: var(--text-muted) transparent;
}

.chapter-list::-webkit-scrollbar,
.content-stage::-webkit-scrollbar {
    width: 8px;
}

.chapter-list::-webkit-scrollbar-track,
.content-stage::-webkit-scrollbar-track {
    background: transparent;
}

.chapter-list::-webkit-scrollbar-thumb,
.content-stage::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-muted) 45%, transparent);
    border-radius: 0;
}

.chapter-row {
    margin: 0;
}

.chapter-group-header {
    padding: 16px 4px 8px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
}

.chapter-item {
    position: relative;
    display: grid;
    gap: 8px;
    width: 100%;
    min-height: 62px;
    padding: 11px 4px 12px;
    text-align: left;
    color: var(--text);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    -webkit-tap-highlight-color: transparent;
}

.chapter-item:hover,
.chapter-item.active {
    background: var(--accent-soft);
}

.chapter-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    background: var(--accent);
}

.chapter-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.chapter-title {
    min-width: 0;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 560;
    line-height: 1.35;
}

.chapter-path {
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.chapter-badges,
.chapter-meta-badges {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.status-dot,
.bookmark-dot,
.offline-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status-unread);
}

.status-dot.in-progress {
    background: var(--status-in-progress);
}

.status-dot.completed {
    background: var(--status-completed);
}

.bookmark-dot {
    background: var(--bookmark-active);
}

.offline-dot {
    background: transparent;
    border: 1px solid var(--text-muted);
}

.chapter-progress-strip {
    height: 2px;
    overflow: hidden;
    background: var(--progress-track);
}

.chapter-progress-fill {
    height: 100%;
    width: 0;
    background: var(--accent);
}

.chapter-row-load-more {
    padding: 14px 0;
}

.chapter-load-more-btn {
    width: 100%;
    min-height: 42px;
    justify-content: center;
}

.reader-panel {
    position: relative;
    min-width: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--app-bg);
}

.reader-content-layer {
    height: 100%;
    padding: calc(86px + var(--safe-top)) clamp(18px, 4vw, 56px) calc(42px + var(--safe-bottom));
    overflow: hidden;
}

.chapter-meta {
    width: min(var(--reader-width), calc(100vw - 36px));
    max-width: var(--reader-max-width);
    margin: 0 auto 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.chapter-meta-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.chapter-meta-top h1 {
    font-size: clamp(1.2rem, 2.3vw, 1.65rem);
    font-weight: 580;
    line-height: 1.25;
}

.chapter-meta-badges {
    justify-content: flex-end;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 8px;
    color: var(--text-muted);
    border: 1px solid var(--line);
    border-radius: var(--squircle);
    font-size: 0.7rem;
    font-weight: 650;
}

.status-badge.in-progress,
.status-badge.completed {
    color: var(--text);
    border-color: var(--text);
}

.content-stage {
    width: min(var(--reader-width), calc(100vw - 36px));
    max-width: var(--reader-max-width);
    height: calc(100% - 84px);
    margin: 0 auto;
    overflow: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    background: transparent;
}

.content {
    min-height: 100%;
    padding: 0 0 8vh;
    color: var(--text);
    font-family: var(--reader-font);
    font-size: clamp(1rem, calc(var(--reader-font-size) * 0.98), calc(var(--reader-font-size) * 1.05));
    line-height: var(--reader-line-height);
    overflow-wrap: break-word;
    text-rendering: optimizeLegibility;
}

.content > *:first-child {
    margin-top: 0;
}

.content p {
    margin: 0 0 1.05em;
}

.content h1,
.content h2,
.content h3,
.content h4 {
    margin: 1.8em 0 0.8em;
    color: var(--text);
    font-family: var(--reader-ui-font);
    font-weight: 650;
    line-height: 1.25;
}

.content h1 {
    font-size: 1.35em;
}

.content h2 {
    font-size: 1.18em;
}

.content a {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.content blockquote {
    margin: 1.4em 0;
    padding: 0 0 0 16px;
    color: var(--text-muted);
    border-left: 3px solid var(--line);
}

.content hr {
    margin: 2.2em 0;
    border: 0;
    border-top: 1px solid var(--line);
}

.content img,
.content video {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--line);
}

.progress-rail {
    position: fixed;
    z-index: 130;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
}

.progress-fill {
    height: 100%;
    width: 0;
    background: var(--accent);
}

.toolbar {
    position: fixed;
    z-index: 120;
    top: calc(16px + var(--safe-top));
    left: 50%;
    width: min(780px, calc(100vw - 36px));
    transform: translateX(calc(-50% + var(--toolbar-shift-x, 0px))) translateY(var(--toolbar-shift-y, 0px));
    transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.toolbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--squircle-large);
}

.toolbar-primary {
    min-height: 54px;
}

.toolbar-secondary {
    display: block;
    margin-top: 8px;
    padding: 12px;
}

.toolbar-secondary[hidden] {
    display: none;
}

.toolbar-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.icon-btn,
.nav-btn,
.auto-scroll-toggle,
.offline-dl-btn,
.error-retry-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 44px;
    min-height: 44px;
    padding: 9px 12px;
    color: var(--text);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--squircle);
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.icon-btn:hover,
.nav-btn:hover,
.auto-scroll-toggle:hover,
.offline-dl-btn:hover,
.error-retry-btn:hover {
    background: var(--accent-soft);
    border-color: var(--text);
}

.icon-btn.icon-only {
    width: 44px;
    height: 44px;
    padding: 0;
}

.icon-glyph {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.bookmark-btn[aria-pressed="true"],
.nav-bookmark-btn[aria-pressed="true"],
.detail-bookmark-btn[aria-pressed="true"] {
    color: var(--bookmark-active);
    background: var(--accent-soft);
    border-color: var(--text);
}

.bookmark-btn[aria-pressed="true"] svg,
.nav-bookmark-btn[aria-pressed="true"] svg {
    fill: currentColor;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.settings-grid > label,
.settings-grid > .setting-field {
    display: grid;
    gap: 8px;
    min-width: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 560;
}

.setting-label {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 560;
}

.setting-value,
.setting-note {
    color: var(--text);
    font-size: 0.76rem;
    font-weight: 650;
}

.settings-grid select,
.settings-grid input[type="range"] {
    width: 100%;
}

.settings-grid select {
    min-height: 42px;
    padding: 8px 10px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--squircle);
}

.settings-grid input[type="range"] {
    accent-color: var(--accent);
}

.font-size-stepper {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 8px;
}

.stepper-btn {
    min-width: 44px;
    width: 44px;
    padding: 0;
    font-weight: 650;
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.stat-pill {
    min-width: 0;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--squircle);
}

.stat-num {
    display: block;
    color: var(--text);
    font-size: 1.04rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.stat-label {
    display: block;
    color: var(--text-muted);
    font-size: 0.68rem;
}

.offline-setting {
    grid-column: span 2;
}

.offline-dl-btn {
    width: 100%;
    justify-content: center;
    color: var(--text);
    font-weight: 560;
}

.control-bubble-nav {
    position: fixed;
    z-index: 124;
    left: 50%;
    bottom: calc(14px + var(--safe-bottom));
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    width: min(400px, calc(100vw - 40px - var(--safe-left) - var(--safe-right)));
    padding: 6px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--squircle-large);
    transform: translateX(-50%);
    transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.control-bubble-nav .nav-btn {
    flex: 1 1 0;
    min-width: 48px;
    min-height: 48px;
    flex-direction: column;
    gap: 3px;
    padding: 6px 4px;
    border: 0;
    font-size: 0.68rem;
}

.control-bubble-nav .nav-btn .icon-glyph {
    width: 20px;
    height: 20px;
}

.control-bubble-nav .nav-btn.nav-active {
    background: var(--accent-soft);
}

.auto-scroll-control {
    position: fixed;
    z-index: 126;
    left: 50%;
    bottom: calc(78px + var(--safe-bottom));
    display: none;
    transform: translateX(-50%);
    transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.auto-scroll-control.is-hidden,
.app-shell.reader-chrome-hidden:not(.auto-scroll-active) .auto-scroll-control {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(10px);
}

.auto-scroll-toggle {
    min-height: 42px;
    padding: 7px 12px;
    background: var(--surface-2);
}

.auto-scroll-label,
.auto-scroll-speed {
    font-size: 0.76rem;
    font-weight: 650;
}

.auto-scroll-speed {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.auto-scroll-toolbar-btn[aria-pressed="true"],
.auto-scroll-toggle[aria-pressed="true"] {
    border-color: var(--text);
    background: var(--accent-soft);
    color: var(--accent);
}

.auto-scroll-toggle[aria-pressed="true"] .auto-scroll-speed {
    color: var(--accent);
}

.auto-scroll-pause-icon {
    display: none;
}

[aria-pressed="true"] > .auto-scroll-play-icon {
    display: none;
}

[aria-pressed="true"] > .auto-scroll-pause-icon {
    display: block;
}

.scroll-to-top {
    position: fixed;
    z-index: 125;
    right: calc(18px + var(--safe-right));
    bottom: calc(18px + var(--safe-bottom));
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--squircle);
    transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.scroll-to-top.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
}

.app-shell.reader-chrome-hidden .toolbar,
.app-shell.reader-chrome-hidden .control-bubble-nav {
    opacity: 0;
    pointer-events: none;
}

.app-shell.reader-chrome-hidden .toolbar {
    --toolbar-shift-y: -72px;
}

.app-shell.reader-chrome-hidden .control-bubble-nav {
    transform: translateX(-50%) translateY(90px);
}

.app-shell.sidebar-visible .toolbar {
    --toolbar-shift-x: calc(min(352px, 82vw) * 0.5);
}

.app-shell.sidebar-visible ~ .scroll-to-top {
    opacity: 0;
    pointer-events: none;
}

.detail-sheet {
    position: fixed;
    z-index: 200;
    inset: 0;
    display: grid;
    place-items: end center;
    padding: 16px;
    background: color-mix(in srgb, var(--text) 38%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal);
}

.detail-sheet[data-open="true"] {
    opacity: 1;
    pointer-events: auto;
}

.detail-sheet-glass {
    width: min(560px, 100%);
    padding: 16px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--squircle-large);
}

.detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.detail-head h2 {
    margin-top: 4px;
    font-size: 1.05rem;
    font-weight: 650;
    line-height: 1.35;
}

.detail-path,
.detail-source,
.detail-excerpt {
    margin: 10px 0 0;
    overflow-wrap: anywhere;
}

.detail-path,
.detail-source {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.detail-excerpt {
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.55;
}

.detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.detail-actions .icon-btn {
    flex: 1 1 auto;
}

.dl-toast {
    position: fixed;
    z-index: 250;
    left: 50%;
    bottom: calc(80px + var(--safe-bottom));
    width: min(380px, calc(100vw - 24px));
    padding: 12px;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--squircle-large);
    transform: translateX(-50%);
}

.dl-toast[hidden] {
    display: none;
}

.dl-toast-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dl-toast-icon {
    width: 20px;
    height: 20px;
    color: var(--text);
}

.dl-toast-icon svg {
    width: 100%;
    height: 100%;
}

.dl-toast-label {
    flex: 1;
    font-size: 0.84rem;
    font-weight: 650;
}

.dl-toast-close {
    min-width: 32px;
    width: 32px;
    height: 32px;
}

.dl-toast-bar-wrap {
    height: 4px;
    margin: 10px 0 6px;
    overflow: hidden;
    background: var(--progress-track);
}

.dl-toast-bar {
    height: 100%;
    background: var(--accent);
}

.dl-toast-detail {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.76rem;
}

.empty-state {
    margin: 0;
    padding: 64px 16px;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: center;
}

.error-card {
    max-width: 420px;
    margin: 24px auto;
    padding: 22px;
    text-align: center;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--squircle-large);
}

.error-card-title {
    margin: 0 0 8px;
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 650;
}

.error-card-detail {
    margin: 0 0 18px;
    color: var(--text-muted);
    font-size: 0.84rem;
    overflow-wrap: anywhere;
}

.error-retry-btn {
    min-width: 140px;
}

.reader-transition-enter {
    animation: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
    white-space: nowrap;
}

@media (min-width: 980px) {
    .app-shell.sidebar-visible .control-bubble-nav {
        transform: translateX(calc(-50% - min(352px, 82vw) * 0.28));
    }
}

@media (max-width: 979px) {
    .app-shell,
    .app-shell.sidebar-visible {
        grid-template-columns: 1fr;
    }

    aside.sidebar {
        width: min(92vw, 400px);
        padding: calc(16px + var(--safe-top)) 14px calc(16px + var(--safe-bottom)) calc(14px + var(--safe-left));
    }

    .sidebar-scrim {
        background: color-mix(in srgb, var(--text) 42%, transparent);
    }

    .filter-chip {
        min-height: 44px;
        padding: 8px 12px;
    }

    .toolbar {
        left: calc(12px + var(--safe-left));
        right: calc(12px + var(--safe-right));
        top: calc(12px + var(--safe-top));
        width: auto;
        transform: translateY(var(--toolbar-shift-y, 0px));
    }

    .toolbar-primary {
        display: none;
    }

    .toolbar-secondary {
        max-height: calc(100dvh - 120px);
        overflow: auto;
        background: var(--surface-2);
    }

    .app-shell.sidebar-visible .toolbar {
        --toolbar-shift-x: 0px;
    }

    .reader-content-layer {
        display: flex;
        flex-direction: column;
        padding: calc(18px + var(--safe-top)) 18px calc(112px + var(--safe-bottom));
    }

    .chapter-meta {
        flex: 0 0 auto;
        width: min(100%, var(--reader-width));
        margin-bottom: 18px;
    }

    .chapter-meta-top {
        display: grid;
        gap: 10px;
    }

    .chapter-meta-badges {
        justify-content: flex-start;
    }

    .content-stage {
        flex: 1 1 auto;
        width: min(100%, var(--reader-width));
        min-height: 0;
        height: auto;
    }

    .app-shell.reader-chrome-hidden:not(.auto-scroll-active) .reader-content-layer {
        padding-bottom: calc(18px + var(--safe-bottom));
    }

    .settings-grid {
        grid-template-columns: 1fr;
    }

    .settings-grid > .width-control {
        display: none;
    }

    .offline-setting {
        grid-column: auto;
    }

    .control-bubble-nav,
    .auto-scroll-control {
        display: flex;
    }

    .scroll-to-top {
        right: calc(12px + var(--safe-right));
        bottom: calc(82px + var(--safe-bottom));
    }

    .app-shell.reader-chrome-hidden:not(.auto-scroll-active) ~ .scroll-to-top {
        bottom: calc(18px + var(--safe-bottom));
    }

    .dl-toast {
        bottom: calc(82px + var(--safe-bottom));
    }
}

@media (max-width: 520px) {
    .reader-content-layer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .chapter-meta-top h1 {
        font-size: 1.22rem;
    }

    .control-bubble-nav .nav-btn {
        font-size: 0.62rem;
    }

    .detail-sheet {
        padding: 6px;
    }

    .detail-sheet-glass {
        padding: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}