/* Private Shelf 2 — shared visual tokens. Reader image pixels are never themed. */
:root {
    color-scheme: light;
    --page-bg: #f4f5f1;
    --surface: #ffffff;
    --surface-soft: #edf1eb;
    --surface-raised: #ffffff;
    --ink: #1b303b;
    --muted: #5d6c76;
    --line: #dbe2dd;
    --navy: #234352;
    --navy-deep: #172f3b;
    --teal: #07756b;
    --teal-soft: #e4f2ec;
    --action: #087f75;
    --action-hover: #07695f;
    --on-action: #ffffff;
    --blue: #366db5;
    --blue-soft: #eaf0fa;
    --amber: #945c13;
    --amber-soft: #fff2d9;
    --danger: #ad384c;
    --danger-soft: #fae9ec;
    --header-bg: #132c38;
    --sidebar-bg: #fafbf8;
    --gold: #c59b51;
    --shadow: 0 16px 45px rgba(25, 46, 41, .075);
    --shadow-soft: 0 3px 12px rgba(25, 46, 41, .035);
    --radius: 16px;
    --reader-bg: #e1e6e2;
    --reader-panel: #f5f8f4;
    --reader-panel-soft: #e8eee9;
    --reader-ink: #203640;
    --reader-muted: #546973;
    --reader-line: #cbd7d0;
    font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 14px;
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --page-bg: #0d141d;
    --surface: #17222f;
    --surface-soft: #202d3b;
    --surface-raised: #1b2937;
    --ink: #e7eef1;
    --muted: #a7b5bf;
    --line: #31414d;
    --navy: #c8dee8;
    --navy-deep: #e7eef1;
    --teal: #63d3be;
    --teal-soft: #173d39;
    --action: #117f73;
    --action-hover: #13796c;
    --blue: #91b8f6;
    --blue-soft: #23334e;
    --amber: #ecc276;
    --amber-soft: #3b3020;
    --danger: #f396a8;
    --danger-soft: #3c2430;
    --header-bg: #101c27;
    --sidebar-bg: #111c27;
    --gold: #e4c58d;
    --shadow: 0 16px 45px rgba(0, 0, 0, .19);
    --shadow-soft: 0 3px 12px rgba(0, 0, 0, .12);
    --reader-bg: #090f17;
    --reader-panel: #14232e;
    --reader-panel-soft: #21323f;
    --reader-ink: #e7eef1;
    --reader-muted: #a7bac5;
    --reader-line: #364b58;
}
html, body { background: var(--page-bg); color: var(--ink); }
body { line-height: 1.65; }
::selection { background: var(--teal-soft); color: var(--ink); }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
input, select, textarea { accent-color: var(--action); }
textarea { font: inherit; }
button { touch-action: manipulation; }
[hidden] { display: none !important; }
svg { flex-shrink: 0; }
.topbar { background: var(--header-bg); border-color: rgba(255,255,255,.08); }
.topbar__inner { width: min(1680px, 100%); padding-inline: 30px; }
.brand { gap: 11px; }
.brand__logo { display: block; width: 40px; height: 40px; flex: 0 0 auto; filter: drop-shadow(0 3px 5px rgba(0,0,0,.15)); }
.brand__text strong { font-size: 16px; font-weight: 750; letter-spacing: -.025em; }
.brand__text small { margin-top: 5px; font-size: 9px; font-weight: 600; letter-spacing: .2em; color: #aacacb; }
.topbar__account { gap: 12px; }
.topbar .button--quiet { min-height: 36px; border-color: rgba(255,255,255,.16); color: #ecf5f4; }
.user-chip { border: 0; color: #c7d8dc; font-weight: 600; }
.version-badge { color: #bfd8d7; border-color: rgba(255,255,255,.15); }
.theme-picker { display: inline-flex; align-items: center; min-height: 36px; padding-left: 9px; border: 1px solid rgba(255,255,255,.17); border-radius: 9px; color: #d6e8e8; }
.theme-picker svg { width: 17px; height: 17px; }
.theme-picker select { width: 80px; min-height: 34px; margin: 0; padding: 0 5px; border: 0; border-radius: 8px; background: transparent; color: #e4efed; font: inherit; font-size: 12px; cursor: pointer; color-scheme: dark; }
.theme-picker option { background: #132c38; color: #fff; }
.theme-picker:focus-within { outline: 2px solid #84dcca; outline-offset: 3px; }
.theme-picker select:focus { outline: none; }
.app-shell { width: min(1680px, 100%); grid-template-columns: 224px minmax(0, 1fr); }
.sidebar { padding: 26px 16px 18px; border-color: var(--line); background: var(--sidebar-bg); }
.sidebar__main { gap: 23px; }
.sidebar__nav { gap: 5px; }
.nav-item { position: relative; min-height: 43px; gap: 12px; padding-inline: 13px; border: 1px solid transparent; border-radius: 10px; color: var(--muted); font-size: 13px; font-weight: 650; }
.nav-item:hover { background: var(--surface-soft); color: var(--ink); }
.nav-item.is-active { background: var(--teal-soft); color: var(--teal); }
.nav-item.is-active::after { position: absolute; inset: 13px auto 13px -1px; width: 3px; border-radius: 4px; background: var(--teal); content: ""; }
.nav-icon { width: 19px; height: 21px; }
.nav-icon svg { width: 19px; height: 19px; overflow: visible; }
.nav-section-label { padding: 16px 14px 6px; color: var(--muted); font-size: 10px; letter-spacing: .08em; font-weight: 600; }
.sidebar__version { margin-top: 18px; background: var(--surface-soft); color: var(--muted); font-size: 11px; }
.sidebar__version strong { color: var(--teal); font-weight: 700; }
.sidebar__version:hover { background: var(--teal-soft); color: var(--ink); }
.sidebar-shelf-status { border-color: var(--line); background: var(--surface); box-shadow: none; }
.sidebar-shelf-status__header, .sidebar-shelf-status__grid a, .sidebar-shelf-status__scan { border-color: var(--line); }
.sidebar-shelf-status__header span { font-size: 11px; }
.sidebar-shelf-status__grid small { color: var(--muted); font-weight: 500; }
.sidebar-shelf-status__grid strong { margin-top: 3px; font-weight: 700; }
.sidebar-shelf-status__grid a:hover { background: var(--teal-soft); }
.sidebar-shelf-status__scan button, .sidebar-shelf-status__scan button:hover { background: var(--teal-soft); color: var(--teal); }
.sidebar-shelf-status__links a + a { border-color: var(--line); }
.main-content:not(.main-content--reader) { max-width: none; padding: 42px clamp(24px, 3.25vw, 56px) 76px; }
.page-header { gap: 24px; margin-bottom: 30px; }
.page-header h1 { margin-bottom: 9px; color: var(--ink); font-size: clamp(28px, 2.5vw, 37px); font-weight: 750; line-height: 1.2; letter-spacing: -.045em; }
.page-header p { max-width: 720px; color: var(--muted); line-height: 1.7; }
.eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .13em; }
.page-header .eyebrow { margin-bottom: 10px; }
.page-header__actions { flex-shrink: 0; gap: 9px; }
.button { min-height: 43px; gap: 8px; border-radius: 9px; font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.button--primary { background: var(--action); color: var(--on-action); box-shadow: 0 4px 10px rgba(8,127,117,.12); }
.button--primary:hover:not(:disabled) { background: var(--action-hover); }
.button--secondary { border-color: var(--line); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-soft); }
.button--secondary:hover:not(:disabled) { border-color: var(--teal); background: var(--teal-soft); }
.main-content:not(.main-content--reader) .button--quiet { border-color: var(--line); background: transparent; color: var(--muted); }
.button--small { min-height: 34px; font-size: 12px; }
.button--danger { color: #fff; background: #ad384c; }
.panel, .metric-card { border-color: var(--line); background: var(--surface); box-shadow: var(--shadow-soft); }
.panel { border-radius: 15px; }
.panel h2 { font-size: 19px; font-weight: 700; }
.panel-intro, .panel--form .notice-box p { font-size: 13px; }
.panel__header { gap: 14px; }
.metric-grid { gap: 15px; margin-bottom: 24px; }
.metric-card--compact { min-height: 113px; padding: 20px; gap: 15px; }
.metric-card strong { font-size: 25px; font-weight: 750; line-height: 1.5; }
.metric-card small { font-size: 12px; font-weight: 500; }
.metric-card p { color: var(--muted); font-size: 11px; }
.metric-card__icon--muted { background: var(--surface-soft); color: var(--muted); }
.dashboard-grid { grid-template-columns: minmax(0, 1.5fr) minmax(270px, .7fr); gap: 24px; }
.readiness-list > div { min-height: 57px; border-color: var(--line); }
.readiness-list strong { font-weight: 650; }
.readiness-list small { font-size: 12px; }
.panel--accent { background: #163c46; color: #e5f1f0; border-color: #234b55; }
.panel--accent h2 { color: #f3faf5; }
.release-history { min-height: 0; }
.release-history__heading p, .panel--accent > p { color: #b8d2d1; font-size: 13px; }
.release-version-list { gap: 10px; max-height: 390px; }
.release-version-button { padding: 13px 34px 12px 13px; min-height: 71px; }
.release-version-button.is-current { border-color: #68c8b1; background: #205b5c; }
.release-version-button strong { font-size: 14px; }
.release-version-button small { margin-top: 6px; color: #c2d9d7; }
.release-history__hint { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); color: #bdd3d0; line-height: 1.6; }
.release-notes-dialog__surface { background: var(--surface); border-color: var(--line); }
.release-notes-dialog__header, .release-notes-dialog__footer { background: var(--surface-soft); }
.release-notes-dialog__header button { background: var(--surface); color: var(--ink); border-color: var(--line); }
.release-note-list li { border-color: var(--line); background: var(--surface-soft); }
.release-note-list p { color: var(--ink); }
.release-notes-dialog::backdrop { background: rgba(6,16,25,.65); }

/* Covers carry the visual interest; their surroundings remain quiet. */
.shelf-page-header--simple { align-items: center; margin-bottom: 24px; }
.shelf-discovery-bar { grid-template-columns: minmax(0, 1fr) auto auto; max-width: none; min-height: 56px; margin-bottom: 37px; padding: 5px 7px; border-color: var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-soft); }
.shelf-discovery-bar:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.shelf-discovery-bar label { display: flex; align-items: center; gap: 9px; padding-left: 10px; }
.shelf-discovery-bar label svg { width: 19px; height: 19px; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; }
.shelf-discovery-bar input { height: 42px; padding-left: 0; font-size: 13px; }
.shelf-discovery-bar button { min-height: 40px; min-width: 64px; background: var(--action); color: #fff; font-size: 12px; }
.shelf-discovery-bar > a { color: var(--muted); }
.shelf-section { margin-bottom: 39px; }
.shelf-section__header { align-items: center; margin-bottom: 19px; }
.shelf-section__header h2 { font-size: 22px; font-weight: 700; letter-spacing: -.035em; }
.shelf-section__header > a { display: inline-flex; align-items: center; gap: 9px; min-height: 34px; font-size: 12px; }
.shelf-section__header .eyebrow { font-size: 9px; letter-spacing: .15em; }
.shelf-rail { grid-auto-columns: 166px; gap: 21px; padding-bottom: 12px; scrollbar-color: var(--line) transparent; }
.work-card-grid--compact { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 29px 22px; }
.work-card--compact { height: auto; align-content: start; }
.work-card--compact .work-card__cover { border-color: rgba(20,36,40,.08); border-radius: 7px 11px 11px 7px; box-shadow: 2px 6px 15px rgba(15,28,34,.12); }
.work-card--compact .work-card__cover::after { position: absolute; z-index: 1; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(0,0,0,.15), rgba(255,255,255,.06) 2%, transparent 5%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); pointer-events: none; content: ""; }
.work-card--compact:hover { transform: translateY(-3px); }
.work-card--compact:hover .work-card__cover { box-shadow: 2px 10px 23px rgba(15,28,34,.2); }
.work-card--compact .work-card__body { padding: 12px 1px 0; }
.work-card--compact .work-card__body strong { color: var(--ink); font-size: 14px; font-weight: 650; line-height: 1.5; }
.work-card__caption { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.work-card__caption > span { margin-inline: 3px; }
.work-card__reading { display: flex; justify-content: space-between; gap: 5px; margin-top: 9px; color: var(--teal); font-size: 11px; font-weight: 600; }
.work-card__reading > span { flex-shrink: 0; }
.work-card__resume { position: absolute; z-index: 2; right: 10px; bottom: 13px; left: 10px; display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 7px; background: rgba(14,37,40,.93); color: #f0faf4; font-size: 11px; font-weight: 650; }
.work-card__cover-progress { height: 3px; }
.work-card__cover-progress::after { background: #46c5ad; }
.cover-placeholder { background: #183d46; }
.cover-placeholder--text { background: #34514c; }
.cover-placeholder > strong { color: #ecf4e7; font-size: 44px; }
.cover-placeholder > span { color: #a8d5c6; }
.cover-placeholder > small { color: #c0d0cc; }
.shelf-section--continue { padding: 24px 25px 19px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); box-shadow: var(--shadow-soft); }
.shelf-section--continue .shelf-rail { grid-auto-columns: 156px; gap: 22px; }
.shelf-catalog-simple { margin-top: 12px; padding-top: 30px; border-color: var(--line); }
.shelf-toolbar { display: block; }
.shelf-catalog-controls { justify-content: flex-start; gap: 9px; margin-top: 19px; }
.sort-tabs { gap: 2px; padding: 4px; background: var(--surface-soft); }
.sort-tabs a { min-height: 34px; padding-inline: 11px; font-size: 11px; font-weight: 600; }
.sort-tabs a.is-active { background: var(--surface); color: var(--teal); box-shadow: var(--shadow-soft); }
.sort-tabs a:hover { color: var(--ink); }
.shelf-status-tabs a span, .shelf-status-tabs a.is-active span { color: var(--muted); }
.empty-state { border-color: var(--line); background: var(--surface); color: var(--ink); }
.empty-state p { color: var(--muted); font-size: 13px; }
.empty-state > span { color: var(--teal); background: var(--teal-soft); }
.empty-state strong { color: var(--ink); }
.shelf-empty { min-height: 240px; border-style: dashed; border-radius: 16px; }
.work-page-header { padding-bottom: 27px; border-bottom: 1px solid var(--line); }
.work-detail-grid { grid-template-columns: minmax(210px, .6fr) minmax(0, 1.4fr); }
.back-link { min-height: 32px; margin-bottom: 14px; color: var(--muted); }
.work-volume-panel { margin-bottom: 25px; }
.work-volume-item { background: var(--surface-soft); color: var(--ink); border-color: var(--line); }
.work-volume-item:hover, .work-volume-item.is-active { border-color: var(--teal); background: var(--teal-soft); }
.work-volume-item strong { color: var(--ink); }
.work-volume-item span { color: var(--muted); }
.work-volume-item small { background: var(--surface); color: var(--teal); }
.work-cover-panel { padding: 22px; }
.work-cover-frame { border-radius: 8px 13px 13px 8px; box-shadow: 3px 12px 28px rgba(0,0,0,.12); }
.work-volume-panel .panel__header > span, .work-file-panel .panel__header > span, .cover-status-row small { color: var(--muted); }
.work-file-table tr.is-current td { background: var(--teal-soft); }
.work-reading-summary { margin-bottom: 23px; }
.work-reading-summary h2 { margin-top: 7px; font-size: 24px; letter-spacing: -.035em; }
.work-reading-summary > p { margin: 11px 0 0; color: var(--muted); font-size: 13px; }
.work-reading-stats { display: flex; gap: 36px; margin: 24px 0; padding-block: 18px; border-block: 1px solid var(--line); }
.work-reading-stats dt { color: var(--muted); font-size: 11px; }
.work-reading-stats dd { margin: 4px 0 0; color: var(--ink); font-size: 25px; font-weight: 700; }
.work-reading-stats dd small { margin-left: 5px; color: var(--muted); font-size: 12px; font-weight: 500; }
.work-edit-disclosure { margin-top: 24px; padding-top: 17px; border-top: 1px solid var(--line); }
.work-edit-disclosure > summary { padding: 5px 0; color: var(--muted); font-size: 13px; font-weight: 650; cursor: pointer; }
.work-edit-disclosure[open] > summary { margin-bottom: 20px; color: var(--teal); }

/* All management and account forms share the same accessible surfaces. */
.field > span:first-child, .choice-field legend, .choice-option__content strong, .choice-field__help, .notice-box strong { color: var(--ink); }
.field input, .field select, .field textarea, .text-reader-drawer input:not([type="range"]), .text-reader-drawer select, .text-reader-drawer textarea {
    border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font-size: 14px;
}
.field input, .field select { min-height: 46px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.field small, .field em, .choice-option__content small, .choice-field__help { color: var(--muted); font-size: 12px; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .82; }
.choice-option__content { border-color: var(--line); background: var(--surface); }
.choice-option > input:checked + .choice-option__content { background: var(--teal-soft); border-color: var(--teal); box-shadow: none; }
.password-field button { background: var(--surface-soft); color: var(--muted); }
.password-meter > span { background: var(--line); }
.password-meter small { color: var(--muted); }
.field small code, .notice-box code { background: var(--surface-soft); color: var(--ink); }
.notice-box { border-color: var(--line); background: var(--surface-soft); }
.notice-box--important { border-color: var(--line); background: var(--teal-soft); }
.notice-box p, .notice-box ul { font-size: 12px; }
.alert { font-size: 13px; }
.alert--success { color: var(--teal); background: var(--teal-soft); border-color: var(--line); }
.alert--danger { color: var(--danger); background: var(--danger-soft); border-color: var(--line); }
.alert--warning { color: var(--amber); background: var(--amber-soft); border-color: var(--line); }
.status-pill { background: var(--surface-soft); color: var(--muted); }
.status-pill--queued, .status-label--warning { background: var(--amber-soft); color: var(--amber); }
.status-pill--running { background: var(--blue-soft); color: var(--blue); }
.status-pill--completed, .status-label--pass { background: var(--teal-soft); color: var(--teal); }
.status-pill--failed, .status-label--fail { background: var(--danger-soft); color: var(--danger); }
.history-table { font-size: 12px; }
.history-table th { font-size: 11px; background: var(--surface-soft); }
.history-table td { color: var(--ink); border-color: var(--line); }
.table-note, .history-panel .panel__header > small { color: var(--muted); font-size: 12px; }
.detail-list > div { border-color: var(--line); }
.detail-list dt, .detail-list dd small { color: var(--muted); }
.detail-list dd, .detail-list code, .scan-meta code, .scan-meta span { color: var(--ink); }
.safety-panel { background: var(--surface); }
.safety-list li { color: var(--muted); }
.attention-list article { border-color: var(--line); background: var(--amber-soft); }
.attention-list p, .attention-list small, .attention-list .attention-reason { color: var(--amber); }
.unified-candidate-card, .candidate-card { background: var(--surface); border-color: var(--line); }
.unified-attention-list > a, .unified-attention-list > a:hover { background: var(--amber-soft); }
.unified-scan-meta strong, .candidate-target-work label { color: var(--ink); }
.scan-progress, .work-card__progress { background: var(--surface-soft); }
.unified-source-ok { color: var(--teal); }
.management-tabs { border-color: var(--line); background: var(--surface-soft); }
.management-tabs a { color: var(--muted); }
.management-tabs a.is-active { background: var(--surface); color: var(--teal); }
.danger-zone { border-color: var(--danger); background: var(--surface); }
.danger-zone .eyebrow, .danger-zone h2 { color: var(--danger); }
.backup-list, .backup-row, .update-file-card, .candidate-group-card, .candidate-volume-source,
.diagnostic-summary > div, .trash-item, .trash-purge > summary, .trash-purge[open] > form { border-color: var(--line); background: var(--surface); }
.copy-field, .backup-latest, .update-backup-status, .checkbox-row { border-color: var(--line); background: var(--surface-soft); }
.checkbox-row strong, .copy-field code, .candidate-volume-row strong { color: var(--ink); }
.candidate-group-card__files span, .diagnostic-summary span, .trash-item__identity small { color: var(--muted); }
.checkbox-row--danger, .trash-purge code { background: var(--danger-soft); border-color: var(--line); color: var(--danger); }
.trash-purge p, .job-error, .cover-error { color: var(--danger); }
.candidate-group-note { color: var(--teal); }
.shelf-pending-note { background: var(--amber-soft); color: var(--amber); }
.work-card--candidate .work-card__body strong { color: var(--ink); }
.management-tabs a span, .management-tabs a.is-active span { color: var(--muted); }
.web-update-file input[type="file"]::file-selector-button { background: var(--surface-soft); color: var(--ink); }
.cron-panel > p code { background: var(--surface-soft); }
.check-row { background: var(--surface); }
.connection-summary small { color: var(--muted); }

/* Book uploads use the same form controls and never depend on a wide desktop. */
.upload-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(265px, .85fr); gap: 24px; align-items: start; margin-bottom: 25px; }
.upload-compose, .upload-guide { min-width: 0; }
.upload-compose .panel__header { align-items: start; }
.upload-compose .status-pill { flex-shrink: 0; }
.upload-compose .form-grid { gap: 18px; }
.upload-dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 233px; margin-top: 24px; padding: 24px 18px; border: 1.5px dashed var(--line); border-radius: 13px; background: var(--surface-soft); color: var(--ink); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.upload-dropzone:hover, .upload-dropzone.is-dragging, .upload-dropzone:focus-within { border-color: var(--teal); background: var(--teal-soft); }
.upload-dropzone input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; opacity: 0; }
.upload-dropzone__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); color: var(--teal); font-size: 28px; line-height: 1; box-shadow: var(--shadow-soft); }
.upload-dropzone strong { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.upload-dropzone > span:not(.upload-dropzone__icon) { color: var(--muted); font-size: 13px; }
.upload-dropzone > small { margin-top: 8px; color: var(--teal); font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.book-upload .muted { margin-block: 16px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.book-upload .muted a { color: var(--teal); text-underline-offset: 3px; }
.upload-guide { background: var(--surface); }
.upload-guide > h2 { margin: 9px 0 21px; }
.upload-steps { display: grid; gap: 22px; margin: 0 0 26px; padding: 0; list-style: none; counter-reset: upload-step; }
.upload-steps li { position: relative; min-width: 0; padding-left: 39px; counter-increment: upload-step; }
.upload-steps li::before { display: grid; position: absolute; top: 0; left: 0; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--teal-soft); color: var(--teal); font-size: 11px; font-weight: 700; content: counter(upload-step, decimal-leading-zero); }
.upload-steps strong { display: block; font-size: 13px; font-weight: 700; }
.upload-steps p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.upload-queue { display: grid; gap: 12px; margin-block: 20px; }
.upload-queue:empty { margin: 0; }
.upload-file { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: end; padding: 16px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.upload-file .field { grid-column: 1 / -1; }
.upload-file .field > span { color: var(--muted); font-size: 11px; }
.upload-file__status { grid-column: 1 / -1; min-width: 0; margin: 10px 0 9px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.upload-progress { display: block; overflow: hidden; width: 100%; min-width: 0; height: 5px; border: 0; border-radius: 5px; appearance: none; background: var(--line); color: var(--action); }
.upload-progress::-webkit-progress-bar { background: var(--line); border-radius: 5px; }
.upload-progress::-webkit-progress-value { background: var(--action); border-radius: 5px; }
.upload-progress::-moz-progress-bar { background: var(--action); border-radius: 5px; }
.upload-file > .upload-progress { align-self: center; }
.upload-file > .upload-progress:last-child { grid-column: 1 / -1; }
.upload-file > .button { padding-inline: 11px; font-size: 11px; }
.upload-announcement { min-height: 0; margin: 17px 0 0; color: var(--ink); font-size: 13px; overflow-wrap: anywhere; }
.upload-announcement:empty { margin: 0; }
.upload-compose .form-actions { flex-wrap: wrap; justify-content: flex-start; margin-top: 19px; }
.upload-history { margin-bottom: 24px; }
.upload-history .empty-state { min-height: 100px; justify-content: center; color: var(--muted); border-style: dashed; box-shadow: none; }
.upload-record { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 25px; align-items: center; padding: 21px 0; border-top: 1px solid var(--line); }
.upload-record__copy { min-width: 0; }
.upload-record__copy strong { display: block; color: var(--ink); font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.upload-record__copy small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.upload-record__copy p { margin: 9px 0 11px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.upload-record__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 260px; }
.upload-record--registered .upload-record__copy p { color: var(--teal); }
.upload-record--attention .upload-record__copy p, .upload-record--failed .upload-record__copy p { color: var(--danger); }
.upload-settings > summary { cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 650; }
.upload-settings[open] > summary { margin-bottom: 24px; color: var(--ink); }
.upload-settings .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.upload-settings .form-actions { grid-column: 1 / -1; }
.notice--error { margin-bottom: 24px; padding: 15px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--danger-soft); color: var(--danger); font-size: 13px; }
.shelf-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-top: 33px; padding-top: 24px; border-top: 1px solid var(--line); }
.shelf-pagination > span { color: var(--muted); font-size: 12px; }
.shelf-pagination .button { min-width: 74px; }

/* A composed, local-only login illustration; no stock photography or webfonts. */
.guest-body { background: var(--page-bg); }
.guest-shell { display: grid; align-items: center; width: min(100%, 1120px); min-height: calc(100dvh - 140px); padding-block: 42px; }
.guest-footer { color: var(--muted); font-size: 12px; }
.install-card, .login-card, .error-card { border-color: var(--line); background: var(--surface); box-shadow: var(--shadow); }
.login-card { width: min(100%, 900px); min-height: 548px; grid-template-columns: 1fr 1.08fr; border-radius: 20px; }
.login-card__visual { justify-content: flex-start; padding: 37px 40px; background: #153e45; }
.login-card__visual::before { display: none; }
.login-card__edition { color: #a2c8bd; font-size: 10px; font-weight: 600; letter-spacing: .24em; }
.login-card__visual p { margin-top: 31px; color: #f0f5e8; font-size: 29px; line-height: 1.45; font-weight: 650; letter-spacing: -.04em; }
.login-card__caption { margin-top: 12px; color: #b5cec5; font-size: 12px; }
.login-book-scene { position: relative; flex: 1 0 auto; height: 215px; min-height: 210px; margin-top: 40px; }
.login-book { display: block; position: absolute; left: 22%; width: 140px; height: 190px; border-radius: 4px 11px 11px 4px; box-shadow: 4px 12px 25px rgba(0,0,0,.22), inset 5px 0 0 rgba(0,0,0,.13); }
.login-book--back { top: 1px; left: 37%; transform: rotate(12deg); background: #d9bd83; }
.login-book--back::before { position: absolute; inset: 15px 11px; border: 1px solid rgba(73,55,28,.22); border-radius: 2px; content: ""; }
.login-book--front { top: 12px; transform: rotate(-8deg); background: #71aa96; }
.login-book--front::before { position: absolute; inset: 12px 11px; border: 1px solid rgba(255,255,255,.3); border-radius: 2px; content: ""; }
.login-book--front img { position: absolute; top: 39px; left: 46px; width: 50px; height: 50px; filter: saturate(.75); }
.login-book i { position: absolute; right: 16px; bottom: 35px; left: 22px; height: 1px; background: rgba(255,255,255,.38); box-shadow: 0 7px 0 rgba(255,255,255,.22); }
.login-book-scene__line { position: absolute; right: 3%; bottom: 0; left: 4%; height: 1px; background: rgba(255,255,255,.22); }
.login-card__form { padding: 44px 43px; }
.login-card__form h1 { margin-top: 8px; margin-bottom: 12px; color: var(--ink); font-size: 34px; }
.login-card__form > p { font-size: 13px; }
.login-card__form .form-stack { gap: 20px; margin-top: 31px; }
.login-card .field input { min-height: 48px; }
.login-card .button--wide { min-height: 48px; justify-content: space-between; padding-inline: 17px; }
.login-card .security-note { margin-top: 23px; font-size: 11px; color: var(--muted); }
.install-steps::before { background: var(--line); }
.install-steps li > span { background: var(--surface); border-color: var(--line); }
.install-steps li.is-current > span { background: var(--action); color: #fff; }
.install-steps li.is-complete > span { background: var(--teal-soft); color: var(--teal); }

/* Reader chrome inherits the theme; independent text-paper themes stay intact. */
:root[data-theme] .app-shell--reader { width: 100%; max-width: none; }
:root[data-theme] .app-body--reader,
:root[data-theme] .app-shell--reader,
:root[data-theme] .main-content--reader,
:root[data-theme] .reader,
:root[data-theme] .reader-stage,
:root[data-theme] .reader-stage__page,
:root[data-theme] .reader-single,
:root[data-theme] .reader-help,
:root[data-theme] .reader-page,
:root[data-theme] .reader-page__mobile-split,
:root[data-theme] .reader-page__mobile-half,
:root[data-theme] .reader-page__mobile-crop,
:root[data-theme] .reader-scroll--smart .reader-page.is-landscape { background: var(--reader-bg); }
:root[data-theme] .reader { color: var(--reader-ink); }
:root[data-theme] .reader-toolbar,
:root[data-theme] .text-reader-toolbar,
:root[data-theme] .reader-mobile-dock,
:root[data-theme] .reader-mobile-dock__bar,
:root[data-theme] .reader-mobile-scrubber,
:root[data-theme] .reader-rotation-panel,
:root[data-theme] .reader-brightness-panel,
:root[data-theme] .reader-jump-panel,
:root[data-theme] .reader-volume-previous,
:root[data-theme] .reader-volume-complete,
:root[data-theme] .reader-journey-panel,
:root[data-theme] .reader-quality-panel { background: var(--reader-panel); color: var(--reader-ink); border-color: var(--reader-line); }
:root[data-theme] .reader[data-reader-ready="1"] .reader-mobile-dock { background: var(--reader-panel); border-color: var(--reader-line); }
:root[data-theme] .reader-mobile-dock__progress { background: var(--reader-line); }
:root[data-theme] .reader-mobile-page-status span { color: var(--reader-muted); }
:root[data-theme] .reader-mobile-menu-toggle[aria-expanded="true"],
:root[data-theme] .reader-mobile-page-status[aria-expanded="true"] { background: var(--teal-soft); color: var(--teal); border-color: var(--teal); }
:root[data-theme] .reader-mobile-immersive-toggle[aria-pressed="true"] { background: var(--action); color: #fff; border-color: var(--action); }
:root[data-theme] .reader-toolbar,
:root[data-theme] .text-reader-toolbar { box-shadow: 0 4px 20px rgba(0,0,0,.07); }
:root[data-theme] .reader-toolbar__identity strong,
:root[data-theme] .text-reader-toolbar__identity strong { color: var(--reader-ink); }
:root[data-theme] .reader-toolbar__identity small,
:root[data-theme] .text-reader-toolbar__identity small { color: var(--teal); }
:root[data-theme] .reader-mode-switch,
:root[data-theme] .reader-direction-switch,
:root[data-theme] .reader-spread-switch { background: var(--reader-panel-soft); border-color: var(--reader-line); }
:root[data-theme] .reader-mode-switch button,
:root[data-theme] .reader-direction-switch button,
:root[data-theme] .reader-spread-switch button { color: var(--reader-muted); }
:root[data-theme] .reader-mode-switch button:hover,
:root[data-theme] .reader-direction-switch button:hover,
:root[data-theme] .reader-spread-switch button:hover { color: var(--reader-ink); }
:root[data-theme] .reader-mode-switch button.is-active,
:root[data-theme] .reader-direction-switch button.is-active,
:root[data-theme] .reader-spread-switch button.is-active { background: var(--action); color: #fff; }
:root[data-theme] .reader-navigation button,
:root[data-theme] .reader-navigation > .reader-immersive-toggle,
:root[data-theme] .reader-toolbar .reader-back,
:root[data-theme] .reader-close,
:root[data-theme] .reader-rotation-panel__heading > button,
:root[data-theme] .reader-brightness-panel__heading > button,
:root[data-theme] .reader-rotation-options button,
:root[data-theme] .reader-brightness-actions button,
:root[data-theme] .reader-image-filter-actions button,
:root[data-theme] .reader-rotation-actions button,
:root[data-theme] .reader-rotation-close,
:root[data-theme] .reader-brightness-close,
:root[data-theme] .reader-jump-close,
:root[data-theme] .reader-jump-return,
:root[data-theme] .reader-scrubber-return,
:root[data-theme] .reader-mobile-immersive-toggle,
:root[data-theme] .reader-mobile-menu-toggle,
:root[data-theme] .reader-mobile-page-status,
:root[data-theme] .reader-mobile-scrubber__close,
:root[data-theme] .reader-mobile-dock__bar > button,
:root[data-theme] .text-reader-toolbar button {
    border-color: var(--reader-line); background: var(--reader-panel-soft); color: var(--reader-ink);
}
:root[data-theme] .reader-navigation button:hover:not(:disabled),
:root[data-theme] .reader-navigation button[aria-expanded="true"],
:root[data-theme] .text-reader-toolbar button:hover:not(:disabled),
:root[data-theme] .text-reader-toolbar button[aria-expanded="true"] { border-color: var(--teal); background: var(--teal-soft); color: var(--teal); }
:root[data-theme] .reader-navigation strong,
:root[data-theme] .reader-navigation button strong,
:root[data-theme] .reader-mobile-page-status strong,
:root[data-theme] .reader-rotation-panel__heading strong,
:root[data-theme] .reader-brightness-panel__heading strong,
:root[data-theme] .reader-mobile-scrubber output strong,
:root[data-theme] .text-reader-navigation strong,
:root[data-theme] .reader-brightness-control output,
:root[data-theme] .reader-image-filter-control output,
:root[data-theme] .reader-jump-panel strong,
:root[data-theme] .reader-brightness-panel h2,
:root[data-theme] .reader-rotation-panel h2 { color: var(--reader-ink); }
:root[data-theme] .reader-brightness-control__title,
:root[data-theme] .reader-image-filter-control__title,
:root[data-theme] .reader-image-filter-actions p,
:root[data-theme] .reader-brightness-control > span,
:root[data-theme] .reader-rotation-note,
:root[data-theme] .reader-image-filter-scale,
:root[data-theme] .reader-image-filter-ticks,
:root[data-theme] .reader-brightness-scale,
:root[data-theme] .reader-brightness-actions p,
:root[data-theme] .reader-mobile-scrubber output,
:root[data-theme] .reader-mobile-page-status,
:root[data-theme] .text-reader-navigation > span,
:root[data-theme] .reader-help,
:root[data-theme] .reader-page__placeholder,
:root[data-theme] .reader-page__placeholder strong { color: var(--reader-muted); }
:root[data-theme] .reader-announcement { background: var(--reader-panel); color: var(--reader-muted); }
:root[data-theme] .reader-brightness-status,
:root[data-theme] .reader-image-filter-status { color: var(--teal); }
:root[data-theme] .reader-brightness-status.is-error,
:root[data-theme] .reader-image-filter-status.is-error { color: var(--danger); }
:root[data-theme] .reader-image-filter-section { border-color: var(--reader-line); }
:root[data-theme] .reader-rotation-scope { background: var(--reader-panel-soft); color: var(--reader-ink); }
:root[data-theme] .reader-rotation-panel__heading small,
:root[data-theme] .reader-brightness-panel__heading small,
:root[data-theme] .reader-rotation-status { color: var(--teal); }
:root[data-theme] .reader-rotation-status.is-error,
:root[data-theme] .reader-announcement.is-error { color: var(--danger); }
:root[data-theme] .reader-rotation-options button.is-active { background: var(--action); color: #fff; border-color: var(--action); }
:root[data-theme] .reader-rotation-options button:hover:not(:disabled),
:root[data-theme] .reader-brightness-actions button:hover,
:root[data-theme] .reader-image-filter-actions button:hover,
:root[data-theme] .reader-scrubber-return:hover:not(:disabled) { color: var(--teal); border-color: var(--teal); }
:root[data-theme] .reader-page-field { background: var(--reader-panel-soft); border-color: var(--reader-line); }
:root[data-theme] .reader-page-field .reader-page-field__current { color: var(--reader-ink); }
:root[data-theme] .reader-page-field .reader-page-field__separator,
:root[data-theme] .reader-page-field .reader-page-field__total { color: var(--reader-muted); }
:root[data-theme] .reader-navigation input:focus { color: var(--reader-ink); caret-color: var(--reader-ink); }
:root[data-theme] .reader-page { border-color: var(--reader-line); }
:root[data-theme] .reader-stage__page figcaption,
:root[data-theme] .reader-page figcaption { background: rgba(11,25,31,.82); color: #edf6f4; }
:root[data-theme] .text-reader-drawer { background: var(--surface); color: var(--ink); border-color: var(--line); }
:root[data-theme] .text-reader-drawer__header h2,
:root[data-theme] .text-reader-drawer__subhead h3 { color: var(--ink); }
:root[data-theme] .text-reader-drawer__header > button { background: var(--surface-soft); color: var(--ink); border-color: var(--line); }
:root[data-theme] .text-reader-toc > button { color: var(--ink); }
:root[data-theme] .text-reader-toc > button:hover,
:root[data-theme] .text-reader-toc > button.is-current { background: var(--teal-soft); color: var(--teal); }
:root[data-theme] .text-reader-toc > button span { color: var(--muted); }
:root[data-theme] .text-reader-bookmarks,
:root[data-theme] .text-reader-tool-section { border-color: var(--line); }
:root[data-theme] .text-reader-bookmarks article > button,
:root[data-theme] .text-reader-search-results > button,
:root[data-theme] .text-reader-tool-list article,
:root[data-theme] .text-reader-brightness-actions { background: var(--surface-soft); color: var(--ink); }
:root[data-theme] .text-reader-search-results > button:hover { background: var(--teal-soft); }
:root[data-theme] .text-reader-search-form label span,
:root[data-theme] .text-reader-settings label > span,
:root[data-theme] .text-reader-tool-list strong { color: var(--ink); }
:root[data-theme] .text-reader-drawer__subhead small,
:root[data-theme] .text-reader-bookmark-empty,
:root[data-theme] .text-reader-bookmarks article small,
:root[data-theme] .text-reader-search-results > p,
:root[data-theme] .text-reader-search-results small,
:root[data-theme] .text-reader-tool-list small,
:root[data-theme] .text-reader-brightness-actions small { color: var(--muted); }
:root[data-theme] .text-reader-settings output { color: var(--teal); }
:root[data-theme] .text-reader-tool-list button,
:root[data-theme] .text-reader-brightness-actions button { background: var(--surface); border-color: var(--line); color: var(--teal); }
:root[data-theme] .text-reader-tool-list button { color: var(--danger); }

@media (max-width: 1180px) and (min-width: 901px) {
    .app-shell:not(.app-shell--reader) { grid-template-columns: 196px minmax(0, 1fr); }
    .sidebar { padding-inline: 12px; }
    .sidebar-shelf-status__header { flex-wrap: wrap; gap: 6px; }
    .main-content:not(.main-content--reader) { padding-inline: 26px; }
    .metric-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
    .release-version-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .app-shell { grid-template-columns: minmax(0, 1fr); }
    .sidebar { position: static; padding: 9px 20px; height: auto; border-right: 0; }
    .sidebar__main { gap: 8px; }
    .sidebar__nav { gap: 4px; scrollbar-width: none; }
    .sidebar__nav::-webkit-scrollbar { display: none; }
    .nav-item { min-height: 42px; padding-inline: 13px; font-size: 12px; }
    .nav-item.is-active::after { inset: auto 15px 0; width: auto; height: 2px; }
    .nav-section-label { display: none; }
    .sidebar-shelf-status { box-shadow: none; }
    .sidebar-shelf-status__grid a, .sidebar-shelf-status__grid a:nth-child(2n), .sidebar-shelf-status__grid a:nth-last-child(-n+2), .sidebar-shelf-status__header, .sidebar-shelf-status__scan { border-color: var(--line); }
    .main-content:not(.main-content--reader) { padding: 29px 26px 60px; }
    .page-header { gap: 18px; }
    .page-header h1 { font-size: 31px; }
    .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
    .metric-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .work-card-grid--compact { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .login-card { grid-template-columns: minmax(0, 1fr); width: min(100%, 540px); min-height: 0; }
    .login-card__visual { display: none; }
    .login-card__form { padding-inline: 38px; }
    .upload-grid { grid-template-columns: minmax(0, 1fr); }
    .upload-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .upload-settings .form-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .topbar__inner { padding-inline: 16px; }
    .topbar__account { gap: 7px; }
    .topbar__account .user-chip { display: none; }
    .brand { gap: 9px; }
    .brand__logo { width: 34px; height: 34px; }
    .brand__text strong { max-width: 150px; font-size: 13px; }
    .brand__text small { font-size: 8px; margin-top: 4px; letter-spacing: .14em; }
    .theme-picker { padding-left: 7px; }
    .theme-picker svg { width: 15px; height: 15px; }
    .theme-picker select { width: 66px; padding-right: 0; font-size: 11px; }
    .topbar .button--quiet { min-height: 36px; padding-inline: 9px; font-size: 11px; }
    .sidebar { padding-inline: 12px; }
    .sidebar-shelf-status { display: none; }
    .main-content:not(.main-content--reader) { padding: 26px 20px 48px; }
    .page-header { gap: 17px; margin-bottom: 24px; }
    .page-header h1 { font-size: 30px; }
    .page-header p { font-size: 13px; }
    .page-header__actions { width: auto; }
    .shelf-page-header--simple { align-items: flex-start; }
    .shelf-page-header--simple .button { width: auto; }
    .button, .button--small { min-height: 44px; }
    .shelf-discovery-bar { min-height: 53px; margin-bottom: 27px; padding-inline: 4px; }
    .shelf-discovery-bar label { gap: 7px; padding-left: 8px; }
    .shelf-discovery-bar input { min-width: 0; font-size: 13px; }
    .shelf-discovery-bar button { min-width: 51px; min-height: 43px; }
    .shelf-section { margin: 0 -20px 30px; }
    .shelf-section__header { padding-inline: 20px; margin-bottom: 16px; }
    .shelf-section__header h2 { font-size: 21px; }
    .shelf-rail { grid-auto-columns: 143px; gap: 17px; padding-inline: 20px; }
    .shelf-section--continue { padding: 20px 0 12px; border-radius: 0; border-inline: 0; box-shadow: none; }
    .shelf-section--continue .shelf-rail { grid-auto-columns: 143px; gap: 17px; }
    .work-card--compact .work-card__body strong { font-size: 13px; }
    .work-card__caption { font-size: 11px; }
    .work-card__resume { padding: 7px 8px; font-size: 11px; }
    .shelf-catalog-simple { margin-inline: 0; padding-top: 23px; }
    .shelf-catalog-simple > .shelf-section__header { padding-inline: 0; }
    .shelf-catalog-controls { gap: 8px; margin-top: 16px; }
    .sort-tabs { max-width: 100%; overflow-x: auto; padding: 3px; gap: 0; }
    .sort-tabs a { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 39px; padding-inline: 10px; white-space: nowrap; }
    .work-card-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 17px; }
    .shelf-empty { margin-inline: 0; padding: 24px; }
    .metric-grid--four { gap: 11px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metric-card--compact { align-items: flex-start; flex-direction: column; gap: 10px; min-height: 140px; padding: 16px; }
    .metric-card--compact .metric-card__icon { width: 34px; height: 34px; border-radius: 10px; }
    .metric-card strong { font-size: 23px; }
    .metric-card p { margin-top: 4px; font-size: 11px; }
    .panel { padding: 21px; }
    .readiness-list small { white-space: normal; overflow-wrap: anywhere; }
    .work-page-header { padding-bottom: 20px; }
    .work-detail-grid { grid-template-columns: minmax(0, 1fr); }
    .work-cover-frame { width: min(100%, 200px); }
    .work-reading-summary h2 { font-size: 23px; }
    .work-reading-stats { gap: 28px; }
    .field input, .field select, .field textarea { font-size: 16px; }
    .guest-shell { min-height: calc(100dvh - 128px); padding: 26px 18px; }
    .login-card { display: block; min-height: 0; border-radius: 17px; }
    .login-card__visual { display: none; }
    .login-card__form { padding: 35px 26px; }
    .login-card__form h1 { font-size: 31px; }
    .login-card .security-note { line-height: 1.7; }
    .guest-footer { padding-inline: 18px; font-size: 11px; }
    .text-reader-drawer input:not([type="range"]), .text-reader-drawer select, .text-reader-drawer textarea { font-size: 16px; }
    .upload-steps { grid-template-columns: minmax(0, 1fr); }
    .upload-dropzone { min-height: 216px; margin-top: 20px; }
    .upload-compose .panel__header { flex-wrap: wrap; }
    .upload-file { padding: 13px; }
    .upload-record { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .upload-record__actions { max-width: none; justify-content: flex-start; }
    .upload-history .panel__header { flex-wrap: wrap; }
    .upload-guide .notice-box { padding: 14px; }
    .shelf-pagination { gap: 10px; }
}
@media (max-width: 390px) {
    .topbar__inner { padding-inline: 12px; }
    .brand__text strong { max-width: 122px; font-size: 12px; }
    .theme-picker { padding-left: 5px; }
    .theme-picker select { width: 61px; font-size: 10px; }
    .topbar .button--quiet { padding-inline: 7px; font-size: 10px; }
    .brand__text small { font-size: 7px; }
    .topbar__account { gap: 5px; }
    .main-content:not(.main-content--reader) { padding-inline: 17px; }
    .shelf-section { margin-inline: -17px; }
    .shelf-section__header, .shelf-rail { padding-inline: 17px; }
    .shelf-catalog-simple, .shelf-empty { margin-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}