/* Size the volume from its actual cover, never from an unrelated legacy width. */
#app .book3d { box-sizing:border-box; flex-shrink:0; padding:0; background:transparent; border:0; border-radius:0; box-shadow:none; overflow:visible; --book-thickness:20px; }
#app .book3d-spine { left:100%; transform:translateX(-50%) rotateY(90deg); }
#app .book3d-pages { left:0; transform:translateX(-50%) rotateY(-90deg); }
#app .book3d-face img { width:100%; height:100%; margin:0; padding:0; border-radius:0; transform:none; object-fit:fill; box-shadow:none; }
#app .book3d-front { box-shadow:-6px 10px 16px #03314b26; }
#app .book3d.is-static .book3d-volume { transform:rotateX(3deg) rotateY(-24deg); }
#app .book3d.is-static { margin:16px auto 22px; }
#app .book-card .book-cover.book3d { width:132px!important; height:192px!important; max-width:132px!important; --book-thickness:20px; }
#app .related-book-card .related-book-cover.book3d { width:115px !important; height:167px !important; max-width:115px !important; aspect-ratio:69/100 !important; margin:16px auto !important; --book-thickness:16px; }
#app .shelf-cover.book3d { width:116px; height:168px; --book-thickness:18px; }
#app .continue-cover.book3d,#app .offline-row-cover.book3d { width:64px; height:93px; margin:4px auto; --book-thickness:10px; }
#app .notfound-cover.book3d { width:80px; height:116px; --book-thickness:12px; }
#app .book-cover-stage .book3d { --book-thickness:28px; }
#app .laptop-books .device-cover { width:58px; height:84px; margin:0 4px; --book-thickness:8px; }
#app .hero-phone-listen .phone-cover { width:82px; height:119px; margin:8px auto 14px; --book-thickness:12px; }
#app .persona-art .persona-cover { width:82px; height:119px; margin:0 7px; --book-thickness:12px; }
#app .persona-art .persona-cover:nth-child(2) { transform:translateY(-22px); }
#app .book-card,#app .related-book-card { min-width:0; }
#app .related-book-card { overflow:hidden; }
.cover-placeholder-title { display:grid; place-items:center; height:100%; padding:16px; color:#03314b; text-align:center; font-weight:800; background:#dbe8f8; }
#app :is(.btn,.blinkist-btn-primary,.blinkist-btn-outline,.daily-play-btn,.daily-teaser-btn,.daily-read-btn,.load-more-books,.collection-offline) { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:11px 18px; border-radius:8px; font-family:inherit; font-weight:700; line-height:1.6; text-align:center; cursor:pointer; transition:background .18s ease,box-shadow .18s ease; }
#app :is(.btn-primary,.blinkist-btn-primary,.daily-play-btn) { border:1px solid #2ce080; background:#2ce080; color:#03314b; box-shadow:none; }
#app :is(.btn-secondary,.blinkist-btn-outline,.daily-teaser-btn,.collection-offline) { border:1px solid #bdcdd4; background:#fff; color:#03314b; }
#app :is(.btn-ghost,.daily-read-btn) { border:1px solid #dce5e9; background:#f3f7f8; color:#365564; }
#app :is(.btn-primary,.blinkist-btn-primary,.header-premium):hover { background:#20c971; }
#app :is(.btn-secondary,.blinkist-btn-outline,.btn-ghost):hover { background:#eaf4ef; border-color:#8ba89c; }
#app :is(button,a,input,select):focus-visible { outline:3px solid #087baf; outline-offset:3px; }
#app button:disabled { opacity:.5; cursor:not-allowed; }
#app .inline-actions { flex-wrap:wrap; }
#app .book-card .favorite { display:grid; place-items:center; width:36px; height:36px; border:1px solid #d4dfe0; border-radius:50%; background:#fff; color:#45616c; z-index:3; cursor:pointer; }
#app .book-card .favorite.active { color:#b42348; background:#fff1f4; }
@media(prefers-reduced-motion:reduce) { #app .book3d-volume,#app button { transition:none; } }


/* ==========================================================================
   VARAGH STORY — REFINED UI BOXES & INTERACTIVE CONTROLS (v0.42.16)
   ========================================================================== */

/* 1. Back To Top Floating Action Button (Screenshot 1) */
.back-to-top {
  position: fixed;
  z-index: 9850;
  left: 24px;
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: linear-gradient(135deg, #1f5a47 0%, #123e2f 100%);
  color: #ffffff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(18, 62, 47, 0.32), 0 2px 6px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.25s ease,
              background 0.2s ease,
              box-shadow 0.2s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: linear-gradient(135deg, #276d56 0%, #174b39 100%);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(18, 62, 47, 0.42), 0 4px 10px rgba(0, 0, 0, 0.12);
  color: #ffffff;
}

.back-to-top:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(18, 62, 47, 0.28);
}

.back-to-top > span:first-child {
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  transition: transform 0.2s ease;
}

.back-to-top:hover > span:first-child {
  transform: translateY(-2px);
}

.back-to-top-label {
  font-size: 11px;
  font-weight: 800;
}

body:has(.mini-player:not([hidden])) .back-to-top {
  bottom: 96px;
}

@media (max-width: 640px) {
  .back-to-top {
    left: 16px;
    bottom: 16px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
  }
  .back-to-top-label {
    display: none;
  }
  body:has(.mini-player:not([hidden])) .back-to-top {
    bottom: 92px;
  }
}

/* 2. Personal Notes Card & Textarea (Screenshot 2) */
.personal-notes-box {
  margin-top: 26px;
  padding: 22px 24px;
  border-radius: 20px;
  background: linear-gradient(180deg, #fffdfa 0%, #faf6ef 100%);
  border: 1.5px solid #ebd9c5;
  box-shadow: 0 4px 18px rgba(160, 120, 80, 0.06);
}

.personal-notes-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.personal-notes-head h3 {
  font-size: 14.5px;
  font-weight: 800;
  color: #3b2a1a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.personal-notes-head .mini-badge {
  background: #f4eae0;
  color: #8c5828;
  border: 1px solid #e3d0bd;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 11px;
  border-radius: 999px;
}

.personal-notes-textarea {
  width: 100%;
  min-height: 100px;
  max-height: 260px;
  padding: 14px 16px;
  border: 1.5px solid #dfcebe;
  border-radius: 14px;
  background: #ffffff;
  color: #243b2f;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.8;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  outline: none;
  scrollbar-width: thin;
  scrollbar-color: #d1c0af transparent;
}

.personal-notes-textarea::placeholder {
  color: #9f8f80;
  font-size: 12.5px;
  line-height: 1.7;
}

.personal-notes-textarea:focus {
  border-color: #1f5a47;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(31, 90, 71, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
}

.note-status-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eef7f2;
  color: #008751;
  border: 1px solid #bce1ce;
  transition: all 0.25s ease;
}

.note-status-badge:empty {
  display: none;
}

.note-status-badge.is-editing {
  background: #fff6e8;
  color: #a05e03;
  border-color: #f0d5a3;
}

.personal-notes-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  gap: 12px;
  flex-wrap: wrap;
}

.note-info-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  color: #7b6d60;
  font-weight: 600;
}

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

#app #saveBookNoteBtn {
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 9px 20px !important;
  background: linear-gradient(135deg, #1f5a47 0%, #154434 100%) !important;
  color: #ffffff !important;
  border: 1px solid #143e30 !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 14px rgba(20, 62, 48, 0.22) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

#app #saveBookNoteBtn:hover {
  background: linear-gradient(135deg, #256a54 0%, #194e3c 100%) !important;
  color: #ffffff !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 6px 18px rgba(20, 62, 48, 0.3) !important;
}

#app #saveBookNoteBtn.btn-saved-success {
  background: linear-gradient(135deg, #00af6a 0%, #008751 100%) !important;
  border-color: #00af6a !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(0, 175, 106, 0.45) !important;
  transform: scale(1.02) !important;
}

#app #clearBookNoteBtn {
  font-size: 11.5px !important;
  padding: 6px 12px !important;
  color: #8c5828 !important;
  background: #fbf6ee !important;
  border: 1px solid #ebd9c5 !important;
  border-radius: 8px !important;
}

#app #clearBookNoteBtn:hover {
  background: #f4eae0 !important;
  color: #bd2121 !important;
  border-color: #e2c0b0 !important;
}

/* 3. Leitner Flashcard Action Buttons (Screenshot 3) */
.leitner-bar-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
  padding: 12px 14px;
  background: rgba(245, 248, 245, 0.7);
  border: 1px dashed #cfe0d4;
  border-radius: 16px;
}

.leitner-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 42px;
  box-sizing: border-box;
}

.leitner-btn-known {
  background: linear-gradient(135deg, #f0fdf4 0%, #e2f8eb 100%);
  color: #166534;
  border: 1.5px solid #a7f3d0;
  box-shadow: 0 2px 8px rgba(22, 101, 52, 0.08);
}

.leitner-btn-known:hover {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  border-color: #34d399;
  color: #14532d;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(22, 101, 52, 0.16);
}

.leitner-btn-known:active {
  transform: translateY(0);
}

.leitner-btn-review {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #1d4ed8;
  border: 1.5px solid #bfdbfe;
  box-shadow: 0 2px 8px rgba(29, 78, 216, 0.08);
}

.leitner-btn-review:hover {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border-color: #60a5fa;
  color: #1e40af;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(29, 78, 216, 0.16);
}

.leitner-btn-review:active {
  transform: translateY(0);
}

@media (max-width: 520px) {
  .leitner-bar-actions {
    flex-direction: column;
    width: 100%;
  }
  .leitner-btn {
    width: 100%;
  }
}

/* 4. Self-Assessment Options (Screenshot 4) */
.assessment-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 16px;
}

.assessment-opt-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: right;
  width: 100%;
  padding: 13px 18px;
  border-radius: 14px;
  background: #ffffff;
  border: 1.5px solid #dce8df;
  color: #243b2f;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.assessment-opt-btn:hover {
  border-color: #1f5a47;
  background: #f2f8f4;
  color: #174c3a;
  transform: translateX(-4px);
  box-shadow: 0 6px 16px rgba(31, 90, 71, 0.12);
}

