.app-view-panel__body--shiguangge {
  padding: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(248, 240, 228, 0.98), rgba(243, 232, 214, 0.98));
}

.shiguangge-app-view-content {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

.shiguangge-page {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  min-height: 100%;
  padding: 0;
  box-sizing: border-box;
  background:
    linear-gradient(180deg, rgba(248, 240, 228, 0.98), rgba(243, 232, 214, 0.98));
}

.shiguangge-page[hidden] {
  display: none !important;
}

.shiguangge-header {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  min-height: 48px;
  margin: 0 10px 8px;
  padding: 4px 0 0;
  flex-shrink: 0;
}

.shiguangge-header--library {
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  background: transparent;
  border-bottom: none;
}

.shiguangge-header__placeholder {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  justify-self: end;
}

.shiguangge-title {
  position: static;
  transform: none;
  text-align: center;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 2px;
  color: #6d421b;
  white-space: nowrap;
}

.add-book-btn,
.add-page-back-btn {
  flex-shrink: 0;
}

.add-book-btn,
.add-page-back-btn,
.shiguangge-header .back-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: rgba(132, 88, 45, 0.12);
  color: #7a4b22;
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.shiguangge-library-back-btn {
  justify-self: start;
}

.add-book-btn {
  justify-self: end;
}

.add-book-btn:hover,
.add-book-btn:active,
.add-page-back-btn:hover,
.add-page-back-btn:active,
.shiguangge-header .back-btn:hover,
.shiguangge-header .back-btn:active {
  transform: translateY(-1px);
  background: rgba(132, 88, 45, 0.18);
  color: #6a3e18;
}

.shiguangge-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 2px 6px;
  -webkit-overflow-scrolling: touch;
}

.library-card {
  flex: 1;
  min-height: 100%;
  border-radius: 24px;
  padding: 6px 8px 10px;
  background:
    linear-gradient(180deg, rgba(252, 248, 242, 0.98), rgba(244, 234, 218, 0.98));
  border: 1px solid rgba(191, 153, 109, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 8px 20px rgba(70, 40, 18, 0.1);
}

.shelf-stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 10px;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.shelf-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
  padding: 4px 8px 12px;
  min-height: 0;
  border-radius: 18px 18px 14px 14px;
  background: linear-gradient(180deg, rgba(255, 251, 245, 0.82), rgba(255, 251, 245, 0.34));
}

.shelf-row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, #a36938 0%, #7e5028 100%);
  box-shadow:
    0 5px 12px rgba(88, 54, 23, 0.12),
    inset 0 1px 0 rgba(255, 236, 207, 0.18);
}

.book-slot {
  min-height: 116px;
  position: relative;
  z-index: 1;
}

.book-card {
  position: relative;
  width: 100%;
  min-height: 116px;
  border: none;
  cursor: pointer;
  border-radius: 10px 14px 8px 8px;
  padding: 8px 6px 10px;
  color: #fff7ea;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  overflow: hidden;
  box-shadow:
    4px 8px 16px rgba(67, 39, 16, 0.14),
    inset 1px 0 0 rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 243, 221, 0.16);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.book-card:hover,
.book-card:active {
  transform: translateY(-2px);
  box-shadow:
    5px 10px 18px rgba(67, 39, 16, 0.18),
    inset 1px 0 0 rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 243, 221, 0.18);
}

.book-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent 20%, transparent 80%, rgba(0, 0, 0, 0.08)),
    repeating-linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04) 0,
      rgba(255, 255, 255, 0.04) 2px,
      transparent 2px,
      transparent 8px
    );
  pointer-events: none;
}

.book-card::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 999px;
  background: rgba(255, 239, 213, 0.42);
  pointer-events: none;
}

