:root {
    --teal-dark: #06251E;
    --teal: #0B4A3C;
    --teal-light: #2FA88F;
    --gold: #D4AF37;
    --text: #1a1f1d;
    --muted: #6b7871;
    --border: #e4e9e6;
    --card-bg: #ffffff;
    --page-bg: #f4f7f5;
    --danger: #c0392b;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--page-bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Bengali", Helvetica, Arial, sans-serif;
    padding-bottom: 40px;
  }
  a { color: inherit; }
  /* LISTEN_ISLAMIC_BANNER_2026_10 — header is now the same illustrated Islamic
     banner used in the mobile app (instead of a plain gradient + text). The
     title/speaker text still exists in the DOM (visually hidden) so screen
     readers, search engines and the #speakerName lookup keep working. */
  header.top {
    background: linear-gradient(135deg, var(--teal), var(--teal-dark));
    color: #fff;
    padding: 0;
    text-align: center;
    border-bottom: 3px solid var(--gold);
  }
  header.top .banner { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }
  header.top .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }

  .live-bar {
    max-width: 720px;
    margin: 12px auto 0;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
  .live-dot.on { background: var(--danger); box-shadow: 0 0 0 4px rgba(192,57,43,0.15); animation: pulse 1.6s infinite; }
  @keyframes pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(192,57,43,0.15); } 50% { box-shadow: 0 0 0 7px rgba(192,57,43,0.05); } }
  .live-text { flex: 1; min-width: 0; }
  .live-text .status { font-weight: 700; font-size: 14.5px; }
  .live-text .status.on { color: var(--danger); }
  .live-text .status.off { color: var(--muted); }
  .live-text .title { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .live-play {
    border: none; border-radius: 999px; padding: 9px 18px; font-size: 13.5px; font-weight: 700;
    background: var(--teal); color: #fff; cursor: pointer; flex-shrink: 0;
  }
  .live-play:disabled { opacity: 0.5; cursor: default; }
  .live-play.playing { background: var(--danger); }

  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(6,37,30,0.55);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 50;
  }
  .modal-overlay.show { display: flex; }
  .modal-box {
    background: #fff;
    border-radius: 16px;
    max-width: 420px;
    width: 100%;
    padding: 20px;
    max-height: 80vh;
    overflow-y: auto;
  }
  .modal-box .modal-title {
    font-weight: 800;
    font-size: 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8a6d1f;
  }
  .modal-box .modal-body {
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    color: var(--text);
  }
  .modal-box .modal-close {
    margin-top: 16px;
    width: 100%;
    border: none;
    border-radius: 10px;
    padding: 10px;
    background: var(--teal);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
  }

  main { max-width: 720px; margin: 0 auto; padding: 16px; }

  .mode-switch {
    display: inline-flex;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px;
    margin-bottom: 14px;
    gap: 2px;
  }
  .mode-switch button {
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    padding: 7px 16px;
    border-radius: 999px;
    cursor: pointer;
  }
  .mode-switch button.active { background: var(--teal); color: #fff; }

  /* LISTEN_SEARCH_2026_10 — search icon next to the ফোল্ডার / সময়ক্রম tabs.
     Minimized = one round 🔍 button; tapped = the tabs give way to a pill
     input that fills the row. (This comment is also this patch's idempotency
     marker for the delivery script.) */
  .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
  .toolbar .mode-switch { margin-bottom: 0; }
  .toolbar.searching .mode-switch { display: none; }
  .search-wrap { display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0; min-width: 0; }
  .toolbar.searching .search-wrap { flex: 1; }
  .search-toggle {
    width: 40px; height: 40px; padding: 0; border-radius: 50%;
    border: 1px solid var(--border); background: #fff; color: var(--teal);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }
  .search-toggle:hover { background: var(--teal); color: #fff; }
  .search-toggle svg { width: 20px; height: 20px; }
  .toolbar.searching .search-toggle { display: none; }
  .search-box {
    display: none; align-items: center; gap: 8px; flex: 1; min-width: 0; height: 40px;
    background: #fff; border: 1px solid var(--teal-light); border-radius: 999px;
    padding: 0 6px 0 14px; box-shadow: 0 0 0 3px rgba(47,168,143,0.15);
    animation: searchIn 0.18s ease-out;
  }
  .toolbar.searching .search-box { display: flex; }
  .search-box .s-ico { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
  .search-box input {
    flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: transparent;
    font-family: inherit; font-size: 16px; color: var(--text);
  }
  .search-box input::placeholder { color: var(--muted); }
  .search-box input::-webkit-search-cancel-button,
  .search-box input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
  .search-close {
    width: 30px; height: 30px; padding: 0; border: none; border-radius: 50%;
    background: var(--page-bg); color: var(--muted); font-size: 14px; line-height: 1;
    cursor: pointer; flex-shrink: 0;
  }
  .search-close:hover { background: var(--border); }
  @keyframes searchIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .search-box { animation: none; } }
  .search-section-title { font-size: 13px; font-weight: 800; color: var(--teal); margin: 4px 0 10px; }
  .search-section-title.gap { margin-top: 20px; }

  .crumb {
    display: none;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--teal);
    cursor: pointer;
    font-weight: 600;
  }
  .crumb.show { display: flex; }

  .chip-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 14px;
  }
  .chip {
    flex-shrink: 0;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
  }
  .chip.active { background: var(--teal); color: #fff; border-color: var(--teal); }

  .date-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 8px;
  }
  .date-header .pill {
    background: var(--teal);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 8px;
    white-space: nowrap;
  }
  .date-header .line { flex: 1; height: 1px; background: var(--border); }

  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
  }

  /* Force exactly 2 columns on phones (2026-09-25 field request: the
     folder grid was rendering as a single vertical column on some mobile
     browsers even though the APK app shows the same folders as a 2xN
     matrix). auto-fill/minmax should already yield 2 columns above
     roughly 304px of available width, but this guarantees it regardless
     of a narrow device, an in-app-browser quirk, or accessibility
     text-size scaling shrinking the effective viewport. */
  @media (max-width: 480px) {
    .grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
  }
  .folder-card {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px 10px;
    text-align: center;
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s;
  }
  .folder-card:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.08); transform: translateY(-2px); }
  .folder-card .label { font-size: 13.5px; font-weight: 700; line-height: 1.3; }

  /* Colorful "glossy 3D folder" icon — a gradient disc (light-to-dark
     across the folder's own color) behind a white glyph, plus a small
     highlight streak, matching the app's per-folder colored icons
     (field request 2026-09-21: "the folders are not colourful, make it
     like the apk app"). Per-instance color set via the --icon-* custom
     properties (see buildFolderIcon() in the script). */
  .icon3d {
    position: relative;
    width: 56px;
    height: 56px;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .icon3d .disc {
    position: absolute;
    inset: 3px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--icon-light), var(--icon-color) 55%, var(--icon-dark));
    box-shadow: 0 6px 14px -3px var(--icon-color);
  }
  .icon3d .glyph {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25));
  }
  .icon3d .sheen {
    position: absolute;
    top: 9px;
    left: 11px;
    width: 16px;
    height: 7px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0));
    z-index: 1;
  }
  .folder-card .badge-dot {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--danger);
    box-shadow: 0 0 0 2px #fff;
  }

  .empty-state { text-align: center; color: var(--muted); padding: 60px 20px; font-size: 14px; }
  .loading-state { text-align: center; color: var(--muted); padding: 40px 20px; font-size: 14px; }

  h2.folder-title { font-size: 18px; margin: 0 0 14px; }

  .talk-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
  }
  /* LISTEN_TEXT_OVERFLOW_AND_SORT_FIX_2026_10 — long titles built from
     underscore-joined words (no spaces) have no natural break point, so
     without this the browser treats the whole string as one unbreakable
     token and lets it run off the right edge of the card/screen instead
     of wrapping — exactly the "text going out of screen" field report.
     overflow-wrap:anywhere forces a break even with no whitespace/hyphen
     available. (This comment also doubles as this fix's idempotency
     marker for the delivery script.) */
  .talk-card .talk-title { font-weight: 700; font-size: 15px; margin-bottom: 2px; overflow-wrap: anywhere; word-break: break-word; }
  .talk-card .talk-meta { font-size: 12px; color: var(--muted); margin-bottom: 10px; overflow-wrap: anywhere; word-break: break-word; }
  /* LISTEN_TOPICS_2026_10 — place and topic list under each talk */
  .talk-card .talk-place { font-size: 12px; color: var(--muted); margin: -4px 0 8px; overflow-wrap: anywhere; word-break: break-word; }
  .talk-card .talk-topics { margin: 0 0 10px; }
  .talk-card .talk-topics summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--teal); padding: 2px 0; }
  .talk-card .talk-topics .t-list { margin-top: 6px; font-size: 13px; line-height: 1.65; color: var(--text); }
  .talk-card .talk-topics .t-list div { overflow-wrap: anywhere; word-break: break-word; }
  .talk-card .talk-topics .t-head { font-weight: 600; margin-top: 4px; }
  .talk-card .talk-topics .t-item { padding-left: 14px; text-indent: -14px; margin-top: 3px; }
  .talk-card .talk-topics .t-sub { padding-left: 30px; text-indent: -14px; color: #36423d; }
  .rec-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
  .rec-row audio { flex: 1; min-width: 180px; height: 34px; }
  .rec-row .part-label { font-size: 12.5px; color: var(--muted); min-width: 46px; }
  .dl-link {
    font-size: 12.5px; font-weight: 700; color: var(--teal); text-decoration: none;
    border: 1px solid var(--teal); border-radius: 999px; padding: 5px 12px; white-space: nowrap;
  }
  .dl-link:hover { background: var(--teal); color: #fff; }
  /* LISTEN_SHARE_2026_10 — "শেয়ার" button at the bottom of each talk card */
  .talk-card .talk-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
  .share-btn {
    font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--teal); background: #fff;
    border: 1px solid var(--teal); border-radius: 999px; padding: 5px 14px; cursor: pointer; white-space: nowrap;
  }
  .share-btn:hover { background: var(--teal); color: #fff; }
  /* LISTEN_SHARE_INLINE_2026_10 — share button sits in the same row as the download button, pushed to the right */
  .rec-row .share-btn { margin-left: auto; padding: 5px 12px; line-height: inherit; }
  @media (max-width: 560px) { .rec-row.has-share audio { flex: 1 1 100%; } } /* ফোনে প্লেয়ার নিজের লাইনে; নিচে ডাউনলোড + শেয়ার একসাথে */
  /* LISTEN_SHARE_SHEET_2026_10 — "শেয়ার করুন" popup (used when the browser has no built-in share sheet) */
  .share-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1000; display: flex; align-items: flex-end; justify-content: center; }
  .share-sheet { background: #fff; width: 100%; max-width: 440px; border-radius: 16px 16px 0 0; padding: 16px 16px 18px; box-shadow: 0 -6px 24px rgba(0,0,0,0.18); }
  @media (min-width: 600px) { .share-backdrop { align-items: center; } .share-sheet { border-radius: 16px; } }
  .share-sheet h3 { margin: 0 0 2px; font-size: 16px; color: var(--teal); }
  .share-sheet .share-sub { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; overflow-wrap: anywhere; word-break: break-word; }
  .share-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
  .share-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border: 1px solid var(--border); border-radius: 12px; text-decoration: none; color: var(--text); font-size: 12.5px; font-weight: 600; background: #fff; }
  .share-opt .ico { font-size: 22px; line-height: 1; }
  .share-opt:hover { background: var(--page-bg); }
  .share-copy { display: flex; gap: 8px; margin-bottom: 10px; }
  .share-copy input { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; font-size: 13px; font-family: inherit; color: var(--text); background: #fff; }
  .share-copy button { font-family: inherit; font-size: 13px; font-weight: 700; color: #fff; background: var(--teal); border: none; border-radius: 10px; padding: 8px 14px; cursor: pointer; white-space: nowrap; }
  .share-close { display: block; width: 100%; font-family: inherit; font-size: 13.5px; color: var(--muted); background: var(--page-bg); border: none; border-radius: 10px; padding: 9px; cursor: pointer; }

  .doc-row {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .doc-row .doc-icon { font-size: 22px; flex-shrink: 0; }
  .doc-row .doc-info { flex: 1; min-width: 0; }
  .doc-row .doc-title { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; word-break: break-word; }
  .doc-row .doc-type { font-size: 11.5px; color: var(--muted); }
  .doc-row .doc-actions { display: flex; gap: 8px; flex-shrink: 0; }
  /* LISTEN_SHARE_DOC_2026_10 — compact share button in a document row */
  .doc-row .doc-actions { align-items: center; }
  .doc-share-btn {
    font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1; color: var(--teal);
    background: transparent; border: 1.5px solid var(--teal); border-radius: 999px;
    width: 30px; height: 28px; padding: 0; cursor: pointer; flex-shrink: 0;
  }
  .doc-share-btn:hover { background: var(--teal); color: #fff; }
  /* LISTEN_SHARE_DOC_LAYOUT_2026_10 — document rows: labelled share pill; on phones title on top, buttons on their own line */
  .doc-share-btn { width: auto; height: auto; padding: 5px 12px; font-size: 12.5px; line-height: inherit; white-space: nowrap; }
  @media (max-width: 560px) {
    .doc-row { flex-wrap: wrap; row-gap: 10px; }
    .doc-row .doc-actions { flex: 1 1 100%; flex-shrink: 1; }
    .doc-row .doc-share-btn { margin-left: auto; }
  }
  .view-link {
    font-size: 12.5px; font-weight: 700; color: #fff; text-decoration: none;
    background: var(--teal); border-radius: 999px; padding: 5px 12px; white-space: nowrap;
  }

  .load-more {
    display: block; width: 100%; margin-top: 6px; padding: 11px; border-radius: 10px;
    border: 1px solid var(--border); background: #fff; color: var(--teal); font-weight: 700;
    font-size: 13.5px; cursor: pointer;
  }
  .load-more:disabled { opacity: 0.5; cursor: default; }

  footer {
    max-width: 720px; margin: 30px auto 0; text-align: center; color: var(--muted); font-size: 12px; padding: 0 16px;
  }

/* BEGIN BANNER_BOX_2026_10 — one-line banner under the title banner */
.announce-ticker {
  max-width: 720px; margin: 12px auto 0; padding: 9px 14px;
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: #fbf3d3; border: 1px solid #e6d28a; border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05); color: #5a4a00;
  -webkit-tap-highlight-color: transparent;
}
.announce-ticker[hidden] { display: none; }
.announce-ticker .at-ico { flex-shrink: 0; font-size: 16px; line-height: 1; }
.announce-ticker .at-view { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 14.5px; font-weight: 600; line-height: 1.5; }
.announce-ticker .at-track { display: inline-block; white-space: nowrap; will-change: transform; }
.announce-ticker .at-track.scroll { animation: atScroll var(--at-dur, 20s) linear infinite; }
.announce-ticker .at-track.scroll .at-gap { display: inline-block; width: 3em; }
.announce-ticker:hover .at-track.scroll, .announce-ticker:active .at-track.scroll { animation-play-state: paused; }
.announce-ticker .at-track.clip { display: block; overflow: hidden; text-overflow: ellipsis; }
@keyframes atScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .announce-ticker .at-track.scroll { animation: none; } }
/* END BANNER_BOX_2026_10 */