.assessment-opt-btn.active,
.assessment-opt-btn:active {
  border-color: #1f5a47;
  background: linear-gradient(135deg, #e7f5ed 0%, #dbf0e3 100%);
  color: #123e2f;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(31, 90, 71, 0.16);
  transform: translateX(-2px);
}

.assessment-result {
  margin-top: 16px;
  padding: 15px 20px;
  border-radius: 14px;
  background: #f3f9f5;
  border: 1.5px solid #bce1ce;
  color: #174e3a;
  font-size: 13px;
  line-height: 1.7;
}

/* 5. Action Plan Items & Checklist Cards */
.action-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 18px;
  border-radius: 16px;
  background: #ffffff;
  border: 1.5px solid #e1ebe4;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  margin-bottom: 11px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.action-item:hover {
  border-color: #a3c9b2;
  background: #f9fcf9;
  transform: translateY(-1.5px);
  box-shadow: 0 6px 16px rgba(31, 90, 71, 0.08);
}

.action-item.done {
  background: #f2f8f4;
  border-color: #b7ddc5;
}

.action-item.done .action-copy strong {
  text-decoration: line-through;
  color: #6b8475;
}

.action-item input[type="checkbox"] {
  display: none;
}

.action-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 2px solid #a4c5b3;
  background: #ffffff;
  display: inline-grid;
  place-items: center;
  margin-top: 2px;
  transition: all 0.2s ease;
}

.action-item.done .action-check {
  background: #1f5a47;
  border-color: #1f5a47;
}

.action-item.done .action-check::after {
  content: "✓";
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.action-copy strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: #1e3629;
  line-height: 1.5;
  margin-bottom: 4px;
}

.action-copy small {
  display: block;
  font-size: 12px;
  color: #5c7467;
  line-height: 1.7;
}

/* 6. Flashcard Shell & Flipping Card */
.flashcard-shell {
  max-width: 600px;
  margin: 0 auto;
}

.flashcard-card {
  width: 100%;
  min-height: 220px;
  padding: 28px 24px;
  border-radius: 20px;
  background: linear-gradient(145deg, #ffffff 0%, #f6faf7 100%);
  border: 1.5px solid #dbe8e0;
  box-shadow: 0 8px 26px rgba(24, 60, 45, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.flashcard-card:hover {
  transform: translateY(-3px);
  border-color: #9ccbb0;
  box-shadow: 0 12px 32px rgba(24, 60, 45, 0.12);
}

.flashcard-card.showing-back {
  background: linear-gradient(145deg, #f2faf4 0%, #e5f5eb 100%);
  border-color: #95d5ad;
}

.flashcard-label {
  font-size: 15px !important;
  font-weight: 800 !important;
  padding: 6px 18px !important;
  border-radius: 999px !important;
  background: #e4efe7 !important;
  color: #1b6342 !important;
  letter-spacing: 0.02em !important;
  display: inline-block !important;
  box-shadow: 0 2px 6px rgba(27, 99, 66, 0.08) !important;
  transition: all 0.2s ease !important;
}

.flashcard-card.showing-back .flashcard-label {
  background: #cfeedb !important;
  color: #115332 !important;
}

.leitner-side-pill {
  font-size: 14px !important;
  font-weight: 800 !important;
  padding: 5px 16px !important;
  border-radius: 999px !important;
}

.flashcard-card strong {
  font-size: clamp(16px, 2.5vw, 21px);
  font-weight: 700;
  color: #1a3327;
  line-height: 1.7;
  margin: 16px 0;
  max-width: 480px;
}

.flashcard-hint {
  font-size: 11px;
  color: #728c7d;
  font-weight: 600;
}

/* 7. Quiz Options Cards */
.quiz-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-radius: 14px;
  background: #ffffff;
  border: 1.5px solid #dce8df;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 13px;
  font-weight: 600;
  color: #243b2f;
  line-height: 1.5;
}

.quiz-option:hover {
  border-color: #1f5a47;
  background: #f4faf6;
  transform: translateX(-3px);
  box-shadow: 0 4px 14px rgba(31, 90, 71, 0.08);
}

.quiz-option:has(input:checked) {
  border-color: #1f5a47;
  background: linear-gradient(135deg, #ebf7f0 0%, #e0f2e8 100%);
  color: #144936;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(31, 90, 71, 0.12);
}

.quiz-option.quiz-is-correct {
  border-color: #16a34a !important;
  background: #f0fdf4 !important;
  color: #15803d !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.15) !important;
}

.quiz-option.quiz-is-correct::after {
  content: " ✓ پاسخ صحیح";
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 800;
  color: #16a34a;
}

.quiz-option.quiz-is-wrong {
  border-color: #dc2626 !important;
  background: #fef2f2 !important;
  color: #b91c1c !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.12) !important;
}

.quiz-option.quiz-is-wrong::after {
  content: " ✕ پاسخ نادرست";
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 800;
  color: #dc2626;
}

.quiz-explanation {
  margin-top: 10px;
  padding: 10px 14px;
  background: #fbf8f0;
  border-right: 3px solid #d49f69;
  border-radius: 8px;
  font-size: 12px;
  color: #5a432b;
  line-height: 1.8;
  animation: fadeIn 0.3s ease;
}

.quiz-result.is-evaluated {
  margin-top: 16px;
  animation: fadeIn 0.35s ease;
}

.quiz-result-card {
  padding: 16px 20px;
  border-radius: 16px;
  border: 1.5px solid #dce8df;
  background: #fafcfb;
}

.quiz-result.is-perfect .quiz-result-card {
  border-color: #16a34a;
  background: #f0fdf4;
}

.quiz-result.is-good .quiz-result-card {
  border-color: #245944;
  background: #f2f8f5;
}

.quiz-result.is-retry .quiz-result-card {
  border-color: #d49f69;
  background: #fdfaf4;
}

.quiz-result-score {
  font-size: 15px;
  font-weight: 800;
  color: #183e30;
  margin-bottom: 6px;
}

.quiz-result.is-perfect .quiz-result-score {
  color: #15803d;
}

.quiz-result-card p {
  margin: 0 !important;
  font-size: 12.5px !important;
  color: #556c62 !important;
  line-height: 1.8 !important;
}

/* 8. FAQ Accordion Boxes */
.faq-item {
  border-radius: 16px;
  background: #ffffff;
  border: 1.5px solid #e1ebe4;
  margin-bottom: 12px;
  overflow: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.faq-item:hover {
  border-color: #b5d5c0;
  box-shadow: 0 6px 16px rgba(31, 90, 71, 0.06);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 700;
  color: #1e3b2e;
  user-select: none;
}

.faq-answer {
  padding: 0 20px 18px;
  font-size: 13px;
  line-height: 1.8;
  color: #496355;
  border-top: 1px solid #edf4ef;
  margin-top: -2px;
  padding-top: 14px;
}

/* 9. Offline Download Card Box */
.offline-box {
  padding: 20px 22px;
  border-radius: 18px;
  background: #fbf9f4;
  border: 1.5px solid #e5dcce;
  margin-top: 20px;
}

.offline-status {
  font-size: 12.5px;
  color: #556c5f;
  margin-bottom: 10px;
  font-weight: 600;
}

/* Offline Library Rows Layout & Spacing */
#app .offline-list {
  display: grid !important;
  gap: 16px !important;
}

#app .offline-row {
  display: grid !important;
  grid-template-columns: 88px minmax(0, 1fr) auto !important;
  gap: 22px !important;
  align-items: center !important;
  padding: 18px 24px !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  border: 1px solid #e2ece5 !important;
  box-shadow: 0 4px 18px rgba(25, 55, 37, 0.04) !important;
  overflow: visible !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}

#app .offline-row:hover {
  border-color: #bcd5c5 !important;
  box-shadow: 0 8px 26px rgba(25, 55, 37, 0.08) !important;
  transform: translateY(-2px) !important;
}

#app .offline-row-cover.book3d {
  width: 64px !important;
  height: 93px !important;
  margin: 4px auto !important;
  --book-thickness: 10px !important;
  flex-shrink: 0 !important;
}

#app .offline-row > div:not(.inline-actions) {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 6px !important;
}

#app .offline-row h3 {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #1e3827 !important;
  line-height: 1.5 !important;
}

#app .offline-row p {
  margin: 0 !important;
  color: #647a6c !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

#app .offline-row .inline-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
}

#app .offline-row .inline-actions .btn {
  min-height: 40px !important;
  padding: 8px 18px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

#app .continue-card {
  grid-template-columns: 88px minmax(0, 1fr) !important;
  gap: 18px !important;
}

#app .continue-cover.book3d {
  width: 64px !important;
  height: 93px !important;
  margin: 4px auto !important;
  --book-thickness: 10px !important;
}

@media (max-width: 640px) {
  #app .offline-row {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 14px 16px !important;
  }
  #app .offline-row .inline-actions {
    grid-column: 1 / -1 !important;
    justify-content: flex-end !important;
    margin-top: 6px !important;
  }
}

/* 10. Leitner Modal Dialog */
.leitner-dialog {
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid #dce8df;
  box-shadow: 0 20px 50px rgba(18, 50, 38, 0.22);
  padding: 30px;
  max-width: 440px;
  width: 90%;
  position: relative;
  text-align: center;
}

/* ==========================================================================
   11. Perfect Vertical Book Cards Layout (Zero text overlap)
   ========================================================================== */
.library-app .collection-frame .book-card,
.collection-frame .book-card,
#app .book-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  position: relative !important;
  box-sizing: border-box !important;
  min-height: 400px !important;
  padding: 18px 16px 16px !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  border: 1px solid #e2ebe5 !important;
  box-shadow: 0 4px 16px rgba(3, 49, 75, 0.04) !important;
  text-decoration: none !important;
  overflow: visible !important;
}

.library-app .collection-frame .book-card:hover,
.collection-frame .book-card:hover,
#app .book-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 24px rgba(29, 54, 36, 0.1) !important;
  border-color: #b7d6c2 !important;
}

/* Favorite button pinned strictly to top-left */
.collection-frame .book-card .favorite,
#app .book-card .favorite {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  z-index: 10 !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid #d4dfe0 !important;
  display: grid !important;
  place-items: center !important;
  color: #45616c !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  cursor: pointer !important;
}

.collection-frame .book-card .favorite.active,
#app .book-card .favorite.active {
  color: #b42348 !important;
  background: #fff1f4 !important;
  border-color: #f7c5d0 !important;
}

