* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* TEMA SOFT LAVENDER COSMIC */
body.galaxy-theme {
  background: #FFFCFF;
  background-image: none;
  background-attachment: initial;
  color: #51495D;
  padding-bottom: 80px;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
}

/* KONTROL ELEMEN TERSEMBUNYI */
.hidden { 
  display: none !important; 
  pointer-events: none !important;
}

.space-y-2 > * + * { margin-top: 8px; }
.space-y-3 > * + * { margin-top: 12px; }
.space-y-4 > * + * { margin-top: 16px; }
.space-y-6 > * + * { margin-top: 24px; }

/* HEADER SOFT LAVENDER */
.galaxy-header {
  position: sticky;
  top: 0;
  background: rgba(255,255,255,0.97);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid #E5DCEB;
  z-index: 40;
}

.logo-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-icon {
  width: 34px;
  height: 34px;
  background: #EDE2F8;
  color: #9B78C8;
  border: 1px solid #E3D5F0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: none;
}

.logo-text {
  font-weight: 800;
  font-size: 18px;
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: #51495D;
  letter-spacing: -0.5px;
}

main { padding: 16px; }

.page-header-title {
  font-size: 16px;
  font-weight: 800;
  color: #51495D;
}

.section-title {
  font-size: 15px;
  font-weight: 800;
  color: #51495D;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* SEARCH INPUT SOFT LAVENDER */
.search-container {
  position: relative;
  width: 100%;
}

.search-container i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #9B78C8;
}

.search-input {
  width: 100%;
  padding: 12px 14px 12px 42px;
  background: #FFFFFF;
  border: 1px solid #D9CDE2;
  border-radius: 14px;
  font-size: 13px;
  color: #51495D;
  outline: none;
  backdrop-filter: none;
  transition: all 0.25s;
}

.search-input::placeholder { color: #9A929F; }

.search-input:focus {
  border-color: #9B78C8;
  box-shadow: 0 0 0 3px rgba(155,120,200,0.10);
}

/* FLAT CARD */
.glass-card {
  background: #FFFFFF;
  backdrop-filter: none;
  border: 1px solid #E5DCEB;
  border-radius: 18px;
}

/* FILTER BUTTONS */
.filter-label {
  font-size: 10px;
  font-weight: 800;
  color: #9B78C8;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 6px;
}

.filter-group {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.filter-btn {
  padding: 6px 14px;
  background: #FFFFFF;
  color: #81788A;
  border: 1px solid #D9CDE2;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-btn.active {
  background: #9B78C8;
  color: white;
  border-color: transparent;
  box-shadow: none;
}

/* LAYOUT HORIZONTAL BUKU DI HOME */
.book-scroll-horizontal {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
}

.book-card-horizontal {
  min-width: 130px;
  max-width: 130px;
  flex-shrink: 0;
  scroll-snap-align: start;
  background: #FFFFFF;
  border: 1px solid #E5DCEB;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.book-card-horizontal:active {
  transform: scale(0.95);
}

/* LAYOUT GRID VERTIKAL DI EXPLORE/BOOKMARK */
.book-grid-vertical {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.book-card-vertical {
  background: #FFFFFF;
  border: 1px solid #E5DCEB;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s;
  min-width: 0;
}

.book-card-vertical:active {
  transform: scale(0.96);
}

/* TEKNIK GAMBAR UNCROPPED DUAL-BLUR BACKDROP */
.uncropped-cover-container {
  position: relative;
  width: 100%;
  height: 160px;
  border-radius: 12px;
  overflow: hidden;
  background: #FFFCFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.uncropped-cover-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none; opacity: 0;
  transform: scale(1.2);
}

.uncropped-cover-img {
  position: relative;
  z-index: 2;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

.book-badge {
  position: absolute;
  top: 8px; left: 8px;
  background: #FFFFFF;
  backdrop-filter: none;
  border: 1px solid #E3D5F0;
  color: #9B78C8;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  z-index: 3;
}

.book-info { padding: 8px; }

.book-title {
  font-size: 11px;
  font-weight: 700;
  color: #51495D;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.book-author {
  font-size: 9px;
  color: #9A929F;
  margin-top: 2px;
}

.book-stats {
  font-size: 9px;
  color: #F2C94C;
  font-weight: 700;
  margin-top: 6px;
}

/* CAROUSEL BANNER UNCROPPED SOFT LAVENDER WITH TOUCH SWIPE */
.banner-carousel-wrapper {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #E3D5F0;
  box-shadow: 0 4px 16px rgba(91,67,110,0.055);
  background: #FFFFFF;
  touch-action: pan-y;
}

.banner-slider {
  display: flex;
  transition: transform 0.4s ease-in-out;
  width: 100%;
}

.banner-item {
  min-width: 100%;
  height: 170px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  user-select: none;
}

.banner-bg-blur {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(16px) opacity(0.12);
  transform: scale(1.2);
}

.banner-img-front {
  position: relative;
  z-index: 2;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,15,25,0.02) 28%, rgba(20,15,25,0.72) 100%);
  z-index: 3;
}

.banner-content {
  position: absolute;
  bottom: 12px; left: 14px; right: 14px;
  z-index: 4;
}

.banner-tag {
  background: #9B78C8;
  color: white;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 9999px;
  display: inline-block;
  margin-bottom: 4px;
}

.banner-dots {
  position: absolute;
  bottom: 12px; right: 14px;
  display: flex; gap: 6px; z-index: 5;
}

.banner-dot {
  width: 6px; height: 6px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.3);
  transition: all 0.3s;
  cursor: pointer;
}

.banner-dot.active { width: 18px; background: #9B78C8; }

/* BADGES UNTUK DASHBOARD ADMIN */
.badge-published {
  background: rgba(34, 197, 94, 0.2);
  color: #3D9B63;
  border: 1px solid rgba(34, 197, 94, 0.4);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 700;
}

.badge-draft {
  background: rgba(244, 63, 94, 0.2);
  color: #C96A77;
  border: 1px solid rgba(244, 63, 94, 0.4);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 700;
}

/* FOOTER TAB HOME */
.home-footer {
  margin-top: 32px;
  padding: 24px 16px;
  background: #FFFFFF;
  border: 1px solid rgba(168, 85, 247, 0.15);
  border-radius: 20px;
  text-align: center;
}

.footer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.footer-tagline {
  font-size: 11px;
  color: #81788A;
  line-height: 1.5;
}

.footer-badges {
  font-size: 11px;
  font-weight: 700;
  color: #9B78C8;
}

.footer-copyright {
  font-size: 10px;
  color: #81788A;
  margin-top: 8px;
}

/* HERO PROFILE CARD */
.profile-card-hero {
  background: #FFFFFF;
  backdrop-filter: none;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #D9CDE2;
}

.profile-bg-banner {
  height: 90px;
  background: #EDE2F8;
}

.profile-avatar-container {
  margin-top: -45px;
  display: flex;
  justify-content: center;
  position: relative;
}

.profile-avatar-img {
  width: 85px;
  height: 85px;
  border-radius: 50%;
  border: 4px solid #FFFCFF;
  object-fit: cover;
  box-shadow: 0 4px 16px rgba(91,67,110,0.10);
}

.profile-info-box {
  padding: 12px 16px 20px;
  text-align: center;
}

.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 16px;
}

.stat-card {
  background: #FBF7FD;
  border: 1px solid #E5DCEB;
  border-radius: 14px;
  padding: 10px 4px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.stat-card:active {
  transform: scale(0.94);
  background: rgba(168, 85, 247, 0.2);
}

.stat-value {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: #9B78C8;
}

.stat-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: #9A929F;
  margin-top: 2px;
}

/* BUTTONS SOFT LAVENDER */
.btn-galaxy-primary {
  background: #9B78C8;
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  box-shadow: none;
}

.btn-galaxy-cyan {
  background: #9B78C8;
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  box-shadow: none;
}

.btn-full {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 13px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}

/* MODAL OVERLAY & BOX */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(45,35,55,0.25);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
}

.modal-box {
  background: #FFFFFF;
  border: 1px solid #E3D5F0;
  width: 100%;
  max-width: 480px;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  padding: 20px;
  position: relative;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 -8px 30px rgba(65,48,78,0.12);
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #E5DCEB;
}

.modal-title {
  font-size: 14px;
  font-weight: 800;
  color: #9B78C8;
}

.modal-close {
  background: rgba(255,255,255,0.08);
  border: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #81788A;
  cursor: pointer;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-group label {
  font-size: 11px;
  font-weight: 700;
  color: #81788A;
  display: flex;
  justify-content: space-between;
}

.char-limit-badge {
  font-size: 10px;
  color: #9B78C8;
}

.form-input {
  width: 100%;
  padding: 10px 14px;
  background: #FFFFFF;
  border: 1px solid #D9CDE2;
  border-radius: 12px;
  font-size: 13px;
  color: white;
  outline: none;
  box-sizing: border-box;
}

.form-input:focus { border-color: #9B78C8; box-shadow: 0 0 0 3px rgba(155,120,200,0.10); }

/* AUTH TABS */
.auth-tab {
  font-weight: 700; font-size: 14px;
  color: #81788A; border: none; background: none;
  padding-bottom: 4px; cursor: pointer;
}

.auth-tab.active {
  color: #9B78C8;
  border-bottom: 2px solid #9B78C8;
}

/* NOTIF BELL & BADGE */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.notif-bell-btn {
  position: relative;
  background: #FFFFFF;
  border: 1px solid #E5DCEB;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #81788A;
  cursor: pointer;
}

.notif-badge {
  position: absolute;
  top: 2px; right: 2px;
  width: 10px; height: 10px;
  background: #ef4444;
  border: 2px solid #FFFCFF;
  border-radius: 50%;
}

.notif-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: #FBF7FD;
  border: 1px solid rgba(168, 85, 247, 0.15);
}

.notif-item.unread {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.4);
}

.notif-avatar {
  width: 38px; height: 38px;
  border-radius: 50%; object-fit: cover;
}

.notif-text {
  font-size: 12px; color: #51495D; flex: 1;
}

.notif-time {
  font-size: 10px; color: #9A929F; display: block; margin-top: 2px;
}

.user-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  background: #FBF7FD;
  border-radius: 12px;
  border: 1px solid #E5DCEB;
}

/* BOTTOM NAV SOFT LAVENDER */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%; max-width: 480px;
  background: #FFFFFF;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: 1px solid #E5DCEB;
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  z-index: 50;
}

.nav-btn {
  background: none; border: none;
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; color: #81788A;
  font-size: 10px; font-weight: 600;
  cursor: pointer; width: 25%;
  transition: all 0.2s;
}

.nav-btn i { font-size: 18px; }

.nav-btn.active {
  color: #9B78C8;
  text-shadow: none;
}

/* TOAST SOFT LAVENDER */
.toast-container {
  position: fixed;
  top: 20px; left: 50%;
  transform: translateX(-50%) translateY(-100px);
  background: #FFFFFF;
  border: 1px solid rgba(168, 85, 247, 0.4);
  color: #51495D;
  padding: 12px 20px;
  border-radius: 9999px;
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 10px 25px rgba(65,48,78,0.12);
  z-index: 9999;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  backdrop-filter: none;
  opacity: 0; pointer-events: none;
}

.toast-container.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.preview-gallery-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-top: 8px;
}

.preview-gallery-img {
  width: 100%; height: 70px;
  object-fit: cover; border-radius: 8px;
  cursor: pointer; border: 1px solid #E3D5F0;
}

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* CUSTOM SOFT LAVENDER OPTION PILLS / CARDS */
.custom-privacy-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.privacy-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FBF7FD;
  border: 1px solid #D9CDE2;
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.privacy-pill:hover {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.5);
}

.privacy-pill input[type="radio"] {
  display: none;
}

.privacy-pill-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.privacy-pill-icon {
  font-size: 16px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(168, 85, 247, 0.2);
  color: #72558F;
}

.privacy-pill-title {
  font-size: 11px;
  font-weight: 700;
  color: #51495D;
}

.privacy-pill-desc {
  font-size: 9px;
  color: #9A929F;
  margin-top: 1px;
}

.privacy-pill-indicator {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  position: relative;
  transition: all 0.2s ease;
}

.privacy-pill.active {
  background: #F7F0FC;
  border-color: #9B78C8;
  box-shadow: none;
}

.privacy-pill.active .privacy-pill-indicator {
  border-color: #9B78C8;
  background: #9B78C8;
  box-shadow: inset 0 0 0 3px #FFFFFF;
}

.privacy-pill.active .privacy-pill-icon {
  background: #9B78C8;
  color: #FFFFFF;
}

/* ==========================================================
   FIKSIVERSE — INLINE/DYNAMIC UI POLISH
   Only counters styles emitted from app.js with inline style="...".
   No sizing, DOM, IDs, classes, event handlers or data are changed.
   ========================================================== */

:root {
  --fv-bg: #FFFCFF;
  --fv-surface: #FFFFFF;
  --fv-soft: #F7F0FC;
  --fv-primary: #9B78C8;
  --fv-primary-dark: #8766B3;
  --fv-text: #51495D;
  --fv-text-2: #81788A;
  --fv-text-3: #9A929F;
  --fv-border: #E5DCEB;
  --fv-border-strong: #D9CDE2;
  --fv-star: #F2C94C;
}

/* Old inline dark/glass backgrounds used by dynamic cards. */
[style*="background:rgba(23, 15, 48"],
[style*="background: rgba(23, 15, 48"],
[style*="background:rgba(23,15,48"],
[style*="background: rgba(23,15,48"] {
  background: #FFFFFF !important;
  border-color: var(--fv-border) !important;
  box-shadow: 0 2px 10px rgba(91,67,110,0.045) !important;
}

/* Old low-contrast text emitted inline. */
[style*="color:#f8fafc"], [style*="color: #f8fafc"] { color: var(--fv-text) !important; }
[style*="color:#cbd5e1"], [style*="color: #cbd5e1"] { color: var(--fv-text-2) !important; }
[style*="color:#94a3b8"], [style*="color: #94a3b8"] { color: var(--fv-text-3) !important; }
[style*="color:#38bdf8"], [style*="color: #38bdf8"] { color: var(--fv-primary) !important; }
[style*="color:#c084fc"], [style*="color: #c084fc"] { color: var(--fv-primary) !important; }
[style*="color:#e9d5ff"], [style*="color: #e9d5ff"] { color: #72558F !important; }

/* Home mutual-user cards: white, compact and calm. */
#list-recommended-users-home > div {
  background: #FFFFFF !important;
  border: 1px solid var(--fv-border) !important;
  box-shadow: 0 2px 10px rgba(91,67,110,0.045) !important;
}
#list-recommended-users-home > div h4 { color: var(--fv-text) !important; }
#list-recommended-users-home > div p { color: var(--fv-primary) !important; }
#list-recommended-users-home > div button {
  background: var(--fv-soft) !important;
  color: #72558F !important;
  border-color: #E3D5F0 !important;
}

/* Explore user directory. */
#list-explore-users .user-item {
  background: #FFFFFF !important;
  border: 1px solid var(--fv-border) !important;
  box-shadow: 0 2px 10px rgba(91,67,110,0.045) !important;
}
#list-explore-users .user-item h4 { color: var(--fv-text) !important; }
#list-explore-users .user-item p { color: var(--fv-primary) !important; }
#list-explore-users .user-item > i { color: var(--fv-primary) !important; }

/* Profile/admin dynamic surfaces. */
#tab-profile .glass-card {
  background: #FFFFFF !important;
  border-color: var(--fv-border) !important;
  box-shadow: 0 4px 16px rgba(91,67,110,0.055) !important;
}
#btn-admin-add { background: var(--fv-primary) !important; color: #FFFFFF !important; box-shadow: none !important; }
#btn-admin-banner {
  background: var(--fv-soft) !important;
  color: #72558F !important;
  border: 1px solid #E3D5F0 !important;
  box-shadow: none !important;
}
#btn-admin-tag { background: var(--fv-primary) !important; color: #FFFFFF !important; box-shadow: none !important; }
#admin-books-list > div,
#admin-reports-list > div,
#banner-admin-list > div,
#tag-admin-list > div {
  background: #FFFFFF !important;
  border-color: var(--fv-border) !important;
}
#btn-logout {
  background: #FFF3F3 !important;
  color: #B45B64 !important;
  border-color: #F0C9CD !important;
}

/* Remove pink-blue gradients from dynamic action prompts/buttons. */
[style*="background:linear-gradient(135deg,#a855f7,#38bdf8)"],
[style*="background: linear-gradient(135deg,#a855f7,#38bdf8)"],
[style*="background:linear-gradient(135deg, #a855f7, #38bdf8)"],
[style*="background:linear-gradient(135deg, #f43f5e, #a855f7)"],
[style*="background:linear-gradient(135deg,#f43f5e,#a855f7)"] {
  background: var(--fv-primary) !important;
  box-shadow: none !important;
}

#list-explore > div[style*="border: 1px dashed"] {
  background: var(--fv-soft) !important;
  border-color: #CDB8DF !important;
}
#list-explore > div[style*="border: 1px dashed"] h5 { color: var(--fv-text) !important; }
#list-explore > div[style*="border: 1px dashed"] p { color: var(--fv-text-2) !important; }

/* FAQ: all cards remain white; the instruction inset is soft lavender, never grey. */
#modal-faq .glass-card {
  background: #FFFFFF !important;
  border: 1px solid var(--fv-border) !important;
  box-shadow: none !important;
}
#modal-faq h4 { color: var(--fv-text) !important; }
#modal-faq p, #modal-faq li, #modal-faq ol { color: var(--fv-text-2) !important; }
#modal-faq b { color: var(--fv-text) !important; }
#modal-faq div[style*="background: rgba(0,0,0,0.25)"],
#modal-faq div[style*="background:rgba(0,0,0,0.25)"],
#modal-faq div[style*="background: rgba(0, 0, 0, 0.25)"],
#modal-faq div[style*="background:rgba(0, 0, 0, 0.25)"] {
  background: var(--fv-soft) !important;
  border-color: #E3D5F0 !important;
}
#modal-faq code { color: #72558F !important; }

/* Modal content: backdrop can blur, content cannot. */
.modal-overlay {
  background: rgba(45,35,55,0.25) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}
.modal-box {
  background: #FFFFFF !important;
  color: var(--fv-text) !important;
  border-color: var(--fv-border) !important;
  box-shadow: 0 -8px 30px rgba(65,48,78,0.12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.modal-header { border-bottom-color: var(--fv-border) !important; }
.modal-title { color: var(--fv-text) !important; }
.modal-close {
  background: #FBF5FD !important;
  border: 1px solid var(--fv-border) !important;
  color: var(--fv-text-2) !important;
}
.modal-box .form-input {
  background: #FFFFFF !important;
  color: var(--fv-text) !important;
  border-color: var(--fv-border-strong) !important;
  box-shadow: none !important;
}
.modal-box .form-input::placeholder { color: var(--fv-text-3) !important; opacity: 1 !important; }
.modal-box .form-input:focus {
  border-color: var(--fv-primary) !important;
  box-shadow: 0 0 0 3px rgba(155,120,200,0.10) !important;
}

/* Generated dropdowns are utility menus, not dark cards. */
.modal-box [style*="background:#1e1b4b"],
.modal-box [style*="background: #1e1b4b"] {
  background: #FFFFFF !important;
  border-color: var(--fv-border) !important;
  box-shadow: 0 8px 24px rgba(65,48,78,0.12) !important;
}

/* Detail modal: calm metadata, readable synopsis and thread rows. */
#detail-content h2,
#detail-content h4,
#detail-content h5 { color: var(--fv-text) !important; }
#detail-content p { color: var(--fv-text-2) !important; }
#detail-content a[style*="background:rgba(255,255,255,0.04)"],
#detail-content a[style*="background: rgba(255,255,255,0.04)"],
#detail-content a[style*="background:rgba(255, 255, 255, 0.04)"],
#detail-content a[style*="background: rgba(255, 255, 255, 0.04)"] {
  background: #FFFFFF !important;
  border-color: var(--fv-border) !important;
  color: var(--fv-text) !important;
}
#detail-content a[style*="color:#38bdf8"],
#detail-content a[style*="color: #38bdf8"] { color: var(--fv-primary) !important; }
#detail-content span[style*="background:rgba(168,85,247"],
#detail-content span[style*="background: rgba(168,85,247"],
#detail-content span[style*="background:rgba(168, 85, 247"],
#detail-content span[style*="background: rgba(168, 85, 247"] {
  background: var(--fv-soft) !important;
  border-color: #E3D5F0 !important;
  color: #72558F !important;
}
#detail-content span[style*="background:rgba(56,189,248"],
#detail-content span[style*="background: rgba(56,189,248"],
#detail-content span[style*="background:rgba(56, 189, 248"],
#detail-content span[style*="background: rgba(56, 189, 248"] {
  background: #EDF7FB !important;
  border-color: #C8E8F0 !important;
  color: #557C8C !important;
}
#detail-content button[style*="background:rgba(255,255,255,0.05)"],
#detail-content button[style*="background: rgba(255,255,255,0.05)"],
#detail-content button[style*="background:rgba(255, 255, 255, 0.05)"],
#detail-content button[style*="background: rgba(255, 255, 255, 0.05)"] {
  background: #FFFFFF !important;
  border-color: var(--fv-border) !important;
  color: var(--fv-text-2) !important;
}

