.preview-settings {
  display: grid;
  gap: .65rem;
  padding: 1.1rem;
  border: 1px solid rgba(80, 117, 112, .27);
  border-radius: 20px;
  background: rgba(235, 245, 237, .7);
  color: #315653;
}
.preview-settings[hidden] { display: none; }
.preview-settings strong { font-family: 'Playfair Display', serif; font-size: 1.1rem; }
.preview-settings small { font-size: .78rem; line-height: 1.4; }
.preview-settings p { margin: 0; font-size: .86rem; }
.preview-settings label { font-size: .78rem; font-weight: 700; }
.preview-settings input {
  width: 100%; min-width: 0; padding: .65rem .75rem;
  border: 1px solid rgba(80, 117, 112, .28); border-radius: 10px;
  background: rgba(255, 255, 255, .8); color: #315653;
  font: inherit; font-size: .8rem;
}
.preview-settings-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.preview-settings-actions button {
  padding: .6rem .8rem; border: 1px solid rgba(80, 117, 112, .27);
  border-radius: 11px; background: #fff; color: #315653;
  font: inherit; font-weight: 700; cursor: pointer;
}
.preview-settings-actions button[hidden] { display: none; }
.preview-settings-actions button:first-child { background: #5f817f; color: #fff; }
html[data-theme="night"] .preview-settings {
  background: rgba(28, 50, 63, .75); color: #edf5ee;
  border-color: rgba(228, 239, 233, .2);
}
html[data-theme="night"] .preview-settings input,
html[data-theme="night"] .preview-settings-actions button {
  background: #294651; color: #edf5ee;
}
body.preview-mode #addBookTop,
body.preview-mode #bottomAddBtn,
body.preview-mode #heroScanBtn,
body.preview-mode #heroManualBtn,
body.preview-mode #libraryAddBtn,
body.preview-mode .hero-actions,
body.preview-mode .empty-add,
body.preview-mode .detail-edit,
body.preview-mode .detail-actions,
body.preview-mode #exportBtn,
body.preview-mode .import-label,
body.preview-mode #migrateLocalBtn,
body.preview-mode #signOutBtn,
body.preview-mode #clearBtn,
body.preview-mode #previewSettings { display: none !important; }
body.preview-mode .music-url-label,
body.preview-mode .music-settings-actions { display: none !important; }
body.preview-mode #addModal,
body.preview-mode #scanModal,
body.preview-mode #bookModal { display: none !important; }
body.preview-mode .hero-copy::after {
  content: 'A read-only glimpse of our world';
  display: inline-block;
  padding: .45rem .8rem; border-radius: 100px;
  background: rgba(255,255,255,.82); color: #436b66;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
}