/* X-Book.plus — добавки: тёмная тема, переключатель языка (только код), стрелки по бокам страницы, вход через X-World.
   Отдельный файл, чтобы не трогать style.css. Тема: data-theme="dark" на <html> (выбор хранится в браузере). */
.sso-button{display:flex;width:100%;margin:4px 0 10px;text-decoration:none}.sso-note{margin:0 0 16px}
.legacy-login{border-top:1px solid var(--line);padding-top:12px}.legacy-login>summary{cursor:pointer;color:var(--muted);font-size:14px;margin-bottom:10px}
#link-xworld{text-decoration:none}

/* стрелки по бокам страницы в читалке */
#page-wrap{position:relative}
.side-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:54px;height:96px;border:0;border-radius:14px;background:#172c31b8;color:#fff;font:700 46px/1 Georgia,serif;display:grid;place-items:center;box-shadow:0 8px 24px #0003;transition:background .15s,opacity .15s}
.side-nav:hover{background:#172c31}.side-nav:disabled{opacity:0;pointer-events:none}
.side-prev{left:12px}.side-next{right:12px}
@media(max-width:650px){.side-nav{width:40px;height:72px;font-size:34px;background:#172c3199}.side-prev{left:4px}.side-next{right:4px}}

/* язык интерфейса: на кнопке только код, список — по нажатию */
.lang-pick{position:relative;flex-shrink:0}
.lang-pick>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--card,#fff);font-weight:700;font-size:14px;user-select:none}
.lang-pick>summary::-webkit-details-marker{display:none}.lang-pick>summary::after{content:"▾";font-size:11px;opacity:.6}
.lang-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;display:grid;min-width:180px;padding:6px;background:var(--card,#fff);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 40px #0002}
[dir=rtl] .lang-menu{right:auto;left:0}
.lang-menu button{display:flex;gap:10px;align-items:center;border:0;background:none;color:inherit;text-align:start;padding:8px 10px;border-radius:7px;font-size:14px}
.lang-menu button b{width:26px;font-size:12px;opacity:.6}
.lang-menu button:hover,.lang-menu button[aria-current=true]{background:var(--hover,#edf1ed)}
.theme-toggle{flex-shrink:0;width:40px;height:40px;border:1px solid var(--line);border-radius:8px;background:var(--card,#fff);color:inherit;font-size:18px;display:grid;place-items:center}
.theme-toggle .i-sun{display:none}
html[data-theme=dark] .theme-toggle .i-sun{display:inline}html[data-theme=dark] .theme-toggle .i-moon{display:none}
@media(max-width:650px){.lang-pick>summary,.theme-toggle{height:36px}.theme-toggle{width:36px}}

/* ---------- тёмная тема ---------- */
html[data-theme=dark]{color-scheme:dark;--ink:#e9eef0;--muted:#9aa8ab;--line:#2c3a40;--card:#16211f;--hover:#22302f;--accent:#f07a52;color:#e9eef0;background:#0d1513}
html[data-theme=dark] body{background:#0d1513;color:#e9eef0}
html[data-theme=dark] .header,html[data-theme=dark] .reader-bar,html[data-theme=dark] .reader-controls{background:#121c1a;border-color:var(--line)}
html[data-theme=dark] .secondary,html[data-theme=dark] .search,html[data-theme=dark] .empty,html[data-theme=dark] .book-actions button,html[data-theme=dark] .book-actions a,
html[data-theme=dark] .reader-controls button,html[data-theme=dark] .reader-community,html[data-theme=dark] .rating-controls button,html[data-theme=dark] .related-card,
html[data-theme=dark] .related-option,html[data-theme=dark] #book-language-buttons button,html[data-theme=dark] dialog{background:#16211f;color:#e9eef0;border-color:var(--line)}
html[data-theme=dark] .secondary:hover,html[data-theme=dark] .book-actions button:hover{background:#22302f;color:#fff}
html[data-theme=dark] .primary{background:#e9eef0;color:#0d1513}html[data-theme=dark] .primary:hover{background:#fff}
html[data-theme=dark] .danger{background:#c2463a;color:#fff}
html[data-theme=dark] .continue{background:#16261f;border-color:#244033}html[data-theme=dark] .continue .eyebrow{color:#8fc7a0}
html[data-theme=dark] .cover-button{background:#18231f}html[data-theme=dark] .cover-button canvas{background:#22302c;box-shadow:3px 5px 14px #0008}
html[data-theme=dark] form input:not([type=file]):not([type=checkbox]),html[data-theme=dark] form select,html[data-theme=dark] form textarea,html[data-theme=dark] input,html[data-theme=dark] textarea,html[data-theme=dark] select{background:#0f1917;color:#e9eef0;border-color:#33444a}
html[data-theme=dark] .file-drop{background:#13201c;border-color:#3d5a4a}html[data-theme=dark] .file-drop.drag{background:#1a2c25}
html[data-theme=dark] #reader{background:#0a100f}
html[data-theme=dark] #epub-page{background:#1a1916;color:#e4dccb;box-shadow:0 6px 25px #0006}
html[data-theme=dark] #page{filter:invert(.88) hue-rotate(180deg) contrast(.95);box-shadow:0 8px 30px #0008}
html[data-theme=dark] .book-description,html[data-theme=dark] .reader-tab-panel{background:#121c1a;border-color:var(--line)}
html[data-theme=dark] .reader-tabs button.active,html[data-theme=dark] .reader-tabs button[aria-selected=true]{background:#e9eef0;color:#0d1513;border-color:#e9eef0}
html[data-theme=dark] .promotion-badge{background:#3a2418;color:#f5c7a8}
html[data-theme=dark] .book-stats,html[data-theme=dark] .book-info,html[data-theme=dark] #genres button{color:#a9b5b2}
html[data-theme=dark] #genres button{border-color:var(--line)}html[data-theme=dark] #genres button.active{background:#e9eef0;color:#0d1513;border-color:#e9eef0}
html[data-theme=dark] .benefits article{border-color:var(--line)}
html[data-theme=dark] .error,html[data-theme=dark] .danger-text{color:#ff8a7a}
html[data-theme=dark] #toast{background:#e9eef0;color:#0d1513}
html[data-theme=dark] .side-nav{background:#e9eef0c0;color:#0d1513}html[data-theme=dark] .side-nav:hover{background:#fff}
html[data-theme=dark] dialog::backdrop{background:#000b}
html[data-theme=dark] .book-logo,html[data-theme=dark] .footer-brand .book-logo{filter:invert(1) hue-rotate(180deg)}
html[data-theme=dark] a{color:inherit}
#ui-language.lang-pick{padding:0;border:0;background:none;max-width:none;font-size:14px}

/* ===== Account menu (same as x-game.plus): avatar button + big menu, opens only by a click ===== */
.xga{position:relative;flex-shrink:0;--xa-card:var(--card,#fff);--xa-hover:var(--hover,#edf1ed)}
.xga-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:3px 10px 3px 4px;border:1px solid var(--line);border-radius:10px;background:var(--xa-card);color:var(--ink);font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap}
.xga-btn:hover,.xga.open .xga-btn{border-color:var(--accent)}
.xga-ava{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#7a4ff0);color:#fff;font:700 13px Arial,sans-serif}
.xga-ava-big{width:46px;height:46px;font-size:19px}
.xga-n{max-width:180px;overflow:hidden;text-overflow:ellipsis}
.xga-chev{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6;transition:transform .15s;margin-inline-end:3px}
.xga.open .xga-chev{transform:rotate(225deg) translateY(-2px)}
.xga-pop{display:none;position:absolute;right:0;top:calc(100% + 8px);z-index:40;width:340px;max-width:calc(100vw - 20px);padding:10px;flex-direction:column;gap:2px;overflow-y:auto;overscroll-behavior:contain;
  background:var(--xa-card);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px #0003;text-align:start}
[dir=rtl] .xga-pop{right:auto;left:0}
.xga.open .xga-pop{display:flex}
.xga-head{display:flex;align-items:center;gap:12px;padding:6px 6px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.xga-head>div{display:grid;gap:2px;min-width:0}.xga-head b{font-size:16px;overflow-wrap:anywhere}.xga-head small{color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.xga-tag{justify-self:start;margin-top:4px;padding:2px 9px;border-radius:20px;font:600 12px Arial,sans-serif;font-style:normal;color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,transparent)}
.xga-cap{margin:4px 6px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.xga-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.xga-pop a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:14.5px;min-width:0}
.xga-pop a>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xga-pop a:hover{background:var(--xa-hover)}.xga-pop a svg{flex:none;color:var(--accent)}
.xga-grid a{border:1px solid var(--line)}.xga-grid a:hover{border-color:var(--accent)}
.xga-pop hr{border:0;border-top:1px solid var(--line);margin:6px 0;width:100%}
.xga-pop a.xga-out,.xga-pop a.xga-out svg{color:#d43650}
html[data-theme=dark] .xga-pop a.xga-out,html[data-theme=dark] .xga-pop a.xga-out svg{color:#ff7a8a}
html[data-theme=dark] .xga-pop{box-shadow:0 18px 50px #0008}
@media (max-width:760px){
  .xga-pop{position:fixed;left:10px;right:10px;top:auto;width:auto;max-width:none}
  .xga-n,.xga-chev{display:none}.xga-btn{padding:3px;width:40px;justify-content:center}
}
/* long author names do not push the dashboard wider than the screen */
.dashboard-heading>div{min-width:0}#dashboard-name,#dashboard-note{overflow-wrap:anywhere}
/* sign-in window fits narrow phones (was 480 px wide, the close button went off the screen) */
#auth-dialog{max-width:min(480px,calc(100vw - 24px))}
dialog{max-width:calc(100vw - 24px)}
/* on a computer the account button stands last on the right, as on x-game.plus */
@media (min-width:651px){.header>.xga{order:10}}
/* the account button always stands in the top-right corner, as on x-game.plus */
@media (min-width:651px){.header>.xga{order:10}}
@media (max-width:760px){.header .xga-n{display:none}.header .xga-btn{padding:3px}}
@media (max-width:650px){.header{position:relative}.header:has(>.xga:not([hidden])){padding-right:calc(5% + 52px)}.header>.xga{position:absolute;top:12px;right:5%}}
@media (max-width:650px){[dir=rtl] .header:has(>.xga:not([hidden])){padding-right:5%;padding-left:calc(5% + 52px)}[dir=rtl] .header>.xga{right:auto;left:5%}}
/* name: 16 letters at most, then "…" (cut in app.js) */
.xga-n{max-width:none;overflow:visible;text-overflow:clip}
/* "Sign in" for guests: same button style as the account button, in the top-right corner */
.header .xga-login{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 11px;border:1px solid var(--line);border-radius:10px;background:var(--card,#fff);color:var(--ink);font-weight:600;font-size:14px;white-space:nowrap;flex-shrink:0}
.header .xga-login:hover{border-color:var(--accent)}.header .xga-login svg{color:var(--accent);flex:none}
@media (min-width:651px){.header>.xga-login{order:10}}
@media (max-width:650px){.header:has(>.xga-login:not([hidden])){position:relative}
  .header:has(>.xga-login:not([hidden]))>.brand{flex:1 0 100%}
  .header>.xga-login{position:absolute;top:12px;right:5%}[dir=rtl] .header>.xga-login{right:auto;left:5%}}
@media (max-width:650px){[dir=rtl] .header:has(>.xga-login:not([hidden]))>.brand{justify-content:flex-end}}
/* account / "Sign in" button exactly as tall as the language and theme buttons next to it */
.header .xga-btn,.header .xga-login{height:40px;min-height:0;box-sizing:border-box;align-self:center}
@media (max-width:650px){.header .xga-btn,.header .xga-login{height:36px}.header .xga-btn .xga-ava{width:28px;height:28px}}