/* Home footer FAQ trigger. */
.home-footer button {
  background: var(--fv-soft) !important;
  color: #72558F !important;
  border-color: #E3D5F0 !important;
  box-shadow: none !important;
}
.home-footer button i { color: var(--fv-primary) !important; }

/* Remove text blur/glow anywhere in the UI. */
.logo-text,
.page-header-title,
.section-title,
.book-title,
.book-author,
.modal-title,
.modal-box h1,
.modal-box h2,
.modal-box h3,
.modal-box h4,
.modal-box h5,
.modal-box p,
.modal-box li,
.nav-btn,
button,
input,
textarea,
select {
  text-shadow: none !important;
}


/* ==========================================================
   FIKSIVERSE — DEEP PLUM / WARM IVORY FINAL UI
   Crisp, high-contrast, no pastel haze, no dark glass surfaces.
   ========================================================== */
:root {
  --fv-bg: #FFF9F0 !important;
  --fv-surface: #FFFFFF !important;
  --fv-surface-2: #FBF6EE !important;
  --fv-primary: #6F42A5 !important;
  --fv-primary-dark: #55307F !important;
  --fv-primary-soft: #F1E8F8 !important;
  --fv-text: #35263F !important;
  --fv-text-2: #685B70 !important;
  --fv-text-3: #8D8292 !important;
  --fv-border: #D9CFDE !important;
  --fv-border-strong: #BFAFC8 !important;
  --fv-star: #E7B92F !important;
}

html, body { background: #FFF9F0 !important; }
body.galaxy-theme {
  background: #FFF9F0 !important;
  color: #35263F !important;
}

.galaxy-header {
  background: #FFFFFF !important;
  border-bottom: 1px solid #D9CFDE !important;
}
.logo-icon {
  background: #F1E8F8 !important;
  color: #6F42A5 !important;
  border: 1px solid #CBB8D6 !important;
}
.logo-text, .page-header-title, .section-title { color: #35263F !important; }

main { background: transparent !important; }

.glass-card,
.book-card-horizontal,
.book-card-vertical,
.user-item,
.home-footer,
.profile-card-hero,
#tab-profile .glass-card,
#list-explore-users .user-item,
#list-recommended-users-home > div,
#admin-books-list > div,
#admin-reports-list > div,
#banner-admin-list > div,
#tag-admin-list > div {
  background: #FFFFFF !important;
  border: 1px solid #D9CFDE !important;
  box-shadow: 0 3px 12px rgba(72, 46, 86, 0.06) !important;
}

.search-input,
.form-input,
.modal-box .form-input {
  background: #FFFFFF !important;
  color: #35263F !important;
  border: 1px solid #CBBFD0 !important;
}
.search-input::placeholder,
.form-input::placeholder,
.modal-box .form-input::placeholder { color: #958A9A !important; opacity: 1 !important; }
.search-input:focus,
.form-input:focus,
.modal-box .form-input:focus {
  border-color: #6F42A5 !important;
  box-shadow: 0 0 0 3px rgba(111,66,165,.12) !important;
}
.search-container i { color: #6F42A5 !important; }

.filter-label { color: #6F42A5 !important; }
.filter-btn {
  background: #FFFFFF !important;
  color: #62566A !important;
  border: 1px solid #CBBFD0 !important;
}
.filter-btn.active {
  background: #6F42A5 !important;
  color: #FFFFFF !important;
  border-color: #6F42A5 !important;
  box-shadow: none !important;
}

.btn-galaxy-primary,
.btn-galaxy-cyan,
#btn-admin-add,
#btn-admin-tag {
  background: #6F42A5 !important;
  color: #FFFFFF !important;
  border: 1px solid #5A3487 !important;
  box-shadow: none !important;
}
.btn-galaxy-primary:hover,
.btn-galaxy-cyan:hover,
#btn-admin-add:hover,
#btn-admin-tag:hover { background: #5A3487 !important; }

button:not(.nav-btn) {
  text-shadow: none !important;
}

/* Every visible action button gets a deliberate border. */
button:not(.nav-btn):not(.modal-close) {
  border-width: 1px !important;
  border-style: solid !important;
}

.modal-overlay {
  background: rgba(43, 31, 49, 0.30) !important;
  backdrop-filter: blur(7px) !important;
  -webkit-backdrop-filter: blur(7px) !important;
}
.modal-box {
  background: #FFFFFF !important;
  color: #35263F !important;
  border: 1px solid #D9CFDE !important;
  box-shadow: 0 -10px 35px rgba(48, 31, 58, .16) !important;
}
.modal-header { border-bottom: 1px solid #D9CFDE !important; }
.modal-title,
.modal-box h1, .modal-box h2, .modal-box h3,
.modal-box h4, .modal-box h5 { color: #35263F !important; }
.modal-box p, .modal-box li, .modal-box label { color: #685B70 !important; }
.modal-close {
  background: #FBF7FC !important;
  color: #685B70 !important;
  border: 1px solid #D9CFDE !important;
}

/* Kill legacy dark/glass inline surfaces from app.js. */
[style*="background:rgba(23, 15, 48"],
[style*="background: rgba(23, 15, 48"],
[style*="background:rgba(23,15,48"],
[style*="background: rgba(23,15,48"],
[style*="background:rgba(255,255,255,0.03)"],
[style*="background: rgba(255,255,255,0.03)"],
[style*="background:rgba(255,255,255,0.04)"],
[style*="background: rgba(255,255,255,0.04)"],
[style*="background:rgba(255,255,255,0.05)"],
[style*="background: rgba(255,255,255,0.05)"],
[style*="background:rgba(255,255,255,0.06)"],
[style*="background: rgba(255,255,255,0.06)"],
[style*="background:rgba(255,255,255,0.08)"],
[style*="background: rgba(255,255,255,0.08)"] {
  background: #FFFFFF !important;
  color: #35263F !important;
  border-color: #D9CFDE !important;
  box-shadow: none !important;
}

[style*="background:#1e1b4b"],
[style*="background: #1e1b4b"],
[style*="background:#1e1b4b;"] {
  background: #FFFFFF !important;
  border: 1px solid #CBBFD0 !important;
  box-shadow: 0 8px 24px rgba(48,31,58,.14) !important;
}

[style*="background:rgba(0,0,0,0.4)"],
[style*="background: rgba(0,0,0,0.4)"] {
  background: #FBF7FC !important;
  border-color: #D9CFDE !important;
  color: #685B70 !important;
}

/* Legacy light text was designed for dark mode; make it readable on ivory/white. */
[style*="color:#f8fafc"], [style*="color: #f8fafc"],
[style*="color:#cbd5e1"], [style*="color: #cbd5e1"],
[style*="color:#94a3b8"], [style*="color: #94a3b8"],
[style*="color:#e9d5ff"], [style*="color: #e9d5ff"],
[style*="color:#c084fc"], [style*="color: #c084fc"],
[style*="color:#38bdf8"], [style*="color: #38bdf8"] {
  color: #685B70 !important;
}
[style*="color:#f8fafc"], [style*="color: #f8fafc"] { color: #35263F !important; }
[style*="color:#e9d5ff"], [style*="color: #e9d5ff"],
[style*="color:#c084fc"], [style*="color: #c084fc"],
[style*="color:#38bdf8"], [style*="color: #38bdf8"] { color: #6F42A5 !important; }

/* Replace old blue/cyan and pink-purple gradients with solid plum. */
[style*="linear-gradient(135deg,#a855f7,#38bdf8)"],
[style*="linear-gradient(135deg, #a855f7, #38bdf8)"],
[style*="linear-gradient(135deg,#a855f7,#6366f1)"],
[style*="linear-gradient(135deg, #a855f7, #6366f1)"],
[style*="linear-gradient(135deg,#f43f5e,#a855f7)"],
[style*="linear-gradient(135deg, #f43f5e, #a855f7)"],
[style*="linear-gradient(135deg, #0284c7, #38bdf8)"] {
  background: #6F42A5 !important;
  border-color: #5A3487 !important;
}

/* Profile hero: rich purple, not washed-out lavender. */
.profile-bg-banner {
  background: #5A3487 !important;
}
.profile-card-hero { overflow: hidden; }

/* Admin/action surfaces. */
#btn-admin-banner {
  background: #F1E8F8 !important;
  color: #5A3487 !important;
  border: 1px solid #CBB8D6 !important;
}
#btn-logout {
  background: #FFF1F1 !important;
  color: #B23B48 !important;
  border: 1px solid #E8B8BE !important;
}

/* Status colors stay intentional, but never lose their borders. */
.badge-published {
  background: #E8F7ED !important;
  color: #237A46 !important;
  border: 1px solid #9DD7B2 !important;
}
.badge-draft {
  background: #FFF0F0 !important;
  color: #B23B48 !important;
  border: 1px solid #E7B0B7 !important;
}

.notif-bell-btn {
  background: #FFFFFF !important;
  color: #6F42A5 !important;
  border: 1px solid #CBBFD0 !important;
}
.notif-item {
  background: #FFFFFF !important;
  border: 1px solid #D9CFDE !important;
}
.notif-item.unread {
  background: #F6EFF9 !important;
  border-color: #BFAFC8 !important;
}

.bottom-nav {
  background: #FFFFFF !important;
  border-top: 1px solid #D9CFDE !important;
}
.nav-btn { color: #776C7D !important; }
.nav-btn.active { color: #6F42A5 !important; }

.toast-container {
  background: #FFFFFF !important;
  color: #35263F !important;
  border: 1px solid #BFAFC8 !important;
}

/* Footer should never become a grey/dark slab. */
.home-footer {
  background: #FFFFFF !important;
  border: 1px solid #D9CFDE !important;
}
.footer-tagline, .footer-copyright { color: #776C7D !important; }
.footer-badges { color: #6F42A5 !important; }
.home-footer button {
  background: #F1E8F8 !important;
  color: #5A3487 !important;
  border: 1px solid #CBB8D6 !important;
}

/* Detail modal: readable white surfaces and crisp action states. */
#detail-content h2, #detail-content h4, #detail-content h5 { color: #35263F !important; }
#detail-content p { color: #685B70 !important; }
#detail-content a,
#detail-content button {
  border-width: 1px !important;
}

/* Preserve danger / success semantics while keeping the UI clean. */
[style*="background:rgba(239,68,68"],
[style*="background: rgba(239,68,68"],
[style*="background:rgba(239, 68, 68"],
[style*="background: rgba(239, 68, 68"] {
  background: #FFF0F0 !important;
  color: #B23B48 !important;
  border-color: #E7B0B7 !important;
}
[style*="background:rgba(34,197,94"],
[style*="background: rgba(34,197,94"],
[style*="background:rgba(34, 197, 94"],
[style*="background: rgba(34, 197, 94"] {
  background: #E8F7ED !important;
  color: #237A46 !important;
  border-color: #9DD7B2 !important;
}

/* Gold recommendation remains distinct from the purple system. */
[style*="#fbbf24"], [style*="#fde047"] {
  color: #A97800 !important;
}

/* Prevent accidental grey overlays on normal content. */
#tab-home, #tab-explore, #tab-profile, #tab-bookmarks { background: transparent !important; }

/* ==========================================================
   FINAL UI CLEANUP — crisp tabs + solid action menus
   ========================================================== */

/* Tabs are navigation controls, not bordered buttons. */
.auth-tab,
.auth-tab:not(.nav-btn),
#tab-book-single,
#explore-mode-books,
#explore-mode-users,
#sub-tab-markah,
#sub-tab-rekomendasi,
#sub-tab-karya,
#sub-tab-booklist {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  text-shadow: none !important;
}

.auth-tab.active {
  border: 0 !important;
  border-bottom: 2px solid #6F42A5 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #6F42A5 !important;
}

/* Keep inactive tabs readable without the accidental rectangular outline. */
.auth-tab:not(.active) {
  color: #6B6070 !important;
}

/* All three-dot action menus use the same clean ivory treatment. */
#book-menu-dropdown,
#user-menu-dropdown,
#my-profile-dropdown {
  background: #FFFFFF !important;
  border: 1px solid #CDBFD2 !important;
  border-radius: 14px !important;
  padding: 6px !important;
  box-shadow: 0 10px 28px rgba(53,38,63,.16) !important;
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#book-menu-dropdown > button,
#user-menu-dropdown > button,
#my-profile-dropdown > button {
  width: 100% !important;
  min-height: 38px !important;
  background: #FFFFFF !important;
  color: #35263F !important;
  border: 0 !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  text-align: left !important;
  font-weight: 700 !important;
}

#book-menu-dropdown > button:hover,
#user-menu-dropdown > button:hover,
#my-profile-dropdown > button:hover {
  background: #F3EAF8 !important;
  color: #5A3487 !important;
}

#book-menu-dropdown > button i,
#user-menu-dropdown > button i,
#my-profile-dropdown > button i {
  color: #6F42A5 !important;
}

/* Report / block actions retain a clear danger treatment. */
#book-menu-dropdown > button[onclick*="openReportModal"],
#user-menu-dropdown > button[onclick*="openReportModal"],
#my-profile-dropdown > button[onclick*="openBlockedUsersModal"] {
  color: #C74652 !important;
}

#book-menu-dropdown > button[onclick*="openReportModal"] i,
#user-menu-dropdown > button[onclick*="openReportModal"] i,
#my-profile-dropdown > button[onclick*="openBlockedUsersModal"] i {
  color: #C74652 !important;
}

#book-menu-dropdown > button[onclick*="openReportModal"]:hover,
#user-menu-dropdown > button[onclick*="openReportModal"]:hover,
#my-profile-dropdown > button[onclick*="openBlockedUsersModal"]:hover {
  background: #FFF0F1 !important;
}

/* The three-dot trigger itself should read as a small outlined control. */
#book-menu-dropdown + *,
#user-menu-dropdown + *,
#my-profile-dropdown + * {
  opacity: 1 !important;
}

/* Profile three-dot trigger. */
.profile-card-hero button[title="Opsi Profil"],
#detail-content button[title="Opsi Cerita"] {
  background: #FFFFFF !important;
  color: #6F42A5 !important;
  border: 1px solid #CDBFD2 !important;
  box-shadow: 0 2px 8px rgba(53,38,63,.08) !important;
}

.profile-card-hero button[title="Opsi Profil"] i,
#detail-content button[title="Opsi Cerita"] i {
  color: #6F42A5 !important;
}

/* Don't let legacy inline hover styles make menu content transparent. */
#book-menu-dropdown button,
#user-menu-dropdown button,
#my-profile-dropdown button {
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Cleaner modal close control. */
.modal-close {
  border: 1px solid #D4C8D8 !important;
  background: #FBF8FC !important;
  box-shadow: none !important;
}

/* Consistent visible borders for actual controls, while preserving pills/tabs. */
.btn-galaxy-primary,
.btn-galaxy-cyan,
#btn-admin-add,
#btn-admin-tag,
#btn-admin-banner,
#btn-logout,
.filter-btn,
.notif-bell-btn {
  border-style: solid !important;
}

/* ==========================================================
   V8 MICRO POLISH — remove accidental rectangular borders
   and restore readable Edit controls
   ========================================================== */

/* Navigation/tab controls: clean text tabs, not outlined buttons. */
.auth-tab,
.auth-tab:hover,
.auth-tab:focus,
.auth-tab:active,
#public-tab-rec,
#public-tab-added,
#book-single-tab,
#book-multi-tab,
#tab-book-single,
#explore-mode-books,
#explore-mode-users,
#sub-tab-markah,
#sub-tab-rekomendasi,
#sub-tab-karya,
#sub-tab-booklist,
#public-tab-booklist,
#book-form-tabs button {
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.auth-tab {
  position: relative !important;
  color: #6B6070 !important;
  font-weight: 700 !important;
}

.auth-tab.active,
#public-tab-rec.active,
#public-tab-added.active {
  color: #6F42A5 !important;
  background: transparent !important;
  border: 0 !important;
}

.auth-tab.active::after {
  content: "" !important;
  display: block !important;
  height: 2px !important;
  margin-top: 6px !important;
  border-radius: 999px !important;
  background: #8B5CB5 !important;
}

/* Login/register tabs get the same treatment. */
#modal-auth .auth-tab {
  padding: 8px 2px !important;
  margin-right: 18px !important;
}

/* Every actual action button gets a deliberate, visible edge. */
.btn-galaxy-primary,
.btn-galaxy-cyan,
#btn-admin-add,
#btn-admin-tag,
#btn-admin-banner,
#btn-logout,
#btn-profile-login,
.profile-card-hero button[onclick*="openEditProfileModal"],
.profile-card-hero button[onclick*="openBookFormById"] {
  border: 1px solid #6F42A5 !important;
}

/* Edit buttons in MY PROFILE and ADMIN were using very pale inline
   indigo text, which disappears against the light theme. */
button[onclick*="openBookFormById"][style*="#c7d2fe"],
button[onclick*="openBookFormById"][style*="#c7d2fe"]:hover,
button[title="Edit Cerita"][style*="#c7d2fe"],
button[title="Edit Cerita"][style*="#c7d2fe"]:hover {
  background: #F0E6F8 !important;
  color: #5A3487 !important;
  border: 1px solid #B79BCB !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

/* If a generic disabled-looking rule hits the Edit controls, don't fade
   them: these buttons are real, clickable actions. */
button[onclick*="openBookFormById"]:not([disabled]),
button[title="Edit Cerita"]:not([disabled]) {
  opacity: 1 !important;
  filter: none !important;
}

/* Admin book rows: keep Edit readable even beside danger/status buttons. */
.glass-card button[onclick*="openBookFormById"] {
  background: #F0E6F8 !important;
  color: #5A3487 !important;
  border: 1px solid #B79BCB !important;
}

/* User/profile public tabs: no square outlines around the two choices. */
#public-tab-rec,
#public-tab-added {
  border-radius: 0 !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
  color: #6B6070 !important;
}

#public-tab-rec.active,
#public-tab-added.active {
  color: #6F42A5 !important;
}

/* Do not let browser/native focus outlines look like extra borders. */
button.auth-tab:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Menus remain solid after click / mouseout. */
#my-profile-dropdown,
#user-menu-dropdown,
#book-menu-dropdown {
  opacity: 1 !important;
  visibility: visible;
  background: #FFFFFF !important;
  color: #35263F !important;
  border: 1px solid #CDBFD2 !important;
  box-shadow: 0 10px 28px rgba(53,38,63,.16) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#my-profile-dropdown.hidden,
#user-menu-dropdown.hidden,
#book-menu-dropdown.hidden {
  visibility: hidden !important;
  pointer-events: none !important;
}

#my-profile-dropdown button,
#user-menu-dropdown button,
#book-menu-dropdown button {
  opacity: 1 !important;
  background: #FFFFFF !important;
  color: #35263F !important;
  border: 0 !important;
}

#my-profile-dropdown button:hover,
#user-menu-dropdown button:hover,
#book-menu-dropdown button:hover {
  background: #F3EAF8 !important;
  color: #5A3487 !important;
}

/* Profile action buttons: strong enough contrast without heavy outlines. */
.profile-card-hero button[onclick*="openEditProfileModal"] {
  background: #F0E6F8 !important;
  color: #5A3487 !important;
  border-color: #B79BCB !important;
}

.profile-card-hero button[onclick*="openBookFormById"] {
  background: #6F42A5 !important;
  color: #FFFFFF !important;
  border-color: #5A3487 !important;
}

/* ==========================================================
   V9 — CLEANER ADMIN / PROFILE CONTROLS
   - remove nested/double borders
   - readable banner Edit button
   - make logout row a complete, intentional outline
   - add breathing room between admin rows
   ========================================================== */

/* Admin lists: the panel provides the outer boundary; individual rows
   should not create a second wall of closely stacked borders. */
#admin-books-list,
#admin-reports-list,
#banner-admin-list,
#tag-admin-list {
  border: 0 !important;
  box-shadow: none !important;
}

#admin-books-list > div,
#admin-reports-list > div,
#banner-admin-list > div,
#tag-admin-list > div {
  border: 1px solid #DDD3E1 !important;
  border-radius: 14px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 1px 5px rgba(72,46,86,.035) !important;
}

#admin-books-list > div:last-child,
#admin-reports-list > div:last-child,
#banner-admin-list > div:last-child,
#tag-admin-list > div:last-child {
  margin-bottom: 0 !important;
}

/* Keep the admin list from touching the surrounding panel/separators. */
#admin-books-list {
  padding-top: 4px !important;
}

/* The admin section's separator should be subtle rather than another
   strong horizontal rule sitting immediately above the list. */
#tab-profile .glass-card > div[style*="border-top:1px dashed"] {
  border-top: 1px solid #E7DFEA !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
}

/* Banner management: the old inline indigo Edit style was too pale on
   the ivory theme. Target the actual button by its action, not its text. */
#banner-admin-list button[onclick*="editBanner"] {
  background: #F0E6F8 !important;
  color: #5A3487 !important;
  border: 1px solid #B79BCB !important;
  border-radius: 9px !important;
  padding: 5px 10px !important;
  min-height: 32px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

#banner-admin-list button[onclick*="editBanner"]:hover,
#banner-admin-list button[onclick*="editBanner"]:active {
  background: #E7D7F2 !important;
  color: #4E2D73 !important;
  border-color: #9F7DB8 !important;
}

/* Banner rows get a little more breathing room between thumbnail/title
   and the action controls. */