/* 3D Book Cover centered in top half */
.collection-frame .book-card .book-cover.book3d,
#app .book-card .book-cover.book3d {
  width: 120px !important;
  height: 174px !important;
  max-width: 120px !important;
  margin: 8px auto 16px !important;
  display: block !important;
  flex-shrink: 0 !important;
  position: relative !important;
  --book-thickness: 18px !important;
}

/* Card Body containing title, author, badges and progress */
.collection-frame .book-card-body,
#app .book-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  margin-top: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  text-align: right !important;
  box-sizing: border-box !important;
}

/* Book Title */
.collection-frame .book-card h3,
#app .book-card h3 {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: #173326 !important;
  margin: 0 0 4px !important;
  line-height: 1.45 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Book Author */
.collection-frame .book-card-author,
#app .book-card-author {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #5d7567 !important;
  margin: 0 0 10px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Meta Badges Row */
.collection-frame .book-card-meta,
#app .book-card-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: auto !important;
  margin-bottom: 10px !important;
  align-items: center !important;
}

.collection-frame .book-card-meta .mini-badge,
#app .book-card-meta .mini-badge {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 10px !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  line-height: 1.4 !important;
}

/* Progress Track and Info */
.collection-frame .book-card-progress,
#app .book-card-progress {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 0 !important;
}

.collection-frame .book-card-progress .progress-track,
#app .book-card-progress .progress-track {
  width: 100% !important;
  height: 4px !important;
  border-radius: 2px !important;
  background: #e4ece7 !important;
  overflow: hidden !important;
}

.collection-frame .book-card-progress span,
#app .book-card-progress span {
  font-size: 10px !important;
  color: #657e70 !important;
  line-height: 1.4 !important;
}

/* ==========================================================================
   12. Premium Plan Cards & Ribbons (Fix clipped badge and pseudo-element bleed)
   ========================================================================== */
.premium-plans-grid,
#app .premium-plans-grid {
  overflow: visible !important;
  padding-top: 18px !important;
}

.premium-plan-card,
.premium-plan-card.featured,
#app .premium-plan-card,
#app .premium-plan-card.featured {
  overflow: visible !important;
  position: relative !important;
  background: #ffffff !important;
  min-height: 0 !important;
  gap: 0 !important;
  padding: 30px 22px 24px !important;
  justify-content: flex-start !important;
}

.premium-plan-card.featured::before,
.premium-plan-card.featured::after,
#app .premium-plan-card.featured::before,
#app .premium-plan-card.featured::after {
  display: none !important;
  content: none !important;
}

.plan-ribbon,
#app .plan-ribbon {
  position: absolute !important;
  top: -13px !important;
  right: 20px !important;
  left: auto !important;
  z-index: 10 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  background: #00af6a !important;
  color: #03314b !important;
  font-family: inherit !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px rgba(0, 175, 106, 0.28) !important;
  white-space: nowrap !important;
  line-height: 1.5 !important;
}

/* ==========================================================================
   13. Rich Balanced Benefits Stage & Video Showcase (No empty background)
   ========================================================================== */
.library-app.blinkist-v2 .blinkist-benefits-stage .blinkist-video-card,
.blinkist-video-card,
#app .blinkist-video-card {
  display: block !important;
  width: 100% !important;
  min-height: 540px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 60px rgba(1, 28, 43, 0.28) !important;
  background: linear-gradient(145deg, #022336 0%, #03364f 55%, #011b2b 100%) !important;
  position: relative !important;
}

.library-app.blinkist-v2 .blinkist-benefits-stage .video-placeholder-frame,
.video-placeholder-frame,
#app .video-placeholder-frame {
  position: relative !important;
  width: 100% !important;
  min-height: 540px !important;
  border: none !important;
  border-radius: 26px !important;
  background: transparent !important;
  padding: 0 !important;
  overflow: hidden !important;
  aspect-ratio: auto !important;
  display: block !important;
}

.video-ambient-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(55px);
}
.video-ambient-glow.glow-1 {
  top: -60px;
  right: -40px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(0, 215, 117, 0.22) 0%, transparent 70%);
}
.video-ambient-glow.glow-2 {
  bottom: -60px;
  left: -40px;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(3, 75, 110, 0.45) 0%, transparent 70%);
}

.library-app.blinkist-v2 .video-book-cloud,
.video-book-cloud,
#app .video-book-cloud {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: auto !important;
}
.library-app.blinkist-v2 .video-book-cloud::after,
.video-book-cloud::after,
#app .video-book-cloud::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(2, 35, 54, 0.15) 0%, rgba(2, 35, 54, 0.55) 45%, rgba(1, 23, 36, 0.94) 100%) !important;
  pointer-events: none !important;
}

.cloud-book-item {
  position: absolute;
  transition: transform 0.3s ease, filter 0.3s ease;
  cursor: pointer;
  pointer-events: auto;
  z-index: 5;
  text-decoration: none !important;
}
.cloud-book-item:hover {
  transform: scale(1.08) !important;
  z-index: 8 !important;
  filter: brightness(1.12);
}
.cloud-book-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

.cloud-book-0 { right: 5%; top: 22px; width: 92px; height: 138px; transform: rotate(-5deg); }
.cloud-book-1 { right: 21%; top: 38px; width: 88px; height: 132px; transform: rotate(3deg); }
.cloud-book-2 { right: 37%; top: 14px; width: 94px; height: 141px; transform: rotate(-2deg); }
.cloud-book-3 { left: 37%; top: 22px; width: 94px; height: 141px; transform: rotate(4deg); }
.cloud-book-4 { left: 21%; top: 12px; width: 88px; height: 132px; transform: rotate(-4deg); }
.cloud-book-5 { left: 5%; top: 30px; width: 92px; height: 138px; transform: rotate(6deg); }
.cloud-book-6 { right: 4%; top: 200px; width: 88px; height: 132px; transform: rotate(4deg); }
.cloud-book-7 { left: 4%; top: 200px; width: 88px; height: 132px; transform: rotate(-5deg); }

.video-player-preview {
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -46%);
  z-index: 10;
  width: min(390px, 92%);
  background: rgba(4, 34, 50, 0.90);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(0, 215, 117, 0.35);
  border-radius: 20px;
  padding: 16px 18px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5), 0 0 35px rgba(0, 215, 117, 0.16);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.video-player-preview:hover {
  transform: translate(-50%, -48%) scale(1.02);
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.6), 0 0 45px rgba(0, 215, 117, 0.28);
  border-color: #00d775;
}

.preview-player-inner {
  display: grid;
  grid-template-columns: 60px 1fr 48px;
  gap: 14px;
  align-items: center;
  text-align: right;
}

.preview-cover {
  width: 60px;
  height: 88px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
}

.preview-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.preview-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 800;
  color: #00d775;
  margin-bottom: 2px;
}

.preview-info strong {
  font-size: 13.5px;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-info small {
  font-size: 11px;
  color: #9cbdb0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}

.preview-waveform {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 18px;
  margin-bottom: 6px;
}

.preview-waveform span {
  display: inline-block;
  width: 3px;
  border-radius: 2px;
  background: #00d775;
}
.preview-waveform span:nth-child(1) { height: 6px; opacity: 0.6; }
.preview-waveform span:nth-child(2) { height: 12px; }
.preview-waveform span:nth-child(3) { height: 16px; }
.preview-waveform span:nth-child(4) { height: 8px; opacity: 0.7; }
.preview-waveform span:nth-child(5) { height: 18px; }
.preview-waveform span:nth-child(6) { height: 14px; }
.preview-waveform span:nth-child(7) { height: 9px; opacity: 0.8; }
.preview-waveform span:nth-child(8) { height: 15px; }
.preview-waveform span:nth-child(9) { height: 12px; }
.preview-waveform span:nth-child(10) { height: 7px; opacity: 0.6; }
.preview-waveform span:nth-child(11) { height: 14px; }
.preview-waveform span:nth-child(12) { height: 5px; opacity: 0.5; }

.preview-progress {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.preview-track {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

.preview-bar {
  height: 100%;
  background: #00d775;
  border-radius: 2px;
}

.preview-time {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  color: #82a898;
  direction: ltr;
}

.preview-play-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: #00d775;
  color: #022336;
  font-size: 18px;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 215, 117, 0.4);
  transition: transform 0.2s ease, background 0.2s ease;
}
.preview-play-btn:hover {
  transform: scale(1.08);
  background: #2ce080;
}

.library-app.blinkist-v2 .video-caption,
.video-caption,
#app .video-caption {
  position: absolute !important;
  inset-inline: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  z-index: 8 !important;
  padding: 24px 20px 22px !important;
  background: linear-gradient(180deg, transparent 0%, rgba(1, 22, 35, 0.9) 30%, #011623 100%) !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
}

.video-caption strong {
  font-size: 16.5px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.4 !important;
}

.video-caption p {
  margin: 0 0 10px !important;
  font-size: 12px !important;
  color: #a4c8b9 !important;
  line-height: 1.5 !important;
}

.video-feature-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.video-feature-chips span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #00d775;
  background: rgba(0, 215, 117, 0.12);
  border: 1px solid rgba(0, 215, 117, 0.25);
  padding: 3px 10px;
  border-radius: 999px;
}

@media (max-width: 900px) {
  .library-app.blinkist-v2 .blinkist-benefits-stage {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .library-app.blinkist-v2 .blinkist-benefits-stage .blinkist-video-card,
  .blinkist-video-card,
  #app .blinkist-video-card {
    min-height: 480px !important;
  }
  .cloud-book-item {
    transform: scale(0.85);
  }
  .video-player-preview {
    width: min(340px, 94%);
  }
}

/* ==========================================================================
   14. Comprehensive Site-Wide Audit Fixes (Header Search, Modals, 404, Audio)
   ========================================================================== */

/* Ensure [hidden] works everywhere including body-level modals */
[hidden] {
  display: none !important;
}

/* Header Search Button & Icon Fix */
.site-header .header-search-btn,
.reference-header .header-search-btn,
#headerSearchBtn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  border: 1px solid #d4e3dc !important;
  background: #f4faf7 !important;
  color: #03314b !important;
  font-family: inherit !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.site-header .header-search-btn:hover,
.reference-header .header-search-btn:hover,
#headerSearchBtn:hover {
  background: #e3f4ec !important;
  border-color: #9cd4b8 !important;
  transform: translateY(-1px) !important;
}

