/* SoraKai — этап 4: самостоятельная читалка манги / манхвы. */
:root { color-scheme:dark; --reader-bg:#090d17; --reader-surface:#111827; --reader-surface2:#171e31; --reader-border:#29324a; --reader-text:#f5f5ff; --reader-muted:#9ba8c3; --reader-purple:#a879ff; --reader-blue:#6f8cff; --reader-page-width:780px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body.sk-reader { margin:0; background:var(--reader-bg); color:var(--reader-text); font-family:Manrope,system-ui,sans-serif; font-size:14px; }
button, select { font:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
button:focus-visible, a:focus-visible, select:focus-visible { outline:2px solid var(--reader-purple); outline-offset:3px; }
.reader-header { position:sticky; top:0; z-index:30; background:rgba(11,16,29,.96); border-bottom:1px solid #262e45; backdrop-filter:blur(14px); }
.reader-header-inner { min-height:66px; max-width:1380px; margin:auto; padding:8px 30px; display:flex; align-items:center; gap:20px; }
.reader-home { display:flex; align-items:center; gap:7px; white-space:nowrap; font-size:20px; font-weight:800; letter-spacing:-.8px; }
.reader-home img { display:block; width:34px; height:34px; }
.reader-home b { color:var(--reader-purple); }
.reader-separator { display:block; height:29px; width:1px; background:#39405b; }
.reader-title-link { min-width:0; display:flex; align-items:baseline; gap:10px; }
.reader-title-text { display:block; max-width:450px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:800; }
.reader-chapter-text { white-space:nowrap; color:var(--reader-muted); font-size:12px; }
.reader-back { margin-left:auto; flex:none; color:#c6aaff; font-size:12px; font-weight:800; }
.reader-back:hover,.reader-title-link:hover { color:#bf9eff; }
.reader-main { padding:26px 18px 52px; }
.reader-toolbar { margin:0 auto 25px; max-width:1170px; background:linear-gradient(150deg,#141b2d,#101625); border:1px solid var(--reader-border); border-radius:18px; padding:20px 24px 17px; box-shadow:0 16px 40px rgba(0,0,0,.16); }
.reader-toolbar-top { display:flex; gap:25px; align-items:end; justify-content:space-between; }
.reader-kicker { color:var(--reader-purple); font-size:10px; font-weight:800; letter-spacing:1.7px; }
.reader-heading h1 { font-size:26px; line-height:1.25; margin:5px 0; letter-spacing:-.7px; }
.reader-heading p { margin:0; color:var(--reader-muted); font-size:12px; }
.reader-chapter-picker { display:flex; gap:8px; flex-direction:column; min-width:190px; }
.reader-chapter-picker label { font-size:11px; color:var(--reader-muted); font-weight:700; }
.reader-chapter-picker select { width:100%; max-width:230px; background:#0d1322; border:1px solid #394565; color:#eff0ff; border-radius:10px; padding:11px 30px 11px 12px; }
.reader-controls { display:flex; flex-wrap:wrap; align-items:center; gap:18px 27px; margin-top:19px; padding-top:16px; border-top:1px solid #29324a; }
.reader-setting { display:flex; align-items:center; gap:10px; }
.reader-setting-label { color:var(--reader-muted); font-size:12px; white-space:nowrap; }
.reader-segments { display:inline-flex; padding:3px; gap:3px; background:#0b1120; border:1px solid #303a56; border-radius:11px; }
.reader-segments button { color:#abb5d2; background:transparent; border:0; border-radius:8px; font-size:11px; padding:9px 12px; font-weight:800; white-space:nowrap; }
.reader-segments button[aria-pressed=true] { background:#5335a6; color:#fff; box-shadow:0 1px 14px #7348e044; }
.reader-segments button:hover:not([aria-pressed=true]) { background:#1d2440; color:#ece9ff; }
.reader-page-counter { margin-left:auto; color:#a8b5cc; font-size:12px; }
.reader-page-counter strong { color:#d5bbff; font-size:16px; padding-left:6px; }
.reader-counter-separator { color:#69758f; margin:0 6px; }
.reader-images { margin:0 auto; width:min(100%,var(--reader-page-width)); background:#060911; min-height:200px; transition:width .18s ease; }
.reader-page { margin:0; padding:0; line-height:0; }
.reader-page img { display:block; width:100%; height:auto; margin:0 auto; user-select:none; }
body.reader-width-narrow { --reader-page-width:620px; }
body.reader-width-normal { --reader-page-width:780px; }
body.reader-width-wide { --reader-page-width:1050px; }
body.reader-paged .reader-page { display:none; }
body.reader-paged .reader-page.is-current { display:block; }
body.reader-paged .reader-images { background:transparent; }
body.reader-paged .reader-page img { max-height:calc(100dvh - 122px); width:auto; max-width:100%; object-fit:contain; }
.reader-page-navigation { max-width:var(--reader-page-width); margin:13px auto 0; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.reader-page-navigation[hidden] { display:none; }
.reader-page-navigation button { border:1px solid #394461; background:#161d31; color:#eee; border-radius:10px; padding:11px 18px; font-weight:800; }
.reader-page-navigation button:hover:not(:disabled) { border-color:#a879ff; background:#25203e; }
.reader-page-navigation button:disabled { opacity:.4; cursor:default; }
.reader-page-navigation span { color:#a9b4cb; font-size:12px; white-space:nowrap; }
.reader-end { text-align:center; padding:35px 15px 30px; }
.reader-end-mark { margin:auto; color:#b087ff; font-size:30px; filter:drop-shadow(0 0 10px #965cf955); }
.reader-end h2 { margin:6px 0 7px; font-size:19px; }
.reader-end p { color:var(--reader-muted); font-size:12px; }
body.reader-paged .reader-end { display:none; }
.reader-chapter-navigation { max-width:890px; margin:14px auto 0; display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.reader-btn { min-height:45px; display:inline-flex; justify-content:center; align-items:center; text-align:center; padding:10px 17px; font-size:12px; font-weight:800; border-radius:11px; transition:background .2s ease,border-color .2s ease; }
.reader-btn-outline { border:1px solid #35415f; background:#151b2c; color:#ece9ff; }
.reader-btn-outline:hover { border-color:#9870fb; background:#26203c; }
.reader-btn-primary { border:1px solid #7545d7; background:linear-gradient(135deg,#7f42e5,#573ed6); color:#fff; }
.reader-btn-primary:hover { background:linear-gradient(135deg,#9155f1,#6a53e5); }
.reader-btn-disabled { opacity:.36; border:1px solid #30394d; background:#151b2a; cursor:default; }
.reader-empty { max-width:720px; margin:50px auto; padding:55px 28px; text-align:center; background:#111727; border:1px solid #303950; border-radius:18px; }
.reader-empty-icon { margin:auto; font-size:45px; color:#a782ff; }
.reader-empty h1,.reader-empty h2 { font-size:24px; line-height:1.25; }
.reader-empty p { color:#a7b1c9; max-width:440px; margin:10px auto 22px; line-height:1.8; }
.reader-scroll-progress { position:fixed; z-index:40; bottom:0; left:0; height:3px; width:100%; background:#141a2a; pointer-events:none; }
.reader-scroll-progress>div { height:100%; width:0; background:linear-gradient(90deg,#9a5eff,#649bfa); transition:width .1s ease; }
@media (max-width:760px) {
  .reader-header-inner { padding:10px 15px; gap:11px; min-height:59px; }
  .reader-home { font-size:17px; }
  .reader-home img { width:29px; height:29px; }
  .reader-separator,.reader-chapter-text { display:none; }
  .reader-title-link { min-width:0; flex:1; }
  .reader-title-text { max-width:100%; font-size:12px; }
  .reader-back { font-size:12px; }
  .reader-back span { display:none; }
  .reader-main { padding:14px 0 38px; }
  .reader-toolbar { border-radius:0; border-left:none; border-right:none; padding:19px 16px; margin:0 0 16px; }
  .reader-toolbar-top { flex-wrap:wrap; gap:15px; }
  .reader-heading h1 { font-size:23px; }
  .reader-chapter-picker { width:100%; }
  .reader-chapter-picker select { max-width:100%; }
  .reader-controls { gap:13px; }
  .reader-setting { width:100%; justify-content:space-between; }
  .reader-segments button { padding:8px 9px; font-size:11px; }
  .reader-page-counter { margin-left:0; }
  .reader-chapter-navigation { padding:0 14px; }
  .reader-chapter-navigation .reader-btn { flex:1 1 140px; }
  body.reader-paged .reader-page img { max-height:calc(100dvh - 170px); }
  .reader-page-navigation { padding:0 14px; }
  .reader-page-navigation button { padding:12px; }
}
@media (prefers-reduced-motion:reduce) { html {scroll-behavior:auto;} *,*::before,*::after {transition-duration:0.01ms!important;} }