#banner-admin-list > div {
  padding: 10px 12px !important;
}

#banner-admin-list > div > div:last-child {
  gap: 8px !important;
  margin-left: 12px !important;
}

/* Logout: remove the nested glass-card outline. The button itself is the
   component, so its border should run around the FULL row. */
#tab-profile > .glass-card:has(#btn-logout) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  margin-top: 20px !important;
}

#btn-logout {
  display: flex !important;
  align-items: center !important;
  min-height: 58px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #FFF4F4 !important;
  color: #A84652 !important;
  border: 1px solid #E5BFC4 !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(168,70,82,.035) !important;
  padding: 14px 16px !important;
}

#btn-logout:hover,
#btn-logout:active {
  background: #FFEEEE !important;
  border-color: #D99DA5 !important;
  color: #963B47 !important;
}

#btn-logout i,
#btn-logout span,
#btn-logout span i {
  color: inherit !important;
}

/* Prevent the generic .glass-card border from creating a second outline
   around the admin/profile content immediately beside controls. */
#tab-profile > .glass-card:has(#admin-books-list) {
  border-color: #DDD3E1 !important;
}

/* Slightly more vertical rhythm inside admin panels. */
#tab-profile .glass-card {
  margin-bottom: 14px !important;
}

#tab-profile .glass-card:last-of-type {
  margin-bottom: 0 !important;
}



/* Progress indicator inside an owner's Booklist detail. Private by design. */
.booklist-detail-progress {
  margin-top: 7px;
}
.booklist-detail-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: #756B79;
  font-size: 9px;
  line-height: 1.25;
}
.booklist-detail-progress-head strong {
  color: #7B46A6;
  font-size: 10px;
  font-weight: 800;
}
.booklist-detail-progress-bar {
  height: 4px;
  margin-top: 4px;
  border-radius: 999px;
  background: #EEE7F1;
  overflow: hidden;
}
.booklist-detail-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8B4BB3, #B97BE1);
}

/* ==================== BOOKLIST ==================== */
.booklist-section-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.booklist-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.booklist-card {
  position:relative;
  background:#fff;
  border:1px solid #E5DCEB;
  border-radius:16px;
  padding:12px;
  box-shadow:0 4px 14px rgba(91,67,110,.04);
}
.booklist-card-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding-right:34px;
}
.booklist-title {
  font-size:13px;
  font-weight:800;
  color:#51495D;
  line-height:1.35;
}
.booklist-description {
  font-size:10px;
  color:#9A929F;
  line-height:1.45;
  margin-top:3px;
}
.booklist-meta {
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-top:8px;
}
.booklist-chip {
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 7px;
  border-radius:999px;
  background:#F6EFFA;
  border:1px solid #E3D5F0;
  color:#8668A6;
  font-size:9px;
  font-weight:700;
}
.booklist-mini-covers {
  display:flex;
  align-items:center;
  margin-top:10px;
  min-height:48px;
}
.booklist-mini-covers img {
  width:34px;
  height:46px;
  object-fit:cover;
  border-radius:6px;
  border:2px solid #fff;
  box-shadow:0 2px 7px rgba(0,0,0,.12);
  margin-left:-8px;
}
.booklist-mini-covers img:first-child { margin-left:0; }
.booklist-more-cover {
  width:34px;
  height:46px;
  margin-left:-8px;
  border-radius:6px;
  border:2px solid #fff;
  background:#EEE5F4;
  color:#80609D;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  font-weight:800;
}
.booklist-card-menu {
  position:absolute;
  top:10px;
  right:10px;
  z-index:20;
}
.booklist-menu-trigger {
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #E3D5F0;
  border-radius:50%;
  background:#FBF7FD;
  color:#76588F;
  cursor:pointer;
  font-size:15px;
  transition:all .18s ease;
}
.booklist-menu-trigger:hover,
.booklist-menu-trigger:focus-visible {
  background:#F1E6F8;
  border-color:#CBB2DE;
  outline:none;
}
.booklist-menu-dropdown {
  position:absolute;
  top:38px;
  right:0;
  width:145px;
  padding:5px;
  background:#fff;
  border:1px solid #E3D5F0;
  border-radius:12px;
  box-shadow:0 10px 28px rgba(91,67,110,.16);
  z-index:50;
}
.booklist-menu-dropdown button {
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 10px;
  border:none;
  border-radius:8px;
  background:transparent;
  color:#51495D;
  font-size:10px;
  font-weight:700;
  text-align:left;
  cursor:pointer;
}
.booklist-menu-dropdown button:hover { background:#F7F1FA; }
.booklist-menu-dropdown button.danger { color:#C96A77; }
.booklist-menu-dropdown button.danger:hover { background:#FFF1F2; }
.booklist-picker-wrap {
  background:#FBF7FD;
  border:1px solid #E5DCEB;
  border-radius:14px;
  padding:10px;
}
.booklist-picker-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.booklist-search-input { width:58%; padding:8px 10px; font-size:10px; }
.booklist-book-picker {
  max-height:290px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.booklist-book-option {
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 8px;
  border:1px solid #E5DCEB;
  border-radius:10px;
  background:#fff;
  cursor:pointer;
}
.booklist-book-option.selected { border-color:#B695D4; background:#F8F1FC; }
.booklist-book-option img {
  width:30px;
  height:40px;
  object-fit:cover;
  border-radius:5px;
  flex-shrink:0;
}
.booklist-book-option-info { min-width:0; flex:1; }
.booklist-book-option-title { font-size:10px; font-weight:800; color:#51495D; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.booklist-book-option-author { font-size:9px; color:#9A929F; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.booklist-book-option input { accent-color:#9B78C8; width:16px; height:16px; flex-shrink:0; }
.public-booklists-section {
  margin-top:10px;
  padding:10px;
  border:1px solid #E5DCEB;
  border-radius:16px;
  background:#fff;
}
.public-booklists-grid { display:grid; grid-template-columns:1fr; gap:8px; margin-top:8px; }
.booklist-view-card {
  border:1px solid #E5DCEB;
  border-radius:13px;
  padding:10px;
  background:#FBF7FD;
  cursor:pointer;
}
.booklist-view-card:hover { border-color:#C5A9DB; }
@media (min-width: 420px) {
  .booklist-grid, .public-booklists-grid { grid-template-columns:1fr 1fr; }
}

.profile-stats-grid:has(.stat-label) { }


/* ==========================================================
   BOOKLIST — clean Spotify-like picker + no accidental tab box
   ========================================================== */
.add-booklist-options {
  display:flex;
  flex-direction:column;
  gap:7px;
  max-height:46vh;
  overflow-y:auto;
}
.add-booklist-option {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:10px 11px;
  border:1px solid #E5DCEB;
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  transition:.15s ease;
}
.add-booklist-option:hover { border-color:#CDBFD2; background:#FBF7FD; }
.add-booklist-option.selected { border-color:#B695D4; background:#F8F1FC; }
.add-booklist-option input { position:absolute; opacity:0; pointer-events:none; }
.add-booklist-option-icon {
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  border-radius:9px;
  background:#F1E9F7;
  color:#7B4BA5;
  font-size:15px;
}
.add-booklist-option-info { min-width:0; flex:1; }
.add-booklist-option-info strong {
  display:block;
  color:#51495D;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.add-booklist-option-info small {
  display:block;
  margin-top:2px;
  color:#9A929F;
  font-size:9px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.add-booklist-option-check {
  width:22px;
  height:22px;
  border:1px solid #D7CBDD;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:transparent;
  flex-shrink:0;
  font-size:12px;
}
.add-booklist-option.selected .add-booklist-option-check {
  border-color:#8B5CB5;
  background:#8B5CB5;
  color:#fff;
}

/* Booklist is a text tab, exactly like Markah/Rekomendasi/Karya Saya. */
#sub-tab-booklist,
#sub-tab-booklist:hover,
#sub-tab-booklist:focus,
#sub-tab-booklist:active,
#public-tab-booklist,
#public-tab-booklist:hover,
#public-tab-booklist:focus,
#public-tab-booklist:active {
  -webkit-appearance:none !important;
  appearance:none !important;
  outline:none !important;
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}
#sub-tab-booklist.active,
#public-tab-booklist.active {
  color:#6F42A5 !important;
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}


/* FIKSIVERSE PROFESSIONAL ICON SYSTEM */
.fv-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  vertical-align: -0.12em;
  flex: 0 0 auto;
  font-size: 0.96em;
  stroke-width: 1.8;
}

.section-title .fv-icon,
.page-header-title .fv-icon,
.modal-title .fv-icon,
.nav-btn .fv-icon,
.tab-btn .fv-icon {
  color: currentColor;
}

.booklist-tab .fv-icon { color: #7C4DB3; }

.fv-icon + .fv-icon { margin-left: 2px; }

/* ==================== BOOKLIST MODAL STACKING FIX ====================
   Detail -> Tambahkan ke Booklist -> Buat Booklist
   Each nested Booklist layer must sit above the previous modal.
*/
#modal-add-book-to-booklist {
  z-index: 1100 !important;
}

#modal-booklist-form {
  z-index: 1200 !important;
}

#modal-add-book-to-booklist .modal-box,
#modal-booklist-form .modal-box {
  position: relative;
  z-index: 1;
}

/* Booklist detail: compact per-book three-dot menu */
.booklist-detail-book-card {
  position: relative;
  overflow: visible !important;
}
.booklist-detail-book-menu {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 30;
}
.booklist-detail-menu-trigger {
  width: 27px;
  height: 27px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  color: #6B3FA0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(70,42,95,.14);
}
.booklist-detail-menu-trigger:hover,
.booklist-detail-menu-trigger:focus-visible {
  background: #fff;
  transform: translateY(-1px);
}
.booklist-detail-menu-dropdown {
  position: absolute;
  top: 33px;
  right: 0;
  width: 152px;
  padding: 4px;
  border: 1px solid #E4D7EA;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(54,34,70,.18);
  z-index: 100;
}
.booklist-detail-menu-dropdown button {
  width: 100%;
  border: 0;
  background: transparent;
  color: #51495D;
  padding: 7px 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  text-align: left;
  font-size: 9.5px;
  font-weight: 700;
  cursor: pointer;
}
.booklist-detail-menu-dropdown button:hover,
.booklist-detail-menu-dropdown button:focus-visible {
  background: #F7F1FA;
}
.booklist-detail-menu-dropdown button.danger {
  color: #C96A77;
}
.booklist-detail-menu-dropdown button.danger:hover,
.booklist-detail-menu-dropdown button.danger:focus-visible {
  background: #FFF1F2;
}

/* Compact booklist form fixes */
#multi-part-section {
  min-width: 0;
  padding: 8px 12px 10px;
}
.book-parts-label {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0;
  margin: 0 !important;
  padding: 2px 0 9px;
  font-size: 11px !important;
  line-height: 1.3 !important;
}
.book-parts-label-text {
  min-width: 0;
  display: block;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  color: #5f5567 !important;
}
.book-parts-label-text i {
  font-size: 11px;
  margin-right: 3px;
}
.book-parts-label-text small {
  display: block;
  margin-top: 2px;
  font-size: 8.5px !important;
  font-weight: 600;
  color: #958A9A;
}
.book-parts-add-btn {
  flex: 0 0 auto;
  width: 88px;
  min-height: 31px;
  padding: 4px 6px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(168,85,247,0.10);
  color: #7650A0;
  border: 1px solid rgba(126,79,170,0.42);
  border-radius: 8px;
  font-size: 8.5px !important;
  line-height: 1.15 !important;
  font-weight: 800;
  cursor: pointer;
  white-space: normal;
}
.book-parts-add-btn i { font-size: 9px; }
#book-parts-container {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 3px 0 0;
}
.au-part-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.au-part-number {
  min-width: 28px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(168,85,247,0.10);
  border: 1px solid rgba(126,79,170,0.25);
  font-size: 10px;
  font-weight: 800;
  color: #6B3FA0;
}
.au-part-fields {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
  gap: 6px;
  min-width: 0;
}
.au-part-item .au-part-title,
.au-part-item .au-part-url {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 7px 10px !important;
  font-size: 9.5px !important;
}
@media (max-width: 520px) {
  .au-part-fields {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .au-part-item {
    align-items: start;
  }
}
.au-part-delete {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #E7B7BF;
  border-radius: 9px;
  background: #FFF5F6;
  color: #B85A68;
  cursor: pointer;
}
.au-part-delete:hover,
.au-part-delete:focus-visible {
  background: #FDE8EA;
  border-color: #D88B97;
  outline: none;
}
#modal-book-form .glass-card#au-specific-fields,
#modal-book-form #au-specific-fields {
  min-width: 0;
  overflow: hidden;
}
@media (max-width: 360px) {
  .book-parts-label { grid-template-columns: 1fr; }
  .book-parts-add-btn { width: 100%; }
  .au-part-item { grid-template-columns: 52px minmax(0, 1fr) 34px; gap: 5px; }
}
#modal-booklist-form[data-add-books-only="true"] .booklist-add-books-hide { display:none !important; }
#modal-booklist-form[data-add-books-only="true"] .booklist-picker-wrap { margin-top:0; }


/* ==========================================================
   PUBLIC PROFILE TABS — vertical icon / label / count
   ========================================================== */
.public-profile-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 4px;
  border-bottom: 1px solid rgba(168, 85, 247, 0.2);
  padding: 4px 4px 8px;
  margin-top: 8px;
}
.public-profile-tab {
  min-width: 0 !important;
  min-height: 68px !important;
  padding: 7px 4px 8px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  text-align: center !important;
  line-height: 1.15 !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.public-profile-tab-icon {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  line-height: 1 !important;
}
.public-profile-tab-icon .fv-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 18px !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
}
.public-profile-tab-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 26px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.12;
  white-space: normal;
}
.public-profile-tab-count {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 13px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.15;
}
.public-profile-tab.active {
  border-bottom: 2px solid #8B5CB5 !important;
}
.public-profile-tab.active .public-profile-tab-count {
  color: #7B4FC2;
}

/* Profile statistics: brighter FiksiVerse purple for better contrast. */
.profile-stats-grid .stat-value {
  color: #8B5BC7 !important;
}
.add-booklist-help {
  margin: 5px 0 13px !important;
  padding: 0 2px !important;
  font-size: 10px !important;
  line-height: 1.45 !important;
  color: #9A929F !important;
}

/* ==========================================================
   BOOKLIST SAYA — MOBILE 2-COLUMN COMPACT GRID
   Visual-only override. Tidak mengubah data/fungsi/DOM.
   ========================================================== */
#list-my-booklists.booklist-grid,
.booklist-grid#list-my-booklists {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
}

#list-my-booklists .booklist-card {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 10px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

#list-my-booklists .booklist-card-head {
  gap: 6px;
  padding-right: 28px;
  min-height: 36px;
}

#list-my-booklists .booklist-title {
  font-size: 11px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#list-my-booklists .booklist-description {
  font-size: 9px;
  line-height: 1.3;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#list-my-booklists .booklist-chip {
  flex-shrink: 0;
  padding: 2px 5px;
  font-size: 8px;
  white-space: nowrap;
}

#list-my-booklists .booklist-meta {
  margin-top: 6px;
  min-height: 20px;
  gap: 4px;
}

#list-my-booklists .booklist-mini-covers {
  margin-top: 7px;
  min-height: 46px;
  height: 46px;
  flex: 0 0 46px;
  overflow: visible;
}

#list-my-booklists .booklist-mini-covers img,
#list-my-booklists .booklist-more-cover {
  width: 32px;
  height: 44px;
}

#list-my-booklists .booklist-mini-covers img {
  margin-left: -7px;
  border-width: 2px;
}

#list-my-booklists .booklist-mini-covers img:first-child {
  margin-left: 0;
}

#list-my-booklists .booklist-more-cover {
  margin-left: -7px;
  font-size: 8px;
}

#list-my-booklists .booklist-card-menu {
  top: 8px;
  right: 8px;
}

#list-my-booklists .booklist-menu-trigger {
  width: 27px;
  height: 27px;
  font-size: 13px;
}

#list-my-booklists .booklist-menu-dropdown {
  z-index: 50;
}

/* Hindari perubahan ke Booklist publik/detail di breakpoint yang sama. */
@media (max-width: 360px) {
  #list-my-booklists.booklist-grid,
  .booklist-grid#list-my-booklists {
    gap: 8px !important;
  }

  #list-my-booklists .booklist-card {
    padding: 9px;
  }

  #list-my-booklists .booklist-card-head {
    padding-right: 25px;
  }

  #list-my-booklists .booklist-mini-covers img,
  #list-my-booklists .booklist-more-cover {
    width: 29px;
    height: 42px;
  }

  #list-my-booklists .booklist-mini-covers {
    height: 44px;
    flex-basis: 44px;
  }
}

/* ==========================================================
   BOOKLIST — FINAL COMPACT MOBILE + PROFILE CONSISTENCY
   Visual-only: tidak mengubah data, fungsi, event, atau ikon.
   ========================================================== */

/* Deskripsi Booklist memang tidak ditampilkan pada card. */
#list-my-booklists .booklist-description,
#public-booklists-container .booklist-description {
  display: none !important;
}

/* Buku Saya: 2 kolom rapat di mobile dengan tinggi mengikuti konten. */
#list-my-booklists.booklist-grid,
#list-my-booklists.booklist-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: stretch !important;
  grid-auto-rows: auto !important;
}

#list-my-booklists .booklist-card {
  height: auto !important;
  min-height: 0 !important;
  padding: 9px !important;
  border-radius: 14px !important;
  overflow: visible !important;
}

#list-my-booklists .booklist-card-head {
  min-height: 27px !important;
  padding-right: 25px !important;
  gap: 5px !important;
  align-items: center !important;
}

#list-my-booklists .booklist-title {
  font-size: 11px !important;
  line-height: 1.25 !important;
  -webkit-line-clamp: 1 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

#list-my-booklists .booklist-chip {
  padding: 2px 5px !important;
  font-size: 8px !important;
}

#list-my-booklists .booklist-meta {
  margin-top: 5px !important;
  min-height: 18px !important;
}

#list-my-booklists .booklist-mini-covers,
#public-booklists-container .booklist-mini-covers {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  height: 42px !important;
  margin-top: 5px !important;
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
  padding-right: 2px !important;
}

#list-my-booklists .booklist-mini-covers img,
#list-my-booklists .booklist-more-cover,
#public-booklists-container .booklist-mini-covers img,
#public-booklists-container .booklist-more-cover {
  width: 27px !important;
  height: 40px !important;
  flex: 0 0 27px !important;
  border-radius: 5px !important;
}

#list-my-booklists .booklist-mini-covers img,
#public-booklists-container .booklist-mini-covers img {
  margin-left: -6px !important;
}

#list-my-booklists .booklist-mini-covers img:first-child,
#public-booklists-container .booklist-mini-covers img:first-child {
  margin-left: 0 !important;
}

#list-my-booklists .booklist-more-cover,
#public-booklists-container .booklist-more-cover {
  margin-left: -6px !important;
  font-size: 8px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#list-my-booklists .booklist-card-menu {
  top: 6px !important;
  right: 6px !important;
}

#list-my-booklists .booklist-menu-trigger {
  width: 26px !important;
  height: 26px !important;
  font-size: 13px !important;
}

/* Profile Booklist: selalu mengikuti grid 2 kolom yang sama di mobile. */
#public-booklists-container.public-booklists-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: stretch !important;
  grid-auto-rows: auto !important;
  width: 100% !important;
}

#public-booklists-container .booklist-view-card {
  min-width: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 9px !important;
  border-radius: 14px !important;
  overflow: visible !important;
  background: #FFFFFF !important;
}

#public-booklists-container .booklist-title {
  font-size: 11px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#public-booklists-container .booklist-chip {
  padding: 2px 5px !important;
  font-size: 8px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

#public-booklists-container .booklist-meta {
  margin-top: 5px !important;
  min-height: 18px !important;
}

/* Desktop tetap boleh lebih lega; mobile adalah target utama. */
@media (min-width: 768px) {
  #list-my-booklists.booklist-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #public-booklists-container.public-booklists-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 360px) {
  #list-my-booklists.booklist-grid,
  #public-booklists-container.public-booklists-grid {
    gap: 7px !important;
  }

  #list-my-booklists .booklist-card,
  #public-booklists-container .booklist-view-card {
    padding: 8px !important;
  }

  #list-my-booklists .booklist-mini-covers img,
  #list-my-booklists .booklist-more-cover,
  #public-booklists-container .booklist-mini-covers img,
  #public-booklists-container .booklist-more-cover {
    width: 25px !important;
    height: 38px !important;
    flex-basis: 25px !important;
  }
}

/* ==========================================================
   FINAL MOBILE BOOKLIST POLISH — DENSE CONTENT, LESS EMPTY SPACE
   ========================================================== */
