:root {
  --reader-bg: #060411;
  --reader-panel: rgba(18, 10, 30, .9);
  --reader-panel-2: rgba(255, 255, 255, .045);
  --reader-line: rgba(255, 255, 255, .11);
  --reader-ink: #fff8ef;
  --reader-muted: #c9bdd3;
  --reader-gold: #f2c96d;
  --reader-pink: #d93a97;
  --reader-purple: #7d2dd0;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--reader-ink);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 18% 10%, rgba(217, 58, 151, .16), transparent 30%),
    radial-gradient(circle at 82% 72%, rgba(242, 201, 109, .12), transparent 30%),
    linear-gradient(145deg, #080514, #120817 55%, #05030a);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

.vd-reader {
  min-height: 100vh;
  padding: 18px;
}

.reader-header {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 1fr) minmax(240px, .8fr);
  gap: 16px;
  align-items: center;
  min-height: 72px;
  margin-bottom: 14px;
  padding: 12px 16px;
  border: 1px solid var(--reader-line);
  border-radius: 24px;
  background: rgba(7, 5, 16, .78);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
  backdrop-filter: blur(22px);
}

.reader-brand,
.reader-header-actions,
.reader-breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
}

.reader-brand img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
}

.reader-brand strong,
.reader-brand small {
  display: block;
}

.reader-brand small,
.reader-breadcrumb span {
  color: var(--reader-muted);
  font-size: 12px;
}

.reader-breadcrumb {
  justify-content: center;
  min-width: 0;
}

.reader-breadcrumb strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader-header-actions {
  justify-content: flex-end;
}

.reader-icon-btn,
.reader-back,
.reader-topbar button,
.reader-bottombar button,
.reader-bottombar a,
.reader-tools button,
.reader-tools a,
.reader-page-jump button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid var(--reader-line);
  border-radius: 999px;
  color: var(--reader-ink);
  background: rgba(255, 255, 255, .06);
  cursor: pointer;
}

.reader-icon-btn {
  width: 42px;
  padding: 0;
}

.reader-back {
  padding: 0 18px;
  background: linear-gradient(135deg, rgba(125, 45, 208, .35), rgba(255, 255, 255, .06));
}

.reader-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 300px;
  gap: 14px;
  align-items: stretch;
}

.reader-sidebar,
.reader-main {
  border: 1px solid var(--reader-line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 12%, rgba(217, 58, 151, .12), transparent 32%),
    linear-gradient(145deg, rgba(20, 10, 34, .94), rgba(7, 5, 16, .96));
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  backdrop-filter: blur(18px);
}

.reader-sidebar {
  display: grid;
  align-content: start;
  gap: 22px;
  padding: 22px;
}

.reader-book-card {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.reader-book-card img {
  width: 116px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 22px 46px rgba(0, 0, 0, .48);
}

.reader-book-card h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  line-height: 1.05;
}

.reader-book-card p {
  margin: 12px 0 0;
  color: var(--reader-gold);
  font-weight: 800;
}

.reader-progress {
  display: grid;
  gap: 10px;
}

.reader-progress div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.reader-progress span,
.reader-progress small {
  color: var(--reader-muted);
}

.reader-progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .11);
}

.reader-progress-track span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--reader-pink), var(--reader-gold));
}

.reader-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--reader-gold);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.reader-index,
.reader-tools,
.reader-info {
  display: grid;
  gap: 10px;
}

.reader-index button,
.reader-tools button,
.reader-tools a {
  justify-content: space-between;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  text-align: left;
}

.reader-index button span {
  color: var(--reader-gold);
}

.reader-main {
  min-width: 0;
  padding: 18px;
}

.reader-topbar,
.reader-bottombar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .04);
}

.reader-topbar button,
.reader-page-jump button {
  padding: 0 16px;
}

.reader-page-jump {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reader-page-jump input {
  width: 72px;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  color: var(--reader-ink);
  background: rgba(0, 0, 0, .24);
  text-align: center;
}

.reader-stage {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: calc(100vh - 226px);
  min-height: 560px;
  margin: 14px 0;
  overflow: auto;
  padding: 30px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 8%, rgba(242, 201, 109, .12), transparent 30%),
    #17131d;
}

.reader-loading {
  position: absolute;
  inset: 22px;
  display: grid;
  place-items: center;
  color: var(--reader-muted);
  border: 1px dashed rgba(255, 255, 255, .14);
  border-radius: 18px;
}

#pdfCanvas {
  position: relative;
  z-index: 1;
  background: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .68);
}

.reader-bottombar {
  justify-content: center;
}

.reader-bottombar button,
.reader-bottombar a {
  min-width: 44px;
  padding: 0 14px;
}

.reader-bottombar span {
  min-width: 56px;
  text-align: center;
  font-weight: 900;
}

.reader-info {
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.reader-info p {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 2px 12px;
  align-items: center;
  margin: 0;
  padding: 10px 0;
}

.reader-info svg {
  grid-row: span 2;
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: 50%;
  color: var(--reader-gold);
  background: rgba(125, 45, 208, .18);
}

.reader-info span {
  color: var(--reader-gold);
  font-size: 12px;
  font-weight: 800;
}

.reader-info strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

body.reader-light {
  --reader-bg: #f7f0e4;
  --reader-panel: rgba(255, 255, 255, .86);
  --reader-ink: #21172a;
  --reader-muted: #66566f;
  background:
    radial-gradient(circle at 20% 10%, rgba(242, 201, 109, .24), transparent 32%),
    linear-gradient(145deg, #fff8ef, #eadfd2);
}

body.reader-light .reader-sidebar,
body.reader-light .reader-main,
body.reader-light .reader-header {
  background: rgba(255, 255, 255, .78);
}

body.reader-light .reader-stage {
  background: #efe7dc;
}

@media (max-width: 1180px) {
  .reader-layout {
    grid-template-columns: 1fr;
  }

  .reader-sidebar {
    display: none;
  }

  .reader-header {
    grid-template-columns: 1fr;
  }

  .reader-breadcrumb,
  .reader-header-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 680px) {
  .vd-reader {
    padding: 10px;
  }

  .reader-topbar {
    flex-direction: column;
  }

  .reader-topbar button,
  .reader-page-jump,
  .reader-page-jump button {
    width: 100%;
  }

  .reader-stage {
    height: calc(100vh - 280px);
    min-height: 420px;
    padding: 18px;
  }

  .reader-bottombar {
    flex-wrap: wrap;
  }
}