.site-header .header-search-btn .search-icon,
.reference-header .header-search-btn .search-icon,
#headerSearchBtn .search-icon {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  transform: none !important;
  font-size: 13px !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

/* Premium Modal Package Cards & Badge Polish */
.modal-packages-grid,
#premiumModal .modal-packages-grid {
  padding-top: 14px !important;
  overflow: visible !important;
}

.modal-package-card,
#premiumModal .modal-package-card {
  position: relative !important;
  overflow: visible !important;
  padding: 26px 14px 18px !important;
}

.modal-package-card.highlight,
#premiumModal .modal-package-card.highlight {
  position: relative !important;
  overflow: visible !important;
  padding-top: 30px !important;
}

.modal-package-tag,
#premiumModal .modal-package-tag {
  position: absolute !important;
  top: -12px !important;
  right: 50% !important;
  left: auto !important;
  transform: translateX(50%) !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 12px rgba(0, 175, 106, 0.3) !important;
  z-index: 2 !important;
}

/* 404 Not Found Page Layout */
.notfound-page {
  padding: 36px 0 64px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 36px !important;
}

.notfound-hero {
  text-align: center !important;
  max-width: 640px !important;
  margin: 0 auto !important;
  padding: 44px 32px !important;
  border-radius: 26px !important;
  background: linear-gradient(145deg, #ffffff 0%, #f1f8f4 100%) !important;
  border: 1.5px solid #dcebe2 !important;
  box-shadow: 0 16px 40px rgba(3, 49, 75, 0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
}

.notfound-code {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 18px !important;
  border-radius: 999px !important;
  background: #e3f5ec !important;
  color: #087352 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
}

.notfound-hero h1 {
  margin: 4px 0 0 !important;
  font-size: clamp(22px, 3vw, 30px) !important;
  color: #03314b !important;
  font-weight: 900 !important;
}

.notfound-hero p {
  margin: 0 0 12px !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
  color: #4f6a75 !important;
  max-width: 480px !important;
}

/* Experience Dialog ("مسیر مطالعه تو" & "کتابخانه من") Polish */
.experience-dialog {
  width: min(720px, calc(100% - 24px)) !important;
  max-height: 90dvh !important;
  padding: 28px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(22, 64, 50, 0.12) !important;
  box-shadow: 0 25px 60px rgba(14, 31, 25, 0.28) !important;
}

.experience-dialog header {
  padding-bottom: 16px !important;
  border-bottom: 1px solid #eef4f1 !important;
  margin-bottom: 16px !important;
}

.experience-dialog h2 {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #12382c !important;
}

.experience-dialog header button {
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid #d5e3e8 !important;
  background: #f5f9fa !important;
  color: #03314b !important;
  font-size: 18px !important;
  transition: all 0.2s ease !important;
}

.experience-dialog header button:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
  transform: rotate(90deg) scale(1.08) !important;
}

/* Path Wizard Elements */
.path-wizard {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.path-wizard-intro {
  margin-bottom: 4px;
}

.path-wizard-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eaf6f0;
  color: #16563e;
  border: 1px solid #c2e3d3;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 8px;
}

.path-wizard-intro p {
  color: #556c62 !important;
  font-size: 13px !important;
  margin: 0 !important;
  line-height: 1.8 !important;
}

.path-wizard-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #fafcfb;
  border: 1px solid #e7efe9;
  border-radius: 18px;
}

.path-step-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.path-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #245944;
  color: #ffffff;
  font-weight: 800;
  font-size: 13px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.path-step-head h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: #183e30;
}

.path-step-head small {
  display: block;
  font-size: 11px;
  color: #697e74;
  margin-top: 2px;
}

/* Topic Pills Grid */
.path-pill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.path-topic-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1.5px solid #dce8e2;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.path-topic-pill input[type="radio"],
.path-choice-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.path-pill-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.path-pill-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.path-pill-body strong {
  font-size: 12px;
  color: #183e30;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.path-pill-body small {
  font-size: 10px;
  color: #71847a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.path-check-mark {
  font-size: 12px;
  font-weight: 800;
  color: #16563e;
  opacity: 0;
  transform: scale(0.6);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.path-topic-pill:hover,
.path-choice-card:hover {
  border-color: #8fd6b4;
  background: #f7fbf8;
  transform: translateY(-1px);
}

.path-topic-pill.is-selected,
.path-choice-card.is-selected {
  border-color: #245944 !important;
  background: #edf7f1 !important;
  box-shadow: 0 4px 14px rgba(36, 89, 68, 0.12) !important;
}

.path-topic-pill.is-selected .path-check-mark,
.path-choice-card.is-selected .path-check-mark {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.path-topic-pill.is-selected strong,
.path-choice-card.is-selected strong {
  color: #16563e !important;
}

/* Card Choice Grid (Goals & Formats) */
.path-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.path-choice-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1.5px solid #dce8e2;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.path-choice-icon {
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}

.path-choice-body {
  flex: 1;
  min-width: 0;
}

.path-choice-body strong {
  display: block;
  font-size: 12px;
  color: #183e30;
  font-weight: 800;
  margin-bottom: 3px;
}

.path-choice-body p {
  margin: 0 !important;
  font-size: 11px !important;
  color: #6d8076 !important;
  line-height: 1.6 !important;
}

/* Actions footer */
.path-wizard-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.path-submit-btn {
  width: 100%;
  padding: 14px 24px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, #245944, #1c4b38) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(36, 89, 68, 0.25) !important;
  transition: all 0.22s ease !important;
}

.path-submit-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(36, 89, 68, 0.35) !important;
  background: linear-gradient(135deg, #2c6e54, #215842) !important;
}

.path-submit-btn .btn-arrow {
  font-size: 16px;
  transition: transform 0.2s ease;
}

.path-submit-btn:hover .btn-arrow {
  transform: translateX(-4px);
}

.path-skip-btn {
  border: none;
  background: none;
  color: #697e74;
  font-size: 12px;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 8px;
  transition: color 0.18s ease;
}

.path-skip-btn:hover {
  color: #183e30;
}

/* Path Result Screen */
.path-result-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.path-result-hero {
  text-align: center;
  padding: 8px 12px 14px;
}

.path-result-icon {
  font-size: 36px;
  display: block;
  margin-bottom: 6px;
}

.path-result-hero h3 {
  margin: 0 0 6px 0;
  font-size: 17px;
  font-weight: 800;
  color: #164032;
}

.path-result-hero p {
  margin: 0 !important;
  font-size: 12px !important;
  color: #556c62 !important;
  line-height: 1.8 !important;
}

.path-recommended-book {
  position: relative;
  text-align: right;
  cursor: pointer;
  border: 1.5px solid #dbe6e0 !important;
  border-radius: 16px !important;
  padding: 14px 18px !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.path-recommended-book:hover {
  transform: translateY(-2px) !important;
  border-color: #245944 !important;
  box-shadow: 0 10px 24px rgba(36, 89, 68, 0.12) !important;
  background: #fafdfb !important;
}

.path-book-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.path-book-badge {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 800;
  background: #eef6f2;
  color: #205541;
  padding: 2px 8px;
  border-radius: 6px;
}

.path-book-meta strong {
  font-size: 14px;
  font-weight: 800;
  color: #153a2d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.path-book-author {
  font-size: 11px;
  color: #6a7c73;
}

.path-book-features {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 11px;
  color: #52675d;
}

.path-audio-pill {
  background: #fdf3e7;
  color: #a0631c;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 10px;
}

.path-book-arrow {
  color: #245944;
  font-weight: 800;
  font-size: 12px;
  padding: 6px 12px;
  background: #eef6f2;
  border-radius: 8px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.path-recommended-book:hover .path-book-arrow {
  background: #245944;
  color: #ffffff;
}

.path-result-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .path-pill-grid {
    grid-template-columns: 1fr;
  }
  .path-card-grid {
    grid-template-columns: 1fr;
  }
  .experience-dialog {
    padding: 20px 16px !important;
  }
  .path-result-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

.experience-dialog :is(button, select):focus-visible {
  outline: 2px solid rgba(0, 175, 106, 0.5) !important;
  outline-offset: 2px !important;
}

.experience-book {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding: 16px 22px !important;
  border-radius: 16px !important;
  border: 1.5px solid #dce8ec !important;
  background: #ffffff !important;
  box-shadow: 0 6px 18px rgba(3, 49, 75, 0.04) !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.experience-book:hover {
  transform: translateY(-2px) !important;
  border-color: #8fd6b4 !important;
  box-shadow: 0 10px 24px rgba(3, 49, 75, 0.08) !important;
}

.experience-dialog .book3d.experience-cover {
  width: 68px !important;
  height: 98px !important;
  --book-width: 68px !important;
  --book-thickness: 10px !important;
  margin: 4px 8px !important;
  flex-shrink: 0 !important;
}

.experience-dialog .book3d.experience-cover::before {
  opacity: 0.35 !important;
  filter: blur(8px) !important;
}

/* Book Detail Page Audio Chapters Header & Version Cards */
#app:has(.book-page) .audio-chapters-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

/* Book Detail Page Audio Locked / Unavailable Card */
#app .audio-locked-card {
  position: relative !important;
  padding: 18px 22px !important;
  border-radius: 16px !important;
  background: #f7faf6 !important;
  border: 1px solid #e3ebe1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-top: 14px !important;
}

#app .audio-locked-info {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex: 1 1 280px !important;
}

#app .audio-locked-icon {
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  border-radius: 14px !important;
  background: #e9f2eb !important;
  color: #235e43 !important;
  font-size: 20px !important;
}

#app .audio-locked-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

#app .audio-locked-text strong {
  display: block !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1e3827 !important;
  line-height: 1.6 !important;
}

#app .audio-locked-text span {
  display: block !important;
  font-size: 12.5px !important;
  color: #637769 !important;
  line-height: 1.7 !important;
}

/* ==========================================================================
   15. Search Bar & Live Search Suggestions Dropdown Cards
   ========================================================================== */
#app .catalog-advanced {
  display: none !important;
}

