:root {
    --rd-transition: 0.25s ease;
    --rd-bg: #FAFAF7;
    --rd-text: #1a1a18;
    --rd-text-muted: #6b6b63;
    --rd-border: rgba(0,0,0,0.1);
    --rd-panel-bg: #FFFFFF;
    --rd-panel-border: rgba(0,0,0,0.08);
    --rd-btn-bg: transparent;
    --rd-btn-hover: rgba(0,0,0,0.06);
    --rd-btn-active-bg: #1a1a18;
    --rd-btn-active-text: #FAFAF7;
    --rd-accent: #2563eb;
    --rd-progress-bg: rgba(0,0,0,0.08);
    --rd-progress-fill: #1a1a18;
}
[data-rd-theme="sepia"] {
    --rd-bg: #F5F0E8; --rd-text: #3d2e1e; --rd-text-muted: #8a7260;
    --rd-border: rgba(100,70,40,0.12); --rd-panel-bg: #FAF6EE;
    --rd-panel-border: rgba(100,70,40,0.1); --rd-btn-hover: rgba(100,70,40,0.08);
    --rd-btn-active-bg: #3d2e1e; --rd-btn-active-text: #FAF6EE;
    --rd-accent: #7c4a1e; --rd-progress-fill: #3d2e1e;
}
[data-rd-theme="dark"] {
    --rd-bg: #141414; --rd-text: #e8e8e0; --rd-text-muted: #7a7a72;
    --rd-border: rgba(255,255,255,0.08); --rd-panel-bg: #1c1c1c;
    --rd-panel-border: rgba(255,255,255,0.06); --rd-btn-hover: rgba(255,255,255,0.07);
    --rd-btn-active-bg: #e8e8e0; --rd-btn-active-text: #141414;
    --rd-accent: #6b9fff; --rd-progress-fill: #e8e8e0;
}
 
.rd-root {
    background: var(--rd-bg);
    border-radius: 12px;
    overflow: hidden;
    transition: background var(--rd-transition);
    border: 1px solid var(--rd-panel-border);
}
.rd-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; background: var(--rd-panel-bg);
    border-bottom: 1px solid var(--rd-panel-border);
    gap: 12px; flex-wrap: wrap; transition: background var(--rd-transition);
}
.rd-topbar-left, .rd-topbar-right { display: flex; align-items: center; gap: 8px; }
 
.rd-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; padding: 6px 12px;
    border: 1px solid var(--rd-border); border-radius: 8px;
    background: var(--rd-btn-bg); color: var(--rd-text);
    font-size: 13px; font-family: inherit; cursor: pointer;
    transition: background var(--rd-transition), color var(--rd-transition);
    white-space: nowrap; line-height: 1;
}
.rd-btn:hover { background: var(--rd-btn-hover); }
.rd-btn-icon { padding: 7px 9px; }
 
.rd-sep { width: 1px; height: 20px; background: var(--rd-border); flex-shrink: 0; }
 
.rd-theme-btn {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid var(--rd-border); cursor: pointer;
    transition: border-color 0.2s, transform 0.15s; flex-shrink: 0;
}
.rd-theme-btn:hover { transform: scale(1.15); }
.rd-theme-btn.active { border-color: var(--rd-accent); border-width: 2.5px; }
.rd-theme-btn-light { background: #FAFAF7; }
.rd-theme-btn-sepia { background: #F5F0E8; }
.rd-theme-btn-dark  { background: #1c1c1c; }
 
.rd-font-size-ctrl { display: flex; align-items: center; gap: 4px; }
.rd-font-size-ctrl span {
    font-size: 12px; color: var(--rd-text-muted);
    min-width: 34px; text-align: center;
}
.rd-font-select {
    appearance: none; background: var(--rd-btn-bg);
    border: 1px solid var(--rd-border); border-radius: 8px;
    color: var(--rd-text); font-size: 13px; padding: 5px 10px; cursor: pointer;
}
.rd-font-select:hover { background: var(--rd-btn-hover); }
 
.rd-progress-bar { height: 3px; background: var(--rd-progress-bg); }
.rd-progress-fill { height: 100%; background: var(--rd-progress-fill); transition: width 0.4s ease; width: 0%; }
 
/* FIX 4: без padding, overflow:hidden — epub.js управляет шириной сам */
#readerContainer {
    overflow: hidden;
    transition: background var(--rd-transition);
}
#readerContainer iframe { border: none !important; }
 
.rd-navbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px; background: var(--rd-panel-bg);
    border-top: 1px solid var(--rd-panel-border);
    gap: 12px; transition: background var(--rd-transition);
}
.rd-nav-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px; border: 1px solid var(--rd-border); border-radius: 8px;
    background: var(--rd-btn-bg); color: var(--rd-text);
    font-size: 14px; cursor: pointer;
    transition: background var(--rd-transition), opacity 0.2s;
}
.rd-nav-btn:hover { background: var(--rd-btn-hover); }
.rd-nav-btn:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
.rd-progress-label { font-size: 13px; color: var(--rd-text-muted); white-space: nowrap; }
 
/* FIX 3: fullscreen только через CSS, без нативного requestFullscreen API */
#readerWrapper.fullscreen-mode {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; flex-direction: column;
}
#readerWrapper.fullscreen-mode .rd-root {
    flex: 1; display: flex; flex-direction: column;
    border-radius: 0; border: none; overflow: hidden;
}
#readerWrapper.fullscreen-mode #readerContainer { flex: 1; }
 
#tocDropdown {
    max-height: 50vh; overflow-y: auto;
    background: var(--rd-panel-bg) !important;
    border-color: var(--rd-panel-border) !important;
    border-radius: 10px !important; padding: 6px !important; min-width: 240px;
}
#tocDropdown .dropdown-item {
    color: var(--rd-text) !important; border-radius: 6px !important;
    font-size: 14px; padding: 8px 12px !important;
}
#tocDropdown .dropdown-item:hover { background: var(--rd-btn-hover) !important; }
 
/* FIX 1: кнопка запуска и лоадер */
#startReadingBtn {
    font-size: 17px; padding: 14px 36px; border-radius: 10px;
    border: none; background: #1a1a18; color: #FAFAF7;
    cursor: pointer; transition: opacity 0.2s, transform 0.15s;
    display: inline-flex; align-items: center; gap: 10px;
}
#startReadingBtn:hover { opacity: 0.88; transform: translateY(-1px); }
 
.reader-loader {
    align-items: center; justify-content: center;
    gap: 16px; padding: 60px 0;
    /* display управляется через style="" в HTML и JS — не через класс */
}
.spinner {
    width: 32px; height: 32px;
    border: 2px solid rgba(0,0,0,0.12); border-top-color: #1a1a18;
    border-radius: 50%; animation: rd-spin 0.75s linear infinite;
}
@keyframes rd-spin { to { transform: rotate(360deg); } }
.loader-text { font-size: 14px; color: #6b6b63; }
 
@media (max-width: 600px) {
    .rd-topbar { padding: 8px 12px; }
    .rd-navbar  { padding: 10px 14px; }
    .rd-nav-btn { padding: 8px 14px; font-size: 13px; }
    .rd-font-select { display: none; }
    .rd-sep { display: none; }
}