@media (max-width: 767px) {
  /* Buku Saya: make each card visually fuller without changing DOM/data. */
  #list-my-booklists.booklist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: start !important;
    grid-auto-rows: auto !important;
  }

  #list-my-booklists .booklist-card {
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 11px !important;
    border-radius: 15px !important;
  }

  #list-my-booklists .booklist-card-head {
    min-height: 32px !important;
    padding-right: 28px !important;
    gap: 6px !important;
  }

  #list-my-booklists .booklist-title {
    font-size: 13px !important;
    line-height: 1.2 !important;
    -webkit-line-clamp: 1 !important;
  }

  #list-my-booklists .booklist-chip {
    padding: 3px 7px !important;
    font-size: 9px !important;
  }

  #list-my-booklists .booklist-meta {
    margin-top: 7px !important;
    min-height: 22px !important;
    gap: 4px !important;
  }

  #list-my-booklists .booklist-meta .booklist-visibility-badge,
  #list-my-booklists .booklist-meta > span {
    font-size: 9px !important;
  }

  #list-my-booklists .booklist-mini-covers {
    min-height: 54px !important;
    height: 54px !important;
    margin-top: 7px !important;
    flex: 0 0 54px !important;
    padding-right: 1px !important;
  }

  #list-my-booklists .booklist-mini-covers img,
  #list-my-booklists .booklist-more-cover {
    width: 36px !important;
    height: 52px !important;
    flex: 0 0 36px !important;
    border-radius: 6px !important;
  }

  #list-my-booklists .booklist-mini-covers img {
    margin-left: -8px !important;
  }

  #list-my-booklists .booklist-mini-covers img:first-child {
    margin-left: 0 !important;
  }

  #list-my-booklists .booklist-more-cover {
    margin-left: -8px !important;
    font-size: 10px !important;
  }

  #list-my-booklists .booklist-card-menu {
    top: 7px !important;
    right: 7px !important;
  }

  #list-my-booklists .booklist-menu-trigger {
    width: 29px !important;
    height: 29px !important;
    font-size: 14px !important;
  }

  /* Profile: same dense 2-column cards as Buku Saya. */
  #public-booklists-container.public-booklists-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: start !important;
    grid-auto-rows: auto !important;
  }

  #public-booklists-container .booklist-view-card {
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 11px !important;
    border-radius: 15px !important;
  }

  #public-booklists-container .booklist-view-card > div:first-child {
    gap: 6px !important;
  }

  #public-booklists-container .booklist-title {
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  #public-booklists-container .booklist-chip {
    padding: 3px 7px !important;
    font-size: 9px !important;
  }

  #public-booklists-container .booklist-meta {
    margin-top: 7px !important;
    min-height: 22px !important;
  }

  #public-booklists-container .booklist-mini-covers {
    min-height: 54px !important;
    height: 54px !important;
    margin-top: 7px !important;
    padding-right: 1px !important;
  }

  #public-booklists-container .booklist-mini-covers img,
  #public-booklists-container .booklist-more-cover {
    width: 36px !important;
    height: 52px !important;
    flex: 0 0 36px !important;
    border-radius: 6px !important;
  }

  #public-booklists-container .booklist-mini-covers img {
    margin-left: -8px !important;
  }

  #public-booklists-container .booklist-mini-covers img:first-child {
    margin-left: 0 !important;
  }

  #public-booklists-container .booklist-more-cover {
    margin-left: -8px !important;
    font-size: 10px !important;
  }
}

/* Narrow phones: keep the larger visual hierarchy without clipping +N. */
@media (max-width: 360px) {
  #list-my-booklists .booklist-card,
  #public-booklists-container .booklist-view-card {
    padding: 9px !important;
  }

  #list-my-booklists .booklist-title,
  #public-booklists-container .booklist-title {
    font-size: 12px !important;
  }

  #list-my-booklists .booklist-mini-covers,
  #public-booklists-container .booklist-mini-covers {
    min-height: 50px !important;
    height: 50px !important;
  }

  #list-my-booklists .booklist-mini-covers img,
  #list-my-booklists .booklist-more-cover,
  #public-booklists-container .booklist-mini-covers img,
  #public-booklists-container .booklist-more-cover {
    width: 33px !important;
    height: 48px !important;
    flex-basis: 33px !important;
  }
}

/* ==========================================================
   LOGIN / REGISTER TABS — NO RECTANGULAR SHAPE
   ========================================================== */
#modal-auth .auth-tab,
#modal-auth .auth-tab:hover,
#modal-auth .auth-tab:focus,
#modal-auth .auth-tab:active {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 7px 2px 6px !important;
  margin: 0 20px 0 0 !important;
}

#modal-auth .auth-tab.active {
  color: #6F42A5 !important;
  border: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#modal-auth .auth-tab.active::after {
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: 2px !important;
  margin-top: 5px !important;
  border-radius: 999px !important;
  background: #8B5CB5 !important;
}

/* ==========================================================
   PUBLIC PROFILE TABS — TIGHTER ICON / LABEL / COUNT STACK
   ========================================================== */
.public-profile-tabs {
  gap: 2px !important;
  padding: 2px 2px 6px !important;
  margin-top: 5px !important;
}

.public-profile-tab {
  min-height: 58px !important;
  padding: 3px 3px 5px !important;
  gap: 1px !important;
  justify-content: center !important;
}

.public-profile-tab-icon {
  width: 18px !important;
  height: 18px !important;
  flex-basis: 18px !important;
}

.public-profile-tab-icon .fv-icon {
  width: 15px !important;
  height: 16px !important;
  font-size: 14px !important;
}

.public-profile-tab-label {
  min-height: 22px !important;
  font-size: 10px !important;
  line-height: 1.05 !important;
}

.public-profile-tab-count {
  min-height: 11px !important;
  font-size: 9px !important;
  line-height: 1 !important;
  margin-top: -1px !important;
}

/* ==========================================================
   BOOKLIST — EXTRA DENSE HORIZONTAL CARDS
   Mobile only: compact height, tighter internal spacing, no
   content overflow. Data/functions/markup are untouched.
   ========================================================== */
@media (max-width: 767px) {
  #list-my-booklists.booklist-grid,
  #public-booklists-container.public-booklists-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: start !important;
    grid-auto-rows: auto !important;
  }

  #list-my-booklists .booklist-card,
  #public-booklists-container .booklist-view-card {
    box-sizing: border-box !important;
    height: 108px !important;
    min-height: 108px !important;
    max-height: 108px !important;
    padding: 7px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  #list-my-booklists .booklist-card-head,
  #public-booklists-container .booklist-view-card > div:first-child {
    min-height: 27px !important;
    height: 27px !important;
    padding-right: 26px !important;
    gap: 4px !important;
    align-items: center !important;
    margin: 0 !important;
  }

  #list-my-booklists .booklist-title,
  #public-booklists-container .booklist-title {
    font-size: 12px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #list-my-booklists .booklist-chip,
  #public-booklists-container .booklist-chip {
    padding: 2px 5px !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  #list-my-booklists .booklist-meta,
  #public-booklists-container .booklist-meta {
    margin-top: 2px !important;
    min-height: 17px !important;
    height: 17px !important;
    gap: 3px !important;
    align-items: center !important;
  }

  #list-my-booklists .booklist-meta .booklist-visibility-badge,
  #list-my-booklists .booklist-meta > span,
  #public-booklists-container .booklist-meta .booklist-visibility-badge,
  #public-booklists-container .booklist-meta > span {
    font-size: 8px !important;
    line-height: 1 !important;
    padding: 3px 6px !important;
  }

  #list-my-booklists .booklist-mini-covers,
  #public-booklists-container .booklist-mini-covers {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    height: 42px !important;
    margin-top: 3px !important;
    padding: 0 1px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  #list-my-booklists .booklist-mini-covers img,
  #list-my-booklists .booklist-more-cover,
  #public-booklists-container .booklist-mini-covers img,
  #public-booklists-container .booklist-more-cover {
    width: 28px !important;
    height: 40px !important;
    flex: 0 0 28px !important;
    border-radius: 5px !important;
    box-sizing: border-box !important;
  }

  #list-my-booklists .booklist-mini-covers img,
  #public-booklists-container .booklist-mini-covers img {
    margin-left: -5px !important;
  }

  #list-my-booklists .booklist-mini-covers img:first-child,
  #public-booklists-container .booklist-mini-covers img:first-child {
    margin-left: 0 !important;
  }

  #list-my-booklists .booklist-more-cover,
  #public-booklists-container .booklist-more-cover {
    margin-left: -5px !important;
    font-size: 8px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #list-my-booklists .booklist-card-menu,
  #public-booklists-container .booklist-card-menu {
    top: 5px !important;
    right: 5px !important;
  }

  #list-my-booklists .booklist-menu-trigger,
  #public-booklists-container .booklist-menu-trigger {
    width: 27px !important;
    height: 27px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 360px) {
  #list-my-booklists .booklist-card,
  #public-booklists-container .booklist-view-card {
    height: 104px !important;
    min-height: 104px !important;
    max-height: 104px !important;
    padding: 6px !important;
  }

  #list-my-booklists .booklist-title,
  #public-booklists-container .booklist-title {
    font-size: 11px !important;
  }

  #list-my-booklists .booklist-mini-covers,
  #public-booklists-container .booklist-mini-covers {
    min-height: 39px !important;
    height: 39px !important;
  }

  #list-my-booklists .booklist-mini-covers img,
  #list-my-booklists .booklist-more-cover,
  #public-booklists-container .booklist-mini-covers img,
  #public-booklists-container .booklist-more-cover {
    width: 26px !important;
    height: 37px !important;
    flex-basis: 26px !important;
  }
}

/* ==========================================================
   ULTIMATE MOBILE BOOKLIST COMPACT — VERY LOW VERTICAL SPACE
   Cards stay 2-column and wide; vertical space is intentionally
   minimized so the cover row nearly touches the card bottom.
   ========================================================== */
@media (max-width: 767px) {
  #list-my-booklists.booklist-grid,
  #public-booklists-container.public-booklists-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    align-items: start !important;
    grid-auto-rows: 78px !important;
  }

  #list-my-booklists .booklist-card,
  #public-booklists-container .booklist-view-card {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;
    padding: 4px !important;
    border-radius: 13px !important;
    overflow: hidden !important;
  }

  #list-my-booklists .booklist-card-head,
  #public-booklists-container .booklist-view-card > div:first-child {
    height: 22px !important;
    min-height: 22px !important;
    margin: 0 !important;
    padding-right: 23px !important;
    gap: 3px !important;
    align-items: center !important;
  }

  #list-my-booklists .booklist-title,
  #public-booklists-container .booklist-title {
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
  }

  #list-my-booklists .booklist-chip,
  #public-booklists-container .booklist-chip {
    padding: 2px 5px !important;
    font-size: 7px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    flex: 0 0 auto !important;
  }

  #list-my-booklists .booklist-meta,
  #public-booklists-container .booklist-meta {
    height: 14px !important;
    min-height: 14px !important;
    margin-top: 1px !important;
    gap: 2px !important;
    align-items: center !important;
  }

  #list-my-booklists .booklist-meta .booklist-visibility-badge,
  #list-my-booklists .booklist-meta > span,
  #public-booklists-container .booklist-meta .booklist-visibility-badge,
  #public-booklists-container .booklist-meta > span {
    font-size: 7px !important;
    line-height: 1 !important;
    padding: 2px 5px !important;
    border-radius: 999px !important;
  }

  #list-my-booklists .booklist-mini-covers,
  #public-booklists-container .booklist-mini-covers {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    margin-top: 1px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    overflow: hidden !important;
  }

  #list-my-booklists .booklist-mini-covers img,
  #list-my-booklists .booklist-more-cover,
  #public-booklists-container .booklist-mini-covers img,
  #public-booklists-container .booklist-more-cover {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    flex: 0 0 24px !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
    object-fit: cover !important;
  }

  #list-my-booklists .booklist-mini-covers img,
  #public-booklists-container .booklist-mini-covers img {
    margin-left: -4px !important;
  }

  #list-my-booklists .booklist-mini-covers img:first-child,
  #public-booklists-container .booklist-mini-covers img:first-child {
    margin-left: 0 !important;
  }

  #list-my-booklists .booklist-more-cover,
  #public-booklists-container .booklist-more-cover {
    margin-left: -4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 7px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #list-my-booklists .booklist-card-menu,
  #public-booklists-container .booklist-card-menu {
    top: 4px !important;
    right: 4px !important;
  }

  #list-my-booklists .booklist-menu-trigger,
  #public-booklists-container .booklist-menu-trigger {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 360px) {
  #list-my-booklists.booklist-grid,
  #public-booklists-container.public-booklists-grid {
    gap: 6px !important;
    grid-auto-rows: 74px !important;
  }

  #list-my-booklists .booklist-card,
  #public-booklists-container .booklist-view-card {
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
    padding: 3px !important;
  }

  #list-my-booklists .booklist-mini-covers,
  #public-booklists-container .booklist-mini-covers {
    height: 31px !important;
    min-height: 31px !important;
  }

  #list-my-booklists .booklist-mini-covers img,
  #list-my-booklists .booklist-more-cover,
  #public-booklists-container .booklist-mini-covers img,
  #public-booklists-container .booklist-more-cover {
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 31px !important;
    min-height: 31px !important;
    max-height: 31px !important;
    flex-basis: 22px !important;
  }
}

/* ==========================================================
   BOOKLIST — FINAL TIGHT 2-COLUMN LANDSCAPE
   Card height follows the actual content. The cover row ends
   almost at the card bottom; no large empty area underneath.
   ========================================================== */
@media (max-width: 767px) {
  #list-my-booklists.booklist-grid,
  #public-booklists-container.public-booklists-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    grid-auto-rows: 96px !important;
    align-items: start !important;
  }

  #list-my-booklists .booklist-card,
  #public-booklists-container .booklist-view-card {
    box-sizing: border-box !important;
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
    padding: 5px !important;
    overflow: hidden !important;
  }

  #list-my-booklists .booklist-card-head,
  #public-booklists-container .booklist-view-card > div:first-child {
    height: 22px !important;
    min-height: 22px !important;
    flex: 0 0 22px !important;
    padding-right: 24px !important;
    gap: 3px !important;
    margin: 0 !important;
  }

  #list-my-booklists .booklist-title,
  #public-booklists-container .booklist-title {
    font-size: 12px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  #list-my-booklists .booklist-chip,
  #public-booklists-container .booklist-chip {
    font-size: 7px !important;
    padding: 2px 5px !important;
  }

  #list-my-booklists .booklist-meta,
  #public-booklists-container .booklist-meta {
    height: 16px !important;
    min-height: 16px !important;
    flex: 0 0 16px !important;
    margin: 1px 0 0 !important;
  }

  #list-my-booklists .booklist-meta > span,
  #list-my-booklists .booklist-meta .booklist-visibility-badge,
  #public-booklists-container .booklist-meta > span,
  #public-booklists-container .booklist-meta .booklist-visibility-badge {
    font-size: 7px !important;
    padding: 2px 5px !important;
    line-height: 1 !important;
  }

  #list-my-booklists .booklist-mini-covers,
  #public-booklists-container .booklist-mini-covers {
    height: 42px !important;
    min-height: 42px !important;
    flex: 0 0 42px !important;
    margin: 1px 0 0 !important;
    padding: 0 !important;
    align-items: flex-start !important;
    overflow: hidden !important;
  }

  #list-my-booklists .booklist-mini-covers img,
  #list-my-booklists .booklist-more-cover,
  #public-booklists-container .booklist-mini-covers img,
  #public-booklists-container .booklist-more-cover {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    flex: 0 0 32px !important;
    border-radius: 5px !important;
    box-sizing: border-box !important;
  }

  #list-my-booklists .booklist-mini-covers img,
  #public-booklists-container .booklist-mini-covers img {
    margin-left: -5px !important;
  }

  #list-my-booklists .booklist-mini-covers img:first-child,
  #public-booklists-container .booklist-mini-covers img:first-child {
    margin-left: 0 !important;
  }

  #list-my-booklists .booklist-more-cover,
  #public-booklists-container .booklist-more-cover {
    margin-left: -5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }

  #list-my-booklists .booklist-card-menu,
  #public-booklists-container .booklist-card-menu {
    top: 4px !important;
    right: 4px !important;
  }

  #list-my-booklists .booklist-menu-trigger,
  #public-booklists-container .booklist-menu-trigger {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 360px) {
  #list-my-booklists.booklist-grid,
  #public-booklists-container.public-booklists-grid {
    gap: 6px !important;
    grid-auto-rows: 92px !important;
  }

  #list-my-booklists .booklist-card,
  #public-booklists-container .booklist-view-card {
    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;
    padding: 4px !important;
  }

  #list-my-booklists .booklist-mini-covers,
  #public-booklists-container .booklist-mini-covers {
    height: 40px !important;
    min-height: 40px !important;
    flex-basis: 40px !important;
  }

  #list-my-booklists .booklist-mini-covers img,
  #list-my-booklists .booklist-more-cover,
  #public-booklists-container .booklist-mini-covers img,
  #public-booklists-container .booklist-more-cover {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    flex-basis: 30px !important;
  }
}

/* FINAL MICRO-TUNING: separate count from menu + smaller menu trigger */
@media (max-width: 767px) {
  #list-my-booklists .booklist-card-head,
  #public-booklists-container .booklist-view-card > div:first-child {
    padding-right: 30px !important;
    gap: 6px !important;
  }

  #list-my-booklists .booklist-chip,
  #public-booklists-container .booklist-chip {
    margin-right: 2px !important;
  }

  #list-my-booklists .booklist-menu-trigger,
  #public-booklists-container .booklist-menu-trigger {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    font-size: 10px !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  #list-my-booklists .booklist-card-menu,
  #public-booklists-container .booklist-card-menu {
    top: 5px !important;
    right: 5px !important;
  }
}

@media (max-width: 360px) {
  #list-my-booklists .booklist-card-head,
  #public-booklists-container .booklist-view-card > div:first-child {
    padding-right: 27px !important;
    gap: 5px !important;
  }

  #list-my-booklists .booklist-menu-trigger,
  #public-booklists-container .booklist-menu-trigger {
    width: 19px !important;
    height: 19px !important;
    min-width: 19px !important;
    font-size: 9px !important;
  }
}


/* BOOKLIST MENU FIX — dropdown must escape the compact card instead of being clipped. */
@media (max-width: 767px) {
  #list-my-booklists .booklist-card.menu-open,
  #public-booklists-container .booklist-view-card.menu-open {
    overflow: visible !important;
    z-index: 1000 !important;
  }

  #list-my-booklists .booklist-card.menu-open .booklist-card-menu,
  #public-booklists-container .booklist-view-card.menu-open .booklist-card-menu {
    z-index: 1001 !important;
  }

  #list-my-booklists .booklist-card.menu-open .booklist-menu-dropdown,
  #public-booklists-container .booklist-view-card.menu-open .booklist-menu-dropdown {
    z-index: 1002 !important;
  }

  /* Keep the tiny trigger, but give the dropdown a little breathing room. */
  #list-my-booklists .booklist-menu-dropdown,
  #public-booklists-container .booklist-menu-dropdown {
    top: 22px !important;
    right: 0 !important;
    width: 132px !important;
    max-width: calc(100vw - 28px) !important;
  }
}

/* ==========================================================
   BOOKLIST MENU — TINY PLAIN ELLIPSIS
   Keep the three-dot action compact and remove the circular
   button chrome so it never crowds/overlaps the book count.
   ========================================================== */
@media (max-width: 767px) {
  #list-my-booklists .booklist-menu-trigger,
  #public-booklists-container .booklist-menu-trigger {
    width: 16px !important;
    min-width: 16px !important;
    height: 20px !important;
    min-height: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    color: inherit !important;
    font-size: 12px !important;
    line-height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #list-my-booklists .booklist-card-menu,
  #public-booklists-container .booklist-card-menu {
    top: 5px !important;
    right: 6px !important;
  }

  #list-my-booklists .booklist-card-head,
  #public-booklists-container .booklist-view-card > div:first-child {
    padding-right: 21px !important;
    gap: 5px !important;
  }
}

@media (max-width: 360px) {
  #list-my-booklists .booklist-menu-trigger,
  #public-booklists-container .booklist-menu-trigger {
    width: 15px !important;
    min-width: 15px !important;
    height: 19px !important;
    min-height: 19px !important;
    font-size: 11px !important;
    line-height: 19px !important;
  }

  #list-my-booklists .booklist-card-menu,
  #public-booklists-container .booklist-card-menu {
    right: 5px !important;
  }

  #list-my-booklists .booklist-card-head,
  #public-booklists-container .booklist-view-card > div:first-child {
    padding-right: 20px !important;
    gap: 4px !important;
  }
}


/* FINAL BOOKLIST ACTION MENU — compact mobile dropdown
   Keep Edit/Delete/Add actions small; keep “Tambahkan Buku” on one line. */
@media (max-width: 767px) {
  #list-my-booklists .booklist-menu-dropdown,
  #public-booklists-container .booklist-menu-dropdown {
    width: 122px !important;
    max-width: 122px !important;
    padding: 3px !important;
    border-radius: 10px !important;
    top: 21px !important;
    right: -1px !important;
  }

  #list-my-booklists .booklist-menu-dropdown button,
  #public-booklists-container .booklist-menu-dropdown button {
    min-height: 28px !important;
    height: 28px !important;
    padding: 4px 7px !important;
    gap: 5px !important;
    border-radius: 7px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #list-my-booklists .booklist-menu-dropdown button i,
  #public-booklists-container .booklist-menu-dropdown button i {
    width: 13px !important;
    min-width: 13px !important;
    font-size: 11px !important;
    text-align: center !important;
  }
}