.book-weixin {
  background: linear-gradient(180deg, #5d7d40 0%, #476433 100%);
}

.book-zika {
  background: linear-gradient(180deg, #946088 0%, #744c6d 100%);
}

.book-letter {
  background: linear-gradient(180deg, #b07140 0%, #8f592f 100%);
}

.book-qa {
  background: linear-gradient(180deg, #996239 0%, #7a4d29 100%);
}

.book-mirror {
  background: linear-gradient(180deg, #6f5f9e 0%, #564781 100%);
}

.book-custom-amber {
  background: linear-gradient(180deg, #ab7342 0%, #87572f 100%);
}

.book-custom-green {
  background: linear-gradient(180deg, #66804d 0%, #4d6438 100%);
}

.book-custom-purple {
  background: linear-gradient(180deg, #8f699b 0%, #6e4f7b 100%);
}

.book-custom-blue {
  background: linear-gradient(180deg, #5c7f9b 0%, #46627b 100%);
}

.book-custom-red {
  background: linear-gradient(180deg, #b36a58 0%, #8f4c3f 100%);
}

.book-mark {
  font-size: 9px;
  line-height: 1;
  letter-spacing: 2px;
  color: rgba(255, 244, 226, 0.88);
}

.book-info {
  display: grid;
  gap: 4px;
}

.book-info strong {
  font-size: 12px;
  line-height: 1.2;
  color: #fff7ea;
  font-weight: 700;
  word-break: break-word;
}

.book-info span {
  font-size: 9px;
  line-height: 1.2;
  color: rgba(255, 242, 224, 0.84);
}

.shiguangge-page--add {
  padding: 10px 10px 12px;
}

.shiguangge-page--add .shiguangge-header {
  margin-left: 0;
  margin-right: 0;
  background: transparent;
  border-bottom: none;
}

.shiguangge-page--add .shiguangge-content {
  padding-top: 4px;
}

.add-book-card {
  min-height: auto;
  padding: 16px 14px 18px;
}

.add-book-form {
  display: grid;
  gap: 14px;
}

.shiguangge-page .form-field {
  display: grid;
  gap: 8px;
}

.shiguangge-page .form-field span {
  font-size: 12px;
  font-weight: 600;
  color: #7a4d29;
  letter-spacing: 0.5px;
}

.shiguangge-page .form-field input,
.shiguangge-page .form-field select {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(175, 138, 97, 0.28);
  border-radius: 14px;
  padding: 0 12px;
  font-size: 13px;
  color: #5f3a18;
  background: rgba(255, 255, 255, 0.82);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.shiguangge-page .form-field input:focus,
.shiguangge-page .form-field select:focus {
  border-color: rgba(162, 104, 49, 0.55);
  box-shadow: 0 0 0 3px rgba(180, 132, 82, 0.12);
  background: rgba(255, 255, 255, 0.96);
}

.color-input-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  align-items: center;
}

.color-input-row input[type="color"] {
  padding: 4px;
  min-height: 42px;
}

.save-book-btn {
  min-height: 42px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, #b97b47 0%, #995e31 100%);
  color: #fff8f1;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(108, 63, 28, 0.16);
  transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}

.save-book-btn:hover,
.save-book-btn:active {
  transform: translateY(-1px);
  box-shadow: 0 12px 20px rgba(108, 63, 28, 0.2);
}

.collection-modal.hidden,
.confirm-modal.hidden {
  display: none;
}

.collection-modal {
  position: absolute;
  inset: 0;
  z-index: 80;
  background: rgba(33, 20, 10, 0.34);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.collection-dialog {
  width: min(100%, 360px);
  max-height: min(80vh, 640px);
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(251, 246, 239, 0.99), rgba(243, 232, 214, 0.99));
  border: 1px solid rgba(182, 143, 100, 0.34);
  box-shadow: 0 20px 44px rgba(53, 31, 15, 0.24);
}

.collection-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(183, 145, 103, 0.16);
}

.collection-dialog-head strong {
  display: block;
  font-size: 17px;
  color: #6e431b;
  margin-bottom: 3px;
}

.collection-dialog-head span {
  display: block;
  font-size: 11px;
  color: #7f654a;
  line-height: 1.4;
}

.collection-dialog-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.collection-close-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: rgba(120, 79, 40, 0.1);
  color: #7c4a1d;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.collection-list {
  overflow-y: auto;
  padding: 10px 12px 14px;
  display: grid;
  gap: 8px;
  -webkit-overflow-scrolling: touch;
}

.collection-item {
  padding: 10px 11px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(193, 161, 120, 0.2);
}

.collection-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.collection-item-title-wrap {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 3px;
}

.collection-item-head strong {
  display: block;
  font-size: 12px;
  color: #7a4920;
  line-height: 1.4;
  word-break: break-word;
}

.collection-item-head span {
  display: block;
  font-size: 10px;
  color: #7d654a;
  line-height: 1.3;
  text-align: left;
}

.collection-delete-btn {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 999px;
  background: rgba(140, 87, 42, 0.1);
  color: #9a5b2a;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.16s ease, transform 0.16s ease, color 0.16s ease;
}

.collection-delete-btn:hover,
.collection-delete-btn:active {
  background: rgba(166, 82, 59, 0.16);
  color: #b34c30;
  transform: scale(1.05);
}

.collection-item-body {
  font-size: 12px;
  line-height: 1.7;
  color: #4b3524;
  white-space: pre-wrap;
  word-break: break-word;
}

.collection-item-meta {
  margin-top: 6px;
  font-size: 10px;
  line-height: 1.5;
  color: #8a6b49;
  white-space: pre-wrap;
  word-break: break-word;
}

.collection-empty {
  padding: 24px 12px;
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
  color: #7e6650;
}

.confirm-modal {
  position: absolute;
  inset: 0;
  z-index: 90;
  background: rgba(33, 20, 10, 0.38);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.confirm-dialog {
  width: min(100%, 300px);
  padding: 18px 16px 16px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(251, 246, 239, 0.99), rgba(243, 232, 214, 0.99));
  border: 1px solid rgba(182, 143, 100, 0.34);
  box-shadow: 0 18px 36px rgba(53, 31, 15, 0.22);
}

.confirm-dialog strong {
  display: block;
  font-size: 16px;
  line-height: 1.4;
  color: #6e431b;
}

.confirm-dialog p {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: #7e6650;
  word-break: break-word;
}

.confirm-actions {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.confirm-btn {
  min-height: 38px;
  border-radius: 999px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.16s ease, opacity 0.16s ease, background 0.16s ease;
}

.confirm-btn:hover,
.confirm-btn:active {
  transform: translateY(-1px);
}

.confirm-btn.secondary {
  background: rgba(121, 87, 53, 0.1);
  color: #7a4d29;
}

.confirm-btn.danger {
  background: linear-gradient(180deg, #c76e53 0%, #b8583f 100%);
  color: #fff8f3;
}