#app .collection-frame > .search-wrap,
#app .search-wrap {
  position: relative !important;
  width: min(760px, 100%) !important;
  margin: 20px auto 22px !important;
  z-index: 80 !important;
}

#app .search-wrap #searchInput {
  width: 100% !important;
  height: 54px !important;
  padding: 0 48px 0 50px !important;
  border-radius: 16px !important;
  border: 1.5px solid #cfe0d7 !important;
  background: #ffffff !important;
  color: #133325 !important;
  font-family: "Vazirmatn", Tahoma, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: 0 8px 24px rgba(18, 53, 38, 0.06) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  box-sizing: border-box !important;
}

#app .search-wrap #searchInput::placeholder {
  color: #748c80 !important;
  font-weight: 500 !important;
}

#app .search-wrap #searchInput:focus {
  outline: none !important;
  border-color: #1f7a54 !important;
  box-shadow: 0 10px 28px rgba(18, 53, 38, 0.1), 0 0 0 4px rgba(44, 224, 128, 0.16) !important;
}

#app .search-wrap > .search-icon {
  position: absolute !important;
  top: 27px !important;
  right: 18px !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  font-size: 18px !important;
  color: #3d6855 !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

#app .search-wrap > .search-voice-btn {
  position: absolute !important;
  top: 27px !important;
  left: 10px !important;
  right: auto !important;
  transform: translateY(-50%) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid #d8eae0 !important;
  background: #eef7f2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 3 !important;
  transition: background 0.18s ease, transform 0.18s ease !important;
}

#app .search-wrap > .search-voice-btn:hover {
  background: #dff0e7 !important;
  transform: translateY(-50%) scale(1.05) !important;
}

#app .search-suggestions:not([hidden]) {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 120 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 14px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(14px) !important;
  border: 1.5px solid #cfe2d8 !important;
  border-radius: 20px !important;
  box-shadow: 0 22px 50px rgba(13, 43, 30, 0.16), 0 4px 14px rgba(13, 43, 30, 0.06) !important;
  box-sizing: border-box !important;
}

#app .search-suggestions button[data-suggest-book] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  border: 1px solid #e3efe8 !important;
  background: linear-gradient(135deg, #ffffff 0%, #f6fbf8 100%) !important;
  text-align: right !important;
  font-family: "Vazirmatn", Tahoma, sans-serif !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

#app .search-suggestions button[data-suggest-book]:hover {
  transform: translateY(-2px) !important;
  border-color: #88ccb0 !important;
  background: linear-gradient(135deg, #f4fbf7 0%, #eaf6f0 100%) !important;
  box-shadow: 0 10px 22px rgba(19, 68, 47, 0.1) !important;
}

#app .search-suggestions button[data-suggest-book] img {
  width: 48px !important;
  height: 70px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 12px rgba(10, 35, 24, 0.15) !important;
  background: #f0f5f2 !important;
}

#app .search-suggestions button[data-suggest-book] span {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 5px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-align: right !important;
}

#app .search-suggestions button[data-suggest-book] span strong {
  display: block !important;
  width: 100% !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #123123 !important;
  line-height: 1.45 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#app .search-suggestions button[data-suggest-book] span small {
  display: block !important;
  width: 100% !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #5b7668 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#app .search-suggestions button[data-suggest-book] b {
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: #e6f5ed !important;
  color: #166042 !important;
  border: 1px solid #c5e6d4 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  transition: background 0.18s ease, color 0.18s ease !important;
}

#app .search-suggestions button[data-suggest-book]:hover b {
  background: #1b6b4a !important;
  border-color: #1b6b4a !important;
  color: #ffffff !important;
}

@media (max-width: 680px) {
  #app .search-suggestions:not([hidden]) {
    grid-template-columns: 1fr !important;
    padding: 10px !important;
  }
}

/* Persona Card Action Buttons ("دیدن کتاب‌ها ←", "شروع یادگیری ←", "کشف پیشنهادها ←") */
#app .persona-card .persona-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 22px !important;
  padding: 11px 22px !important;
  border-radius: 999px !important;
  border: 1.5px solid #166042 !important;
  background: #166042 !important;
  color: #ffffff !important;
  font-family: "Vazirmatn", Tahoma, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 5 !important;
  box-shadow: 0 8px 20px rgba(22, 96, 66, 0.2) !important;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
}

#app .persona-card .persona-link:hover {
  background: #0f4730 !important;
  border-color: #0f4730 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 26px rgba(15, 71, 48, 0.28) !important;
}

#app .premium-plan-card .plan-popularity-note {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  align-self: flex-start !important;
  gap: 6px !important;
  margin: 0 0 12px !important;
  padding: 6px 11px !important;
  border-radius: 10px !important;
  background: #eaf8f0 !important;
  border: 1px solid #bce6cf !important;
  color: #0f5c3b !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  text-align: right !important;
}

/* Lifestyle Situation Cards Header Spacing */
#app .blinkist-situations .situation-card {
  border-radius: 20px !important;
  padding: 6px 8px 8px !important;
}

#app .blinkist-situations .situation-copy {
  padding: 14px 12px 16px !important;
  text-align: center !important;
}

/* ==========================================================================
   Section 16: Reader Toolbar & Immersive Reading Controls
   ========================================================================== */
#app .reader-tools {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  background: #f4f8f5 !important;
  padding: 4px 6px !important;
  border-radius: 14px !important;
  border: 1px solid #dce8e0 !important;
}

#app .reader-tools button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 6px 11px !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #214436 !important;
  background: #ffffff !important;
  border: 1px solid #d3e2d8 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  line-height: 1.2 !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  user-select: none !important;
}

#app .reader-tools button:hover {
  background: #eef7f2 !important;
  border-color: #00af6a !important;
  color: #00af6a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(0, 175, 106, 0.12) !important;
}

#app .reader-tools button:active {
  transform: translateY(0) scale(0.97) !important;
}

#app .reader-tools button.active {
  background: #00af6a !important;
  border-color: #00af6a !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 175, 106, 0.25) !important;
}

#app .reader-tools .btn-zen {
  background: linear-gradient(135deg, #e7f7ee 0%, #d8f1e3 100%) !important;
  border: 1px solid #a3dcbe !important;
  color: #125539 !important;
  font-weight: 800 !important;
}

#app .reader-tools .btn-zen:hover {
  background: linear-gradient(135deg, #1f5a47 0%, #153f31 100%) !important;
  border-color: #1f5a47 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(31, 90, 71, 0.28) !important;
}

/* Summary Text Direct Sizing & Spacing */
#summaryText {
  transition: font-size 0.2s ease, line-height 0.2s ease !important;
}
#summaryText,
#summaryText p,
#summaryText li {
  font-size: var(--reader-size, 16.5px) !important;
  line-height: var(--reader-line, 2.2) !important;
}

/* Reader Sepia Theme */
body.reader-theme-sepia,
body.reader-theme-sepia #app,
#app:has(.book-page.reader-theme-sepia) {
  background: #f6efe0 !important;
}
.book-page.reader-theme-sepia #summaryPanel,
body.reader-theme-sepia #summaryPanel {
  background: #fdfaf3 !important;
  border-color: #e5dac6 !important;
  box-shadow: 0 8px 24px rgba(78, 60, 40, 0.06) !important;
}
.book-page.reader-theme-sepia .summary-text,
.book-page.reader-theme-sepia .summary-text p,
.book-page.reader-theme-sepia .summary-text li,
body.reader-theme-sepia .summary-text,
body.reader-theme-sepia .summary-text p,
body.reader-theme-sepia .summary-text li {
  color: #3b2e23 !important;
}
.book-page.reader-theme-sepia .summary-takeaway-card,
body.reader-theme-sepia .summary-takeaway-card {
  background: #f3ecda !important;
  border-color: #dfd1b8 !important;
  color: #3a2c20 !important;
}

/* Reader Dark Theme */
body.reader-theme-dark,
body.reader-theme-dark #app,
#app:has(.book-page.reader-theme-dark) {
  background: #101715 !important;
}
.book-page.reader-theme-dark #summaryPanel,
body.reader-theme-dark #summaryPanel {
  background: #172420 !important;
  border-color: #263c34 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3) !important;
}
.book-page.reader-theme-dark #summaryPanel .panel-title h2,
body.reader-theme-dark #summaryPanel .panel-title h2 {
  color: #e6f2ec !important;
}
.book-page.reader-theme-dark #summaryPanel .panel-title p,
body.reader-theme-dark #summaryPanel .panel-title p {
  color: #8da397 !important;
}
.book-page.reader-theme-dark .summary-text,
.book-page.reader-theme-dark .summary-text p,
.book-page.reader-theme-dark .summary-text li,
body.reader-theme-dark .summary-text,
body.reader-theme-dark .summary-text p,
body.reader-theme-dark .summary-text li {
  color: #dceae3 !important;
}
.book-page.reader-theme-dark .summary-takeaway-card,
body.reader-theme-dark .summary-takeaway-card {
  background: #1d2f2a !important;
  border-color: #2a473e !important;
  color: #e1efe8 !important;
}
.book-page.reader-theme-dark .reader-tools {
  background: #1e312b !important;
  border-color: #2b453c !important;
}
.book-page.reader-theme-dark .reader-tools button {
  background: #253d35 !important;
  border-color: #35564b !important;
  color: #d6ebe1 !important;
}
.book-page.reader-theme-dark .reader-tools button:hover {
  background: #00af6a !important;
  border-color: #00af6a !important;
  color: #ffffff !important;
}

/* Reader Focus Mode */
.book-page.reader-focus .book-hero,
.book-page.reader-focus .book-tabs,
.book-page.reader-focus .quotes-showcase-panel,
.book-page.reader-focus .related-books-section,
.book-page.reader-focus .site-footer {
  opacity: 0.25 !important;
  filter: blur(1.5px) !important;
  pointer-events: none !important;
  transition: all 0.3s ease !important;
}
.book-page.reader-focus #summaryPanel {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12) !important;
  border-color: #00af6a !important;
}

/* ==========================================================================
   Section 17: Leitner Modal Close Button & Dialog Modernization
   ========================================================================== */
.leitner-dialog,
.streak-dialog,
.achieve-dialog,
.story-generator-dialog {
  position: relative !important;
}