@media (max-width: 360px) {
  #list-my-booklists .booklist-menu-dropdown,
  #public-booklists-container .booklist-menu-dropdown {
    width: 118px !important;
    max-width: 118px !important;
  }

  #list-my-booklists .booklist-menu-dropdown button,
  #public-booklists-container .booklist-menu-dropdown button {
    padding: 4px 6px !important;
    gap: 4px !important;
    font-size: 8.5px !important;
  }
}


/* ==========================================================
   FIKSIVERSE — READING TRACKER UI REFRESH
   Larger, high-contrast, card-based controls matching Booklist.
   ========================================================== */
.my-books-tabs .auth-tab {
  min-width:0 !important;
  padding:9px 3px !important;
  font-size:11px !important;
  line-height:1.2 !important;
  color:#6B6070 !important;
  white-space:nowrap !important;
}
.my-books-tabs .auth-tab.active { color:#6F42A5 !important; border-bottom:2px solid #6F42A5 !important; }

.tracker-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:2px 0 4px;
}
.tracker-header-copy { min-width:0; flex:1; }
.tracker-header-title {
  color:#6F42A5 !important;
  font-size:17px !important;
  font-weight:800 !important;
  line-height:1.25;
}
.tracker-header-desc {
  color:#685B70 !important;
  font-size:12px !important;
  line-height:1.45;
  margin-top:5px;
}
.tracker-add-btn {
  flex-shrink:0;
  min-height:42px;
  padding:9px 15px !important;
  font-size:12px !important;
}
.tracker-stats {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}
.tracker-stat-card {
  min-height:76px;
  padding:12px 8px;
  border:1px solid #D9CFDE;
  border-radius:15px;
  background:#FFFFFF;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-shadow:0 3px 12px rgba(72,46,86,.05);
}
.tracker-stat-card strong { color:#6F42A5 !important; font-size:15px !important; font-weight:800 !important; }
.tracker-stat-card span { color:#776C7D !important; font-size:10px !important; margin-top:4px; }
.tracker-stat-wide { grid-column:1/-1; min-height:62px; }
.tracker-stat-wide strong { font-size:14px !important; }

.tracker-card {
  background:#FFFFFF;
  border:1px solid #D9CFDE;
  border-radius:18px;
  padding:13px;
  box-shadow:0 5px 16px rgba(72,46,86,.07);
  margin-top:10px;
}
.tracker-card-main { display:flex; gap:12px; min-width:0; }
.tracker-cover-wrap { width:84px; height:116px; flex:0 0 84px; border-radius:10px; overflow:hidden; background:#F4EDF8; }
.tracker-cover { width:100%; height:100%; object-fit:cover; display:block; }
.tracker-card-info { min-width:0; flex:1; }
.tracker-card-top { display:flex; gap:8px; justify-content:space-between; align-items:flex-start; }
.tracker-title { color:#35263F !important; font-size:14px !important; line-height:1.3; font-weight:800 !important; }
.tracker-author { color:#776C7D !important; font-size:10px !important; margin-top:4px; }
.tracker-more-btn { width:30px; height:30px; flex:0 0 30px; border:1px solid #CDBFD2 !important; background:#FFFFFF !important; color:#6F42A5 !important; border-radius:9px; display:flex; align-items:center; justify-content:center; }
.tracker-progress-label { display:flex; justify-content:space-between; gap:8px; margin-top:19px; font-size:11px; }
.tracker-progress-label strong { color:#35263F !important; font-weight:800 !important; }
.tracker-progress-label span { color:#6F42A5 !important; font-weight:800 !important; font-size:12px; }
.tracker-progress-bar { height:8px; margin-top:7px; border-radius:99px; background:#EEE6F2; overflow:hidden; }
.tracker-progress-bar span { display:block; height:100%; border-radius:99px; background:#6F42A5; }
.tracker-card-bottom { display:flex; justify-content:space-between; gap:8px; align-items:center; margin-top:9px; }
.tracker-status { padding:5px 9px; border-radius:999px; font-size:9px; font-weight:800; border:1px solid #D9CFDE; }
.tracker-status.reading { background:#F1E8F8; color:#6F42A5; border-color:#CDB8DA; }
.tracker-status.completed { background:#E8F7ED; color:#237A46; border-color:#9DD7B2; }
.tracker-status.not-started { background:#F7F3F8; color:#776C7D; }
.tracker-updated { color:#8D8292 !important; font-size:9px !important; }
.tracker-card-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.tracker-action-primary, .tracker-action-secondary { min-height:40px; border-radius:11px !important; font-size:11px !important; font-weight:800 !important; display:flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; }
.tracker-action-primary { background:#6F42A5 !important; color:#FFFFFF !important; border:1px solid #5A3487 !important; }
.tracker-action-secondary { background:#FFFFFF !important; color:#6F42A5 !important; border:1px solid #CDBFD2 !important; }
.tracker-empty { text-align:center; padding:28px 12px; border:1px dashed #CDBFD2; border-radius:16px; background:#FFFFFF; color:#776C7D; }
.tracker-empty-icon { font-size:28px; color:#6F42A5; margin-bottom:8px; }
.tracker-empty h4 { color:#35263F !important; font-size:14px !important; }
.tracker-empty p { color:#776C7D !important; font-size:11px !important; line-height:1.45; margin:5px auto 12px; max-width:280px; }

.tracker-modal-box { max-height:90vh; overflow-y:auto; }
.tracker-form { padding-top:4px; }
.tracker-form .form-group > label { color:#685B70 !important; font-size:12px !important; font-weight:800 !important; margin-bottom:3px; }
.tracker-picker-trigger {
  width:100%; min-height:56px; padding:9px 11px;
  display:flex; align-items:center; gap:10px;
  text-align:left; cursor:pointer;
  border:1px solid #CBBFD0 !important; border-radius:13px; background:#FFFFFF !important;
  color:#35263F !important;
}
.tracker-picker-trigger:active { background:#F8F1FC !important; }
.tracker-picker-trigger-icon, .tracker-choice-icon {
  width:36px; height:36px; flex:0 0 36px; display:flex; align-items:center; justify-content:center;
  border-radius:10px; background:#F1E8F8; color:#6F42A5; font-size:16px;
}
.tracker-picker-trigger-text { flex:1; min-width:0; font-size:12px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tracker-picker-chevron { color:#8D8292; }
.tracker-choice-list { display:flex; flex-direction:column; gap:8px; }
.tracker-choice-option {
  width:100%; display:flex; align-items:center; gap:10px;
  padding:10px 11px; border:1px solid #D9CFDE !important; border-radius:13px;
  background:#FFFFFF !important; color:#35263F !important; text-align:left; cursor:pointer;
}
.tracker-choice-option.active { border-color:#B695D4 !important; background:#F8F1FC !important; }
.tracker-choice-info { min-width:0; flex:1; }
.tracker-choice-info strong { display:block; color:#35263F !important; font-size:12px !important; font-weight:800 !important; }
.tracker-choice-info small { display:block; color:#776C7D !important; font-size:9px !important; margin-top:2px; }
.tracker-choice-check, .tracker-book-option-check { width:22px; height:22px; border:1px solid #D7CBDD; border-radius:50%; display:flex; align-items:center; justify-content:center; color:transparent; flex:0 0 22px; }
.tracker-choice-option.active .tracker-choice-check, .tracker-book-option.selected .tracker-book-option-check { border-color:#8B5CB5; background:#8B5CB5; color:#FFFFFF; }
.tracker-number-input { min-height:48px; font-size:13px !important; color:#35263F !important; }
.tracker-form-note { padding:10px 11px; border:1px solid #E3D5F0; border-radius:12px; background:#F8F1FC; color:#776C7D !important; font-size:10px !important; line-height:1.45; }
.tracker-save-btn { min-height:48px; font-size:13px !important; }
.tracker-delete-btn { min-height:44px; background:#FFF1F1 !important; color:#B23B48 !important; border:1px solid #E8B8BE !important; font-size:11px !important; }

.tracker-picker-modal-box { max-height:86vh; overflow:hidden; }
.tracker-book-search-wrap { position:relative; margin:12px 0 10px; }
.tracker-book-search-wrap > i { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:#6F42A5; z-index:2; }
.tracker-book-search-wrap .form-input { padding-left:38px !important; min-height:44px; }
.tracker-book-picker { max-height:58vh; overflow-y:auto; display:flex; flex-direction:column; gap:7px; padding-right:2px; }
.tracker-book-option {
  width:100%; display:flex; align-items:center; gap:10px; padding:9px;
  border:1px solid #D9CFDE !important; border-radius:13px; background:#FFFFFF !important;
  color:#35263F !important; text-align:left; cursor:pointer;
}
.tracker-book-option.selected { border-color:#B695D4 !important; background:#F8F1FC !important; }
.tracker-book-option img { width:40px; height:56px; flex:0 0 40px; object-fit:cover; border-radius:6px; }
.tracker-book-option-info { min-width:0; flex:1; }
.tracker-book-option-info strong { display:block; color:#35263F !important; font-size:12px !important; font-weight:800 !important; line-height:1.3; }
.tracker-book-option-info small { display:block; color:#776C7D !important; font-size:9px !important; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tracker-picker-loading, .tracker-picker-empty { padding:28px 10px; text-align:center; color:#776C7D; font-size:11px; display:flex; flex-direction:column; align-items:center; gap:5px; }
.tracker-picker-loading i, .tracker-picker-empty i { color:#6F42A5; font-size:22px; }
.tracker-picker-empty strong { color:#35263F; font-size:12px; }
.tracker-picker-empty span { color:#8D8292; font-size:10px; }

@media (max-width:380px) {
  .my-books-tabs .auth-tab { font-size:10px !important; }
  .tracker-cover-wrap { width:72px; height:100px; flex-basis:72px; }
  .tracker-card-actions { grid-template-columns:1fr; }
}


/* ==========================================================
   FIKSIVERSE — PROGRES NAVIGATION + CONTRAST FIX
   Four compact, evenly-spaced tabs. No overlap on mobile.
   ========================================================== */
.my-books-tabs {
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:2px !important;
  width:100% !important;
  overflow:visible !important;
  padding-bottom:7px !important;
}
.my-books-tabs .auth-tab {
  min-width:0 !important;
  width:100% !important;
  min-height:54px !important;
  padding:7px 2px 6px !important;
  margin:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  font-size:11px !important;
  line-height:1.15 !important;
  font-weight:800 !important;
  color:#5B5160 !important;
  white-space:normal !important;
  text-align:center !important;
  overflow:hidden !important;
}
.my-books-tabs .auth-tab .fv-icon,
.my-books-tabs .auth-tab i {
  display:block !important;
  font-size:15px !important;
  line-height:1 !important;
  margin:0 !important;
  flex:none !important;
}
.my-books-tabs .auth-tab.active {
  color:#6F42A5 !important;
  border-bottom:2px solid #6F42A5 !important;
  background:transparent !important;
}
.my-books-tabs .auth-tab:not(.active) {
  color:#5B5160 !important;
}

/* Strong, readable contrast for the entire Progres section. */
#sec-my-tracker,
#sec-my-tracker * {
  opacity:1 !important;
  filter:none !important;
}
#sec-my-tracker .tracker-header-title {
  color:#6F42A5 !important;
  font-size:18px !important;
  font-weight:900 !important;
}
#sec-my-tracker .tracker-header-desc {
  color:#5F5665 !important;
  font-size:13px !important;
  font-weight:500 !important;
}
#sec-my-tracker .tracker-add-btn {
  color:#FFFFFF !important;
  background:#6F42A5 !important;
  border-color:#5A3487 !important;
  font-weight:900 !important;
}
#sec-my-tracker .tracker-stat-card {
  background:#FFFFFF !important;
  border-color:#D4C5DB !important;
}
#sec-my-tracker .tracker-stat-card strong {
  color:#4B315A !important;
  font-size:16px !important;
}
#sec-my-tracker .tracker-stat-card span {
  color:#62586A !important;
  font-size:11px !important;
  font-weight:700 !important;
}
#sec-my-tracker .tracker-empty {
  background:#FFFFFF !important;
  border-color:#CDBFD2 !important;
}
#sec-my-tracker .tracker-empty h4 {
  color:#35263F !important;
  font-size:15px !important;
  font-weight:900 !important;
}
#sec-my-tracker .tracker-empty p {
  color:#62586A !important;
  font-size:12px !important;
}
#sec-my-tracker .tracker-empty-icon {
  color:#6F42A5 !important;
}

/* Modal choices: make them look like the Booklist add-book cards. */
#modal-reading-tracker .modal-title,
#modal-tracker-book-picker .modal-title {
  color:#35263F !important;
  font-size:18px !important;
  font-weight:900 !important;
}
#modal-reading-tracker .tracker-form .form-group > label {
  color:#514657 !important;
  font-size:13px !important;
  font-weight:900 !important;
}
#modal-reading-tracker .tracker-picker-trigger,
#modal-reading-tracker .tracker-choice-option,
#modal-tracker-book-picker .tracker-book-option {
  background:#FFFFFF !important;
  color:#35263F !important;
  border:1.5px solid #CDBFD2 !important;
  box-shadow:0 2px 8px rgba(72,46,86,.04) !important;
}
#modal-reading-tracker .tracker-choice-option.active,
#modal-tracker-book-picker .tracker-book-option.selected {
  background:#F4EAF9 !important;
  border-color:#8B5CB5 !important;
  box-shadow:0 0 0 2px rgba(139,92,181,.12) !important;
}
#modal-reading-tracker .tracker-choice-info strong,
#modal-tracker-book-picker .tracker-book-option-info strong {
  color:#35263F !important;
  font-size:13px !important;
  font-weight:900 !important;
}
#modal-reading-tracker .tracker-choice-info small,
#modal-tracker-book-picker .tracker-book-option-info small {
  color:#62586A !important;
  font-size:10px !important;
}
#modal-reading-tracker .tracker-picker-trigger-text {
  color:#35263F !important;
  font-size:13px !important;
  font-weight:800 !important;
}
#modal-reading-tracker .tracker-form-note {
  color:#62586A !important;
  background:#F6F0F9 !important;
}

@media (max-width:380px) {
  .my-books-tabs .auth-tab {
    min-height:52px !important;
    font-size:10px !important;
    padding-left:1px !important;
    padding-right:1px !important;
  }
  .my-books-tabs .auth-tab i { font-size:14px !important; }
}


/* ==========================================================
   FINAL PROGRES FORM FIX
   Compact choices + Booklist-style work picker.
   ========================================================== */
#modal-reading-tracker .tracker-choice-list {
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  width:100% !important;
}
#modal-reading-tracker .tracker-choice-option {
  width:100% !important;
  min-height:58px !important;
  height:58px !important;
  box-sizing:border-box !important;
  display:grid !important;
  grid-template-columns:36px minmax(0,1fr) 24px !important;
  align-items:center !important;
  gap:10px !important;
  padding:8px 11px !important;
  margin:0 !important;
  overflow:hidden !important;
  border:1px solid #D9CFDE !important;
  border-radius:12px !important;
  background:#FFFFFF !important;
  color:#35263F !important;
  text-align:left !important;
}
#modal-reading-tracker .tracker-choice-option.active {
  background:#F4EAF9 !important;
  border-color:#8B5CB5 !important;
  box-shadow:0 0 0 1px rgba(139,92,181,.12) !important;
}
#modal-reading-tracker .tracker-choice-icon {
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  border-radius:10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#F1E8F8 !important;
  color:#6F42A5 !important;
  font-size:16px !important;
}
#modal-reading-tracker .tracker-choice-info {
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  overflow:hidden !important;
}
#modal-reading-tracker .tracker-choice-info strong {
  display:block !important;
  color:#35263F !important;
  font-size:12px !important;
  line-height:1.2 !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}
#modal-reading-tracker .tracker-choice-info small {
  display:block !important;
  color:#776C7D !important;
  font-size:9px !important;
  line-height:1.2 !important;
  margin-top:3px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#modal-reading-tracker .tracker-choice-check {
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  border:1.5px solid #CDBFD2 !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:transparent !important;
  background:#FFFFFF !important;
}
#modal-reading-tracker .tracker-choice-option.active .tracker-choice-check {
  border-color:#8B5CB5 !important;
  background:#8B5CB5 !important;
  color:#FFFFFF !important;
}

/* Make the work picker visually match the Booklist picker. */
#modal-tracker-book-picker .tracker-book-picker {
  max-height:58vh !important;
  overflow-y:auto !important;
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
  padding:0 2px 2px 0 !important;
}
#modal-tracker-book-picker .tracker-book-option {
  width:100% !important;
  min-height:56px !important;
  height:56px !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:7px 8px !important;
  margin:0 !important;
  overflow:hidden !important;
  border:1px solid #E5DCEB !important;
  border-radius:10px !important;
  background:#FFFFFF !important;
  color:#51495D !important;
  text-align:left !important;
}
#modal-tracker-book-picker .tracker-book-option.selected {
  border-color:#B695D4 !important;
  background:#F8F1FC !important;
}
#modal-tracker-book-picker .tracker-book-option img {
  width:30px !important;
  height:40px !important;
  min-width:30px !important;
  min-height:40px !important;
  max-width:30px !important;
  max-height:40px !important;
  flex:0 0 30px !important;
  object-fit:cover !important;
  border-radius:5px !important;
  display:block !important;
}
#modal-tracker-book-picker .tracker-book-option-info {
  min-width:0 !important;
  flex:1 1 auto !important;
  overflow:hidden !important;
}
#modal-tracker-book-picker .tracker-book-option-info strong {
  display:block !important;
  color:#51495D !important;
  font-size:10px !important;
  line-height:1.25 !important;
  font-weight:800 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#modal-tracker-book-picker .tracker-book-option-info small {
  display:block !important;
  color:#9A929F !important;
  font-size:9px !important;
  line-height:1.2 !important;
  margin-top:2px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#modal-tracker-book-picker .tracker-book-option-check {
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  flex:0 0 16px !important;
  border:1px solid #CDBFD2 !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:transparent !important;
  background:#FFFFFF !important;
}
#modal-tracker-book-picker .tracker-book-option.selected .tracker-book-option-check {
  border-color:#8B5CB5 !important;
  background:#8B5CB5 !important;
  color:#FFFFFF !important;
}
#modal-tracker-book-picker .tracker-book-option-check i {
  font-size:9px !important;
}

/* Keep the trigger compact too. */
#modal-reading-tracker .tracker-picker-trigger {
  min-height:44px !important;
  height:44px !important;
  padding:6px 9px !important;
  border-radius:10px !important;
}
#modal-reading-tracker .tracker-picker-trigger-icon {
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  border-radius:8px !important;
  font-size:13px !important;
}
#modal-reading-tracker .tracker-picker-trigger-text {
  font-size:11px !important;
}

/* User-facing wording: always Progres, never Tracker. */


/* ==========================================================
   FIKSIVERSE — FINAL PROGRES POLISH
   1. Aesthetic rounded font across the interface.
   2. Progres tab is a clean text tab — NO surrounding box.
   3. Consistent tab typography and spacing.
   4. Strong readable contrast for Progres content + modal.
   ========================================================== */

/* Keep the active Progres tab as a simple navigation tab. */
.my-books-tabs .auth-tab,
.my-books-tabs .auth-tab:hover,
.my-books-tabs .auth-tab:focus,
.my-books-tabs .auth-tab:active,
.my-books-tabs .auth-tab.active {
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:none !important;
  background:transparent !important;
  transform:none !important;
}

.my-books-tabs .auth-tab {
  position:relative !important;
  min-height:54px !important;
  height:54px !important;
  padding:7px 2px 8px !important;
  font-family:'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size:11px !important;
  line-height:1.15 !important;
  font-weight:700 !important;
  color:#5B5160 !important;
}

.my-books-tabs .auth-tab .fv-icon,
.my-books-tabs .auth-tab i {
  font-size:15px !important;
  line-height:1 !important;
  margin:0 0 3px !important;
}

.my-books-tabs .auth-tab.active {
  color:#6F42A5 !important;
}
.my-books-tabs .auth-tab.active::after {
  content:"" !important;
  position:absolute !important;
  left:20% !important;
  right:20% !important;
  bottom:1px !important;
  height:2px !important;
  border-radius:999px !important;
  background:#7A4FB1 !important;
}

/* Uniform, readable Progres typography. */
#sec-my-tracker,
#sec-my-tracker button,
#sec-my-tracker input,
#sec-my-tracker label,
#sec-my-tracker span,
#sec-my-tracker strong,
#sec-my-tracker h4,
#sec-my-tracker p,
#modal-reading-tracker,
#modal-reading-tracker button,
#modal-reading-tracker input,
#modal-reading-tracker label,
#modal-reading-tracker span,
#modal-reading-tracker strong,
#modal-reading-tracker small,
#modal-tracker-book-picker,
#modal-tracker-book-picker button,
#modal-tracker-book-picker input,
#modal-tracker-book-picker span,
#modal-tracker-book-picker strong,
#modal-tracker-book-picker small {
  font-family:'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  opacity:1 !important;
}

/* Progres page heading */
#sec-my-tracker .tracker-header-title {
  color:#6F42A5 !important;
  font-size:18px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
}
#sec-my-tracker .tracker-header-desc {
  color:#655A6D !important;
  font-size:13px !important;
  line-height:1.45 !important;
  font-weight:500 !important;
}
#sec-my-tracker .tracker-add-btn {
  color:#FFFFFF !important;
  font-size:12px !important;
  font-weight:700 !important;
}

