* {
  box-sizing: border-box;
}


body {

  margin: 0;

  font-family:
    Arial,
    "Microsoft YaHei",
    sans-serif;

  background: #f4f6f8;

  color: #222;

}


/* =========================
   顶部
========================= */

.header {

  background: #1f2937;

  color: white;

  padding: 18px 30px;

  box-shadow:
    0 2px 10px rgba(0,0,0,0.15);

}


.logo {

  display: flex;

  align-items: center;

  gap: 14px;

}


.logo-icon {

  font-size: 38px;

}


.logo h1 {

  margin: 0;

  font-size: 24px;

}


.logo p {

  margin: 4px 0 0;

  color: #cbd5e1;

  font-size: 14px;

}


/* =========================
   主体
========================= */

.container {

  display: flex;

  height: calc(100vh - 92px);

}


/* =========================
   左侧图书目录
========================= */

.sidebar {

  width: 280px;

  background: white;

  border-right: 1px solid #ddd;

  padding: 20px;

  overflow-y: auto;

}


.sidebar h2 {

  margin-top: 0;

  font-size: 18px;

}


.book-list {

  display: flex;

  flex-direction: column;

  gap: 10px;

}


.book {

  display: flex;

  align-items: center;

  gap: 12px;

  width: 100%;

  padding: 14px;

  border: 1px solid #ddd;

  border-radius: 10px;

  background: white;

  cursor: pointer;

  text-align: left;

  transition: 0.2s;

}


.book:hover {

  background: #f0f7ff;

  border-color: #3b82f6;

}


.book.active {

  background: #e8f2ff;

  border-color: #2563eb;

}


.book-icon {

  font-size: 28px;

}


.book strong {

  display: block;

  font-size: 15px;

}


.book small {

  display: block;

  margin-top: 5px;

  color: #777;

}


/* =========================
   阅读区域
========================= */

.reader-section {

  flex: 1;

  display: flex;

  flex-direction: column;

  min-width: 0;

}


.reader-header {

  background: white;

  padding: 15px 25px;

  border-bottom: 1px solid #ddd;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 20px;

}


.reader-header h2 {

  margin: 0;

  font-size: 20px;

}


.reader-header p {

  margin: 5px 0 0;

  font-size: 13px;

  color: #666;

}


.reader-buttons {

  display: flex;

  gap: 10px;

}


.reader-buttons button,
.reader-buttons a {

  border: none;

  border-radius: 7px;

  padding: 10px 14px;

  cursor: pointer;

  font-size: 14px;

  text-decoration: none;

  color: white;

  background: #2563eb;

}


.reader-buttons button:hover,
.reader-buttons a:hover {

  opacity: 0.85;

}


/* =========================
   PDF
========================= */

.pdf-container {

  flex: 1;

  background: #525659;

}


#pdfViewer {

  width: 100%;

  height: 100%;

  border: none;

}


/* =========================
   手机
========================= */

@media (max-width: 768px) {

  .container {

    flex-direction: column;

    height: auto;

  }


  .sidebar {

    width: 100%;

    border-right: none;

    border-bottom: 1px solid #ddd;

  }


  .reader-section {

    height: 80vh;

  }


  .reader-header {

    flex-direction: column;

    align-items: flex-start;

  }

}