.modal-close-round,
.leitner-dialog .auth-close,
.streak-dialog .auth-close,
.achieve-dialog .auth-close,
.story-generator-dialog .auth-close,
#closeLeitnerModal {
  position: absolute !important;
  top: 18px !important;
  left: 20px !important;
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f1f6f3 !important;
  border: 1px solid #d2e4db !important;
  border-radius: 50% !important;
  color: #244b3c !important;
  cursor: pointer !important;
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 20 !important;
  outline: none !important;
}

.modal-close-round svg,
.leitner-dialog .auth-close svg,
#closeLeitnerModal svg {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.modal-close-round:hover,
.leitner-dialog .auth-close:hover,
.streak-dialog .auth-close:hover,
.achieve-dialog .auth-close:hover,
.story-generator-dialog .auth-close:hover,
#closeLeitnerModal:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
  transform: rotate(90deg) scale(1.08) !important;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.22) !important;
}

.modal-close-round:active,
#closeLeitnerModal:active {
  transform: rotate(90deg) scale(0.94) !important;
}

/* ==========================================================================
   Section 18: Golden Quotes Panel & Beautiful Button Styling
   ========================================================================== */
#app .quotes-showcase-panel {
  background: #fafcfb !important;
  border: 1px solid #d8e6de !important;
  border-radius: 20px !important;
  padding: 22px 20px !important;
}

#app .quotes-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 16px !important;
  margin-top: 14px !important;
}

#app .quote-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background: #ffffff !important;
  border: 1px solid #dcebe1 !important;
  border-radius: 16px !important;
  padding: 18px 18px 14px !important;
  box-shadow: 0 4px 14px rgba(18, 48, 38, 0.04) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

#app .quote-card:hover {
  transform: translateY(-2px) !important;
  border-color: #a7dcc1 !important;
  box-shadow: 0 8px 24px rgba(18, 48, 38, 0.08) !important;
}

#app .quote-card-mark {
  position: absolute !important;
  top: 8px !important;
  right: 14px !important;
  font-size: 38px !important;
  line-height: 1 !important;
  color: #c4ded0 !important;
  font-family: Georgia, serif !important;
  pointer-events: none !important;
  user-select: none !important;
}

#app .quote-card-text {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.85 !important;
  color: #1e382d !important;
  margin: 8px 0 16px !important;
  position: relative !important;
  z-index: 1 !important;
}

#app .quote-card-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding-top: 10px !important;
  border-top: 1px dashed #e1eee6 !important;
}

#app .quote-card-footer small {
  color: #617a6d !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 140px !important;
}

#app .quote-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

#app .quote-copy-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 5px 11px !important;
  font-family: inherit !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #174836 !important;
  background: #f3f8f5 !important;
  border: 1px solid #c9ded2 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  user-select: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

#app .quote-copy-btn:hover {
  background: #e3f3eb !important;
  border-color: #00af6a !important;
  color: #00af6a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(0, 175, 106, 0.15) !important;
}

#app .quote-copy-btn.copied {
  background: #00af6a !important;
  border-color: #00af6a !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 175, 106, 0.3) !important;
}

#app .quote-story-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 5px 12px !important;
  font-family: inherit !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #1f5a47 0%, #134031 100%) !important;
  border: 1px solid #134031 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  user-select: none !important;
  box-shadow: 0 2px 6px rgba(19, 64, 49, 0.18) !important;
}

#app .quote-story-btn:hover {
  background: linear-gradient(135deg, #00af6a 0%, #1a5643 100%) !important;
  border-color: #00af6a !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 14px rgba(0, 175, 106, 0.28) !important;
}

/* ==========================================================================
   Section 19: Note Save Button & Interactive Polish
   ========================================================================== */

#openLeitnerDeckBtn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  transition: all 0.18s ease !important;
}

#openLeitnerDeckBtn:hover {
  background: #00af6a !important;
  color: #ffffff !important;
  border-color: #00af6a !important;
  box-shadow: 0 4px 12px rgba(0, 175, 106, 0.2) !important;
}

#printActionPlanBtn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  transition: all 0.18s ease !important;
}

#printActionPlanBtn:hover {
  background: #eef7f2 !important;
  color: #00af6a !important;
  border-color: #00af6a !important;
}

/* ==========================================================================
   Section 20: Site-wide Header Activity Menu & Dropdown Polish (Book & Library Pages)
   ========================================================================== */
#app .header-activity-menu {
  position: relative !important;
  display: inline-block !important;
}

#app .header-activity-summary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 38px !important;
  padding: 0 12px !important;
  border: 1px solid #dce8e1 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #1e3b2f !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  list-style: none !important;
  user-select: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#app .header-activity-summary::-webkit-details-marker {
  display: none !important;
}

#app .header-activity-summary:hover {
  background: #f0f7f3 !important;
  border-color: #00af6a !important;
  color: #00af6a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(0, 175, 106, 0.12) !important;
}

#app .header-activity-menu[open] .header-activity-summary {
  background: #eaf7f0 !important;
  border-color: #00af6a !important;
  color: #00af6a !important;
  box-shadow: 0 4px 12px rgba(0, 175, 106, 0.16) !important;
}

#app .header-activity-summary .activity-arrow {
  display: inline-block !important;
  font-size: 11px !important;
  color: #6a8275 !important;
  transition: transform 0.22s ease !important;
  margin-right: 2px !important;
}

#app .header-activity-menu[open] .activity-arrow {
  transform: rotate(180deg) !important;
  color: #00af6a !important;
}

/* Dropdown Container */
#app .activity-dropdown-panel {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: auto !important;
  z-index: 1200 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 250px !important;
  max-width: 92vw !important;
  padding: 10px !important;
  border: 1px solid #dce8e1 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 42px rgba(18, 48, 38, 0.16), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
  animation: activityDropFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes activityDropFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Dropdown Item Buttons */
#app .activity-item-btn {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 10px 12px !important;
  border: 1px solid #eef4f0 !important;
  border-radius: 12px !important;
  background: #fbfdfc !important;
  color: #1e3b2f !important;
  font-family: inherit !important;
  text-align: right !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  user-select: none !important;
  box-sizing: border-box !important;
}

#app .activity-item-btn:hover {
  background: #eef8f3 !important;
  border-color: #9fe0be !important;
  transform: translateX(-3px) !important;
  box-shadow: 0 4px 12px rgba(0, 175, 106, 0.12) !important;
}

#app .activity-item-btn:active {
  transform: scale(0.98) !important;
}

#app .activity-item-btn .item-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  background: #edf7f2 !important;
  border: 1px solid #d5ece0 !important;
  border-radius: 10px !important;
  font-size: 18px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease, background 0.2s ease !important;
}

#app .activity-item-btn:hover .item-icon {
  background: #e2f4ea !important;
  transform: scale(1.08) !important;
}

#app .activity-item-btn div {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  text-align: right !important;
  flex: 1 !important;
  overflow: hidden !important;
}

#app .activity-item-btn strong {
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: #163d2e !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

#app .activity-item-btn small {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #62776c !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

#app .header-search-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid #dce8e1 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #284438 !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s ease !important;
}

#app .header-search-btn:hover {
  background: #f0f7f3 !important;
  border-color: #00af6a !important;
  color: #00af6a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(0, 175, 106, 0.12) !important;
}

/* ==========================================================================
   Section 21: Complete Button Harmonization (Home vs Book Page Unity)
   ========================================================================== */
/* Header Buttons Uniformity Across All Pages */
#app .site-header .header-premium {
  height: 40px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #00af6a !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(0, 175, 106, 0.22) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

#app .site-header .header-premium:hover {
  background: #00995c !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(0, 175, 106, 0.3) !important;
}

#app .site-header .header-account {
  height: 40px !important;
  padding: 0 16px !important;
  border: 1px solid #dce8e1 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #1e3b2f !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

#app .site-header .header-account:hover {
  background: #f0f7f3 !important;
  border-color: #00af6a !important;
  color: #00af6a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(0, 175, 106, 0.12) !important;
}

#app .site-header .header-search-btn {
  height: 40px !important;
  padding: 0 14px !important;
  border: 1px solid #dce8e1 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #1e3b2f !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#app .site-header .header-search-btn:hover {
  background: #f0f7f3 !important;
  border-color: #00af6a !important;
  color: #00af6a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(0, 175, 106, 0.12) !important;
}

#app .site-header .header-activity-summary {
  height: 40px !important;
  padding: 0 12px !important;
  border: 1px solid #dce8e1 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #1e3b2f !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

#app .category-menu summary {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  border: 1px solid #dce8e1 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #1e3b2f !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#app .category-menu summary:hover {
  background: #f0f7f3 !important;
  border-color: #00af6a !important;
  color: #00af6a !important;
}

#app .site-header .main-nav .nav-btn {
  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* Book Page Topbar & Back Buttons Harmonization */
#app .book-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

#app .book-topbar #backBtn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 38px !important;
  padding: 0 16px !important;
  border: 1px solid #dce8e1 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #1e3b2f !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

#app .book-topbar #backBtn:hover {
  background: #f0f7f3 !important;
  border-color: #00af6a !important;
  color: #00af6a !important;
  transform: translateY(-1px) !important;
}

#app .book-topbar #bookFav {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 38px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#app .book-topbar #bookFav.btn-secondary {
  border: 1px solid #dce8e1 !important;
  background: #ffffff !important;
  color: #1e3b2f !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

#app .book-topbar #bookFav.btn-secondary:hover {
  background: #f0f7f3 !important;
  border-color: #00af6a !important;
  color: #00af6a !important;
  transform: translateY(-1px) !important;
}

#app .book-topbar #bookFav.btn-primary {
  border: 1px solid #00af6a !important;
  background: #00af6a !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px rgba(0, 175, 106, 0.25) !important;
}

/* Site-wide Primary & Secondary Buttons Modernization */
#app :is(.btn-primary, .blinkist-btn-primary) {
  background: #00af6a !important;
  border: 1px solid #00af6a !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  font-family: inherit !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(0, 175, 106, 0.22) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

#app :is(.btn-primary, .blinkist-btn-primary):hover {
  background: #00995c !important;
  border-color: #00995c !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(0, 175, 106, 0.3) !important;
}

#app :is(.btn-secondary, .blinkist-btn-outline) {
  background: #ffffff !important;
  border: 1px solid #dce8e1 !important;
  color: #1e3b2f !important;
  border-radius: 10px !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