/* Stats: same visual scale across all four labels/values. */
#sec-my-tracker .tracker-stat-card {
  min-height:76px !important;
  padding:10px 7px !important;
}
#sec-my-tracker .tracker-stat-card strong {
  color:#4B315A !important;
  font-size:17px !important;
  line-height:1.1 !important;
  font-weight:800 !important;
}
#sec-my-tracker .tracker-stat-card span {
  color:#62586A !important;
  font-size:10px !important;
  line-height:1.2 !important;
  font-weight:600 !important;
}
#sec-my-tracker .tracker-stat-wide strong {
  font-size:16px !important;
}

/* Reading cards: readable text, no washed-out labels. */
#sec-my-tracker .tracker-title {
  color:#35263F !important;
  font-size:13px !important;
  line-height:1.25 !important;
  font-weight:800 !important;
}
#sec-my-tracker .tracker-author {
  color:#6D6272 !important;
  font-size:10px !important;
  font-weight:500 !important;
}
#sec-my-tracker .tracker-progress-label {
  color:#4F4557 !important;
  font-size:10px !important;
  font-weight:600 !important;
}
#sec-my-tracker .tracker-progress-label strong {
  color:#4F4557 !important;
  font-size:10px !important;
  font-weight:700 !important;
}
#sec-my-tracker .tracker-progress-label span {
  color:#6F42A5 !important;
  font-size:11px !important;
  font-weight:800 !important;
}
#sec-my-tracker .tracker-status {
  color:#6F42A5 !important;
  font-size:9px !important;
  font-weight:700 !important;
}
#sec-my-tracker .tracker-updated {
  color:#6F6570 !important;
  font-size:9px !important;
  font-weight:500 !important;
}
#sec-my-tracker .tracker-action-primary {
  color:#FFFFFF !important;
  font-size:11px !important;
  font-weight:700 !important;
}
#sec-my-tracker .tracker-action-secondary {
  color:#6B6070 !important;
  font-size:11px !important;
  font-weight:700 !important;
}

/* Modal labels + selected controls. */
#modal-reading-tracker .modal-title,
#modal-tracker-book-picker .modal-title {
  color:#35263F !important;
  font-size:18px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
}
#modal-reading-tracker .tracker-form .form-group > label {
  color:#514657 !important;
  font-size:13px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
}

/* Halaman / Chapter: compact, booklist-like cards. */
#modal-reading-tracker .tracker-choice-list {
  gap:7px !important;
}
#modal-reading-tracker .tracker-choice-option {
  min-height:56px !important;
  height:56px !important;
  padding:7px 10px !important;
  grid-template-columns:34px minmax(0,1fr) 22px !important;
  gap:9px !important;
  border:1px solid #D9CFDE !important;
  border-radius:12px !important;
  background:#FFFFFF !important;
}
#modal-reading-tracker .tracker-choice-option.active {
  background:#F5ECFA !important;
  border-color:#9A6CC1 !important;
  box-shadow:0 0 0 1px rgba(122,79,177,.10) !important;
}
#modal-reading-tracker .tracker-choice-icon {
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  border-radius:9px !important;
  font-size:15px !important;
}
#modal-reading-tracker .tracker-choice-info strong {
  color:#35263F !important;
  font-size:12px !important;
  line-height:1.15 !important;
  font-weight:800 !important;
}
#modal-reading-tracker .tracker-choice-info small {
  color:#6E6473 !important;
  font-size:9px !important;
  line-height:1.2 !important;
  margin-top:3px !important;
  font-weight:500 !important;
}
#modal-reading-tracker .tracker-choice-check {
  width:21px !important;
  height:21px !important;
  min-width:21px !important;
}

#modal-reading-tracker .tracker-picker-trigger {
  min-height:48px !important;
  height:48px !important;
  border-radius:11px !important;
  padding:6px 10px !important;
}
#modal-reading-tracker .tracker-picker-trigger-icon {
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  border-radius:8px !important;
  font-size:13px !important;
}
#modal-reading-tracker .tracker-picker-trigger-text {
  color:#35263F !important;
  font-size:11px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
}

#modal-reading-tracker .tracker-number-input {
  color:#35263F !important;
  font-size:13px !important;
  font-weight:500 !important;
}
#modal-reading-tracker .tracker-form-note {
  color:#655A6D !important;
  font-size:10px !important;
  font-weight:500 !important;
}
#modal-reading-tracker .tracker-save-btn {
  color:#FFFFFF !important;
  font-size:13px !important;
  font-weight:700 !important;
}
#modal-reading-tracker .tracker-delete-btn {
  color:#B23B48 !important;
  font-size:11px !important;
  font-weight:700 !important;
}

/* Work picker: same compact list language as Booklist. */
#modal-tracker-book-picker .tracker-book-option {
  min-height:58px !important;
  height:58px !important;
  padding:8px !important;
  gap:9px !important;
  border-radius:11px !important;
}
#modal-tracker-book-picker .tracker-book-option img {
  width:32px !important;
  height:42px !important;
  min-width:32px !important;
  max-width:32px !important;
  min-height:42px !important;
  max-height:42px !important;
  border-radius:5px !important;
}
#modal-tracker-book-picker .tracker-book-option-info strong {
  color:#35263F !important;
  font-size:11px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
}
#modal-tracker-book-picker .tracker-book-option-info small {
  color:#6E6473 !important;
  font-size:9px !important;
  line-height:1.2 !important;
  margin-top:3px !important;
  font-weight:500 !important;
}
#modal-tracker-book-picker .tracker-book-option-check {
  width:17px !important;
  height:17px !important;
  min-width:17px !important;
}
#modal-tracker-book-picker .tracker-book-option-check i {
  font-size:9px !important;
}

/* Keep search text readable. */
#modal-tracker-book-picker .tracker-book-search-wrap .form-input {
  color:#35263F !important;
  font-family:'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size:12px !important;
}
#modal-tracker-book-picker .tracker-book-search-wrap .form-input::placeholder {
  color:#8A7F90 !important;
  opacity:1 !important;
}

@media (max-width:380px) {
  .my-books-tabs .auth-tab {
    font-size:10.5px !important;
  }
  .my-books-tabs .auth-tab .fv-icon,
  .my-books-tabs .auth-tab i {
    font-size:14px !important;
  }
}


/* ==========================================================
   FIKSIVERSE — CUTE & AESTHETIC FINAL TYPOGRAPHY
   Inspired by the soft, bubbly look of Camellia-style fonts.
   ========================================================== */
:root {
  --fv-font: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fv-ink: #403347;
  --fv-muted: #6C6073;
  --fv-purple: #7042A8;
}

html, body,
body.galaxy-theme,
body.galaxy-theme * {
  font-family: var(--fv-font) !important;
}

body.galaxy-theme {
  color: var(--fv-ink);
  font-size: 15px;
}

/* Give the overall UI a more comfortable mobile reading scale. */
main {
  font-size: 15px;
}

.page-header-title {
  font-size: 21px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: #352A3E !important;
}

.section-title {
  font-size: 19px !important;
  line-height: 1.25 !important;
  color: #352A3E !important;
}

.logo-text {
  font-size: 20px !important;
  font-weight: 700 !important;
}

.search-input,
.form-input,
select,
textarea,
input {
  font-family: var(--fv-font) !important;
  font-size: 14px !important;
}

button,
.btn-galaxy-primary,
.btn-full {
  font-family: var(--fv-font) !important;
}

/* Navigation: equal scale, no cramped labels. */
.my-books-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid #E4D9E8 !important;
}

.my-books-tabs .auth-tab,
.my-books-tabs .auth-tab:hover,
.my-books-tabs .auth-tab:focus,
.my-books-tabs .auth-tab:active,
.my-books-tabs .auth-tab.active {
  border: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  transform: none !important;
  min-height: 60px !important;
  height: 60px !important;
  padding: 6px 1px 7px !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  color: #5D5364 !important;
  position: relative !important;
}

.my-books-tabs .auth-tab .fv-icon,
.my-books-tabs .auth-tab i {
  font-size: 18px !important;
  margin: 0 0 3px !important;
}

.my-books-tabs .auth-tab.active {
  color: var(--fv-purple) !important;
}

/* Only the purple underline marks the active tab. Absolutely no box. */
.my-books-tabs .auth-tab.active::before {
  display: none !important;
  content: none !important;
}

.my-books-tabs .auth-tab.active::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 22% !important;
  right: 22% !important;
  bottom: 0 !important;
  width: auto !important;
  height: 3px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #7A4FB1 !important;
  box-shadow: none !important;
}

/* General text scale: make tiny labels feel intentional instead of microscopic. */
.booklist-section-head p,
.tracker-header-desc,
.booklist-description,
.card-description,
.form-help,
.form-note {
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.booklist-section-head h4,
.booklist-title,
.card-title {
  font-size: 17px !important;
  line-height: 1.2 !important;
}

.booklist-chip,
.booklist-meta,
.booklist-menu-trigger,
.booklist-menu-dropdown button {
  font-size: 11px !important;
}

/* ==========================================================
   PROGRES — larger, clearer, cute but still compact
   ========================================================== */
#sec-my-tracker .tracker-header-title {
  font-size: 21px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: #7042A8 !important;
}

#sec-my-tracker .tracker-header-desc {
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  color: #665B6C !important;
}

#sec-my-tracker .tracker-add-btn {
  font-size: 13px !important;
  min-height: 44px !important;
  padding: 8px 14px !important;
  font-weight: 600 !important;
}

#sec-my-tracker .tracker-stat-card {
  min-height: 82px !important;
  padding: 10px 7px !important;
}

#sec-my-tracker .tracker-stat-card strong {
  font-size: 20px !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;
  color: #4B315A !important;
}

#sec-my-tracker .tracker-stat-card span {
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  color: #655A6D !important;
}

#sec-my-tracker .tracker-stat-wide strong {
  font-size: 18px !important;
}

#sec-my-tracker .tracker-title {
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
}

#sec-my-tracker .tracker-author {
  font-size: 11px !important;
  color: #6D6272 !important;
}

#sec-my-tracker .tracker-progress-label,
#sec-my-tracker .tracker-progress-label strong {
  font-size: 11px !important;
}

#sec-my-tracker .tracker-progress-label span {
  font-size: 13px !important;
}

#sec-my-tracker .tracker-status {
  font-size: 10px !important;
}

#sec-my-tracker .tracker-updated {
  font-size: 10px !important;
}

#sec-my-tracker .tracker-action-primary,
#sec-my-tracker .tracker-action-secondary {
  font-size: 12px !important;
  min-height: 42px !important;
}

/* Progres modal */
#modal-reading-tracker .modal-title,
#modal-tracker-book-picker .modal-title {
  font-size: 21px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

#modal-reading-tracker .tracker-form .form-group > label {
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  color: #514657 !important;
}

#modal-reading-tracker .tracker-picker-trigger {
  min-height: 52px !important;
  height: 52px !important;
  font-size: 13px !important;
}

#modal-reading-tracker .tracker-picker-trigger-text {
  font-size: 13px !important;
}

#modal-reading-tracker .tracker-choice-option {
  min-height: 62px !important;
  height: 62px !important;
  padding: 8px 11px !important;
  border-radius: 13px !important;
}

#modal-reading-tracker .tracker-choice-info strong {
  font-size: 14px !important;
  font-weight: 600 !important;
}

#modal-reading-tracker .tracker-choice-info small {
  font-size: 10px !important;
}

#modal-reading-tracker .tracker-number-input {
  font-size: 15px !important;
}

#modal-reading-tracker .tracker-form-note {
  font-size: 11px !important;
  line-height: 1.45 !important;
}

#modal-reading-tracker .tracker-save-btn {
  font-size: 14px !important;
}

#modal-reading-tracker .tracker-delete-btn {
  font-size: 12px !important;
}

#modal-tracker-book-picker .tracker-book-option {
  min-height: 66px !important;
  height: 66px !important;
  padding: 8px !important;
}

#modal-tracker-book-picker .tracker-book-option img {
  width: 38px !important;
  height: 50px !important;
  min-width: 38px !important;
  min-height: 50px !important;
}

#modal-tracker-book-picker .tracker-book-option-info strong {
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
}

#modal-tracker-book-picker .tracker-book-option-info small {
  font-size: 10px !important;
}

@media (max-width: 380px) {
  .my-books-tabs .auth-tab {
    min-height: 58px !important;
    height: 58px !important;
    font-size: 11px !important;
  }

  .my-books-tabs .auth-tab .fv-icon,
  .my-books-tabs .auth-tab i {
    font-size: 17px !important;
  }

  .page-header-title {
    font-size: 20px !important;
  }
}


/* ==========================================================
   FIKSIVERSE — TYPOGRAPHY & TAB FIX v2
   Cute display font only where it helps the personality;
   readable rounded font for the rest of the interface.
   ========================================================== */
:root {
  --fv-display-font: 'Fredoka', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fv-body-font: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fv-font: var(--fv-body-font);
}

/* Stop applying the bubbly display font to every single element. */
html,
body.galaxy-theme,
body.galaxy-theme * {
  font-family: var(--fv-body-font) !important;
}

/* Display type: friendly, rounded and aesthetic, but NOT extra-bold. */
.page-header-title,
.section-title,
.section-heading,
.booklist-title,
.booklist-section-head h4,
.card-title,
.tracker-header-title,
.tracker-empty h4,
.modal-title,
.brand-name,
.logo-text,
.home-section-title,
.profile-name,
.detail-title,
.story-title,
h1, h2, h3, h4 {
  font-family: var(--fv-display-font) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
}

/* Keep normal content clean and readable. */
body.galaxy-theme,
body.galaxy-theme p,
body.galaxy-theme span,
body.galaxy-theme label,
body.galaxy-theme input,
body.galaxy-theme textarea,
body.galaxy-theme select,
body.galaxy-theme button,
body.galaxy-theme small,
body.galaxy-theme li,
body.galaxy-theme a {
  font-family: var(--fv-body-font) !important;
}

/* Cute-but-readable brand and major headings. */
.brand-name,
.logo-text {
  font-family: var(--fv-display-font) !important;
  font-weight: 600 !important;
}

.page-header-title {
  font-size: 23px !important;
  line-height: 1.2 !important;
}

.booklist-section-head h4,
.tracker-header-title,
.section-title,
.section-heading {
  font-size: 20px !important;
  line-height: 1.25 !important;
}

.booklist-section-head p,
.tracker-header-desc,
.booklist-description,
.card-description,
.form-help,
.form-note {
  font-size: 15px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}

/* My Books navigation: same scale and NO box around Progres. */
.my-books-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border-bottom: 1px solid #E4D9E8 !important;
  padding-bottom: 7px !important;
}

.my-books-tabs > .auth-tab,
.my-books-tabs > .auth-tab:hover,
.my-books-tabs > .auth-tab:focus,
.my-books-tabs > .auth-tab:focus-visible,
.my-books-tabs > .auth-tab:active,
.my-books-tabs > .auth-tab.active {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  transform: none !important;
  min-height: 62px !important;
  height: 62px !important;
  padding: 7px 2px 9px !important;
  color: #5F5565 !important;
  font-family: var(--fv-body-font) !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  position: relative !important;
}

.my-books-tabs > .auth-tab .fv-icon,
.my-books-tabs > .auth-tab i {
  display: block !important;
  font-family: bootstrap-icons !important;
  font-size: 19px !important;
  line-height: 1 !important;
  margin: 0 0 5px !important;
}

.my-books-tabs > .auth-tab.active {
  color: #6F42A5 !important;
}

.my-books-tabs > .auth-tab.active::before {
  display: none !important;
  content: none !important;
}

.my-books-tabs > .auth-tab.active::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 22% !important;
  right: 22% !important;
  bottom: 0 !important;
  width: auto !important;
  height: 3px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #7A4FB1 !important;
  box-shadow: none !important;
}

/* Explicitly kill the accidental focused rectangle on Progres. */
#sub-tab-tracker,
#sub-tab-tracker:hover,
#sub-tab-tracker:focus,
#sub-tab-tracker:focus-visible,
#sub-tab-tracker:active,
#sub-tab-tracker.active {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Bottom navigation stays readable, not bubbly-heavy. */
.bottom-nav .nav-btn,
.bottom-nav .nav-btn span {
  font-family: var(--fv-body-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* Buttons: rounded body font, slightly friendly weight. */
.btn-full,
.btn-galaxy-primary,
.tracker-add-btn,
.tracker-action-primary,
.tracker-action-secondary,
.booklist-create-btn,
button {
  font-family: var(--fv-body-font) !important;
}

/* Slightly larger small UI labels so they don't look microscopic. */
.booklist-chip,
.booklist-meta,
.booklist-menu-trigger,
.booklist-menu-dropdown button,
.tracker-status,
.tracker-updated,
.tracker-choice-info small,
.tracker-book-option-info small {
  font-size: 11px !important;
}

.tracker-title,
.tracker-choice-info strong,
.tracker-book-option-info strong {
  font-family: var(--fv-body-font) !important;
  font-weight: 700 !important;
}


/* ==========================================================
   FIKSIVERSE — TYPOGRAPHY & DENSITY BALANCE v3
   Keep the cute character for headings only. Body/UI stays
   clean and readable. No giant jumps between text sizes.
   ========================================================== */
html, body,
body.galaxy-theme,
body.galaxy-theme * {
  font-family:'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

body.galaxy-theme {
  font-size:14px !important;
  line-height:1.45 !important;
}

/* Cute font is intentionally limited to brand + headings. */
.logo-text,
.page-header-title,
.section-title,
.booklist-section-head h4,
#sec-my-tracker .tracker-header-title,
#tab-profile h2,
#tab-profile h3,
#tab-profile h4 {
  font-family:'Fredoka', 'Nunito', sans-serif !important;
  font-weight:500 !important;
  letter-spacing:-0.15px !important;
}

.logo-text {
  font-size:20px !important;
  line-height:1.1 !important;
}

.page-header-title {
  font-size:20px !important;
  line-height:1.2 !important;
  font-weight:500 !important;
}

.section-title {
  font-size:17px !important;
  line-height:1.3 !important;
  font-weight:500 !important;
  margin-bottom:10px !important;
  gap:6px !important;
}

/* Explore category headings should not dominate the cards. */
#tab-home .section-title,
#tab-explore .section-title {
  font-size:17px !important;
  line-height:1.28 !important;
  font-weight:500 !important;
}

/* Normal UI text: one restrained scale. */
main,
main p,
main li,
main label,
main small,
main span,
main button,
main input,
main textarea,
main select {
  font-family:'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.search-input,
.form-input,
select,
textarea,
input {
  font-size:14px !important;
  line-height:1.35 !important;
}

button,
.btn-galaxy-primary,
.btn-full {
  font-size:13px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
}

/* Book cards: keep title/body/meta close together. */
.book-title,
.card-title,
.booklist-title {
  font-size:14px !important;
  line-height:1.3 !important;
  font-weight:700 !important;
}

.book-author,
.booklist-meta,
.card-description,
.booklist-section-head p {
  font-size:12px !important;
  line-height:1.4 !important;
}

.book-badge,
.booklist-chip,
.booklist-menu-trigger,
.booklist-menu-dropdown button {
  font-size:10.5px !important;
}

/* My Books sub-navigation: equal dimensions, no boxed Progres tab. */
.my-books-tabs {
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:0 !important;
  padding:0 0 6px !important;
  border-bottom:1px solid #E4D9E8 !important;
}

.my-books-tabs .auth-tab,
.my-books-tabs .auth-tab:hover,
.my-books-tabs .auth-tab:focus,
.my-books-tabs .auth-tab:active,
.my-books-tabs .auth-tab.active {
  min-width:0 !important;
  min-height:54px !important;
  height:54px !important;
  padding:5px 2px 6px !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  background:transparent !important;
  transform:none !important;
  font-family:'Nunito', sans-serif !important;
  font-size:12px !important;
  line-height:1.15 !important;
  font-weight:700 !important;
  color:#5D5364 !important;
  position:relative !important;
}

.my-books-tabs .auth-tab .fv-icon,
.my-books-tabs .auth-tab i {
  font-size:17px !important;
  line-height:1 !important;
  margin:0 0 4px !important;
}

.my-books-tabs .auth-tab.active {
  color:#6F42A5 !important;
}

.my-books-tabs .auth-tab.active::before {
  display:none !important;
  content:none !important;
}

.my-books-tabs .auth-tab.active::after {
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:24% !important;
  right:24% !important;
  bottom:0 !important;
  height:2.5px !important;
  border:0 !important;
  border-radius:999px !important;
  background:#7A4FB1 !important;
  box-shadow:none !important;
}

/* ----------------------------------------------------------
   PROGRES — compact cards, balanced type hierarchy
   ---------------------------------------------------------- */
#sec-my-tracker .tracker-header {
  gap:10px !important;
  margin-bottom:4px !important;
}

#sec-my-tracker .tracker-header-title {
  font-family:'Fredoka', 'Nunito', sans-serif !important;
  font-size:18px !important;
  line-height:1.2 !important;
  font-weight:500 !important;
}

#sec-my-tracker .tracker-header-desc {
  font-size:13px !important;
  line-height:1.4 !important;
  font-weight:500 !important;
  margin-top:4px !important;
  color:#685D6E !important;
}

#sec-my-tracker .tracker-add-btn {
  min-height:40px !important;
  padding:8px 13px !important;
  font-size:12px !important;
  font-weight:700 !important;
}