#app :is(.btn-secondary, .blinkist-btn-outline):hover {
  background: #f0f7f3 !important;
  border-color: #00af6a !important;
  color: #00af6a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 175, 106, 0.12) !important;
}

#app .btn-ghost {
  background: #f5f8f6 !important;
  border: 1px solid #e1ebe5 !important;
  color: #3b5a4d !important;
  border-radius: 10px !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

#app .btn-ghost:hover {
  background: #eef7f2 !important;
  border-color: #00af6a !important;
  color: #00af6a !important;
}

/* ==========================================================================
   Section 22: Global Toast Notification System
   ========================================================================== */
.toast-root {
  position: fixed !important;
  bottom: 28px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 9999999 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  pointer-events: none !important;
  max-width: 92vw !important;
  width: auto !important;
}

.toast {
  pointer-events: auto !important;
  background: rgba(19, 44, 34, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: #ffffff !important;
  border: 1px solid rgba(89, 215, 165, 0.3) !important;
  padding: 10px 22px !important;
  border-radius: 999px !important;
  font-family: inherit !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  direction: rtl !important;
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transition: all 0.26s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.toast.show {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

.toast.success {
  background: rgba(14, 66, 44, 0.96) !important;
  border-color: #00af6a !important;
  box-shadow: 0 12px 32px rgba(0, 175, 106, 0.3) !important;
}

.toast.error {
  background: rgba(84, 18, 18, 0.96) !important;
  border-color: #ff6b6b !important;
}

.toast.info {
  background: rgba(18, 45, 75, 0.96) !important;
  border-color: #5ba4e6 !important;
}

/* ==========================================================================
   19. Google OAuth Sign-In Button & Divider
   ========================================================================== */
.auth-google-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 11px 20px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  border: 1.5px solid #dbe5de !important;
  color: #1e3827 !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  margin-top: 14px !important;
  margin-bottom: 6px !important;
}

.auth-google-btn:hover {
  background: #f7faf8 !important;
  border-color: #bcd4c4 !important;
  box-shadow: 0 6px 18px rgba(25, 55, 37, 0.09) !important;
  transform: translateY(-1px) !important;
}

.auth-google-btn:active {
  transform: translateY(0) scale(0.99) !important;
}

.auth-google-btn .google-icon {
  flex-shrink: 0 !important;
  width: 20px !important;
  height: 20px !important;
  display: block !important;
}

.auth-divider {
  display: flex !important;
  align-items: center !important;
  text-align: center !important;
  margin: 18px 0 16px !important;
  color: #7a8f82 !important;
  font-size: 12px !important;
}

.auth-divider::before,
.auth-divider::after {
  content: "" !important;
  flex: 1 !important;
  border-bottom: 1px solid #e2ece5 !important;
}

.auth-divider span {
  padding: 0 14px !important;
  font-weight: 600 !important;
}

/* Signed-in account state & quick logout button */
#app .site-header .header-account.is-signed-in {
  background: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
  color: #166534 !important;
}

#app .site-header .header-account.is-signed-in:hover {
  background: #dcfce7 !important;
  border-color: #22c55e !important;
  color: #14532d !important;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.16) !important;
}

#app .site-header .header-logout-btn {
  height: 40px !important;
  padding: 0 14px !important;
  border: 1px solid #fed7aa !important;
  border-radius: 10px !important;
  background: #fff7ed !important;
  color: #c2410c !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}

#app .site-header .header-logout-btn:hover {
  background: #ffedd5 !important;
  border-color: #ea580c !important;
  color: #9a3412 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(234, 88, 12, 0.14) !important;
}

/* Fix 1.1 & 1.2: Polished and resilient mobile header & account buttons */
.header-account .account-avatar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  margin-inline-end: 4px !important;
  flex-shrink: 0 !important;
}
.header-account .account-avatar svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
#app:has(.book-page) .header-account {
  min-width: 36px !important;
  padding: 0 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#app:has(.book-page) .header-account .account-avatar {
  display: inline-flex !important;
  margin-inline-end: 0 !important;
}

@media (max-width: 600px) {
  .site-header .header-inner,
  .reference-header .header-inner {
    padding-inline: 10px !important;
    gap: 8px !important;
  }
  .site-header .header-status,
  .library-app.blinkist-v2 .header-status,
  .reference-header .header-status {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
  }
}

@media (max-width: 560px) {
  .library-app.blinkist-v2 .header-account,
  .site-header .header-account,
  .reference-header .header-account {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    min-width: auto !important;
    height: 36px !important;
  }
  .library-app.blinkist-v2 .header-logout-btn,
  .site-header .header-logout-btn,
  .reference-header .header-logout-btn {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    height: 36px !important;
  }
  .site-header #headerSearchBtn {
    height: 36px !important;
    padding: 0 8px !important;
    min-width: 36px !important;
  }
  .site-header #headerSearchBtn span:last-child {
    display: none !important;
  }
  .site-header .header-activity-summary {
    padding: 0 6px !important;
    height: 36px !important;
    font-size: 12px !important;
    gap: 3px !important;
  }
}

@media (max-width: 480px) {
  .site-header .header-premium,
  .library-app.blinkist-v2 .header-premium {
    display: none !important;
  }
}

.profile-offline-box {
  border-color: #c7dcd0 !important;
  background: #f7faf8 !important;
  margin-top: 10px !important;
}
.profile-offline-box:hover {
  border-color: #059669 !important;
  background: #edf7f1 !important;
}

/* ==========================================================================
   POLISHED USER PROFILE MODAL (PREMIUM & INTUITIVE REDESIGN)
   ========================================================================== */
#authModal .auth-dialog {
  width: min(540px, 95vw) !important;
  max-height: 90vh !important;
  padding: 26px 22px !important;
  border-radius: 24px !important;
  box-sizing: border-box !important;
}

.auth-profile-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  text-align: right !important;
  direction: rtl !important;
  margin-top: 10px !important;
}

/* 1. Hero Card */
.profile-hero-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f7fbf9 100%) !important;
  border: 1px solid #c7eed8 !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.08) !important;
}

.profile-avatar-wrap {
  position: relative !important;
  flex-shrink: 0 !important;
}

.profile-hero-card .profile-avatar {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important;
}

.profile-hero-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.profile-hero-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.profile-hero-name {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #064e3b !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.profile-hero-email {
  font-size: 12px !important;
  color: #4b6357 !important;
  direction: ltr !important;
  text-align: right !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.profile-plan-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  background: #e2e8f0 !important;
  color: #475569 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.profile-plan-pill.is-premium {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3) !important;
}

/* 2. Subscription Box */
.profile-sub-box {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 16px 18px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 60%, #fffdf5 100%) !important;
  border: 1.5px solid #fde68a !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.08) !important;
}

.profile-sub-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.profile-sub-title-group {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.profile-sub-icon {
  font-size: 24px !important;
  line-height: 1 !important;
}

.profile-sub-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.profile-sub-caption {
  font-size: 11px !important;
  color: #92400e !important;
  font-weight: 600 !important;
}

.profile-sub-status {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #78350f !important;
}

.profile-sub-meta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: #92400e !important;
  background: rgba(255, 255, 255, 0.65) !important;
  padding: 6px 12px !important;
  border-radius: 10px !important;
  line-height: 1.4 !important;
}

.profile-sub-meta-icon {
  font-size: 14px !important;
  flex-shrink: 0 !important;
}

.profile-sub-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  border: 0 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25) !important;
  transition: all 0.2s ease !important;
}

.profile-sub-cta:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(5, 150, 105, 0.35) !important;
}

/* 3. Section Cards */
.profile-section-card {
  padding: 16px 18px !important;
  border-radius: 18px !important;
  background: #fafcfb !important;
  border: 1px solid #e1ebe5 !important;
}

.profile-section-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
}

.profile-section-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #1f5a47 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.profile-section-badge {
  font-size: 11px !important;
  color: #6b7e73 !important;
  font-weight: 600 !important;
}

/* 4. Learning Stats Grid */
.profile-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
}

.profile-stat-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 6px !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  border: 1px solid #e2ece6 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
  text-align: center !important;
  gap: 3px !important;
}

.profile-stat-icon {
  font-size: 20px !important;
  margin-bottom: 2px !important;
}

.profile-stat-value-row {
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 4px !important;
}

.profile-stat-num {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #064e3b !important;
  line-height: 1 !important;
}

.profile-stat-unit {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #52796f !important;
}

.profile-stat-label {
  font-size: 11px !important;
  color: #6b7e73 !important;
  font-weight: 600 !important;
}