#sec-my-tracker .tracker-stats {
  gap:8px !important;
  margin-bottom:8px !important;
}

#sec-my-tracker .tracker-stat-card {
  min-height:70px !important;
  padding:9px 6px !important;
  border-radius:14px !important;
}

#sec-my-tracker .tracker-stat-card strong {
  font-family:'Nunito', sans-serif !important;
  font-size:17px !important;
  line-height:1.05 !important;
  font-weight:800 !important;
}

#sec-my-tracker .tracker-stat-card span {
  font-size:10px !important;
  line-height:1.2 !important;
  font-weight:600 !important;
  margin-top:4px !important;
}

#sec-my-tracker .tracker-stat-wide {
  min-height:64px !important;
}

#sec-my-tracker .tracker-stat-wide strong {
  font-size:16px !important;
}

#sec-my-tracker .tracker-card {
  padding:10px !important;
  margin-top:8px !important;
  margin-bottom:8px !important;
  border-radius:16px !important;
}

#sec-my-tracker .tracker-card-main {
  gap:10px !important;
  align-items:flex-start !important;
}

#sec-my-tracker .tracker-cover-wrap {
  width:68px !important;
  height:94px !important;
  flex:0 0 68px !important;
  border-radius:9px !important;
}

#sec-my-tracker .tracker-cover {
  width:68px !important;
  height:94px !important;
  object-fit:cover !important;
  border-radius:9px !important;
}

#sec-my-tracker .tracker-card-info {
  min-width:0 !important;
}

#sec-my-tracker .tracker-title {
  font-size:14px !important;
  line-height:1.25 !important;
  font-weight:700 !important;
}

#sec-my-tracker .tracker-author {
  font-size:11px !important;
  line-height:1.25 !important;
  margin-top:3px !important;
}

#sec-my-tracker .tracker-more-btn {
  width:28px !important;
  height:28px !important;
  flex-basis:28px !important;
  border-radius:50% !important;
}

#sec-my-tracker .tracker-progress-label {
  margin-top:12px !important;
  font-size:10.5px !important;
  line-height:1.2 !important;
}

#sec-my-tracker .tracker-progress-label strong {
  font-size:10.5px !important;
  font-weight:700 !important;
}

#sec-my-tracker .tracker-progress-label span {
  font-size:11px !important;
}

#sec-my-tracker .tracker-progress-bar {
  height:6px !important;
  margin-top:5px !important;
}

#sec-my-tracker .tracker-card-bottom {
  margin-top:7px !important;
}

#sec-my-tracker .tracker-status {
  padding:4px 8px !important;
  font-size:9.5px !important;
}

#sec-my-tracker .tracker-updated {
  font-size:9px !important;
}

#sec-my-tracker .tracker-card-actions {
  gap:7px !important;
  margin-top:9px !important;
}

#sec-my-tracker .tracker-action-primary,
#sec-my-tracker .tracker-action-secondary {
  min-height:38px !important;
  padding:7px 8px !important;
  border-radius:10px !important;
  font-size:11px !important;
  font-weight:700 !important;
}

/* Progres modal uses the same restrained scale. */
#modal-reading-tracker .modal-title,
#modal-tracker-book-picker .modal-title {
  font-size:19px !important;
  line-height:1.2 !important;
  font-weight:500 !important;
  font-family:'Fredoka', 'Nunito', sans-serif !important;
}

#modal-reading-tracker .tracker-form .form-group > label {
  font-size:12px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
}

#modal-reading-tracker .tracker-picker-trigger {
  min-height:48px !important;
  height:48px !important;
}

#modal-reading-tracker .tracker-picker-trigger-text {
  font-size:12px !important;
  font-weight:700 !important;
}

#modal-reading-tracker .tracker-choice-option {
  min-height:56px !important;
  height:56px !important;
  padding:7px 10px !important;
  border-radius:12px !important;
}

#modal-reading-tracker .tracker-choice-info strong {
  font-size:12px !important;
  line-height:1.15 !important;
  font-weight:700 !important;
}

#modal-reading-tracker .tracker-choice-info small {
  font-size:9.5px !important;
}

#modal-reading-tracker .tracker-number-input {
  font-size:14px !important;
}

#modal-reading-tracker .tracker-form-note {
  font-size:10px !important;
}

/* Profile and other tabs: keep headings in the same visual family. */
#tab-profile .profile-card-hero h1,
#tab-profile .profile-card-hero h2,
#tab-profile .profile-card-hero h3,
#tab-profile .profile-card-hero h4 {
  font-family:'Fredoka', 'Nunito', sans-serif !important;
  font-weight:500 !important;
}

#tab-profile .profile-card-hero h1 { font-size:20px !important; }
#tab-profile .profile-card-hero h2,
#tab-profile .profile-card-hero h3 { font-size:17px !important; }
#tab-profile .profile-card-hero h4 { font-size:15px !important; }

@media (max-width:380px) {
  .page-header-title { font-size:19px !important; }
  .section-title { font-size:16.5px !important; }
  .my-books-tabs .auth-tab { font-size:11.5px !important; }
  .my-books-tabs .auth-tab .fv-icon,
  .my-books-tabs .auth-tab i { font-size:16px !important; }
  #sec-my-tracker .tracker-cover-wrap,
  #sec-my-tracker .tracker-cover {
    width:64px !important;
    height:88px !important;
    flex-basis:64px !important;
  }
  #sec-my-tracker .tracker-title { font-size:13.5px !important; }
}

/* =========================================================
   BOOKLIST READING PROGRESS
   Private progress indicator + compact show/hide control.
   ========================================================= */
.booklist-section-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex-wrap:wrap;
}
.booklist-progress-setting {
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:4px 7px 4px 8px;
  border:1px solid #E2D5E8;
  border-radius:999px;
  background:#FBF7FD;
  color:#6B6070;
  cursor:pointer;
  user-select:none;
}
.booklist-progress-setting-copy {
  font-size:8px;
  line-height:1;
  font-weight:700;
  white-space:nowrap;
}
.booklist-progress-setting input {
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.booklist-progress-switch {
  position:relative;
  width:25px;
  height:14px;
  border-radius:999px;
  background:#D8CFDA;
  transition:background .18s ease;
}
.booklist-progress-switch::after {
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(63,47,74,.16);
  transition:transform .18s ease;
}
.booklist-progress-setting input:checked + .booklist-progress-switch {
  background:#8B4BB3;
}
.booklist-progress-setting input:checked + .booklist-progress-switch::after {
  transform:translateX(11px);
}
.booklist-reading-progress {
  margin-top:9px;
  padding-top:8px;
  border-top:1px solid #F0E7F2;
}
.booklist-reading-progress-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:7px;
  color:#6B6070;
  font-size:8px;
  font-weight:700;
}
.booklist-reading-progress-head strong {
  color:#7B46A6;
  font-size:10px;
  font-weight:800;
}
.booklist-reading-progress-bar {
  height:5px;
  margin-top:5px;
  border-radius:999px;
  background:#EEE7F1;
  overflow:hidden;
}
.booklist-reading-progress-bar span {
  display:block;
  height:100%;
  min-width:0;
  border-radius:inherit;
  background:linear-gradient(90deg,#8B4BB3,#B97BE1);
}
.booklist-reading-progress-meta {
  display:block;
  margin-top:4px;
  color:#9A929F;
  font-size:7px;
  line-height:1.3;
}
@media (max-width:520px) {
  .booklist-section-head { align-items:flex-start; }
  .booklist-section-actions { gap:5px; }
  .booklist-progress-setting { order:2; }
  .booklist-reading-progress { margin-top:8px; }
}

/* ==================== PROGRESS DISPLAY PREFERENCE ==================== */
.progress-display-setting {
  width:100%;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border:1px solid #DED3E3;
  border-radius:14px;
  background:linear-gradient(135deg,#FFFFFF 0%,#FBF7FD 100%);
  box-shadow:0 2px 8px rgba(72,47,82,.05);
  cursor:pointer;
  user-select:none;
}
.progress-display-setting-copy {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.progress-display-setting-title {
  color:#40354A;
  font-size:12px;
  line-height:1.25;
  font-weight:700;
}
.progress-display-setting-status {
  color:#8A7C90;
  font-size:10px;
  line-height:1.2;
  font-weight:500;
}
.progress-display-setting input {
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  pointer-events:none;
}
.progress-display-switch {
  position:relative;
  flex:0 0 auto;
  width:46px;
  height:26px;
  padding:3px;
  box-sizing:border-box;
  border-radius:999px;
  background:#CFC7D2;
  transition:background .2s ease, box-shadow .2s ease;
}
.progress-display-switch > span {
  display:block;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#FFFFFF;
  box-shadow:0 2px 5px rgba(55,43,63,.22);
  transform:translateX(0);
  transition:transform .2s cubic-bezier(.4,0,.2,1);
}
/* The visual state is driven by the wrapper data-state as well as the
   checkbox, so the custom switch can never look OFF while the preference is ON. */
.progress-display-setting[data-state="on"] .progress-display-switch,
.progress-display-setting input:checked + .progress-display-switch {
  background:linear-gradient(135deg,#6F42A5,#8B4BB3);
  box-shadow:0 3px 8px rgba(111,66,165,.22);
}
.progress-display-setting[data-state="on"] .progress-display-switch > span,
.progress-display-setting input:checked + .progress-display-switch > span {
  transform:translateX(20px);
}
.progress-display-setting[data-state="off"] .progress-display-switch {
  background:#CFC7D2;
  box-shadow:none;
}
.progress-display-setting[data-state="off"] .progress-display-switch > span {
  transform:translateX(0);
}
.progress-display-setting:has(input:focus-visible) {
  outline:2px solid rgba(139,75,179,.35);
  outline-offset:2px;
}

.book-detail-reading-progress {
  margin-top:7px;
  padding:7px 8px 6px;
  border:1px solid #E6D9EC;
  border-radius:10px;
  background:#FBF7FD;
}
.book-detail-reading-progress-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:#6F42A5;
  font-size:10px;
  line-height:1.2;
  font-weight:700;
}
.book-detail-reading-progress-head strong {
  font-size:11px;
  color:#6F42A5;
}
.book-detail-reading-progress-bar {
  height:5px;
  margin-top:5px;
  overflow:hidden;
  border-radius:999px;
  background:#E8DFF0;
}
.book-detail-reading-progress-bar span {
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#7A3FB0,#B36BEA);
}
.book-detail-reading-progress-meta {
  display:block;
  margin-top:4px;
  color:#8A7C90;
  font-size:9px;
  line-height:1.2;
  font-weight:500;
}

@media (max-width:520px) {
  .progress-display-setting {
    padding:11px 12px;
    gap:10px;
  }
  .progress-display-setting-title { font-size:11px; }
  .progress-display-setting-status { font-size:9.5px; }
  .progress-display-switch { width:44px; height:25px; }
  .progress-display-switch > span { width:19px; height:19px; }
  .progress-display-setting[data-state="on"] .progress-display-switch > span,
  .progress-display-setting input:checked + .progress-display-switch > span { transform:translateX(19px); }
}

/* ==========================================================
   DETAIL BUKU — PROGRESS SEJAJAR DENGAN BOOKLIST
   Full-width, compact indicator placed below the book header.
   ========================================================== */
.book-detail-reading-progress.booklist-detail-progress {
  width: 100%;
  box-sizing: border-box;
  margin: 10px 0 0 !important;
  padding: 8px 10px 7px !important;
  border: 1px solid #E6D9EC !important;
  border-radius: 10px !important;
  background: #FBF7FD !important;
}
.book-detail-reading-progress.booklist-detail-progress .booklist-detail-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #6F42A5;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 600;
}
.book-detail-reading-progress.booklist-detail-progress .booklist-detail-progress-head strong {
  font-size: 12px;
  font-weight: 800;
  color: #6F42A5;
}
.book-detail-reading-progress.booklist-detail-progress .booklist-detail-progress-bar {
  height: 5px;
  margin-top: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #E8DFF0;
}
.book-detail-reading-progress.booklist-detail-progress .booklist-detail-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,#7A3FB0,#B36BEA);
}

/* ==========================================================
   PUBLIC PROFILE MODAL — MORE READABLE MOBILE TYPE SCALE
   Keep the hierarchy gentle: no giant headings, just enough size
   for the profile to remain comfortable to scan.
   ========================================================== */
#modal-user-profile .public-profile-name {
  margin: 0;
  font-size: 20px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  color: #35263F !important;
}
#modal-user-profile .public-profile-username {
  margin: 3px 0 0 !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  color: #7B4FC2 !important;
}
#modal-user-profile .public-profile-bio {
  margin: 8px 0 0 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: #6B6070 !important;
}
#modal-user-profile .profile-info-box {
  padding: 14px 18px 22px !important;
}
#modal-user-profile .profile-info-box > button {
  font-size: 14px !important;
  padding: 9px 22px !important;
}
#modal-user-profile .profile-stats-grid {
  max-width: 280px !important;
  gap: 10px !important;
  margin-top: 18px !important;
}
#modal-user-profile .stat-card {
  padding: 12px 5px !important;
  border-radius: 14px !important;
}
#modal-user-profile .stat-value {
  font-size: 19px !important;
  line-height: 1.2 !important;
}
#modal-user-profile .stat-label {
  font-size: 12px !important;
  line-height: 1.25 !important;
  margin-top: 3px !important;
}
#modal-user-profile .public-profile-tab-label {
  font-size: 12px !important;
}
#modal-user-profile .public-profile-tab-count {
  font-size: 11px !important;
}
#modal-user-profile .book-title {
  font-size: 14px !important;
}
#modal-user-profile .book-author {
  font-size: 12px !important;
}
#modal-user-profile .book-grid-vertical {
  gap: 10px !important;
}


/* ==========================================================
   TEMA TAMPILAN — USER CUSTOMIZATION UI
   Sistem tema sengaja dipisahkan dari komponen aplikasi.
   CSS yang ditulis user dimuat sebagai stylesheet terakhir.
   ========================================================== */
.fv-theme-modal-box,
.fv-theme-editor-box {
  max-height: 88vh;
}

.fv-theme-modal-desc {
  margin: 4px 0 0;
  color: #8A7C90;
  font-size: 10px;
  line-height: 1.35;
}

.fv-theme-create-wrap {
  margin: 12px 0 14px;
  padding: 10px;
  border: 1px dashed #D9CDE2;
  border-radius: 14px;
  background: #FBF7FD;
}

.fv-theme-create-wrap p {
  margin: 7px 3px 0;
  color: #8A7C90;
  font-size: 9px;
  line-height: 1.4;
}

.fv-theme-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fv-theme-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 1px solid #DDD3E2;
  border-radius: 15px;
  background: #FFFFFF;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.fv-theme-card.active {
  border-color: #A66BC8;
  box-shadow: 0 4px 14px rgba(111,66,165,.10);
}

.fv-theme-card:active {
  transform: scale(.995);
}