/* 5. Badges Grid */
.profile-badges-card {
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.profile-badges-card:hover {
  border-color: #a7f3d0 !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.06) !important;
}

.badges-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

@media (max-width: 480px) {
  .badges-grid {
    grid-template-columns: 1fr !important;
  }
}

.badge-tile {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  border: 1px solid #e5ede8 !important;
  transition: all 0.2s ease !important;
}

.badge-tile.unlocked {
  background: #f0fdf4 !important;
  border-color: #a7f3d0 !important;
}

.badge-tile-icon {
  font-size: 24px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

.badge-tile-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.badge-tile-title {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #112d23 !important;
  line-height: 1.3 !important;
}

.badge-tile-desc {
  font-size: 10px !important;
  color: #52796f !important;
  line-height: 1.3 !important;
}

.badge-tile-status {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
  background: #e2e8f0 !important;
  color: #64748b !important;
  flex-shrink: 0 !important;
}

.badge-tile.unlocked .badge-tile-status {
  background: #d1fae5 !important;
  color: #065f46 !important;
}

/* 6. Highlights & Quotes */
.profile-highlights-card {
  padding: 16px 18px !important;
}

.highlight-card {
  background: #ffffff !important;
  border: 1px solid #e2ece6 !important;
  border-right: 3.5px solid #10b981 !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  margin-bottom: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.highlight-card-text {
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: #1e293b !important;
}

.highlight-card-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  font-size: 11px !important;
}

.highlight-card-del {
  border: 0 !important;
  background: #fef2f2 !important;
  color: #dc2626 !important;
  font-size: 11px !important;
  cursor: pointer !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

.highlight-card-del:hover {
  background: #fee2e2 !important;
}

/* 7. Cloud Sync Card */
.profile-sync-box {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
  background: #f8faf9 !important;
  border: 1px solid #e2ece6 !important;
}

.profile-action-top {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.profile-action-icon {
  font-size: 22px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.profile-action-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.profile-action-info strong {
  font-size: 13px !important;
  color: #112d23 !important;
  font-weight: 800 !important;
}

.profile-action-status {
  font-size: 11px !important;
  color: #52796f !important;
  line-height: 1.3 !important;
}

.profile-sync-box .profile-action-btn {
  width: auto !important;
  padding: 8px 16px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

@media (max-width: 480px) {
  .profile-sync-box {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .profile-sync-box .profile-action-btn {
    width: 100% !important;
  }
}

/* 8. Accordions (Edit Profile & Payments) */
.profile-accordion-card {
  background: #ffffff !important;
  border: 1px solid #e2ece6 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
}

.profile-accordion-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 16px !important;
  cursor: pointer !important;
  user-select: none !important;
  background: #fafcfb !important;
  font-size: 13px !important;
  list-style: none !important;
}

.profile-accordion-summary::-webkit-details-marker {
  display: none !important;
}

.profile-accordion-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 800 !important;
  color: #112d23 !important;
}

.profile-accordion-arrow {
  font-size: 11px !important;
  color: #6b7e73 !important;
  transition: transform 0.2s ease !important;
}

.profile-accordion-card[open] .profile-accordion-arrow {
  transform: rotate(180deg) !important;
}

.profile-accordion-body {
  padding: 16px !important;
  border-top: 1px solid #f0f4f2 !important;
}

.profile-payment-head-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
  font-size: 12px !important;
  color: #52796f !important;
}

.profile-payment-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px !important;
  border-radius: 12px !important;
  background: #fafcfb !important;
  border: 1px solid #e5ede8 !important;
  margin-bottom: 8px !important;
}

.profile-payment-main {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex: 1 !important;
}

.profile-payment-top-line {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.profile-payment-amount {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #112d23 !important;
}

.profile-payment-sub-line {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 11px !important;
  color: #6b7e73 !important;
}

.profile-payment-ref {
  color: #52796f !important;
}

/* 9. Sign Out Button */
.profile-footer-actions {
  margin-top: 4px !important;
}

.profile-logout-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #dc2626 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.profile-logout-btn:hover {
  background: #fee2e2 !important;
  border-color: #f87171 !important;
  color: #b91c1c !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.12) !important;
}

/* FAQ Redesign Styles */
.info-faq-page .info-content {
  display: block !important;
  max-width: 900px !important;
  margin-inline: auto !important;
}

.faq-page-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.faq-search-box {
  position: relative;
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1.5px solid #d9e5df;
  border-radius: 16px;
  padding: 6px 16px;
  box-shadow: 0 6px 20px rgba(18, 48, 38, 0.05);
  transition: all 0.22s ease;
}

.faq-search-box:focus-within {
  border-color: #245944;
  box-shadow: 0 8px 26px rgba(36, 89, 68, 0.12);
  transform: translateY(-1px);
}

.faq-search-icon {
  font-size: 18px;
  margin-inline-end: 10px;
  color: #5d756b;
}

#faqSearchInput {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  font-family: inherit;
  color: #12382c;
  background: transparent;
  padding: 10px 0;
}

#faqSearchInput::placeholder {
  color: #83978f;
  font-size: 13px;
}

.faq-search-clear {
  border: none;
  background: #eef5f1;
  color: #496357;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  transition: all 0.2s ease;
}

.faq-search-clear:hover {
  background: #245944;
  color: #ffffff;
}

.faq-categories-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}

.faq-cat-chip {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid #dce8e1;
  background: #ffffff;
  color: #344d41;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-cat-chip:hover {
  border-color: #8fd6b4;
  background: #f7fbf8;
  transform: translateY(-1px);
}

.faq-cat-chip.is-active {
  background: #245944 !important;
  border-color: #245944 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(36, 89, 68, 0.22);
}

.faq-sections-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.faq-group-card {
  background: #ffffff;
  border: 1.5px solid #e1ebe5;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(18, 48, 38, 0.03);
  transition: border-color 0.2s ease;
}

.faq-group-card:hover {
  border-color: #bcdbc9;
}

.faq-group-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #edf4f0;
}

.faq-group-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #eef6f2;
  display: grid;
  place-items: center;
  font-size: 22px;
  flex-shrink: 0;
}

.faq-group-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #12382c;
}

.faq-group-header p {
  margin: 2px 0 0 !important;
  font-size: 11.5px !important;
  color: #6a8075 !important;
}

.faq-accordion-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-accordion-item {
  background: #fafcfb;
  border: 1.5px solid #e4ede7;
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.22s ease;
}

.faq-accordion-item:hover {
  border-color: #b3d6c3;
  background: #ffffff;
}

.faq-accordion-item[open] {
  border-color: #245944;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(36, 89, 68, 0.08);
}

.faq-accordion-item summary {
  padding: 16px 20px;
  font-size: 13.5px;
  font-weight: 800;
  color: #164032;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

.faq-accordion-item summary::-webkit-details-marker {
  display: none;
}

.faq-accordion-item summary::after {
  content: "+";
  font-size: 20px;
  font-weight: 700;
  color: #245944;
  margin-inline-start: 12px;
  transition: transform 0.2s ease;
}

.faq-accordion-item[open] summary::after {
  content: "−";
  color: #16563e;
}

.faq-accordion-item p {
  margin: 0 !important;
  padding: 0 20px 18px !important;
  font-size: 13px !important;
  line-height: 2 !important;
  color: #4b6458 !important;
  border-top: 1px solid #f0f6f2;
  padding-top: 12px !important;
}

.faq-accordion-item p strong {
  color: #164032;
}

.faq-no-match {
  text-align: center;
  padding: 42px 24px;
  background: #fafcfb;
  border: 1.5px dashed #cbdad1;
  border-radius: 20px;
}

.faq-no-match-icon {
  font-size: 40px;
  display: block;
  margin-bottom: 10px;
}

.faq-no-match h4 {
  margin: 0 0 6px;
  font-size: 16px;
  color: #15392c;
}

.faq-no-match p {
  margin: 0 0 16px !important;
  font-size: 12.5px !important;
  color: #647a70 !important;
}

.faq-contact-card {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 32px;
  background: linear-gradient(135deg, #184232 0%, #0d281e 100%);
  border-radius: 22px;
  color: #ffffff;
  box-shadow: 0 14px 36px rgba(13, 40, 30, 0.22);
}

.faq-contact-badge {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  margin-bottom: 6px;
  color: #9fe2bf;
}

.faq-contact-info h3 {
  margin: 0 0 6px 0;
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
}

.faq-contact-info p {
  margin: 0 !important;
  font-size: 12.5px !important;
  color: #c4ded2 !important;
  line-height: 1.8 !important;
}

.faq-contact-btns {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.faq-contact-btns .btn-primary {
  background: #2ce080 !important;
  color: #0c2b20 !important;
  font-weight: 800 !important;
  border: none !important;
}

.faq-contact-btns .btn-secondary {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

@media (max-width: 768px) {
  .faq-contact-card {
    flex-direction: column;
    text-align: center;
    padding: 24px 20px;
  }
  .faq-contact-btns {
    flex-direction: column;
    width: 100%;
  }
  .faq-contact-btns .btn {
    width: 100%;
    justify-content: center;
  }
  .faq-group-card {
    padding: 18px 16px;
  }
}

/* Ensure Premium Modal is always displayed cleanly above profile and other modals */
#premiumModal.premium-modal {
  z-index: 10200 !important;
}

/* Fix 2.2: Floating Quote Highlighter */
.quote-highlight-tooltip {
  position: absolute;
  z-index: 9999;
  transform: translateX(-50%);
  animation: tooltipFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 6px 18px rgba(0, 47, 35, 0.22));
}
.quote-highlight-tooltip[hidden] {
  display: none !important;
}
.quote-highlight-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: #002f23;
  color: #fff;
  border: 1px solid #00d775;
  border-radius: 99px;
  font: 700 12px/1 "Vazirmatn", Tahoma, sans-serif;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, background 0.15s ease;
}
.quote-highlight-btn:hover {
  background: #044333;
  transform: translateY(-1px) scale(1.03);
}
@keyframes tooltipFadeIn {
  from { opacity: 0; transform: translate(-50%, 6px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Fix 2.4: Finish Reading Action Button */
.summary-finish-wrap {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px dashed #d1e5db;
  display: flex;
  justify-content: center;
}
.finish-reading-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 28px !important;
  border-radius: 99px !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  box-shadow: 0 4px 16px rgba(0, 175, 106, 0.25) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.finish-reading-btn.is-completed {
  background: #f0fdf4 !important;
  color: #166534 !important;
  border: 1.5px solid #86efac !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

/* Fix 3.4 & 3.2: Unlocked 20-min studio audio card and mini-player cleanup */
.audio-version-card.is-unlocked {
  background: #f0fdf4 !important;
  border-color: #86efac !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.1) !important;
}
.audio-version-card.is-unlocked .audio-version-tag.unlocked {
  background: #dcfce7 !important;
  color: #15803d !important;
}
.audio-version-card.is-unlocked .audio-version-status.ready {
  color: #16a34a !important;
  font-weight: 700 !important;
}
.audio-version-card.is-unlocked:hover {
  background: #dcfce7 !important;
  border-color: #22c55e !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.18) !important;
}
.mini-player #miniSleep {
  display: none !important;
}
.mini-player-extras .mini-badge-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 38px !important;
  height: 38px !important;
  color: #03314b !important;
  background: #f1f7f5 !important;
  border: 1px solid #d1e1e5 !important;
}


/* Zen mode reader polish */
body.zen-reading-mode {
  overflow-y: auto !important;
}
body.zen-reading-mode .book-main-tabs,
body.zen-reading-mode .book-meta-strip,
body.zen-reading-mode .book-hero,
body.zen-reading-mode .site-header,
body.zen-reading-mode .site-footer {
  display: none !important;
}
body.zen-reading-mode.zen-dark,
body.zen-reading-mode.zen-dark #app,
body.zen-reading-mode.reader-theme-dark,
body.zen-reading-mode.reader-theme-dark #app {
  background: #101715 !important;
}