.fv-theme-preview {
  width: 48px;
  height: 56px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  background: linear-gradient(145deg, #A855F7, #6F42A5 60%, #33234B);
  border: 1px solid rgba(111,66,165,.25);
  font-size: 17px;
}

.fv-theme-preview-default {
  background: linear-gradient(145deg, #FFFFFF 0 48%, #9B78C8 49% 100%);
  color: #6F42A5;
}

.fv-theme-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fv-theme-info strong {
  color: #40354A;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fv-theme-info span {
  color: #8A7C90;
  font-size: 9px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fv-theme-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.fv-theme-use,
.fv-theme-icon-btn {
  border: 1px solid #CDBDDA;
  background: #FFFFFF;
  color: #6F42A5;
  border-radius: 9px;
  cursor: pointer;
  font-weight: 800;
}

.fv-theme-use {
  min-width: 50px;
  padding: 7px 9px;
  font-size: 9px;
}

.fv-theme-use.active {
  background: #7B46A6;
  color: #FFFFFF;
  border-color: #7B46A6;
}

.fv-theme-icon-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.fv-theme-icon-btn.danger {
  color: #B04C61;
  border-color: #E4C7CE;
}

.fv-theme-optional {
  color: #9A929F;
  font-size: 9px;
  font-weight: 500;
}

.fv-theme-css-help {
  padding: 10px 11px;
  border: 1px solid #E1D5E7;
  border-radius: 12px;
  background: #FBF7FD;
}

.fv-theme-css-help-title {
  color: #6F42A5;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 5px;
}

.fv-theme-css-help p {
  margin: 5px 0 0;
  color: #7E7284;
  font-size: 9px;
  line-height: 1.45;
}

.fv-theme-css-help code {
  padding: 1px 4px;
  border-radius: 4px;
  background: #EEE6F2;
  color: #6F42A5;
}

.fv-theme-css-editor {
  width: 100%;
  min-height: 280px;
  resize: vertical;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid #D9CDE2;
  border-radius: 13px;
  background: #18131D;
  color: #F7F0FA;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  line-height: 1.55;
  outline: none;
  tab-size: 2;
}

.fv-theme-css-editor:focus {
  border-color: #9B78C8;
  box-shadow: 0 0 0 3px rgba(155,120,200,.12);
}

.fv-theme-editor-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.fv-theme-preview-btn {
  border: 1px solid #BDAAC9;
  background: #FFFFFF;
  color: #6F42A5;
}

@media (max-width: 380px) {
  .fv-theme-card {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .fv-theme-preview {
    width: 42px;
    height: 50px;
  }
  .fv-theme-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
  .fv-theme-css-editor {
    min-height: 230px;
  }
}


/* ==================== LANGUAGE SWITCHER ==================== */
.language-modal-box { max-width: 430px; }
.language-options { display:grid; gap:10px; margin-top:8px; }
.language-option {
  width:100%; display:flex; align-items:center; gap:12px; padding:13px 14px;
  border:1px solid #DED3E3; border-radius:14px; background:#fff; color:#40354A;
  cursor:pointer; text-align:left; transition:.18s ease;
}
.language-option:hover, .language-option.active { border-color:#8B4BB3; background:#FBF7FD; box-shadow:0 4px 12px rgba(111,66,165,.10); }
.language-option-flag { font-size:25px; line-height:1; }
.language-option-copy { display:flex; flex-direction:column; gap:2px; flex:1; }
.language-option-copy strong { font-size:12px; }
.language-option-copy small { color:#8A7C90; font-size:9px; }
.language-option-check { width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:#fff; background:#8B4BB3; opacity:0; }
.language-option.active .language-option-check { opacity:1; }

/* ==================== READING WRAPPED ==================== */
.wrapped-modal-box { max-width:520px; background:linear-gradient(160deg,#120b1c 0%,#21133a 55%,#0f172a 100%) !important; color:#fff; overflow:hidden; }
.wrapped-modal-box .modal-title { color:#fff; }
.wrapped-hero { padding:18px 6px 12px; text-align:center; }
.wrapped-kicker { color:#c4b5fd; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.wrapped-hero h2 { margin:7px 0 3px; font-size:26px; line-height:1.1; font-weight:900; color:#fff; }
.wrapped-hero h2 span { color:#c084fc; }
.wrapped-hero p { margin:0; color:#cbd5e1; font-size:11px; }
.wrapped-metrics-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:8px; }
.wrapped-metric { min-height:82px; padding:12px 10px; border:1px solid rgba(255,255,255,.10); border-radius:15px; background:rgba(255,255,255,.055); display:flex; flex-direction:column; justify-content:center; gap:3px; }
.wrapped-metric i { color:#c084fc; font-size:15px; }
.wrapped-metric strong { color:#fff; font-size:18px; line-height:1.05; font-weight:900; overflow-wrap:anywhere; }
.wrapped-metric span { color:#94a3b8; font-size:9px; font-weight:700; }
.wrapped-feature-card { display:flex; gap:12px; align-items:center; margin-top:10px; padding:12px; border-radius:16px; background:linear-gradient(135deg,rgba(168,85,247,.20),rgba(56,189,248,.10)); border:1px solid rgba(192,132,252,.20); }
.wrapped-feature-cover { width:58px; height:78px; flex:0 0 58px; border-radius:8px; overflow:hidden; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:#c084fc; }
.wrapped-feature-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.wrapped-feature-copy { min-width:0; display:flex; flex-direction:column; gap:3px; }
.wrapped-feature-copy span { color:#c4b5fd; font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.wrapped-feature-copy strong { color:#fff; font-size:13px; line-height:1.2; overflow-wrap:anywhere; }
.wrapped-feature-copy small { color:#94a3b8; font-size:9px; }
.wrapped-feature-copy b { color:#e9d5ff; font-size:9px; }
.wrapped-footer { text-align:center; color:#94a3b8; font-size:9px; padding:12px 0 3px; }
.wrapped-loading,.wrapped-empty { text-align:center; padding:35px 15px; }
.wrapped-loading i,.wrapped-empty-icon { font-size:32px; color:#c084fc; }
.wrapped-loading p,.wrapped-empty p { color:#94a3b8; font-size:11px; line-height:1.5; }
.wrapped-empty h3 { color:#fff; font-size:15px; margin:8px 0 4px; }
@media (max-width:420px) {
  .wrapped-hero h2 { font-size:23px; }
  .wrapped-metrics-grid { gap:7px; }
  .wrapped-metric { min-height:75px; }
}


.header-language-btn { border:1px solid rgba(168,85,247,.28); background:rgba(255,255,255,.05); color:#cbd5e1; border-radius:999px; height:32px; min-width:48px; padding:0 9px; display:inline-flex; align-items:center; justify-content:center; gap:5px; cursor:pointer; font-size:10px; font-weight:800; }
.header-language-btn:hover { background:rgba(168,85,247,.12); color:#fff; }
.header-language-btn i { font-size:13px; color:#c084fc; }

/* Reading Wrapped v2: period, styles, sharing */
.wrapped-modal-box{max-width:540px!important;background:linear-gradient(160deg,#241532,#302044 55%,#1b2238 100%)!important;color:#fff!important}
.wrapped-modal-box .modal-header{border-bottom-color:rgba(255,255,255,.22)}
.wrapped-modal-box .modal-title{color:#fff!important;opacity:1!important}
.wrapped-toolbar{display:flex;flex-direction:column;gap:10px;margin:2px 0 12px}
.wrapped-period-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:5px;border-radius:14px;background:rgba(255,255,255,.09)}
.wrapped-period-tabs button,.wrapped-style-chip{border:0;border-radius:10px;padding:9px 5px;background:transparent;color:#d9cee3;font:700 10px inherit;cursor:pointer}
.wrapped-period-tabs button.active,.wrapped-style-chip.active{background:#fff;color:#5d2d86;box-shadow:0 3px 10px rgba(0,0,0,.16)}
.wrapped-style-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.wrapped-style-row>span{font-size:10px;font-weight:800;margin-right:auto}.wrapped-style-chip{padding:7px 11px;background:rgba(255,255,255,.09)}
.wrapped-share-btn{width:100%;margin-top:12px;border:0;border-radius:14px;padding:12px;background:#fff;color:#5d2d86;font-weight:900;cursor:pointer}
.wrapped-modal-box[data-wrapped-style="light"]{background:linear-gradient(160deg,#fff 0%,#fbf7ff 55%,#f2edfa 100%)!important;color:#34283c!important}.wrapped-modal-box[data-wrapped-style="light"] .modal-title,.wrapped-modal-box[data-wrapped-style="light"] .wrapped-hero h2,.wrapped-modal-box[data-wrapped-style="light"] .wrapped-metric strong,.wrapped-modal-box[data-wrapped-style="light"] .wrapped-feature-copy strong,.wrapped-modal-box[data-wrapped-style="light"] .wrapped-empty h3{color:#34283c!important}.wrapped-modal-box[data-wrapped-style="light"] .wrapped-hero p,.wrapped-modal-box[data-wrapped-style="light"] .wrapped-metric span,.wrapped-modal-box[data-wrapped-style="light"] .wrapped-feature-copy small,.wrapped-modal-box[data-wrapped-style="light"] .wrapped-footer{color:#75677f!important}.wrapped-modal-box[data-wrapped-style="light"] .wrapped-metric{background:#fff;border-color:#e5dceb}.wrapped-modal-box[data-wrapped-style="light"] .wrapped-feature-card{background:linear-gradient(135deg,#f2e8ff,#eef8ff)}.wrapped-modal-box[data-wrapped-style="light"] .wrapped-period-tabs{background:#eee7f4}.wrapped-modal-box[data-wrapped-style="light"] .wrapped-style-chip{background:#eee7f4;color:#5f5367}.wrapped-modal-box[data-wrapped-style="light"] .wrapped-share-btn{background:#7040a2;color:#fff}
@media(max-width:480px){.wrapped-period-tabs button{font-size:9px;padding:8px 2px}.wrapped-modal-box{padding-left:18px!important;padding-right:18px!important}.wrapped-hero h2{font-size:24px!important}}

/* ==================== WRAPPED FINAL POLISH ====================
   Wrapped intentionally supports Dark + Light only. Custom visual changes
   belong to the user's Display Theme CSS, which is injected last. */
.wrapped-modal-box {
  background: linear-gradient(155deg, #352247 0%, #47305f 55%, #303c58 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  box-shadow: 0 24px 70px rgba(20,10,30,.38) !important;
}
.wrapped-modal-box .modal-header { border-bottom-color: rgba(255,255,255,.24) !important; }
.wrapped-modal-box .modal-title { color:#fff !important; opacity:1 !important; }
.wrapped-header-actions { display:flex; align-items:center; gap:7px; }
.wrapped-share-icon-btn {
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.12);
  color:#fff;
  border-radius:999px;
  min-height:36px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}
.wrapped-share-icon-btn i { color:#e2b8ff; }
.wrapped-share-icon-btn:hover { background:rgba(255,255,255,.20); }
.wrapped-theme-note { width:100%; color:#d9cde5 !important; font-size:9px; line-height:1.35; }
.wrapped-period-tabs { background:rgba(255,255,255,.11) !important; }
.wrapped-period-tabs button,.wrapped-style-chip { color:#eee6f4 !important; }
.wrapped-period-tabs button.active,.wrapped-style-chip.active { background:#fff !important; color:#5d2d86 !important; }
.wrapped-style-chip { background:rgba(255,255,255,.10) !important; }
.wrapped-metric { background:rgba(255,255,255,.095) !important; border-color:rgba(255,255,255,.18) !important; }
.wrapped-metric strong { color:#fff !important; }
.wrapped-metric span { color:#ded3e8 !important; }
.wrapped-feature-card { background:linear-gradient(135deg,rgba(168,85,247,.25),rgba(56,189,248,.14)) !important; border-color:rgba(255,255,255,.16) !important; }
.wrapped-feature-copy strong { color:#fff !important; }
.wrapped-feature-copy small { color:#d8cce2 !important; }
.wrapped-feature-copy b { color:#f0ddff !important; }
.wrapped-footer { color:#d4c8df !important; }
.wrapped-loading p,.wrapped-empty p { color:#ded3e8 !important; }
.wrapped-empty h3 { color:#fff !important; }
.wrapped-share-btn { display:none !important; }

.wrapped-modal-box[data-wrapped-style="light"] {
  background:linear-gradient(155deg,#fffaff 0%,#f8f1ff 55%,#eef5ff 100%) !important;
  color:#34283c !important;
  border-color:#e1d5e8 !important;
  box-shadow:0 24px 70px rgba(67,39,84,.18) !important;
}
.wrapped-modal-box[data-wrapped-style="light"] .modal-header { border-bottom-color:#e4d9e9 !important; }
.wrapped-modal-box[data-wrapped-style="light"] .modal-title,
.wrapped-modal-box[data-wrapped-style="light"] .wrapped-hero h2,
.wrapped-modal-box[data-wrapped-style="light"] .wrapped-metric strong,
.wrapped-modal-box[data-wrapped-style="light"] .wrapped-feature-copy strong,
.wrapped-modal-box[data-wrapped-style="light"] .wrapped-empty h3 { color:#34283c !important; }
.wrapped-modal-box[data-wrapped-style="light"] .wrapped-share-icon-btn { background:#7040a2; border-color:#7040a2; color:#fff; }
.wrapped-modal-box[data-wrapped-style="light"] .wrapped-period-tabs { background:#eee7f4 !important; }
.wrapped-modal-box[data-wrapped-style="light"] .wrapped-period-tabs button,
.wrapped-modal-box[data-wrapped-style="light"] .wrapped-style-chip { color:#62546a !important; }
.wrapped-modal-box[data-wrapped-style="light"] .wrapped-period-tabs button.active,
.wrapped-modal-box[data-wrapped-style="light"] .wrapped-style-chip.active { background:#7040a2 !important; color:#fff !important; }
.wrapped-modal-box[data-wrapped-style="light"] .wrapped-theme-note,
.wrapped-modal-box[data-wrapped-style="light"] .wrapped-hero p,
.wrapped-modal-box[data-wrapped-style="light"] .wrapped-metric span,
.wrapped-modal-box[data-wrapped-style="light"] .wrapped-feature-copy small,
.wrapped-modal-box[data-wrapped-style="light"] .wrapped-footer { color:#75677f !important; }
.wrapped-modal-box[data-wrapped-style="light"] .wrapped-metric { background:#fff !important; border-color:#e5dceb !important; }
.wrapped-modal-box[data-wrapped-style="light"] .wrapped-feature-card { background:linear-gradient(135deg,#f2e8ff,#eef8ff) !important; border-color:#e2d8eb !important; }
.wrapped-modal-box[data-wrapped-style="light"] .wrapped-feature-copy b { color:#68418a !important; }

@media (max-width:480px){
  .wrapped-header-actions { gap:5px; }
  .wrapped-share-icon-btn { min-height:34px; padding:0 9px; font-size:9px; }
  .wrapped-share-icon-btn span { display:none; }
  .wrapped-modal-box { max-height:92vh !important; overflow-y:auto !important; }
}


/* ==========================================================
   PROGRESS TAB — CLICKABLE BOOK CARDS
   The three-dot menu remains the only explicit progress action.
   ========================================================== */
.tracker-card-clickable {
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.tracker-card-clickable:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(111,66,165,.10);
}
.tracker-card-clickable:focus-visible {
  outline: 2px solid rgba(139,75,179,.45);
  outline-offset: 2px;
}
.tracker-card-clickable .tracker-more-btn { cursor: pointer; }
.tracker-card-actions { display:none !important; }

/* ==========================================================
   WRAPPED SAVE CONFIRM — keep the fallback visually consistent
   with the light FiksiVerse modal instead of the browser download UI.
   ========================================================== */
#modal-confirm .modal-box {
  background: #fff !important;
  color: #35263f !important;
  border: 1px solid #e2d7e8 !important;
  box-shadow: 0 20px 60px rgba(54,32,69,.18) !important;
}
#modal-confirm #confirm-title { color:#35263f !important; }
#modal-confirm #confirm-message { color:#746a78 !important; line-height:1.5; }
#modal-confirm #btn-confirm-cancel { background:#f7f2fa !important; color:#5e5365 !important; border:1px solid #dfd5e4; }
#modal-confirm #btn-confirm-action { background:#7040a2 !important; color:#fff !important; }

/* ==========================================================
   AUTH / PASSWORD RESET
   ========================================================== */
.forgot-password-link {
  display:block;
  width:max-content;
  margin:7px 0 0 auto;
  padding:0;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  color:#7040a2;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
.forgot-password-link:focus,
.forgot-password-link:focus-visible,
.forgot-password-link:active {
  outline:0 !important;
  border:0 !important;
  box-shadow:none !important;
}
.forgot-password-link:hover { text-decoration:underline; }
.password-reset-box { max-width:480px; }
.password-reset-desc {
  margin:5px 0 0;
  font-size:11px;
  line-height:1.45;
  color:#746a78 !important;
}
.password-reset-secondary {
  margin-top:2px;
  background:#f7f2fa !important;
  color:#624f6d !important;
  border:1px solid #dfd5e4 !important;
}

/* Nested / emergency confirmations always sit above every other modal. */
#modal-reading-wrapped { z-index:1300 !important; }
#modal-confirm { z-index:2000 !important; }
#modal-confirm .modal-box { position:relative; z-index:2001 !important; }
#modal-password-reset { z-index:1400 !important; }


/* ==========================================================
   PRIVACY — SELECT ALL FOLLOWERS
   ========================================================== */
.exclude-select-all-row input[type="checkbox"],
.exclude-follower-checkbox {
  accent-color: #7A3FB0;
}


/* ==========================================================
   READING WRAPPED — CUSTOM DISPLAY THEME COMPATIBILITY
   Final base layer. User Display Theme CSS is injected after
   this stylesheet, so its boosted declarations remain the
   source of truth for Wrapped colors, backgrounds, borders,
   typography, cards, buttons and ornaments.
   ========================================================== */

/* "Reading Wrapped" and its period title MUST use the same
   display font. The global body span rule otherwise forces
   spans back to the body font. */
.wrapped-modal-box .wrapped-hero h2,
.wrapped-modal-box .wrapped-hero h2 span {
  font-family: var(--fv-display-font) !important;
}

/* User identity shown inside the Wrapped itself and therefore
   included automatically in the share image. */
.wrapped-account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 8px auto 7px;
  max-width: 100%;
  color: inherit;
  text-align: left;
}

.wrapped-account > i {
  flex: 0 0 auto;
  font-size: 15px;
  opacity: .9;
}

.wrapped-account-copy {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 7px;
  line-height: 1.2;
}

.wrapped-account-name {
  min-width: 0;
  max-width: 100%;
  font-family: var(--fv-body-font) !important;
  font-size: 10px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.wrapped-account-username {
  font-family: var(--fv-body-font) !important;
  font-size: 9px;
  font-weight: 700;
  opacity: .72;
  overflow-wrap: anywhere;
}

/* html2canvas export mode:
   header/toolbar are hidden only inside the cloned document
   used for export. The live modal is unaffected. */
.wrapped-modal-box.wrapped-exporting {
  max-height: none !important;
  overflow: visible !important;
}

.wrapped-modal-box.wrapped-exporting #reading-wrapped-content {
  max-height: none !important;
  overflow: visible !important;
}

.wrapped-modal-box.wrapped-exporting .wrapped-hero h2,
.wrapped-modal-box.wrapped-exporting .wrapped-hero h2 span {
  font-family: var(--fv-display-font) !important;
}

/* Do not let the old light-mode data attribute participate
   in the new theme-driven system. */
.wrapped-modal-box:not([data-wrapped-style]) {
  /* Intentionally empty: active Display Theme controls it. */
}

@media (max-width:480px) {
  .wrapped-account {
    margin-top: 7px;
    margin-bottom: 6px;
  }

  .wrapped-account-copy {
    max-width: calc(100vw - 120px);
  }
}


/* =========================================================
   DEFAULT WEB — BANNER DESCRIPTION
   Kontras tinggi agar deskripsi banner terbaca di gambar terang.
   ========================================================= */
.banner-content p {
  color: #FFFFFF !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

/* Synopsis content: preserve every Enter/new paragraph entered by the user. */
.fv-synopsis-content {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

#book-synopsis {
  white-space: pre-wrap !important;
  line-height: 1.55 !important;
  resize: vertical !important;
  min-height: 110px;
}


/* Preserve line breaks entered in book/AU synopsis text. */
.fv-synopsis-text {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* ==========================================================
   READING WRAPPED — SHARE + TOP 3 FINAL FIX
   The Wrapped is captured from the real DOM, so these rules
   intentionally inherit the active Display Theme.
   ========================================================== */
.wrapped-top-books {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(192,132,252,.20);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
}
.wrapped-top-books-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 2px 8px;
  color:#c4b5fd;
  font-size:8px;
  font-weight:800;
  letter-spacing:.08em;
}
.wrapped-top-books-title b { color:inherit; font-size:8px; }
.wrapped-top-book {
  display:grid;
  grid-template-columns:22px 48px minmax(0,1fr);
  align-items:center;
  gap:9px;
  padding:8px 0;
  border-top:1px solid rgba(255,255,255,.08);
}
.wrapped-top-book:first-of-type { border-top:0; }
.wrapped-rank {
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:inherit;
  font-size:10px;
  font-weight:900;
}
.wrapped-top-book .wrapped-feature-cover { width:48px; height:66px; flex-basis:48px; }
.wrapped-top-book .wrapped-feature-copy span { font-size:7px; }
.wrapped-top-book .wrapped-feature-copy strong { font-size:12px; }
.wrapped-top-book .wrapped-feature-copy small { font-size:8px; }
.wrapped-top-book .wrapped-feature-copy b { font-size:8px; }

/* Export mode: capture the actual custom-themed Wrapped card only. */
.wrapped-modal-box.wrapped-exporting {
  width:540px !important;
  max-width:540px !important;
  max-height:none !important;
  overflow:visible !important;
  margin:0 !important;
  transform:none !important;
}
.wrapped-modal-box.wrapped-exporting .modal-header,
.wrapped-modal-box.wrapped-exporting .wrapped-toolbar,
.wrapped-modal-box.wrapped-exporting .wrapped-theme-note,
.wrapped-modal-box.wrapped-exporting .wrapped-share-icon-btn,
.wrapped-modal-box.wrapped-exporting .wrapped-style-row,
.wrapped-modal-box.wrapped-exporting .wrapped-share-btn {
  display:none !important;
}
.wrapped-modal-box.wrapped-exporting #reading-wrapped-content {
  max-height:none !important;
  overflow:visible !important;
}
.wrapped-modal-box.wrapped-exporting .wrapped-hero h2,
.wrapped-modal-box.wrapped-exporting .wrapped-hero h2 span {
  font-family:var(--fv-display-font) !important;
}
@media (max-width:480px) {
  .wrapped-top-book { grid-template-columns:20px 44px minmax(0,1fr); gap:8px; }
  .wrapped-top-book .wrapped-feature-cover { width:44px; height:60px; flex-basis:44px; }
}

/* ==========================================================
   FIKSIVERSE — RESPONSIVE ALL DEVICES
   Mobile, tablet, laptop, desktop, and wide screens.
   Existing mobile styling is preserved; these rules only
   expand/reflow the layout at larger viewport widths.
   ========================================================== */

html {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

body.galaxy-theme {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  overflow-x: hidden;
}

main {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding: clamp(14px, 2vw, 32px);
}

.galaxy-header {
  width: 100%;
  padding: 12px clamp(14px, 2vw, 32px);
}

/* Keep the main content comfortable on very wide monitors. */
.galaxy-header > *,
.galaxy-header .header-inner {
  min-width: 0;
}

/* Responsive book grids. */
.book-grid-vertical {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 18px);
}

/* Cards become wider naturally instead of remaining phone-sized. */
.book-card-horizontal {
  min-width: clamp(130px, 15vw, 190px);
  max-width: clamp(130px, 15vw, 190px);
}

.uncropped-cover-container {
  height: clamp(160px, 20vw, 280px);
}

.banner-item {
  height: clamp(170px, 28vw, 420px);
}

.banner-content {
  bottom: clamp(12px, 2vw, 24px);
  left: clamp(14px, 2vw, 28px);
  right: clamp(14px, 2vw, 28px);
}

.banner-content h2,
.banner-content h3 {
  max-width: min(80%, 900px);
}

/* Tablet. */
@media (min-width: 600px) {
  .book-grid-vertical {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .profile-stats-grid {
    gap: 12px;
  }

  .home-footer {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Small laptop / tablet landscape. */
@media (min-width: 768px) {
  main {
    padding: 24px clamp(20px, 3vw, 40px);
  }

  .book-grid-vertical {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .book-card-vertical {
    border-radius: 16px;
  }

  .book-info {
    padding: 10px;
  }

  .book-title {
    font-size: 12px;
  }

  .book-author,
  .book-stats {
    font-size: 10px;
  }

  .profile-card-hero {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }

  .home-footer {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Desktop modal: centered dialog instead of mobile bottom sheet. */
  .modal-overlay {
    align-items: center;
    padding: 24px;
  }

  .modal-box {
    width: min(100%, 720px);
    max-width: 720px;
    border-radius: 24px;
    max-height: 90vh;
    animation: desktopModalIn 0.22s ease-out;
  }

  .language-modal-box,
  .password-reset-box {
    max-width: 560px;
  }

  .wrapped-modal-box {
    max-width: 760px !important;
  }

  /* Bottom navigation can breathe on desktop. */
  .bottom-nav {
    max-width: 760px;
    padding: 10px 18px;
    border: 1px solid #E5DCEB;
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
  }

  .nav-btn {
    flex: 1;
    width: auto;
    max-width: 180px;
    margin: 0 auto;
  }

  .nav-btn i {
    font-size: 19px;
  }

  .nav-btn {
    font-size: 11px;
  }
}

/* Standard desktop. */
@media (min-width: 1024px) {
  main {
    padding-left: clamp(28px, 4vw, 56px);
    padding-right: clamp(28px, 4vw, 56px);
  }

  .book-grid-vertical {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .book-scroll-horizontal {
    gap: 16px;
  }

  .book-card-horizontal {
    min-width: 170px;
    max-width: 190px;
  }

  .uncropped-cover-container {
    height: clamp(190px, 19vw, 300px);
  }

  .banner-item {
    height: clamp(220px, 28vw, 420px);
  }

  .profile-info-box {
    padding-left: 24px;
    padding-right: 24px;
  }

  .toast-container {
    max-width: min(720px, calc(100vw - 48px));
  }
}

/* Large desktop / wide monitor. */
@media (min-width: 1440px) {
  main {
    max-width: 1600px;
    padding-left: 48px;
    padding-right: 48px;
  }

  .book-grid-vertical {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
  }

  .book-card-horizontal {
    min-width: 190px;
    max-width: 210px;
  }

  .uncropped-cover-container {
    height: 300px;
  }
}

/* Very small phones: prevent horizontal overflow and oversized controls. */
@media (max-width: 380px) {
  main {
    padding-left: 10px;
    padding-right: 10px;
  }

  .galaxy-header {
    padding-left: 10px;
    padding-right: 10px;
  }

  .book-grid-vertical {
    gap: 8px;
  }

  .uncropped-cover-container {
    height: 145px;
  }
}

/* Landscape phones / compact tablets. */
@media (max-height: 520px) and (orientation: landscape) {
  .galaxy-header {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .banner-item {
    height: min(60vh, 280px);
  }

  .bottom-nav {
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

@keyframes desktopModalIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Touch devices: keep tap targets comfortable. */
@media (hover: none) and (pointer: coarse) {
  button,
  .nav-btn,
  .filter-btn,
  .book-card-horizontal,
  .book-card-vertical,
  .privacy-pill {
    -webkit-tap-highlight-color: transparent;
  }
}