/* Generated bundle.css - do not edit. Source: scripts/build-css.sh */

/* === header.css === */
/* Use this to change the color under the navbar
Each page is customized under its own CSS */
html, body {
    background-color: #f8f9fa;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
    background-color: #1a1a2e;
}
.btn-primary:hover {
  color: #f9f7f4;
  background-color: #8fb4fa;
  border-color: #0e6efd;
}
.btn-secondary:hover {
  color: #f9f7f4;
  background-color: #04c3ee;
  border-color: #5b288e;
}
.btn-light:hover {
  color: #f9f7f4;
  background-color: #04c3ee;
  border-color: #5b288e;
}
/* Favorite button active state */
.btn-favorite-article.active,
.btn-favorite-sermon.active {
    color: #eeeeee;
    border-color: #dc3545;
}

/* Notification bell size */
.notification-bell {
    font-size: 1.25rem;
}

/* Toast animation */
.favorites-toast {
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
/* === navbar.css === */
.card:hover {
  background-color: #e1eafe;  
  border-color: #5b288e;
}
.navbar_logo {
  width: 220px;
  height: auto;
  display: inline-block;
  float: none;
  vertical-align: middle;
}
.navbar {
  background-color: white;
  /* to change the color of the navbar background - 
  go to navbar.php and edit the style */
}
/* This lets you change the navbar links color */
.navbar-nav li a{
  color: #395ba9;
}
.navbar-nav li a{
  color: #395ba9;
}
.navbar-nav a:hover{
  color: #0045ff;
}
.navbar_nav_search {
  white-space: nowrap;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.dropdown-menu.show {
  -webkit-animation: fadeIn 0.3s alternate;
  /* Safari 4.0 - 8.0 */
  animation: fadeIn 0.3s alternate;
}

.nav-item.dropdown.dropdown-mega {
  position: static;
}
.nav-item.dropdown.dropdown-mega .dropdown-menu {
  width: 90%;
  top: auto;
  left: 5%;
}

.navbar-toggler {
  border: none;
  padding: 0;
  outline: none;
}
.navbar-toggler:focus {
  box-shadow: none;
}
.navbar-toggler .hamburger-toggle {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  z-index: 11;
  float: right;
}
.navbar-toggler .hamburger-toggle .hamburger {
  position: absolute;
  transform: translate(-50%, -50%) rotate(0deg);
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
  pointer-events: none;
}
.navbar-toggler .hamburger-toggle .hamburger span {
  width: 100%;
  height: 4px;
  position: absolute;
  background: #333;
  border-radius: 2px;
  z-index: 1;
  transition: transform 0.2s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.2s cubic-bezier(0.77, 0.2, 0.05, 1), all 0.2s ease-in-out;
  left: 0px;
}
.navbar-toggler .hamburger-toggle .hamburger span:first-child {
  top: 10%;
  transform-origin: 50% 50%;
  transform: translate(0% -50%) !important;
}
.navbar-toggler .hamburger-toggle .hamburger span:nth-child(2) {
  top: 50%;
  transform: translate(0, -50%);
}
.navbar-toggler .hamburger-toggle .hamburger span:last-child {
  left: 0px;
  top: auto;
  bottom: 10%;
  transform-origin: 50% 50%;
}
.navbar-toggler .hamburger-toggle .hamburger.active span {
  position: absolute;
  margin: 0;
}
.navbar-toggler .hamburger-toggle .hamburger.active span:first-child {
  top: 45%;
  transform: rotate(45deg);
}
.navbar-toggler .hamburger-toggle .hamburger.active span:nth-child(2) {
  left: 50%;
  width: 0px;
}
.navbar-toggler .hamburger-toggle .hamburger.active span:last-child {
  top: 45%;
  transform: rotate(-45deg);
}

.icons {
  display: inline-flex;
  margin-left: auto;
}
.icons a {
  transition: all 0.2s ease-in-out;
  padding: 0.2rem 0.4rem;
  color: #ccc !important;
  text-decoration: none;
}
.icons a:hover {
  color: white;
  text-shadow: 0 0 30px white;
}

/* Member avatar in navbar */
.navbar-member-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
}

/* Breadcrumbs (shared across all pages) */
.pg-breadcrumb {
    padding: 0.25rem 0 0.5rem;
}
.pg-breadcrumb .breadcrumb {
    background: transparent;
    padding: 0;
    font-size: 0.85rem;
}
.pg-breadcrumb .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}
.pg-breadcrumb .breadcrumb-item a:hover {
    color: #fff;
    text-decoration: underline;
}
.pg-breadcrumb .breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.55);
}
.pg-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.4);
}

/* Light background variant */
.pg-breadcrumb-light .breadcrumb-item a {
    color: #6c757d;
}
.pg-breadcrumb-light .breadcrumb-item a:hover {
    color: #495057;
}
.pg-breadcrumb-light .breadcrumb-item.active {
    color: #adb5bd;
}
.pg-breadcrumb-light .breadcrumb-item + .breadcrumb-item::before {
    color: #adb5bd;
}

/* Mobile: edge-to-edge divider under breadcrumbs in article/sermon heroes */
@media (max-width: 767.98px) {
    .article-hero .pg-breadcrumb,
    .sermon-hero .pg-breadcrumb {
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        margin-left: -12px;
        margin-right: -12px;
        padding-left: 12px;
        padding-right: 12px;
        margin-bottom: 0.5rem;
    }
    /* Hide last breadcrumb item on mobile — already shown as page title */
    .pg-breadcrumb .breadcrumb-item:last-child {
        display: none;
    }
}
</style>

/* === articles.css === */
.articles_page {

}
.articles_title {
	font-size: 20px;
	font-weight: bold;
}
.articles_article_count {

}
.articles_name {
	font-size: 20px;
	font-weight: bold;
}
.articles_bits {

}
.articles_bit_author {
	font-size: 18px;
}
.articles_bits a:link {
	color: #18274b;
	text-decoration: none;
}
.articles_bits a:visited  {
	color: #18274b;
	text-decoration: none;
}
.articles_bits a:active {
	color: #18274b;
	text-decoration: none;	
}
.articles_bits a:hover {
	color: #18274b;
	text-decoration: underline;	
}
.articles_bit_article {
	font-size: 20px;
	margin-top: 20px;
}
.articles_bit_published_date {
	font-style: italic;
}
.articles_bit_article_length {
	font-style: italic;
}
.articles_bit_author_image {
	margin-top: 25px;
	max-width: 70px;
	vertical-align: top;
	box-shadow:0px 5px 5px 0px  #888;	
}
/* === article.css === */
.article_page {

}
.article_title {
	font-size: 25px;
	color: #18274b;
	text-align: center;
}
.article_subtitle1 {
	font-size: 20px;
	color: #18274b;
	text-align: center;
}					
.article_subtitle2 {
	font-size: 20px;
	color: #18274b;
	text-align: center;
}
.article_subtitle3 {
	font-size: 20px;
	color: #18274b;
	text-align: center;
}
.article_author {
	font-size: 20px;
	color: #18274b;
	text-align:center;
	padding-bottom: 5px;
}
.article_author a:link {
	color: #18274b;
	text-decoration: none;
}
.article_author a:visited  {
	color: #18274b;
	text-decoration: none;
}
.article_author a:active {
	color: #18274b;
	text-decoration: none;	
}
.article_author a:hover {
	color: #18274b;
	text-decoration: underline;	
}
.article_published_date_time {
	font-size: 10px;
	color: #000066;
	font-style: italic;
	text-align:center;						
}
.article_text {
	color: #18274b;
	font-size: 20px;	
}
.article_text a:link {
	color: #304e96;
	text-decoration: none;
}
.article_text a:visited  {
	color: #304e96;
	text-decoration: none;
}
.article_text a:active {
	color: #304e96;
	text-decoration: none;	
}
.article_text a:hover {
	color: #304e96;
	text-decoration:  none;
}
.article_copyright_text {
	color: #888888;
	font-size: 15px;
	line-height: 17pt;
}
.article_not_published {
	font-size: 20px;
	color: red;
	text-align: center;	
}
.article_cookies_required {
	font-size: 18px;
	color: #888888;
	text-align: center;	
}
.article_copyright {
	font-size: 10px;
	color: black;
	text-align: left;
	margin: 15px 15px 0px 0px;
	padding-left: 15px;
}
.article_password_warning {
	font-size: 20px;
	color: red;
	text-align: center;	
}
.article_password_challenge_form {
	background-color: white;
	color: black;
	font-size: 18px;
	text-align: center;
}
.article_password {
  background-color: #ABCDEF;
  color: black;
  padding: 5px 10px;
  text-decoration: none;
  font-size: 18px;
  margin: 4px 2px;
  padding:10px;
  border:3px;
}
.article_text ol {
	margin: 15px 0px;
}
.article_text ol li {
	margin: 0px 38px;
	list-style-type: decimal; 
}
.article_text p {

}
.article_text blockquote {
	margin: 0px 38px 15px 38px;
}
.article_image_float-end {
	max-width: 175px;
	margin-top:  7px;
	margin-left: 20px;
	margin-bottom: 5px;
	box-shadow:0px 5px 5px 0px  #888;
}
.article_image_float-start {
	height: 100%; 
	max-height: 300px;
	margin-top:  7px;
	margin-right: 20px;
	vertical-align: middle;
	box-shadow:0px 5px 5px 0px  #888;
}
.article_author_bio {
	font-size: 12px;
	color: #203565;
}
.article_published_update_date {
	font-size: 10px;
	color: #203565;
}
.article_topics {
	font-size: 10px;
	color: #203565;
}
.article_topic_bits {
	font-size: 10px;
	color: #203565;
}
.article_topic_bits a:link {
	color: #203565;
	text-decoration: none;
}
.article_topic_bits a:visited  {
	color: #203565;
	text-decoration: none;
}
.article_topic_bits a:active {
	color: #203565;
	text-decoration: none;	
}
.article_topic_bits a:hover {
	color: #203565;
	text-decoration: underline;	
}
.article_author_link {
	font-size: 10px;
	color: #203565;
}
.article_author_link a:link {
	color: #203565;
	text-decoration: none;
}
.article_author_link a:visited  {
	color: #203565;
	text-decoration: none;
}
.article_author_link a:active {
	color: #203565;
	text-decoration: none;	
}
.article_author_link a:hover {
	color: #203565;
	text-decoration: underline;	
}
.article_view_count {
	font-size: 10px;
	color: #203565;
}
.article_latest_articles_title {
	font-size: 20px;
	font-weight: bold;
}
/* === authors.css === */
.authors{ 
}
.authors_page {

	padding-bottom: 20px;
}
.authors_title {
	font-size: 20px;
	font-weight: bold;
}
.authors_bits {

}
.authors_bits_letter{ /* used in the authors_bit_template */
	background-color: #2d3e50;
	color:  #c4d2e7;
	font-size: 18px;
	padding-top: 3px;
	padding-bottom: 3px;
	margin-top: 7px;
	margin-bottom: 7px;
}
.authors_bits_author{ /* used in the authors_bit_template */
	font-size:  18px;
	margin-top: 3px;
	margin-bottom: 3px;	
}
.authors_bits a:link {
	color: #18274b;
	text-decoration: none;
}
.authors_bits a:visited  {
	color: #18274b;
	text-decoration: none;
}
.authors_bits a:active {
	color: #18274b;
	text-decoration: none;	
}
.authors_bits a:hover {
	color: #7fd1de;
}

/* === author.css === */
.author_page {

}

.author_image_multiple_items {
	max-width: 220px;
	margin-top:  0px;
	margin-left: 20px;
	box-shadow:0px 5px 5px 0px  #888;
}
.author_image_1_item {
	max-width: 115px;
	margin-top:  0px;
	margin-left: 20px;
	vertical-align: middle;
    -o-object-fit: contain;
    object-fit: contain;
	box-shadow:0px 5px 5px 0px  #888;
}
.author_image_2_items_large_aspect {
	max-width: 175px;
	margin-top:  0px;
	margin-left: 20px;
	vertical-align: middle;
    -o-object-fit: contain;
    object-fit: contain;
	box-shadow:0px 5px 5px 0px  #888;
}
.author_image_3_items_large_aspect {
	max-width: 260px;
	margin-top:  0px;
	margin-left: 20px;
	vertical-align: middle;
    -o-object-fit: contain;
    object-fit: contain;
	box-shadow:0px 5px 5px 0px  #888;
}
.author_article_count {

}
.author_sermon_count {
	padding-left: 10px;
}
.author_sermon_count a:link {
	color: #18274b;
	text-decoration: none;
}
.author_sermon_count a:visited  {
	color: #18274b;
	text-decoration: none;
}
.author_sermon_count a:active {
	color: #18274b;
	text-decoration: none;	
}
.author_sermon_count a:hover {
	color: #18274b;
	text-decoration: underline;	
}
.author_book_count {
	padding-left: 10px;
}
.author_book_count a:link {
	color: #18274b;
	text-decoration: none;
}
.author_book_count a:visited  {
	color: #18274b;
	text-decoration: none;
}
.author_book_count a:active {
	color: #18274b;
	text-decoration: none;	
}
.author_book_count a:hover {
	color: #18274b;
	text-decoration: underline;	
}
.author_name {
	font-size: 20px;
	font-weight: bold;
}
.author_bits {

}
.author_bits a:link {
	color: #18274b;
	text-decoration: none;
}
.author_bits a:visited  {
	color: #18274b;
	text-decoration: none;
}
.author_bits a:active {
	color: #18274b;
	text-decoration: none;	
}
.author_bits a:hover {
	color: #18274b;
	text-decoration: underline;	
}
.author_bit_article {
	font-size: 20px;
	margin-top: 20px;
}
.author_bit_published_date {
	font-style: italic;
}
.author_bit_article_length {
	font-style: italic;
}
/* === topics.css === */
/* Topics Page Redesign */

.topics-page {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: 60vh;
}

/* Grid Layout */
.topics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 767.98px) {
    .topics-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 992px) {
    .topics-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .topics-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Topic Card */
.topic-card .card {
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    transition: all 0.3s ease;
    background: #fff;
}

.topic-card .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border-color: rgba(13, 110, 253, 0.3);
}

.topic-card-link:hover .card-title {
    color: #0d6efd !important;
}

/* Topic Monogram */
.topic-monogram {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
}

/* Arrow */
.topic-arrow {
    opacity: 0;
    transition: all 0.3s ease;
    transform: translateX(-10px);
}

.topic-card:hover .topic-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Card content */
.topic-card .card-title {
    font-size: 1rem;
    font-weight: 600;
    transition: color 0.3s ease;
}

.topic-card .card-text {
    font-size: 0.85rem;
    line-height: 1.4;
}

.topic-card .badge {
    font-weight: 500;
    font-size: 0.75rem;
}

/* Min width helper */
.min-width-0 {
    min-width: 0;
}

/* Search input styling */
#topicSearch {
    border-left: none;
}

#topicSearch:focus {
    box-shadow: none;
    border-color: #ced4da;
}

.input-group:focus-within {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    border-radius: 0.375rem;
}

.input-group:focus-within .input-group-text,
.input-group:focus-within .form-control {
    border-color: #86b7fe;
}

/* === topic.css === */
.topic_page {

}
.topic_article_count {

}
.topic_name {
	font-size: 20px;
	font-weight: bold;
}
.topic_bits {

}
.topic_bit_author {
	font-size: 18px;
}
.topic_bits a:link {
	color: #18274b;
	text-decoration: none;
}
.topic_bits a:visited  {
	color: #18274b;
	text-decoration: none;
}
.topic_bits a:active {
	color: #18274b;
	text-decoration: none;	
}
.topic_bits a:hover {
	color: #18274b;
	text-decoration: underline;	
}
.topic_bit_article {
	font-size: 20px;
	margin-top: 20px;
}
.topic_bit_published_date {
	font-style: italic;
}
.topic_bit_article_length {
	font-style: italic;
}
.topic_bit_author_image {
	margin-top: 25px;
	max-width: 70px;
	vertical-align: top;
	box-shadow:0px 5px 5px 0px  #888;	
}
/* === sermons.css === */
.sermons_page {

}
.sermons_title {
	font-size: 20px;
	font-weight: bold;
}
.sermons_sermon_count {

}
.sermons_name {
	font-size: 20px;
	font-weight: bold;
}
.sermons_bits {

}
.sermons_bit_preacher {
	font-size: 18px;
}
.sermons_bits a:link {
	color: #18274b;
	text-decoration: none;
}
.sermons_bits a:visited  {
	color: #18274b;
	text-decoration: none;
}
.sermons_bits a:active {
	color: #18274b;
	text-decoration: none;	
}
.sermons_bits a:hover {
	color: #18274b;
	text-decoration: underline;	
}
.sermons_bit_sermon {
	font-size: 20px;
	margin-top: 20px;
}
.sermons_bit_published_date {
	font-style: italic;
}
.sermons_bit_sermon_length {
	font-style: italic;
}
.sermons_bit_preacher_image {
	margin-top: 25px;
	max-width: 70px;
	vertical-align: top;
	box-shadow:0px 5px 5px 0px  #888;	
}
/* === sermon.css === */
.sermon_page {

}
.sermon_video {
	padding-bottom: 20px;
}
.sermon_audio {

}
.sermon_text {
	color: #18274b;
	font-size: 20px;	
}
.sermon_text a:link {
	color: #304e96;
	text-decoration: none;
}
.sermon_text a:visited  {
	color: #304e96;
	text-decoration: none;
}
.sermon_text a:active {
	color: #304e96;
	text-decoration: none;	
}
.sermon_text a:hover {
	color: #304e96;
	text-decoration:  none;
}
.sermon_copyright_text {
	color: #888888;
	font-size: 15px;
	line-height: 17pt;
}
.sermon_not_published {
	font-size: 20px;
	color: red;
	text-align: center;	
}
.sermon_cookies_required {
	font-size: 18px;
	color: #888888;
	text-align: center;	
}
.sermon_copyright {
	font-size: 10px;
	color: black;
	text-align: left;
	margin: 15px 15px 0px 0px;
	padding-left: 15px;
}
.sermon_password_warning {
	font-size: 20px;
	color: red;
	text-align: center;	
}
.sermon_password_challenge_form {
	background-color: white;
	color: black;
	font-size: 18px;
	text-align: center;
}
.sermon_password {
  background-color: #ABCDEF;
  color: black;
  padding: 5px 10px;
  text-decoration: none;
  font-size: 18px;
  margin: 4px 2px;
  padding:10px;
  border:3px;
}
.sermon_text ol {
	margin: 15px 0px;
}
.sermon_text ol li {
	margin: 0px 38px;
	list-style-type: decimal; 
}
.sermon_text p {

}
.sermon_text blockquote {
	margin: 0px 38px 0px 38px;
}
.sermon_image_float-end {
	max-width: 175px;
	margin-top:  7px;
	margin-left: 20px;

	box-shadow:0px 5px 5px 0px  #888;
}
.sermon_image_float-start {
	height: 100%; 
	max-height: 300px;
	margin-top:  7px;
	margin-right: 20px;
	vertical-align: middle;
	box-shadow:0px 5px 5px 0px  #888;
}
.sermon_preacher_bio {
	margin-top: 20px;
	margin-left: 13px;
	font-size: 12px;
	color: #203565;
}
.sermon_published_update_date {
	font-size: 10px;
	color: #203565;
}
.sermon_topics {
	font-size: 10px;
	color: #203565;
}
.sermon_topic_bits {
	font-size: 10px;
	margin-left: 13px;
	color: #203565;
}
.sermon_topic_bits a:link {
	color: #203565;
	text-decoration: none;
}
.sermon_topic_bits a:visited  {
	color: #203565;
	text-decoration: none;
}
.sermon_topic_bits a:active {
	color: #203565;
	text-decoration: none;	
}
.sermon_topic_bits a:hover {
	color: #203565;
	text-decoration: underline;	
}
.sermon_preacher_link {
	margin-left: 13px;
	font-size: 10px;
	color: #203565;
}
.sermon_preacher_link a:link {
	color: #203565;
	text-decoration: none;
}
.sermon_preacher_link a:visited  {
	color: #203565;
	text-decoration: none;
}
.sermon_preacher_link a:active {
	color: #203565;
	text-decoration: none;	
}
.sermon_preacher_link a:hover {
	color: #203565;
	text-decoration: underline;	
}
/* === preachers.css === */
.preachers{ 
}
.preachers_page {

	padding-bottom: 20px;
}
.preachers_title {
	font-size: 20px;
	font-weight: bold;
}
.preachers_bits {

}
.preachers_bits_letter{ /* used in the preachers_bit_template */
	background-color: #454f69;
	color:  #c4d2e7;
	font-size: 18px;
	padding-top: 3px;
	padding-bottom: 3px;
	margin-top: 7px;
	margin-bottom: 7px;
}
.preachers_bits_preacher{ /* used in the preachers_bit_template */
	font-size:  18px;
	margin-top: 3px;
	margin-bottom: 3px;	
}
.preachers_bits a:link {
	color: #18274b;
	text-decoration: none;
}
.preachers_bits a:visited  {
	color: #18274b;
	text-decoration: none;
}
.preachers_bits a:active {
	color: #18274b;
	text-decoration: none;	
}
.preachers_bits a:hover {
	color: #18274b;
	text-decoration: underline;	
}

/* === preacher.css === */
.preacher_page {

}

.preacher_image_multiple_items {
	max-width: 250px;
	margin-top:  0px;
	margin-left: 20px;
	box-shadow:0px 5px 5px 0px  #888;
}
.preacher_image_1_item {
	max-width: 115px;
	margin-top:  0px;
	margin-left: 20px;
	vertical-align: middle;
    -o-object-fit: contain;
    object-fit: contain;
	box-shadow:0px 5px 5px 0px  #888;
}
.preacher_image_2_items_large_aspect {
	max-width: 175px;
	margin-top:  0px;
	margin-left: 20px;
	vertical-align: middle;
    -o-object-fit: contain;
    object-fit: contain;
	box-shadow:0px 5px 5px 0px  #888;
}
.preacher_image_3_items_large_aspect {
	max-width: 260px;
	margin-top:  0px;
	margin-left: 20px;
	vertical-align: middle;
    -o-object-fit: contain;
    object-fit: contain;
	box-shadow:0px 5px 5px 0px  #888;
}
.preacher_sermon_count {

}
.preacher_article_count {
	padding-left: 10px;
}
.preacher_article_count a:link {
	color: #18274b;
	text-decoration: none;
}
.preacher_article_count a:visited  {
	color: #18274b;
	text-decoration: none;
}
.preacher_article_count a:active {
	color: #18274b;
	text-decoration: none;	
}
.preacher_article_count a:hover {
	color: #18274b;
	text-decoration: underline;	
}
.preacher_book_count {
	padding-left: 10px;
}
.preacher_book_count a:link {
	color: #18274b;
	text-decoration: none;
}
.preacher_book_count a:visited  {
	color: #18274b;
	text-decoration: none;
}
.preacher_book_count a:active {
	color: #18274b;
	text-decoration: none;	
}
.preacher_book_count a:hover {
	color: #18274b;
	text-decoration: underline;	
}
.preacher_name {
	font-size: 20px;
	font-weight: bold;
}
.preacher_bits {

}
.preacher_bits a:link {
	color: #18274b;
	text-decoration: none;
}
.preacher_bits a:visited  {
	color: #18274b;
	text-decoration: none;
}
.preacher_bits a:active {
	color: #18274b;
	text-decoration: none;	
}
.preacher_bits a:hover {
	color: #18274b;
	text-decoration: underline;	
}
.preacher_bit_sermon {
	font-size: 20px;
	margin-top: 20px;
}
.preacher_bit_published_date {
	font-style: italic;
}
.preacher_bit_sermon_length {
	font-style: italic;
}
/* === sermon_topic.css === */
.sermon_sermon_topic_page {

}
.sermon_sermon_topic_sermon_count {

}
.sermon_sermon_topic_name {
	font-size: 20px;
	font-weight: bold;
}
.sermon_sermon_topic_bits {

}
.sermon_sermon_topic_bit_preacher {
	font-size: 18px;
}
.sermon_sermon_topic_bit_preacher {

}
.sermon_sermon_topic_bit_preacher a:link {
	color: #18274b;
	text-decoration: none;
}
.sermon_sermon_topic_bit_preacher a:visited  {
	color: #18274b;
	text-decoration: none;
}
.sermon_sermon_topic_bit_preacher a:active {
	color: #18274b;
	text-decoration: none;	
}
.sermon_sermon_topic_bit_preacher a:hover {
	color: #18274b;
	text-decoration: underline;	
}
.sermon_sermon_topic_bit_sermon {
	color: #18274b;
	font-size: 20px;
	margin-top: 20px;
}
.sermon_sermon_topic_bit_sermon a:link{
	color: #18274b;
	text-decoration: none;	
}
.sermon_sermon_topic_bit_sermon a:visited{
	color: #18274b;
	text-decoration: none;	
}
.sermon_sermon_topic_bit_sermon a:active{
	color: #18274b;
	text-decoration: none;	
}
.sermon_sermon_topic_bit_sermon a:hover{
	color: #18274b;
	text-decoration:  underline;
}
.sermon_sermon_topic_bit_published_date {
	font-style: italic;
}
.sermon_sermon_topic_bit_preacher_image {
	margin-top: 25px;
	max-width: 70px;
	vertical-align: top;
	box-shadow:0px 5px 5px 0px  #888;	
}
/* === sermon_topics.css === */
.sermon_topics_page {

}
.sermon_topics_title {
	font-size: 20px;
	font-weight: bold;
}
.sermon_topics_bit_title{ /* used in the authors_bit_template */
	background-color: #2d3e50;
	color:  #FFFFFF;
	font-size: 18px;
	padding-top: 3px;
	padding-bottom: 3px;
	margin-top: 10px;
	margin-bottom: 10px;	
}
.sermon_topics_sermons_count {
	font-size:  12px;
	text-align: right;	
}
.sermon_topics_bits {

}
.sermon_topics_bit{ /* used in the sermon_topics_bit_template */

}
.sermon_topics_bit_description {

}
.sermon_topics_bit_sermon_count {
	font-size:  12px;
	font-style:  italic;
}
.sermon_topics_bit_title {
	font-size: 18px;
}
.sermon_topics_bit_title a:link {
	color: #c4d2e7;
	text-decoration: none;
}
.sermon_topics_bit_title a:visited  {
	color: #c4d2e7;
	text-decoration: none;
}
.sermon_topics_bit_title a:active {
	color: #c4d2e7;
	text-decoration: none;	
}
.sermon_topics_bit_title a:hover {
	color: #7fd1de;
}
/* === search.css === */
/* Dark Mode CSS Variables */
:root {
    --search-page-bg: #f8f9fa;
    --search-hints-color: #888888;
    --search-terms-color: #0e6efd;
    --search-highlighted-color: #0e6efd;
    --search-bit-title-link: #18274b;
    --search-bit-snippet-color: #212529;
    --search-bit-author-color: #18274b;
    --search-bit-length-color: #6c757d;
    --search-time-color: #6c757d;
    --search-number-color: #212529;
}

[data-theme="dark"] {
    --search-page-bg: #1a1a2e;
    --search-hints-color: #a0a0a0;
    --search-terms-color: #6ea8fe;
    --search-highlighted-color: #6ea8fe;
    --search-bit-title-link: #e0e0e0;
    --search-bit-snippet-color: #b0b0b0;
    --search-bit-author-color: #6ea8fe;
    --search-bit-length-color: #a0a0a0;
    --search-time-color: #a0a0a0;
    --search-number-color: #e0e0e0;
}

.search_page {
    background: var(--search-page-bg);
}
.search_hints {
	margin-top: 5px;
	color: var(--search-hints-color);
}
.search_sections {
}
.search_button {
	margin-top: 20px;
}
.search_titles_only {
	margin-top: 20px;
}
.search_number_of_results {
	margin-top: 20px;
	font-size: 18px;
	color: var(--search-number-color);
}
.search_search_terms {
	color: var(--search-terms-color);
}
.search_author_filter {
	margin-top: 20px;
}
.search_time {
	padding-left:  3px;
	font-size: 13px;
	color: var(--search-time-color);
}
.search_bits {
	margin-top: 20px;
}
.search_highlighted_text {
	color: var(--search-highlighted-color);
}
.search_bit {
	margin-bottom: 20px;
}
.search_bit_snippet {
	font-size: 18px;
	color: var(--search-bit-snippet-color);
}
.search_bit_author {
	font-style: italic;
}
.search_bit_length {
	margin-left: 20px;
	font-style:  italic;
	color: var(--search-bit-length-color);
}
.search_bit_title {
	font-size: 20px;
}
.search_bit_title a:link {
	color: var(--search-bit-title-link);
	text-decoration: none;
}
.search_bit_title a:visited  {
	color: var(--search-bit-title-link);
	text-decoration: none;
}
.search_bit_title a:active {
	color: var(--search-bit-title-link);
	text-decoration: none;
}
.search_bit_title a:hover {
	color: var(--search-bit-title-link);
	text-decoration: underline;
}
.search_bit_subtitle1 {

}
.search_bit_subtitle2 {

}
.search_bit_subtitle3 {

}
.search_bit_author_preacher a:link {
	color: var(--search-bit-author-color);
	text-decoration: none;
}
.search_bit_author_preacher a:visited  {
	color: var(--search-bit-author-color);
	text-decoration: none;
}
.search_bit_author_preacher a:active {
	color: var(--search-bit-author-color);
	text-decoration: none;
}
.search_bit_author_preacher a:hover {
	color: var(--search-bit-author-color);
	text-decoration: underline;
}

/* === footer.css === */
/* Footer Dark Mode Variables */
:root {
  --footer-bg: linear-gradient(135deg, #18274b 0%, #304e96 100%);
  --footer-text: #fff;
  --footer-link-hover: #7fd1de;
  --footer-input-bg: #fff;
  --footer-input-border: #ced4da;
  --footer-input-text: #212529;
}

[data-theme="dark"] {
  --footer-bg: linear-gradient(135deg, rgba(8, 8, 18, 0.9) 0%, rgba(18, 18, 34, 0.9) 100%);
  --footer-text: #e0e0e0;
  --footer-link-hover: #7fd1de;
  --footer-input-bg: #252538;
  --footer-input-border: #404055;
  --footer-input-text: #e0e0e0;
}

.footer_area {
	padding-top: 30px;
	color: var(--footer-text);
	background: var(--footer-bg);
}

/* Dark mode: glassy translucent footer so the cosmic background shows through,
   with a clearly visible top border separating it from page content. */
[data-theme="dark"] .footer_area {
	backdrop-filter: blur(14px) saturate(1.1);
	-webkit-backdrop-filter: blur(14px) saturate(1.1);
	border-top: 1px solid rgba(139, 92, 246, 0.25);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Dark mode form styling */
[data-theme="dark"] .footer_area .form-control {
  background-color: var(--footer-input-bg);
  border-color: var(--footer-input-border);
  color: var(--footer-input-text);
}

[data-theme="dark"] .footer_area .form-control::placeholder {
  color: #a0a0a0;
}

.footer-nav-link a:link {
	color: #fff;
	text-decoration: none;
}
.footer-nav-link a:visited  {
	color: #fff;
	text-decoration: none;
}
.footer-nav-link a:active {
	color: #fff;
	text-decoration: none;
}
.footer-nav-link a:hover {
	color: #fff;
	text-decoration: underline;
}
.footer-nav-item {
	color: #fff;
}
.footer-nav-item a:link {
	color: #fff;
	text-decoration: none;
}
.footer-nav-item a:visited  {
	color: #fff;
	text-decoration: none;
}
.footer-nav-item a:active {
	color: #fff;
	text-decoration: none;
}
.footer-nav-item a:hover {
	color: #7fd1de;
}
.footer_pristine_cms_copyright {
	color: #fff;
}
.footer_pristine_cms_copyright a:link {
	color: #fff;
	text-decoration: none;
}
.footer_pristine_cms_copyright a:visited  {
	color: #fff;
	text-decoration: none;
}
.footer_pristine_cms_copyright a:active {
	color: #fff;
	text-decoration: none;
}
.footer_pristine_cms_copyright a:hover {
	color: #7fd1de;
}

/* === SermonAudio Footer Embed Fix === */

.sermonaudio-footer {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Browser (playlist) iframe */
.sermonaudio-footer iframe[src*="embed.sermonaudio.com/browser"] {
  display: block;
  width: 100%;
  height: 360px;      /* adjust if you want taller */
  border: 0;
  margin: 0;
  padding: 0;
  vertical-align: bottom;
}

/* Player wrapper */
.sermonaudio-footer .player-wrap {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
  margin: 0;
}

/* Player iframe */
.sermonaudio-footer .player-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  display: block;
}
a[href*="youtube.com"] svg {
  fill: currentColor;
}

a[href*="youtube.com"]:hover svg {
  fill: #ff4444;
}
a[href*="facebook.com"] svg {
  fill: currentColor;
}

a[href*="facebook.com"]:hover svg {
  fill: #4a9ff5;
}
a[href*="sermonaudio.com"] svg {
  fill: currentColor;
}

a[href*="sermonaudio.com"]:hover svg {
  fill: #5a7fff; /* SermonAudio blue - brighter */
}

a[href*="apple.com"] svg {
  fill: currentColor;
}
a[href*="apple.com"]:hover svg {
  fill: #c792ff;
}

a[href*="spotify.com"] svg {
  fill: currentColor;
}
a[href*="spotify.com"]:hover svg {
  fill: #5eff8a;
}

.apple-podcasts-link svg,
.spotify-link svg {
  fill: currentColor;
  transition: fill 0.2s ease;
}

/* Apple Podcasts purple - brighter */
.apple-podcasts-link:hover svg {
  fill: #c792ff;
}

/* Spotify green - brighter */
.spotify-link:hover svg {
  fill: #5eff8a;
}
.tooltip {
  position: relative;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 140%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;

  background: #111;
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  transform-origin: bottom center;
}

.tooltip::before {
  content: "";
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #111;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.tooltip:hover::after,
.tooltip:hover::before,
.tooltip:focus-visible::after,
.tooltip:focus-visible::before {
  opacity: 1;
}
/* base icon link */
.icon-link{
  color: #fff;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  position: relative;
  z-index: 5;
}

.icon-link svg{
  width: 24px;
  height: 24px;
  fill: currentColor;
  display: block;
  transition: fill .2s ease;
}

/* tooltip */
.icon-link[data-tooltip]::after{
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;

  background: rgba(0,0,0,.9);
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 8px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 99999;
}

.icon-link:hover::after,
.icon-link:focus-visible::after{
  opacity: 1;
  visibility: visible;
}
.podcast-badge {
  height: 40px;        /* visual baseline */
  width: auto;
  object-fit: contain;
}

/* === paging.css === */
/* Until I can take the html out of paging_functions this is the most customization
that is allowed for paging.  All of the paging_gap classes cannot be found in the templates
but the paging_functions.php file.  To fix this I'm going to have to create a paging_bit_template
and rewrite much of that section.  It's pretty difficult, and I'm not sure it's worth it at
this point.  If you really really need this enhancement, send an email to brandan@pristinecms.com
and I can add I'll prioritize your request.  */

/* Dark Mode CSS Variables */
:root {
    --paging-link-color: #18274b;
    --paging-current-color: #006aff;
    --paging-text-color: #212529;
}

[data-theme="dark"] {
    --paging-link-color: #6ea8fe;
    --paging-current-color: #6ea8fe;
    --paging-text-color: #e0e0e0;
}

.paging_gap_1 { /* Base Pixels */
	margin-left: 3px;
	margin-right: 3px;
}
.paging_gap_2 {  /* Base Pixels x 2 */
	margin-left: 6px;
	margin-right: 6px;
}
.paging_gap_3 { /* Base Pixels x 3 */
	margin-left:  9px;
	margin-right: 9px;
}
.paging_gap_right_2 { /* Base Pixels x 4 */
	margin-right: 12px;
}
.paging_gap_left_5 {  /* Base Pixels * 10 */
	margin-left: 30px;
}
.paging_gap_left_3 {  /* Base Pixels * 6 */
	margin-left:  18px;
}
.paging_current_page { /* Highlighed Page */
	color: var(--paging-current-color);
}
.paging_links {
	margin-top:  20px;
	text-align:  center;
	font-size: 20px;
	color: var(--paging-text-color);
}
.paging_links a:link {
	color: var(--paging-link-color);
	text-decoration: none;
}
.paging_links a:visited  {
	color: var(--paging-link-color);
	text-decoration: none;
}
.paging_links a:active {
	color: var(--paging-link-color);
	text-decoration: none;
}
.paging_links a:hover {
	color: var(--paging-link-color);
	text-decoration: underline;
}
.paging_order_by_sort_by {
	text-align: center;
	color: var(--paging-text-color);
}
.paging_order_by_sort_by a:link {
	color: var(--paging-link-color);
	text-decoration: none;
}
.paging_order_by_sort_by a:visited  {
	color: var(--paging-link-color);
	text-decoration: none;
}
.paging_order_by_sort_by a:active {
	color: var(--paging-link-color);
	text-decoration: none;
}
.paging_order_by_sort_by a:hover {
	color: var(--paging-link-color);
	text-decoration: underline;
}

/* === floating-stack.css === */
/**
 * Unified Floating Widget Stack
 * Container for all floating widgets: admin toolbar, cart button, back-to-top
 *
 * Priority order (bottom to top): Admin > Cart > Back-to-Top
 * This ensures proper stacking without overlap or click interception
 */

/* ============================================================================
   MAIN STACK CONTAINER
   ============================================================================ */
.floating-stack {
    position: fixed;
    bottom: 16px;
    right: 16px;
    display: flex;
    flex-direction: column-reverse; /* Items stack from bottom up */
    align-items: flex-end;
    gap: 12px;
    z-index: 9000; /* Base z-index for the container */
    pointer-events: none; /* Container doesn't block clicks */
}

/* All direct children receive pointer events */
.floating-stack > * {
    pointer-events: auto;
}

/* ============================================================================
   STACK ITEMS - Base styles for all floating widgets in the stack
   ============================================================================ */
.floating-stack-item {
    /* Reset any conflicting fixed positioning from child components */
    position: relative !important;
    bottom: auto !important;
    right: auto !important;

    /* Ensure proper stacking context */
    isolation: isolate;
}

/* ============================================================================
   ADMIN TOOLBAR WRAPPER
   Admin toolbar has its own internal structure, so we just wrap it
   ============================================================================ */
.floating-stack .pg-admin-toolbar {
    position: relative;
    bottom: auto;
    right: auto;
    z-index: 3; /* Highest priority in stack */
}

/* ============================================================================
   CART BUTTON IN STACK
   ============================================================================ */
.floating-stack .floating-cart-btn {
    position: relative;
    bottom: auto;
    right: auto;
    z-index: 2; /* Middle priority */
}

/* ============================================================================
   BACK-TO-TOP BUTTON IN STACK
   ============================================================================ */
.floating-stack .back-to-top-btn {
    position: relative;
    bottom: auto;
    right: auto;
    z-index: 1; /* Lowest priority (appears at bottom of stack) */
    display: none; /* Hidden by default, shown via JS */
}

/* When visible class is added by JS, show and animate */
.floating-stack .back-to-top-btn.visible {
    display: flex;
    animation: slideUp 0.3s ease forwards;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* (Book music button removed -- music now accessed via brain menu) */

/* ============================================================================
   BOOK MODAL BUTTON IN STACK
   ============================================================================ */
.floating-stack .book-modal-btn {
    position: relative;
    bottom: auto;
    right: auto;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.4);
    padding: 0;
}

.book-modal-btn-emoji {
    font-size: 1.35rem;
    line-height: 1;
}

.floating-stack .book-modal-btn:hover {
    background: rgba(255, 255, 255, 0.55);
    transform: scale(1.05);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

.floating-stack .book-modal-btn:active {
    transform: scale(0.95);
}

[data-theme="dark"] .floating-stack .book-modal-btn {
    background: rgba(50, 50, 70, 0.4);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .floating-stack .book-modal-btn:hover {
    background: rgba(70, 70, 100, 0.5);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

/* ============================================================================
   BIBLE LOOKUP BUTTON IN STACK
   ============================================================================ */
.floating-stack .bible-lookup-btn {
    position: relative;
    bottom: auto;
    right: auto;
    z-index: 1;
    width: 48px;
    height: 48px;
    /* Display is controlled by media query, but visibility by JS */
}

/* In stack, visible class controls opacity/visibility */
.floating-stack .bible-lookup-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

/* Tablet and up - slightly more spacing */
@media (min-width: 576px) {
    .floating-stack {
        bottom: 20px;
        right: 20px;
        gap: 14px;
    }
}

/* Desktop - more spacing, adjust for larger buttons */
@media (min-width: 768px) {
    .floating-stack {
        bottom: 24px;
        right: 24px;
        gap: 16px;
    }
}

/* Lift above the persistent bottom music bar (64px) on desktop.
   Placed after other media queries so it wins source-order cascade. */
@media (min-width: 769px) {
    .floating-stack { bottom: 88px !important; }
}
/* Mobile: music bar is ~84px (two-row layout with its own progress line), lift stack clear of it */
@media (max-width: 768px) {
    .floating-stack { bottom: 100px !important; }
}
@media (max-width: 480px) {
    .floating-stack { bottom: 108px !important; }
}

/* ============================================================================
   LANDSCAPE ORIENTATION ADJUSTMENTS
   Reduce vertical spacing in landscape to prevent stack overflow
   ============================================================================ */
@media (orientation: landscape) and (max-height: 500px) {
    .floating-stack {
        bottom: 12px;
        right: 12px;
        gap: 8px;
    }

    /* Smaller buttons in cramped landscape */
    .floating-stack .floating-cart-btn {
        width: 44px;
        height: 44px;
    }

    .floating-stack .back-to-top-btn {
        width: 42px;
        height: 42px;
    }

    .floating-stack .book-modal-btn {
        width: 42px;
        height: 42px;
    }

    .floating-stack .book-modal-btn .book-modal-btn-emoji {
        font-size: 1.15rem;
    }

    .floating-stack .bible-lookup-btn {
        width: 42px;
        height: 42px;
    }

    .floating-stack .pg-admin-toggle {
        width: 46px;
        height: 46px;
        font-size: 1.2rem;
    }
}

/* ============================================================================
   SAFE AREA INSETS (for notched devices like iPhone)
   ============================================================================ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .floating-stack {
        bottom: calc(16px + env(safe-area-inset-bottom));
        right: calc(16px + env(safe-area-inset-right));
    }

    @media (min-width: 768px) {
        .floating-stack {
            bottom: calc(24px + env(safe-area-inset-bottom));
            right: calc(24px + env(safe-area-inset-right));
        }
    }
}

/* ============================================================================
   BRAIN MENU WRAP
   ============================================================================ */
.brain-menu-wrap {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ============================================================================
   BRAIN DROPDOWN MENU
   ============================================================================ */
.brain-menu {
    position: absolute;
    bottom: 58px;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    opacity: 0;
    transform: translateY(10px) scale(0.9);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.brain-menu.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.brain-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    font-size: 0.85rem;
    color: #333;
    white-space: nowrap;
    transition: all 0.15s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.brain-menu-item:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: scale(1.04);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.brain-menu-icon {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.brain-menu-label {
    font-weight: 500;
}

[data-theme="dark"] .brain-menu-item {
    background: rgba(40, 40, 60, 0.85);
    border-color: rgba(255, 255, 255, 0.15);
    color: #e0e0e0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .brain-menu-item:hover {
    background: rgba(60, 60, 85, 0.95);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* ============================================================================
   BRAIN BUTTON -- MENU OPEN STATE
   ============================================================================ */
.book-modal-btn.menu-open {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.3);
}

[data-theme="dark"] .book-modal-btn.menu-open {
    background: rgba(139, 92, 246, 0.25);
    border-color: rgba(139, 92, 246, 0.4);
}

/* ============================================================================
   NOW PLAYING INDICATOR
   ============================================================================ */
.brain-now-playing {
    position: absolute;
    bottom: -2px;
    right: 56px;
    white-space: nowrap;
    font-size: 0.7rem;
    color: #7c3aed;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 12px;
    padding: 2px 10px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: nowPlayingPulse 2s ease-in-out infinite;
    pointer-events: none;
}

[data-theme="dark"] .brain-now-playing {
    background: rgba(40, 40, 60, 0.85);
    color: #a78bfa;
    border-color: rgba(139, 92, 246, 0.3);
}

@keyframes nowPlayingPulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* ============================================================================
   BRAIN BUTTON BOUNCE (when music is playing)
   ============================================================================ */
.book-modal-btn.brain-btn-bounce {
    animation: brainBounce 2s ease-in-out infinite;
}

@keyframes brainBounce {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-3px); }
    50% { transform: translateY(0); }
    75% { transform: translateY(-2px); }
}

/* ============================================================================
   MUSIC NOTE PARTICLES
   ============================================================================ */
.music-note-particle {
    position: absolute;
    bottom: 48px;
    font-size: 1rem;
    color: #7c3aed;
    pointer-events: none;
    animation: noteFloat 2s ease-out forwards;
    opacity: 0;
    z-index: -1;
}

[data-theme="dark"] .music-note-particle {
    color: #a78bfa;
}

@keyframes noteFloat {
    0% {
        opacity: 0.8;
        transform: translateY(0) rotate(0deg);
    }
    50% {
        opacity: 0.6;
    }
    100% {
        opacity: 0;
        transform: translateY(-60px) rotate(15deg);
    }
}

/* ============================================================================
   MUSIC PLAYING STATE ON BRAIN BUTTON
   ============================================================================ */
.book-modal-btn.music-playing {
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .book-modal-btn.music-playing {
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

/* ============================================================================
   BRAIN BUTTON -- ambient heartbeat pulse + arched "MENU" label
   The button gets a slow outward glow ring (decoupled from its own
   box-shadow via ::after, so it doesn't fight .music-playing or
   .brain-btn-bounce). The arched MENU sits above the emoji like a coin
   engraving -- static SVG textPath, decorative (aria-hidden).
   ============================================================================ */
.floating-stack .book-modal-btn::after {
    content: '';
    position: absolute;
    /* Pushed from -5px -> -7px so the halo sits clearly outside the
       button border with breathing room from the arched MENU label
       inside. Keeps a 48px button (matching .back-to-top-btn) with a
       distinct, separate ambient ring around it. */
    inset: -7px;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.4);
    opacity: 0;
    animation: brainHeartbeat 5s ease-in-out infinite;
}
@keyframes brainHeartbeat {
    /* Less contraction at the base (0.95 vs 0.92) so the ring's inner
       edge stays clearly outside the button at all times -- never
       collapses onto the border. */
    0%, 100% { opacity: 0;    transform: scale(0.95); }
    50%      { opacity: 0.30; transform: scale(1.00); }
}

.brain-btn-arc {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.brain-btn-arc-text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.5px;
    fill: rgba(60, 50, 90, 0.55);
}
[data-theme="dark"] .brain-btn-arc-text {
    fill: rgba(220, 215, 240, 0.55);
}
/* Cramped landscape uses a smaller button -- shrink the arched label so
   it stays proportional and doesn't crowd the smaller emoji. */
@media (orientation: landscape) and (max-height: 500px) {
    .brain-btn-arc-text { font-size: 6px; }
}

/* ============================================================================
   ACCESSIBILITY: REDUCE MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    .floating-stack,
    .floating-stack > * {
        transition: none;
    }
    .book-modal-btn.brain-btn-bounce,
    .floating-stack .book-modal-btn::after,
    .music-note-particle {
        animation: none;
    }
    .floating-stack .book-modal-btn::after { opacity: 0; }
}

/* ============================================================================
   PRINT STYLES - Hide floating widgets when printing
   ============================================================================ */
@media print {
    .floating-stack {
        display: none !important;
    }
}

/* === mini-player.css === */
/**
 * Mini Player - Persistent audio player bar
 * Fixed to bottom of viewport, allows listening while browsing
 */

/* ============================================================================
   MINI PLAYER BAR
   ============================================================================ */
.mini-player {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    color: #e0e0e0;
    font-size: 14px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.mini-player *,
.mini-player *::before,
.mini-player *::after {
    box-sizing: border-box;
}

.mini-player.active {
    transform: translateY(0);
}

.mini-player-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    max-width: 1400px;
    margin: 0 auto;
    overflow: hidden;
}

/* ============================================================================
   SERMON INFO (title + preacher)
   ============================================================================ */
.mini-player-info {
    flex: 0 0 auto;
    max-width: 250px;
    min-width: 0;
    line-height: 1.3;
}

.mini-player-title {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

.mini-player-title:hover {
    color: #90caf9;
    text-decoration: underline;
}

.mini-player-preacher {
    display: block;
    color: #9e9e9e;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================================
   PLAYBACK CONTROLS
   ============================================================================ */
.mini-player-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.mini-player-btn {
    background: none;
    border: none;
    color: #e0e0e0;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    font-size: 18px;
    transition: color 0.15s;
    flex-shrink: 0;
}

.mini-player-btn:hover {
    color: #fff;
}

.mini-player-btn.play-btn {
    font-size: 22px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}

.mini-player-btn.play-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ============================================================================
   PROGRESS BAR
   ============================================================================ */
.mini-player-progress-wrap {
    flex: 1;
    min-width: 80px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mini-player-progress {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    transition: height 0.15s;
}

.mini-player-progress:hover {
    height: 6px;
}

.mini-player-progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.mini-player-progress::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.mini-player-progress::-webkit-slider-runnable-track {
    border-radius: 2px;
}

.mini-player-progress::-moz-range-track {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    height: 4px;
}

.mini-player-time {
    color: #9e9e9e;
    font-size: 12px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    min-width: 90px;
    text-align: center;
}

/* ============================================================================
   VOLUME CONTROL
   ============================================================================ */

/* iOS Safari doesn't allow JS to control audio.volume (hardware-only).
   Hide volume/mute on touch devices since they do nothing. */
@media (pointer: coarse) {
    .mini-player-btn.vol-btn,
    .mini-player-volume {
        display: none !important;
    }
}

.mini-player-btn.vol-btn {
    font-size: 16px;
}

.mini-player-volume {
    width: 70px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    flex-shrink: 0;
}

.mini-player-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

.mini-player-volume::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    border: none;
}

.mini-player-volume::-moz-range-track {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    height: 4px;
}

/* ============================================================================
   SPEED CONTROL
   ============================================================================ */
.mini-player-speed {
    background: rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-appearance: none;
    appearance: none;
}

.mini-player-speed:hover {
    background: rgba(255, 255, 255, 0.2);
}

.mini-player-speed option {
    background: #1a1a2e;
    color: #e0e0e0;
}

/* ============================================================================
   CLOSE BUTTON
   ============================================================================ */
.mini-player-close {
    background: none;
    border: none;
    color: #9e9e9e;
    cursor: pointer;
    padding: 4px 6px;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s;
}

.mini-player-close:hover {
    color: #fff;
}

/* ============================================================================
   BODY PADDING (prevent content from being hidden behind mini player)
   ============================================================================ */
body.mini-player-active {
    padding-bottom: 64px;
}

/* Shift the floating stack up above the mini player bar */
body.mini-player-active .floating-stack {
    bottom: 80px !important;
}

/* Shift toast notifications up above the mini player bar */
body.mini-player-active .favorites-login-toast,
body.mini-player-active .favorites-toast {
    bottom: 64px !important;
}

/* Ensure back-to-top stays aligned within the stack when mini player is active */
body.mini-player-active .floating-stack .back-to-top-btn {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
}

/* ============================================================================
   SERMON PLAYER ACTION BUTTONS (toggle + listen while browsing)
   ============================================================================ */
.sermon-player-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.sermon-player-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: linear-gradient(135deg, #1e5631 0%, #0d3320 100%);
    color: #d4edda;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.sermon-player-btn:hover {
    background: linear-gradient(135deg, #267340 0%, #154228 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}

.sermon-player-btn i {
    font-size: 15px;
}

/* Hide the button when mini player is already active for this sermon */
.listen-while-browsing-btn.active-sermon {
    opacity: 0.5;
    pointer-events: none;
}

/* ============================================================================
   LOADING STATE
   ============================================================================ */
.mini-player-loading .play-btn {
    opacity: 0.5;
    pointer-events: none;
}

/* ============================================================================
   RESUME MODAL (shown when returning to site with saved state)
   ============================================================================ */
.mini-player-resume-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10010;
    background: rgba(8, 6, 18, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: miniPlayerResumeFadeIn 0.18s ease-out;
}

@keyframes miniPlayerResumeFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.mini-player-resume-backdrop.mini-player-resume-closing {
    opacity: 0;
    transition: opacity 0.18s ease;
}

.mini-player-resume-modal {
    background: linear-gradient(160deg, #1f1535 0%, #0f0c1f 100%);
    border: 1px solid rgba(167, 139, 250, 0.28);
    border-radius: 18px;
    padding: 2rem 2rem 1.6rem;
    max-width: 460px;
    width: 100%;
    color: #e9e7f5;
    text-align: center;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
    animation: miniPlayerResumePopIn 0.22s cubic-bezier(0.2, 0.8, 0.3, 1.2);
}

@keyframes miniPlayerResumePopIn {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.mini-player-resume-kicker {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: #a78bfa;
    margin-bottom: 0.7rem;
    font-weight: 600;
}

.mini-player-resume-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    margin-bottom: 0.35rem;
    word-break: break-word;
}

.mini-player-resume-preacher {
    font-size: 0.95rem;
    color: rgba(233, 231, 245, 0.78);
    margin-bottom: 0.5rem;
}

.mini-player-resume-position {
    font-size: 0.85rem;
    color: rgba(233, 231, 245, 0.6);
    font-variant-numeric: tabular-nums;
    margin-bottom: 1.6rem;
    letter-spacing: 0.02em;
}

.mini-player-resume-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.95rem 1.5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
    color: #fff;
    border: none;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.4);
    transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
    margin-bottom: 0.6rem;
}

.mini-player-resume-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(139, 92, 246, 0.5);
}

.mini-player-resume-btn:active {
    transform: translateY(0);
    box-shadow: 0 6px 18px rgba(139, 92, 246, 0.4);
}

.mini-player-resume-btn .bi-play-fill {
    font-size: 1.4rem;
    margin-left: -4px;
}

.mini-player-resume-dismiss-btn {
    background: transparent;
    color: rgba(233, 231, 245, 0.6);
    border: none;
    font-size: 0.92rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.12s, background 0.12s;
}

.mini-player-resume-dismiss-btn:hover {
    color: rgba(233, 231, 245, 0.95);
    background: rgba(255, 255, 255, 0.06);
}

html[data-theme="light"] .mini-player-resume-modal {
    background: linear-gradient(160deg, #ffffff 0%, #f3f1fb 100%);
    color: #1a1a2e;
    border-color: rgba(139, 92, 246, 0.32);
}
html[data-theme="light"] .mini-player-resume-title { color: #1a1a2e; }
html[data-theme="light"] .mini-player-resume-preacher { color: rgba(26, 26, 46, 0.75); }
html[data-theme="light"] .mini-player-resume-position { color: rgba(26, 26, 46, 0.6); }
html[data-theme="light"] .mini-player-resume-kicker { color: #6d28d9; }
html[data-theme="light"] .mini-player-resume-dismiss-btn { color: rgba(26, 26, 46, 0.65); }
html[data-theme="light"] .mini-player-resume-dismiss-btn:hover {
    color: rgba(26, 26, 46, 0.95);
    background: rgba(139, 92, 246, 0.08);
}

@media (max-width: 480px) {
    .mini-player-resume-modal { padding: 1.6rem 1.4rem 1.3rem; border-radius: 16px; }
    .mini-player-resume-title { font-size: 1.25rem; }
    .mini-player-resume-btn { font-size: 1rem; padding: 0.85rem 1.25rem; }
}

/* ============================================================================
   RESPONSIVE - MOBILE
   ============================================================================ */
@media (max-width: 768px) {
    .mini-player-inner {
        flex-wrap: wrap;
        padding: 6px 10px 8px;
        gap: 2px 6px;
    }

    /* Row 1: title/preacher + close button */
    .mini-player-info {
        flex: 1 1 auto;
        max-width: calc(100% - 36px);
        order: 1;
    }

    .mini-player-close {
        order: 2;
        margin-left: auto;
    }

    /* Row 2: compact controls */
    .mini-player-controls {
        order: 3;
        flex: 0 0 100%;
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
    }

    /* Hide skip buttons, volume, speed on mobile — keep it simple */
    #mini-player-skip-back,
    #mini-player-skip-fwd,
    .mini-player-btn.vol-btn,
    .mini-player-volume,
    .mini-player-speed {
        display: none !important;
    }

    /* Smaller play button on mobile */
    .mini-player-btn.play-btn {
        width: 32px;
        height: 32px;
        font-size: 18px;
        flex-shrink: 0;
    }

    /* Progress bar fills remaining space */
    .mini-player-progress-wrap {
        flex: 1 1 0%;
        min-width: 0;
    }

    .mini-player-progress {
        min-width: 0;
    }

    .mini-player-time {
        min-width: 0;
        font-size: 11px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    body.mini-player-active {
        padding-bottom: 80px;
    }

    body.mini-player-active .floating-stack {
        bottom: 96px !important;
    }

    body.mini-player-active .favorites-login-toast,
    body.mini-player-active .favorites-toast {
        bottom: 80px !important;
    }
}

/* === back-to-top.css === */
/**
 * Back to Top Button - Glassmorphism Style
 * Mobile-only floating button to scroll back to top
 *
 * Note: When used within .floating-stack, position is overridden to relative
 */

/* Back to Top Button - Glassmorphism */
.back-to-top-btn {
    display: none;
    position: fixed;
    bottom: 24px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #333;
    font-size: 1.25rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.2s ease;
    z-index: 900;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.4);
    align-items: center;
    justify-content: center;
}

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

.back-to-top-btn:hover {
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

.back-to-top-btn:active {
    transform: scale(0.95);
}

/* In stack context, active should not translate */
.floating-stack .back-to-top-btn:active {
    transform: scale(0.95);
}

.back-to-top-btn i {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dark mode adjustments - matches unified glassmorphism style */
[data-theme="dark"] .back-to-top-btn {
    background: rgba(50, 50, 70, 0.4);
    border-color: rgba(255, 255, 255, 0.15);
    color: #e0e0e0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .back-to-top-btn:hover {
    background: rgba(70, 70, 100, 0.5);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

/* Only show on mobile (standalone, outside of stack) */
@media (max-width: 767.98px) {
    .back-to-top-btn:not(.floating-stack .back-to-top-btn) {
        display: flex;
    }
}

/* ============================================================================
   FLOATING STACK OVERRIDES
   When button is inside the unified stack container
   Display is controlled entirely by floating-stack.css
   ============================================================================ */
.floating-stack .back-to-top-btn {
    position: relative;
    bottom: auto;
    right: auto;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .back-to-top-btn {
        transition: none;
    }
}

/* === cosmic-dark.css === */
/**
 * Cosmic Dark Mode Background
 * Nebula + starfield + comet applied site-wide in dark mode.
 * Chapter pages (/mind/chapter/*) have their own implementation and skip this.
 */

/* ============================================================================
   BASE: Dark background on html
   ============================================================================ */
[data-theme="dark"] html,
[data-theme="dark"] {
    background: #1a1a2e;
}

/* ============================================================================
   NEBULA
   ============================================================================ */
.cosmic-nebula { display: none; }
[data-theme="dark"] .cosmic-nebula {
    display: block;
    position: fixed;
    top: -20px; left: -20px; right: -20px; bottom: -20px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;  /* Halves nebula brightness while preserving every hue and gradient position */
    animation: cosmicNebulaDrift 80s ease-in-out infinite alternate;
    background:
        radial-gradient(ellipse 900px 600px at 20% 0%, rgba(139,92,246,0.38), transparent 70%),
        radial-gradient(ellipse 800px 550px at 80% 5%, rgba(234,120,20,0.25), transparent 70%),
        radial-gradient(ellipse 600px 400px at 55% 15%, rgba(255,255,255,0.06), transparent 65%),
        radial-gradient(ellipse 800px 500px at 15% 45%, rgba(139,92,246,0.28), transparent 70%),
        radial-gradient(ellipse 700px 450px at 85% 40%, rgba(234,120,20,0.2), transparent 70%),
        radial-gradient(ellipse 500px 350px at 40% 35%, rgba(255,255,255,0.04), transparent 60%),
        radial-gradient(ellipse 600px 420px at 70% 55%, rgba(34,197,94,0.2), transparent 70%),
        radial-gradient(ellipse 450px 300px at 25% 70%, rgba(34,197,94,0.12), transparent 65%),
        radial-gradient(ellipse 550px 380px at 90% 75%, rgba(255,255,255,0.05), transparent 65%),
        radial-gradient(ellipse 600px 400px at 50% 85%, rgba(168,85,247,0.28), transparent 70%),
        radial-gradient(ellipse 500px 350px at 10% 100%, rgba(234,88,12,0.18), transparent 70%);
}

@media (max-width: 768px) {
    [data-theme="dark"] .cosmic-nebula {
        background:
            radial-gradient(ellipse 320px 220px at 20% 0%, rgba(139,92,246,0.15), transparent 70%),
            radial-gradient(ellipse 280px 200px at 80% 15%, rgba(234,120,20,0.1), transparent 70%),
            radial-gradient(ellipse 240px 170px at 60% 50%, rgba(34,197,94,0.08), transparent 65%),
            radial-gradient(ellipse 200px 150px at 40% 30%, rgba(255,255,255,0.03), transparent 60%),
            radial-gradient(ellipse 260px 180px at 50% 90%, rgba(168,85,247,0.12), transparent 70%);
    }
}
@media (max-width: 768px) {
    /* No nebula drift on mobile */
    [data-theme="dark"] .cosmic-nebula {
        animation: none !important;
    }
    /* Minimal starfield: layer 1 only, dimmed */
    .cosmic-star-layer-2,
    .cosmic-star-layer-3 { display: none !important; }
    .cosmic-star-layer-1 { opacity: 0.5; animation: none !important; }
}
@media (orientation: landscape) and (max-height: 500px) {
    [data-theme="dark"] .cosmic-nebula { display: none !important; }
}

/* ============================================================================
   STARFIELD
   ============================================================================ */
.cosmic-starfield { display: none; }
[data-theme="dark"] .cosmic-starfield {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.cosmic-star-layer {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
}

@keyframes cosmicTwinkleSlow {
    0%, 100% { opacity: 1; }
    40% { opacity: 0.25; }
    70% { opacity: 0.75; }
}
@keyframes cosmicTwinkleMed {
    0%, 100% { opacity: 0.85; }
    30% { opacity: 0.15; }
    60% { opacity: 0.65; }
    80% { opacity: 0.3; }
}
@keyframes cosmicTwinkleFast {
    0%, 100% { opacity: 0.75; }
    25% { opacity: 0.1; }
    50% { opacity: 0.85; }
    75% { opacity: 0.2; }
}

/* Layer 1: big bright stars, slow twinkle 7s
   Colors: white, blue-white (Rigel), amber (Betelgeuse), pale yellow (Sun-type), cool red */
.cosmic-star-layer-1 {
    background-image:
        /* Original 9 */
        radial-gradient(4px 4px at 18% 28%, rgba(255,255,255,1), rgba(255,255,255,0.2) 50%, transparent),
        radial-gradient(3.5px 3.5px at 62% 72%, rgba(255,255,255,0.95), transparent),
        radial-gradient(4.5px 4.5px at 85% 18%, rgba(255,255,255,1), rgba(255,255,255,0.2) 50%, transparent),
        radial-gradient(3.5px 3.5px at 42% 88%, rgba(200,180,255,0.85), transparent),
        radial-gradient(3px 3px at 75% 45%, rgba(255,200,150,0.8), transparent),
        radial-gradient(4px 4px at 8% 65%, rgba(255,255,255,0.95), transparent),
        radial-gradient(3.5px 3.5px at 28% 52%, rgba(180,210,255,0.85), transparent),
        radial-gradient(4px 4px at 95% 82%, rgba(255,255,255,0.9), transparent),
        radial-gradient(3px 3px at 52% 12%, rgba(255,200,150,0.8), transparent),
        /* New stars with space colors */
        radial-gradient(4px 4px at 35% 8%, rgba(155,190,255,0.95), transparent),        /* blue-white (Rigel) */
        radial-gradient(3.5px 3.5px at 72% 35%, rgba(255,180,100,0.85), transparent),   /* amber (Betelgeuse) */
        radial-gradient(4.5px 4.5px at 12% 82%, rgba(255,255,220,1), rgba(255,255,220,0.2) 50%, transparent), /* pale yellow (Sun) */
        radial-gradient(3px 3px at 58% 55%, rgba(255,150,120,0.7), transparent),         /* cool red */
        radial-gradient(4px 4px at 90% 48%, rgba(155,190,255,0.9), transparent),         /* blue-white */
        radial-gradient(3.5px 3.5px at 22% 38%, rgba(255,255,255,0.95), transparent),
        radial-gradient(3px 3px at 48% 95%, rgba(255,210,160,0.8), transparent),         /* warm amber */
        radial-gradient(4px 4px at 78% 15%, rgba(255,255,240,0.9), transparent),         /* pale yellow */
        radial-gradient(3.5px 3.5px at 5% 45%, rgba(200,180,255,0.85), transparent),    /* lavender */
        /* Extra white + blue-white */
        radial-gradient(4px 4px at 45% 42%, rgba(255,255,255,1), rgba(255,255,255,0.2) 50%, transparent),
        radial-gradient(3.5px 3.5px at 15% 15%, rgba(155,190,255,0.95), transparent),   /* blue-white */
        radial-gradient(4px 4px at 68% 8%, rgba(255,255,255,0.95), transparent),
        radial-gradient(3px 3px at 32% 62%, rgba(155,190,255,0.9), transparent),         /* blue-white */
        radial-gradient(4.5px 4.5px at 55% 32%, rgba(255,255,255,1), rgba(255,255,255,0.2) 50%, transparent),
        radial-gradient(3.5px 3.5px at 88% 65%, rgba(180,210,255,0.9), transparent),    /* blue-white */
        radial-gradient(3px 3px at 2% 92%, rgba(255,255,255,0.9), transparent),
        radial-gradient(4px 4px at 72% 88%, rgba(155,190,255,0.85), transparent),        /* blue-white */
        radial-gradient(3.5px 3.5px at 40% 18%, rgba(255,255,255,0.95), transparent);
    /* Gentle twinkle on the big stars only -- layers 2 and 3 stay static for perf */
    animation: cosmicTwinkleSlow 9s ease-in-out infinite;
}

/* Layer 2: medium stars, twinkle 3.5s
   Same color palette at reduced size/opacity */
.cosmic-star-layer-2 {
    background-image:
        /* Original 12 */
        radial-gradient(2.5px 2.5px at 32% 15%, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 55% 42%, rgba(200,180,255,0.8), transparent),
        radial-gradient(3px 3px at 78% 62%, rgba(255,255,255,0.85), transparent),
        radial-gradient(2.5px 2.5px at 15% 78%, rgba(255,200,150,0.75), transparent),
        radial-gradient(2px 2px at 92% 35%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2.5px 2.5px at 48% 58%, rgba(200,180,255,0.75), transparent),
        radial-gradient(2px 2px at 25% 92%, rgba(255,255,255,0.75), transparent),
        radial-gradient(3px 3px at 68% 8%, rgba(255,200,150,0.8), transparent),
        radial-gradient(2.5px 2.5px at 5% 22%, rgba(180,210,255,0.75), transparent),
        radial-gradient(2px 2px at 88% 68%, rgba(200,180,255,0.7), transparent),
        radial-gradient(2.5px 2.5px at 38% 38%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 72% 25%, rgba(255,255,255,0.75), transparent),
        /* New stars */
        radial-gradient(2.5px 2.5px at 10% 55%, rgba(155,190,255,0.8), transparent),    /* blue-white */
        radial-gradient(2px 2px at 42% 72%, rgba(255,180,100,0.7), transparent),         /* amber */
        radial-gradient(3px 3px at 85% 88%, rgba(255,255,220,0.8), transparent),         /* pale yellow */
        radial-gradient(2.5px 2.5px at 60% 18%, rgba(255,150,120,0.6), transparent),     /* cool red */
        radial-gradient(2px 2px at 28% 5%, rgba(155,190,255,0.75), transparent),         /* blue-white */
        radial-gradient(2.5px 2.5px at 75% 48%, rgba(255,210,160,0.7), transparent),     /* warm amber */
        radial-gradient(2px 2px at 50% 85%, rgba(255,255,255,0.75), transparent),
        radial-gradient(3px 3px at 18% 32%, rgba(200,180,255,0.7), transparent),
        radial-gradient(2.5px 2.5px at 95% 55%, rgba(255,255,240,0.75), transparent),    /* pale yellow */
        radial-gradient(2px 2px at 35% 62%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2.5px 2.5px at 82% 22%, rgba(180,210,255,0.75), transparent),    /* blue-tinted */
        radial-gradient(2px 2px at 62% 38%, rgba(255,180,100,0.65), transparent),        /* amber */
        /* Extra white + blue-white */
        radial-gradient(2.5px 2.5px at 22% 45%, rgba(255,255,255,0.85), transparent),
        radial-gradient(2px 2px at 58% 82%, rgba(155,190,255,0.75), transparent),        /* blue-white */
        radial-gradient(3px 3px at 42% 12%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2.5px 2.5px at 8% 68%, rgba(180,210,255,0.75), transparent),    /* blue-white */
        radial-gradient(2px 2px at 75% 32%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2.5px 2.5px at 30% 95%, rgba(155,190,255,0.7), transparent),    /* blue-white */
        radial-gradient(2px 2px at 88% 15%, rgba(255,255,255,0.75), transparent),
        radial-gradient(3px 3px at 52% 52%, rgba(180,210,255,0.7), transparent),         /* blue-white */
        radial-gradient(2.5px 2.5px at 15% 8%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 68% 65%, rgba(155,190,255,0.7), transparent),         /* blue-white */
        radial-gradient(2.5px 2.5px at 45% 28%, rgba(255,255,255,0.75), transparent),
        radial-gradient(2px 2px at 90% 78%, rgba(180,210,255,0.7), transparent);         /* blue-white */
}

/* Layer 3: tiny flickering stars, twinkle 2.2s
   Densest layer -- doubled with color variety */
.cosmic-star-layer-3 {
    background-image:
        /* Original 14 */
        radial-gradient(1.2px 1.2px at 22% 48%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1.2px 1.2px at 45% 25%, rgba(200,180,255,0.7), transparent),
        radial-gradient(1.5px 1.5px at 68% 82%, rgba(255,255,255,0.75), transparent),
        radial-gradient(1.2px 1.2px at 88% 55%, rgba(255,200,150,0.65), transparent),
        radial-gradient(1.2px 1.2px at 12% 38%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1.5px 1.5px at 52% 72%, rgba(200,180,255,0.6), transparent),
        radial-gradient(1.2px 1.2px at 35% 5%, rgba(255,255,255,0.65), transparent),
        radial-gradient(1.2px 1.2px at 82% 28%, rgba(255,200,150,0.6), transparent),
        radial-gradient(1.2px 1.2px at 5% 85%, rgba(255,255,255,0.65), transparent),
        radial-gradient(1.5px 1.5px at 72% 48%, rgba(200,180,255,0.55), transparent),
        radial-gradient(1.2px 1.2px at 18% 15%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.2px 1.2px at 62% 95%, rgba(180,210,255,0.55), transparent),
        radial-gradient(1.5px 1.5px at 95% 12%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.2px 1.2px at 42% 62%, rgba(255,200,150,0.55), transparent),
        /* New stars */
        radial-gradient(1.2px 1.2px at 8% 22%, rgba(155,190,255,0.65), transparent),    /* blue-white */
        radial-gradient(1.5px 1.5px at 30% 75%, rgba(255,180,100,0.55), transparent),   /* amber */
        radial-gradient(1.2px 1.2px at 55% 8%, rgba(255,255,220,0.6), transparent),     /* pale yellow */
        radial-gradient(1.2px 1.2px at 78% 42%, rgba(255,150,120,0.5), transparent),    /* cool red */
        radial-gradient(1.5px 1.5px at 15% 58%, rgba(155,190,255,0.6), transparent),    /* blue-white */
        radial-gradient(1.2px 1.2px at 48% 35%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.2px 1.2px at 92% 72%, rgba(255,210,160,0.55), transparent),   /* warm amber */
        radial-gradient(1.5px 1.5px at 25% 88%, rgba(200,180,255,0.5), transparent),
        radial-gradient(1.2px 1.2px at 65% 15%, rgba(255,255,255,0.55), transparent),
        radial-gradient(1.2px 1.2px at 38% 48%, rgba(180,210,255,0.5), transparent),    /* blue-tinted */
        radial-gradient(1.5px 1.5px at 85% 8%, rgba(255,180,100,0.5), transparent),     /* amber */
        radial-gradient(1.2px 1.2px at 2% 68%, rgba(255,255,240,0.55), transparent),    /* pale yellow */
        radial-gradient(1.2px 1.2px at 58% 52%, rgba(255,150,120,0.45), transparent),   /* cool red */
        radial-gradient(1.5px 1.5px at 75% 92%, rgba(155,190,255,0.55), transparent),   /* blue-white */
        /* Extra white + blue-white */
        radial-gradient(1.2px 1.2px at 28% 32%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1.5px 1.5px at 42% 78%, rgba(155,190,255,0.6), transparent),    /* blue-white */
        radial-gradient(1.2px 1.2px at 72% 18%, rgba(255,255,255,0.65), transparent),
        radial-gradient(1.2px 1.2px at 10% 52%, rgba(180,210,255,0.55), transparent),   /* blue-white */
        radial-gradient(1.5px 1.5px at 88% 38%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.2px 1.2px at 52% 88%, rgba(155,190,255,0.5), transparent),    /* blue-white */
        radial-gradient(1.2px 1.2px at 32% 12%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.5px 1.5px at 68% 58%, rgba(180,210,255,0.55), transparent),   /* blue-white */
        radial-gradient(1.2px 1.2px at 15% 72%, rgba(255,255,255,0.55), transparent),
        radial-gradient(1.2px 1.2px at 82% 5%, rgba(155,190,255,0.5), transparent),     /* blue-white */
        radial-gradient(1.5px 1.5px at 45% 45%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.2px 1.2px at 95% 62%, rgba(180,210,255,0.5), transparent),    /* blue-white */
        radial-gradient(1.2px 1.2px at 20% 92%, rgba(255,255,255,0.55), transparent),
        radial-gradient(1.5px 1.5px at 60% 28%, rgba(155,190,255,0.55), transparent);   /* blue-white */
}

/* ============================================================================
   COMET
   ============================================================================ */
.cosmic-comet { display: none; }
[data-theme="dark"] .cosmic-comet {
    display: block;
    position: fixed;
    top: -100px;
    left: 88vw;
    pointer-events: none;
    z-index: 0;
    animation: cometDrift 420s linear infinite;
    /* Uniformly halve the rendered brightness of head + tail + glows. Applied
       at the parent so the inner shimmer/pulse animations still work. */
    filter: brightness(0.5);
}
/* Falling: top-center to bottom-left along a gentle arc. Tail rotation is
   synchronized to the position keyframes so it tracks the direction of motion:
   steeper during the first three quarters of the descent, flattening toward
   the horizontal exit off the left edge. */
@keyframes cometDrift {
    0%   { top: -100px; left: 88vw;   transform: rotate(-35deg); opacity: 0; }
    2%   { opacity: 1; }
    25%  { top: 18vh;   left: 62vw;   transform: rotate(-34deg); }
    50%  { top: 42vh;   left: 38vw;   transform: rotate(-32deg); }
    75%  { top: 68vh;   left: 14vw;   transform: rotate(-28deg); }
    95%  { opacity: 1; }
    100% { top: 100vh;  left: -500px; transform: rotate(-22deg); opacity: 0; }
}
/* Tail: SVG-rendered Bezier curve so the tail actually bends through the arc
   (a flat gradient line can't show curvature, only rotate). The drop-shadow
   filters wrap the SVG stroke for the soft blue/purple glow. */
.cosmic-comet-tail {
    width: 420px;
    height: 80px;
    filter:
        drop-shadow(0 0 8px rgba(200, 225, 255, 0.8))
        drop-shadow(0 0 20px rgba(180, 215, 255, 0.6))
        drop-shadow(0 0 45px rgba(160, 200, 255, 0.35))
        drop-shadow(0 0 80px rgba(139, 92, 246, 0.18));
    animation: cosmicCometShimmer 10s ease-in-out infinite;
}
.cosmic-comet-tail svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.cosmic-comet-tail::before,
.cosmic-comet-tail::after { display: none; }
@keyframes cosmicCometShimmer {
    0%, 100% {
        opacity: 0.7;
        filter: blur(1px)
            drop-shadow(0 0 8px rgba(200, 225, 255, 0.8))
            drop-shadow(0 0 20px rgba(180, 215, 255, 0.6))
            drop-shadow(0 0 45px rgba(160, 200, 255, 0.35))
            drop-shadow(0 0 80px rgba(139, 92, 246, 0.18));
    }
    20% {
        opacity: 1;
        filter: blur(0.5px)
            drop-shadow(0 0 12px rgba(220, 240, 255, 1))
            drop-shadow(0 0 30px rgba(200, 225, 255, 0.8))
            drop-shadow(0 0 60px rgba(180, 215, 255, 0.5))
            drop-shadow(0 0 100px rgba(139, 92, 246, 0.3));
    }
    45% {
        opacity: 0.55;
        filter: blur(1.5px)
            drop-shadow(0 0 5px rgba(200, 225, 255, 0.6))
            drop-shadow(0 0 14px rgba(180, 215, 255, 0.4))
            drop-shadow(0 0 32px rgba(160, 200, 255, 0.22))
            drop-shadow(0 0 60px rgba(139, 92, 246, 0.1));
    }
    70% {
        opacity: 0.9;
        filter: blur(0.7px)
            drop-shadow(0 0 10px rgba(220, 240, 255, 0.95))
            drop-shadow(0 0 25px rgba(200, 225, 255, 0.7))
            drop-shadow(0 0 55px rgba(180, 215, 255, 0.45))
            drop-shadow(0 0 90px rgba(139, 92, 246, 0.25));
    }
}
/* Head: glowing sphere that blends into the bright tail end */
.cosmic-comet-head {
    position: absolute;
    top: 50%;
    left: -4px;
    width: 8px;
    height: 8px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.8) 0%,
        rgba(220, 240, 255, 0.5) 40%,
        transparent 100%);
    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.7),
        0 0 20px rgba(200, 225, 255, 0.5),
        0 0 40px rgba(180, 215, 255, 0.3),
        0 0 65px rgba(160, 200, 255, 0.15),
        0 0 100px rgba(139, 92, 246, 0.08);
    animation: cosmicCometPulse 10s ease-in-out infinite;
}
.cosmic-comet-head::before { display: none; }
@keyframes cosmicCometPulse {
    0%, 100% {
        box-shadow:
            0 0 8px rgba(255, 255, 255, 0.7),
            0 0 20px rgba(200, 225, 255, 0.5),
            0 0 40px rgba(180, 215, 255, 0.3),
            0 0 65px rgba(160, 200, 255, 0.15),
            0 0 100px rgba(139, 92, 246, 0.08);
    }
    20% {
        box-shadow:
            0 0 14px rgba(255, 255, 255, 0.95),
            0 0 32px rgba(220, 240, 255, 0.8),
            0 0 60px rgba(200, 225, 255, 0.5),
            0 0 95px rgba(180, 215, 255, 0.25),
            0 0 140px rgba(139, 92, 246, 0.15);
    }
    45% {
        box-shadow:
            0 0 6px rgba(255, 255, 255, 0.55),
            0 0 15px rgba(200, 225, 255, 0.4),
            0 0 30px rgba(180, 215, 255, 0.2),
            0 0 50px rgba(160, 200, 255, 0.1),
            0 0 80px rgba(139, 92, 246, 0.05);
    }
    70% {
        box-shadow:
            0 0 12px rgba(255, 255, 255, 0.85),
            0 0 28px rgba(220, 240, 255, 0.7),
            0 0 52px rgba(200, 225, 255, 0.45),
            0 0 85px rgba(180, 215, 255, 0.2),
            0 0 125px rgba(139, 92, 246, 0.12);
    }
}
@media (max-width: 768px),
       (orientation: landscape) and (max-height: 500px) {
    [data-theme="dark"] .cosmic-comet { display: none !important; }
}

/* ============================================================================
   SITE-WIDE DARK MODE TRANSPARENCY
   The cosmic layers are fixed-position at z-index: 0. Everything else paints
   on top. We make body transparent so the nebula/stars show through, and give
   the navbar and footer translucent backgrounds.
   ============================================================================ */
html[data-theme="dark"] body {
    background: transparent !important;
    background-color: transparent !important;
    position: relative;
    z-index: 1;
}

/* Navbar: translucent so nebula peeks through */
html[data-theme="dark"] #mainNavbar.navbar,
html[data-theme="dark"] nav#mainNavbar {
    background-color: rgba(26, 26, 46, 0.85) !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Footer: translucent */
html[data-theme="dark"] .footer_area {
    background: rgba(26, 26, 46, 0.88) !important;
}

/* Dropdowns should stay opaque for readability */
html[data-theme="dark"] .dropdown-menu {
    background-color: #252538 !important;
}

.cosmic-aurora { display: none; }

/* ============================================================================
   NEBULA DRIFT -- slow float so the background never feels frozen
   ============================================================================ */
@keyframes cosmicNebulaDrift {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(12px, -8px); }
    50%  { transform: translate(-6px, 10px); }
    75%  { transform: translate(8px, 4px); }
    100% { transform: translate(-10px, -6px); }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    .cosmic-nebula,
    .cosmic-star-layer,
    .cosmic-comet-tail,
    .cosmic-comet-head {
        animation: none;
    }
}

/* ============================================================================
   GPU-BASED PERFORMANCE TIERS
   JS detects GPU and sets: cosmic-tier-high, cosmic-tier-medium, cosmic-tier-low
   HIGH: full experience (all layers, animations, parallax)
   MEDIUM: reduced (2 star layers, no comet animation, no parallax)
   LOW: minimal (1 star layer, no comet, no animations, simplified nebula)
   ============================================================================ */

/* --- MEDIUM TIER: keep it pretty but lighter --- */
.cosmic-tier-medium .cosmic-star-layer-3 { display: none !important; }
.cosmic-tier-medium .cosmic-star-layer-1,
.cosmic-tier-medium .cosmic-star-layer-2 {
    animation-duration: 14s !important; /* Slow down twinkle = fewer repaints */
}
.cosmic-tier-medium .cosmic-comet-tail { animation: none !important; }
.cosmic-tier-medium .cosmic-comet-head { animation: none !important; }
.cosmic-tier-medium[data-theme="dark"] .cosmic-nebula,
.cosmic-tier-medium [data-theme="dark"] .cosmic-nebula {
    animation: none !important;
}

/* --- LOW TIER: minimal -- 2 fixed layers total, zero animations --- */
.cosmic-tier-low .cosmic-star-layer-2,
.cosmic-tier-low .cosmic-star-layer-3 { display: none !important; }
.cosmic-tier-low .cosmic-comet { display: none !important; }

.cosmic-tier-low .cosmic-star-layer-1 {
    animation: none !important;
    background-image:
        radial-gradient(3.5px 3.5px at 18% 28%, rgba(255,255,255,0.85), transparent),
        radial-gradient(3px 3px at 62% 72%, rgba(255,255,255,0.8), transparent),
        radial-gradient(3.5px 3.5px at 85% 18%, rgba(155,190,255,0.75), transparent),
        radial-gradient(3px 3px at 42% 88%, rgba(200,180,255,0.7), transparent),
        radial-gradient(2.5px 2.5px at 75% 45%, rgba(255,200,150,0.65), transparent),
        radial-gradient(3px 3px at 35% 8%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2.5px 2.5px at 8% 65%, rgba(155,190,255,0.7), transparent),
        radial-gradient(3px 3px at 55% 50%, rgba(255,255,255,0.75), transparent),
        radial-gradient(2px 2px at 28% 62%, rgba(255,255,255,0.65), transparent),
        radial-gradient(2px 2px at 90% 38%, rgba(180,210,255,0.6), transparent),
        radial-gradient(2.5px 2.5px at 48% 15%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 72% 85%, rgba(255,200,150,0.6), transparent) !important;
}

.cosmic-tier-low[data-theme="dark"] .cosmic-nebula,
.cosmic-tier-low [data-theme="dark"] .cosmic-nebula {
    background:
        radial-gradient(ellipse 600px 400px at 20% 10%, rgba(139,92,246,0.3), transparent 70%),
        radial-gradient(ellipse 500px 350px at 80% 30%, rgba(234,120,20,0.18), transparent 70%),
        radial-gradient(ellipse 450px 320px at 60% 60%, rgba(34,197,94,0.15), transparent 70%),
        radial-gradient(ellipse 400px 300px at 40% 85%, rgba(168,85,247,0.2), transparent 70%) !important;
    animation: none !important;
}

/* Backward compat: cosmic-android maps to low tier behavior */
.cosmic-android .cosmic-star-layer-2,
.cosmic-android .cosmic-star-layer-3 { display: none !important; }
.cosmic-android .cosmic-comet { display: none !important; }
.cosmic-android .cosmic-star-layer-1 { animation: none !important; }
.cosmic-android[data-theme="dark"] .cosmic-nebula { animation: none !important; }

/* ============================================================================
   PRINT
   ============================================================================ */
@media print {
    .cosmic-nebula,
    .cosmic-starfield,
    .cosmic-comet {
        display: none !important;
    }
}

/* === bible_lookup.css === */
/**
 * Bible Lookup Widget Styles
 *
 * Floating button and modal for KJV Bible verse lookup.
 * Supports light and dark mode via [data-theme="dark"].
 *
 * @package PristineGrace
 * @since 4.3
 */

/* ============================================================================
   FLOATING BUTTON
   ============================================================================ */

.bible-lookup-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #333;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

.bible-lookup-btn:hover {
    background: rgba(255, 255, 255, 0.55);
    transform: scale(1.05);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

.bible-lookup-btn:active {
    transform: scale(0.95);
}

.bible-lookup-btn:focus {
    outline: 2px solid rgba(0, 0, 0, 0.2);
    outline-offset: 2px;
}

/* Dark mode */
[data-theme="dark"] .bible-lookup-btn {
    background: rgba(50, 50, 70, 0.4);
    border-color: rgba(255, 255, 255, 0.15);
    color: #e0e0e0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .bible-lookup-btn:hover {
    background: rgba(70, 70, 100, 0.5);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

/* ============================================================================
   MODAL STYLES
   ============================================================================ */

/* Ensure modal sits above floating stack (z-index: 9000) and admin toolbar (9999) */
.bible-modal {
    z-index: 10100 !important;
}

.bible-modal.show ~ .modal-backdrop {
    z-index: 10099 !important;
}

.bible-modal .modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.bible-modal .modal-header {
    background: linear-gradient(135deg, #18274b 0%, #304e96 100%);
    color: white;
    border-bottom: none;
    padding: 1rem 1.25rem;
}

.bible-modal .modal-title {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bible-modal .modal-title i {
    font-size: 1.25rem;
}

.bible-modal .modal-header .btn-close {
    filter: invert(1);
    opacity: 0.8;
}

.bible-modal .modal-header .btn-close:hover {
    opacity: 1;
}

.bible-modal .modal-body {
    padding: 1.25rem;
    background: #fdfcfa;
}

.bible-modal .modal-footer {
    border-top: 1px solid #eee;
    background: #f8f7f5;
    padding: 0.75rem 1.25rem;
}

/* Dark mode modal */
[data-theme="dark"] .bible-modal .modal-content {
    background: #1e1e24;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .bible-modal .modal-header {
    background: linear-gradient(135deg, #0d1526 0%, #1a2847 100%);
}

[data-theme="dark"] .bible-modal .modal-body {
    background: #1e1e24;
    color: #e0e0e0;
}

[data-theme="dark"] .bible-modal .modal-footer {
    background: #252530;
    border-top-color: #333;
}

/* ============================================================================
   INPUT MODES (Tabs)
   ============================================================================ */

.bible-input-modes {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.bible-mode-btn {
    flex: 1;
    padding: 0.5rem 1rem;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s;
    color: #666;
}

.bible-mode-btn:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

.bible-mode-btn.active {
    background: #395ba9;
    border-color: #395ba9;
    color: white;
}

[data-theme="dark"] .bible-mode-btn {
    background: #2a2a35;
    border-color: #444;
    color: #aaa;
}

[data-theme="dark"] .bible-mode-btn:hover {
    background: #333340;
    border-color: #555;
}

[data-theme="dark"] .bible-mode-btn.active {
    background: #2a4080;
    border-color: #2a4080;
    color: #fff;
}

/* ============================================================================
   INPUT PANELS
   ============================================================================ */

.bible-input-panel {
    display: none;
}

.bible-input-panel.active {
    display: block;
}

/* Text input mode */
.bible-text-input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 16px; /* 16px prevents iOS zoom on focus */
    border: 2px solid #ddd;
    border-radius: 8px;
    transition: border-color 0.2s;
}

.bible-text-input:focus {
    outline: none;
    border-color: #395ba9;
}

.bible-text-input::placeholder {
    color: #999;
}

[data-theme="dark"] .bible-text-input {
    background: #2a2a35;
    border-color: #444;
    color: #e0e0e0;
}

[data-theme="dark"] .bible-text-input:focus {
    border-color: #7fa8e8;
}

[data-theme="dark"] .bible-text-input::placeholder {
    color: #666;
}

/* Example passages - code element styling */
.bible-modal .form-text code {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 0.15rem 0.4rem;
    font-size: 0.85em;
    color: #495057;
    font-family: inherit;
}

[data-theme="dark"] .bible-modal .form-text code {
    background: #343a40;
    border-color: #495057;
    color: #adb5bd;
}

/* Dropdown mode */
.bible-dropdown-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.bible-dropdown-group {
    flex: 1;
    min-width: 120px;
}

.bible-dropdown-group label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
    margin-bottom: 0.25rem;
}

.bible-dropdown-group select,
.bible-dropdown-group input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 16px; /* 16px prevents iOS zoom on focus */
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
}

.bible-dropdown-group select:focus,
.bible-dropdown-group input:focus {
    outline: none;
    border-color: #395ba9;
}

[data-theme="dark"] .bible-dropdown-group label {
    color: #888;
}

[data-theme="dark"] .bible-dropdown-group select,
[data-theme="dark"] .bible-dropdown-group input {
    background: #2a2a35;
    border-color: #444;
    color: #e0e0e0;
}

[data-theme="dark"] .bible-dropdown-group select:focus,
[data-theme="dark"] .bible-dropdown-group input:focus {
    border-color: #7fa8e8;
}

/* Verse range separator */
.bible-verse-to {
    display: flex;
    align-items: flex-end;
    padding-bottom: 0.5rem;
    color: #999;
    font-size: 0.875rem;
}

/* Verse range hint */
.bible-verse-range-hint {
    font-size: 0.8rem;
    color: #666;
    margin-top: 0.5rem;
    padding: 0.35rem 0.5rem;
    background: #f8f9fa;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.bible-verse-range-hint i {
    color: #395ba9;
}

[data-theme="dark"] .bible-verse-range-hint {
    background: #2a2a35;
    color: #aaa;
}

[data-theme="dark"] .bible-verse-range-hint i {
    color: #7fa8e8;
}

/* ============================================================================
   BROWSE "GO" BUTTON (compact, inside dropdown panel)
   ============================================================================ */

.bible-browse-go-btn {
    display: inline-flex;
    align-items: center;
    margin-top: 0.75rem;
    padding: 0.4rem 1rem;
    background: #395ba9;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.bible-browse-go-btn:hover {
    background: #2e4a8a;
}

.bible-browse-go-btn:active {
    transform: translateY(0);
}

.bible-browse-go-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

[data-theme="dark"] .bible-browse-go-btn {
    background: #2a4080;
}

[data-theme="dark"] .bible-browse-go-btn:hover {
    background: #335099;
}

/* ============================================================================
   RECENT LOOKUPS
   ============================================================================ */

.bible-recent-lookups {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.bible-recent-lookups h6 {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    margin-bottom: 0.5rem;
}

.bible-recent-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bible-recent-item {
    padding: 0.25rem 0.75rem;
    background: #f0f0f0;
    border-radius: 20px;
    font-size: 0.8rem;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.bible-recent-item:hover {
    background: #e0e0e0;
    color: #333;
}

[data-theme="dark"] .bible-recent-lookups {
    border-top-color: #333;
}

[data-theme="dark"] .bible-recent-item {
    background: #333340;
    color: #aaa;
}

[data-theme="dark"] .bible-recent-item:hover {
    background: #444450;
    color: #ddd;
}

/* ============================================================================
   VERSE DISPLAY
   ============================================================================ */

.bible-verse-result {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid #395ba9;
}

/* Back navigation for cross-reference history */
.bible-back-nav {
    margin-bottom: 0.5rem;
}

.bible-back-btn {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    color: #395ba9;
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.bible-back-btn:hover {
    background: rgba(57, 91, 169, 0.08);
    color: #2a4580;
}

[data-theme="dark"] .bible-back-btn {
    color: #7fa8e8;
}

[data-theme="dark"] .bible-back-btn:hover {
    background: rgba(127, 168, 232, 0.12);
    color: #9dc0f0;
}

.bible-verse-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.bible-verse-reference {
    font-size: 1.25rem;
    font-weight: 600;
    color: #395ba9;
}

.bible-verse-translation {
    font-size: 0.875rem;
    color: #888;
    font-weight: normal;
}

[data-theme="dark"] .bible-verse-result {
    border-top-color: #2a4080;
}

[data-theme="dark"] .bible-verse-reference {
    color: #7fa8e8;
}

/* ============================================================================
   VERSION SELECTOR
   ============================================================================ */

.bible-version-selector-wrapper {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.bible-version-select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 3px 26px 3px 8px;
    font-size: 0.8rem;
    color: #666;
    cursor: pointer;
    outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%23888'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    max-width: 200px;
    line-height: 1.4;
}

.bible-version-select:hover {
    border-color: #395ba9;
    color: #395ba9;
}

.bible-version-select:focus {
    border-color: #395ba9;
    box-shadow: 0 0 0 2px rgba(57, 91, 169, 0.15);
}

[data-theme="dark"] .bible-version-select {
    border-color: #444;
    color: #aaa;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%23888'/%3E%3C/svg%3E");
}

[data-theme="dark"] .bible-version-select:hover,
[data-theme="dark"] .bible-version-select:focus {
    border-color: #7fa8e8;
    color: #9dc0f0;
}

/* Disabled Strong's when non-KJV version selected */
.bible-display-option input:disabled + label,
.bible-display-option input:disabled ~ .option-label-full,
.bible-display-option input:disabled ~ .option-label-short {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Verse text display */
.bible-verse-display {
    position: relative;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.1rem;
    line-height: 1.9;
    padding: 1.25rem;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #eee;
    max-height: 400px;
    overflow-y: auto;
}

/* Paragraph mode styling */
.bible-verse-display p.bible-verse-text {
    margin-bottom: 1em;
    text-indent: 1.5em;
    text-align: justify;
}

.bible-verse-display p.bible-verse-text:last-child {
    margin-bottom: 0;
}

[data-theme="dark"] .bible-verse-display {
    background: #252530;
    border-color: #333;
    color: #e0e0e0;
}

/* Verse numbers */
.verse-number {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.65em;
    vertical-align: super;
    color: #395ba9;
    margin-right: 0.15em;
    font-weight: 700;
}

[data-theme="dark"] .verse-number {
    color: #7fa8e8;
}

/* Pilcrow (paragraph marker) in verse mode */
.bible-pilcrow {
    color: #395ba9;
    font-weight: 600;
    margin-right: 0.25em;
    opacity: 0.7;
    cursor: help;
}

[data-theme="dark"] .bible-pilcrow {
    color: #7fa8e8;
}

/* Psalm titles — [A Psalm of David.] etc. */
.bible-psalm-title {
    text-align: center;
    font-style: italic;
    font-size: 0.85em;
    color: #5a6a7a;
    margin-bottom: 0.4em;
    letter-spacing: 0.02em;
}

[data-theme="dark"] .bible-psalm-title {
    color: #8a9ab0;
}

/* Red letter — Words of Christ */
.bible-red-letter {
    color: #c0392b;
}

[data-theme="dark"] .bible-red-letter {
    color: #e74c3c;
}

/* When red letter toggle is off, revert to inherited color */
.bible-verse-display.red-letter-off .bible-red-letter {
    color: inherit;
}

/* Margin notes — word + dagger wrapped in a hoverable span */
.bible-margin-note {
    position: relative;
    cursor: help;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: rgba(57, 91, 169, 0.45);
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    background-color: rgba(57, 91, 169, 0.06);
    border-radius: 2px;
    padding: 0 1px;
    transition: background-color 0.15s ease, text-decoration-color 0.15s ease;
}

.bible-margin-note:hover {
    text-decoration-color: rgba(57, 91, 169, 0.8);
    background-color: rgba(57, 91, 169, 0.12);
}

.bible-margin-symbol {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.6em;
    font-style: normal;
    color: #395ba9;
    vertical-align: super;
    margin-left: 1px;
    opacity: 0.7;
}

.bible-margin-note:hover .bible-margin-symbol {
    opacity: 1;
}

/* Margin note popover — positioned by JS, appended to modal body */
.bible-margin-popover {
    position: fixed;
    background: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: normal;
    line-height: 1.4;
    white-space: normal;
    min-width: 140px;
    max-width: 280px;
    width: max-content;
    text-align: center;
    text-decoration: none;
    pointer-events: none;
    z-index: 10110;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.bible-margin-popover.visible {
    opacity: 1;
}

/* Arrow pointing down from popover (default: popover above note) */
.bible-margin-popover::after {
    content: '';
    position: absolute;
    top: 100%;
    left: var(--arrow-left, 50%);
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
}

/* When popover appears below the note */
.bible-margin-popover.below::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Dark mode */
[data-theme="dark"] .bible-margin-note {
    text-decoration-color: rgba(127, 168, 232, 0.4);
    background-color: rgba(127, 168, 232, 0.08);
}

[data-theme="dark"] .bible-margin-note:hover {
    text-decoration-color: rgba(127, 168, 232, 0.8);
    background-color: rgba(127, 168, 232, 0.15);
}

[data-theme="dark"] .bible-margin-symbol {
    color: #7fa8e8;
}

[data-theme="dark"] .bible-margin-popover {
    background: #555;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .bible-margin-popover::after {
    border-top-color: #555;
}

[data-theme="dark"] .bible-margin-popover.below::after {
    border-top-color: transparent;
    border-bottom-color: #555;
}

/* Chapter headers in multi-chapter passages */
.bible-chapter-header {
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.9rem;
    color: #395ba9;
    margin: 1rem 0 0.5rem 0;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #ddd;
}

.bible-chapter-header:first-child {
    margin-top: 0;
}

[data-theme="dark"] .bible-chapter-header {
    color: #7fa8e8;
    border-bottom-color: #444;
}

/* Truncation warning */
.bible-truncation-warning {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #fff3cd;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #856404;
}

[data-theme="dark"] .bible-truncation-warning {
    background: #3d3520;
    color: #ffc107;
}

/* ============================================================================
   DISPLAY OPTIONS & COPY
   ============================================================================ */

.bible-verse-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.bible-display-options {
    display: flex;
    gap: 1rem;
}

.bible-display-option {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: #666;
    cursor: pointer;
}

.bible-display-option input {
    cursor: pointer;
}

/* Short labels hidden on desktop, shown on mobile */
.option-label-short {
    display: none;
}

[data-theme="dark"] .bible-display-option {
    color: #aaa;
}

/* Font size controls */
.bible-font-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
}

.bible-font-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f8f9fa;
    color: #555;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    line-height: 1;
}

.bible-font-btn:hover {
    background: #e9ecef;
    border-color: #aaa;
}

.bible-font-btn-decrease {
    font-size: 0.7rem;
}

.bible-font-btn-increase {
    font-size: 0.95rem;
}

[data-theme="dark"] .bible-font-btn {
    background: #2a2a35;
    border-color: #444;
    color: #aaa;
}

[data-theme="dark"] .bible-font-btn:hover {
    background: #363645;
    border-color: #666;
}

/* Copy actions container */
.bible-copy-actions {
    position: relative;
}

/* Copy button group */
.bible-copy-group {
    display: flex;
    gap: 0.25rem;
}

.bible-copy-btn {
    padding: 0.5rem 1rem;
    background: #395ba9;
    color: white;
    border: none;
    border-radius: 6px 0 0 6px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.2s;
}

.bible-copy-btn:hover {
    background: #2e4a8a;
}

.bible-copy-dropdown-btn {
    padding: 0.5rem;
    background: #395ba9;
    color: white;
    border: none;
    border-left: 1px solid rgba(255,255,255,0.2);
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    transition: background 0.2s;
}

.bible-copy-dropdown-btn:hover {
    background: #2e4a8a;
}

[data-theme="dark"] .bible-copy-btn,
[data-theme="dark"] .bible-copy-dropdown-btn {
    background: #2a4080;
}

[data-theme="dark"] .bible-copy-btn:hover,
[data-theme="dark"] .bible-copy-dropdown-btn:hover {
    background: #335099;
}

/* Copy format dropdown */
.bible-copy-formats {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.25rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1050;
    min-width: 200px;
    display: none;
}

.bible-copy-formats.show {
    display: block;
}

.bible-copy-format-item {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    text-align: left;
    background: none;
    border: none;
    font-size: 0.875rem;
    color: #333;
    cursor: pointer;
    transition: background 0.15s;
}

.bible-copy-format-item:hover {
    background: #f5f5f5;
}

.bible-copy-format-item:first-child {
    border-radius: 6px 6px 0 0;
}

.bible-copy-format-item:last-child {
    border-radius: 0 0 6px 6px;
}

[data-theme="dark"] .bible-copy-formats {
    background: #2a2a35;
    border-color: #444;
}

[data-theme="dark"] .bible-copy-format-item {
    color: #ddd;
}

[data-theme="dark"] .bible-copy-format-item:hover {
    background: #333340;
}

/* ============================================================================
   LOADING STATE
   ============================================================================ */

.bible-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: #888;
}

.bible-loading .spinner-border {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.75rem;
}

/* ============================================================================
   ERROR MESSAGE
   ============================================================================ */

.bible-error {
    padding: 1rem;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    color: #721c24;
    margin-top: 1rem;
}

[data-theme="dark"] .bible-error {
    background: #3d2020;
    border-color: #5a3030;
    color: #f8d7da;
}

/* ============================================================================
   TOAST NOTIFICATION
   ============================================================================ */

.bible-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 1.5rem;
    background: #333;
    color: white;
    border-radius: 8px;
    font-size: 0.9rem;
    z-index: 10110;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.bible-toast.show {
    opacity: 1;
}

.bible-toast.success {
    background: #28a745;
}

.bible-toast.error {
    background: #dc3545;
}

/* ============================================================================
   DESKTOP TWO-COLUMN LAYOUT
   ============================================================================ */

@media (min-width: 992px) {
    .bible-modal .modal-dialog {
        max-width: 1200px;
    }

    .bible-modal .modal-body {
        display: grid;
        grid-template-columns: minmax(320px, 2fr) minmax(400px, 3fr);
        gap: 1.5rem;
        align-items: start;
        min-height: 400px;
    }

    /* Left column: input controls */
    .bible-input-column {
        display: flex;
        flex-direction: column;
    }

    /* Right column: results */
    .bible-result-column {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    /* Results section adjustments for side-by-side */
    .bible-modal .bible-verse-result {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
        border-left: 2px solid #395ba9;
        padding-left: 1.25rem;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    [data-theme="dark"] .bible-modal .bible-verse-result {
        border-left-color: #2a4080;
    }

    /* Verse display fills available space */
    .bible-modal .bible-verse-display {
        max-height: calc(70vh - 180px);
        min-height: 200px;
        flex: 1;
    }

    /* Loading/error states span full width when no results */
    .bible-modal .bible-loading,
    .bible-modal .bible-error {
        grid-column: 1 / -1;
    }

    /* History section stays compact on left */
    .bible-history-section {
        margin-top: auto;
        padding-top: 0.75rem;
    }

    /* Empty state message for results column */
    .bible-result-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        min-height: 300px;
        color: #888;
        text-align: center;
        padding: 2rem;
        border-left: 2px solid #eee;
        padding-left: 1.25rem;
    }

    .bible-result-placeholder i {
        font-size: 3rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    [data-theme="dark"] .bible-result-placeholder {
        color: #666;
        border-left-color: #333;
    }

    /* Search results in right column — match verse result styling */
    .bible-modal .bible-search-results {
        border-left: 2px solid #395ba9;
        padding-left: 1.25rem;
        max-height: none;
        border-radius: 0;
        border-top: none;
        border-right: none;
        border-bottom: none;
    }

    [data-theme="dark"] .bible-modal .bible-search-results {
        border-left-color: #2a4080;
    }
}

/* Extra large screens: wider modal */
@media (min-width: 1400px) {
    .bible-modal .modal-dialog {
        max-width: 1320px;
    }

    .bible-modal .modal-body {
        grid-template-columns: minmax(350px, 2fr) minmax(500px, 3fr);
        gap: 2rem;
    }

    .bible-modal .bible-verse-display {
        max-height: calc(75vh - 180px);
    }
}

/* Hide placeholder on mobile/tablet - only useful for desktop two-column */
@media (max-width: 991px) {
    .bible-result-placeholder {
        display: none !important;
    }
}

/* ============================================================================
   RESPONSIVE (MOBILE/TABLET)
   ============================================================================ */

@media (max-width: 576px) {
    .bible-modal .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
        max-height: calc(100vh - 20px);
    }

    .bible-modal .modal-content {
        border-radius: 12px;
        max-height: calc(100vh - 20px);
        display: flex;
        flex-direction: column;
    }

    .bible-modal .modal-body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }

    .bible-dropdown-row {
        flex-direction: column;
    }

    .bible-dropdown-group {
        min-width: 100%;
    }

    .bible-verse-to {
        display: none;
    }

    .bible-verse-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .bible-display-options {
        justify-content: center;
    }

    .bible-copy-group {
        justify-content: center;
    }

    .bible-lookup-btn {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }

}

/* Landscape on small devices */
@media (max-height: 500px) and (orientation: landscape) {
    .bible-lookup-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .bible-lookup-btn,
    .bible-mode-btn,
    .bible-browse-go-btn,
    .bible-copy-btn,
    .bible-toast {
        transition: none;
    }

    .bible-lookup-btn:hover {
        transform: none;
    }
}

/* ============================================================================
   ABOUT SECTION
   ============================================================================ */

.bible-about {
    width: 100%;
    text-align: center;
    color: #395ba9;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

[data-theme="dark"] .bible-about {
    color: #7fa8e8;
}

/* ============================================================================
   FIND PANEL (unified lookup + search)
   ============================================================================ */

/* Find row: input on first line, version + Go on second line */
.bible-find-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: stretch;
}

.bible-find-input-wrapper {
    position: relative;
    flex: 1 1 100%; /* Full width — forces wrap after it */
    min-width: 0;
}

.bible-find-input-wrapper .bible-text-input {
    padding-right: 2.5rem; /* Space for clear button */
}

/* Translation selector in find row */
.bible-find-version {
    appearance: none;
    -webkit-appearance: none;
    padding: 0 1.6rem 0 0.5rem;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 16px; /* 16px prevents iOS zoom on focus */
    font-weight: 600;
    color: #395ba9;
    background: #fff;
    cursor: pointer;
    outline: none;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%23395ba9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 5px center;
    transition: border-color 0.2s;
}

.bible-find-version:hover {
    border-color: #395ba9;
}

.bible-find-version:focus {
    border-color: #395ba9;
    box-shadow: 0 0 0 2px rgba(57, 91, 169, 0.15);
}

[data-theme="dark"] .bible-find-version {
    background-color: #2a2a35;
    border-color: #444;
    color: #7fa8e8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%237fa8e8'/%3E%3C/svg%3E");
}

[data-theme="dark"] .bible-find-version:hover,
[data-theme="dark"] .bible-find-version:focus {
    border-color: #7fa8e8;
}

/* Go / submit button outside the input */
.bible-find-go {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 1rem;
    background: #395ba9;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.bible-find-go:hover {
    background: #2e4a8a;
}

.bible-find-go:active {
    background: #243d75;
}

[data-theme="dark"] .bible-find-go {
    background: #2a4080;
}

[data-theme="dark"] .bible-find-go:hover {
    background: #335099;
}


/* Search options disclosure (hidden by default, revealed after search) */
.bible-find-search-options {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #eee;
    animation: bibleFindSlideDown 0.2s ease-out;
}

@keyframes bibleFindSlideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[data-theme="dark"] .bible-find-search-options {
    border-top-color: #333;
}

/* Legacy search wrapper (kept for compat) */
.bible-search-input-wrapper {
    position: relative;
}

.bible-search-input {
    padding-right: 2.5rem; /* Space for clear button */
}

.bible-search-clear {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 0.25rem;
    font-size: 0.9rem;
    line-height: 1;
}

.bible-search-clear:hover {
    color: #666;
}

[data-theme="dark"] .bible-search-clear {
    color: #666;
}

[data-theme="dark"] .bible-search-clear:hover {
    color: #999;
}

/* Search options */
.bible-search-options {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.bible-search-type-label {
    font-size: 0.85rem;
    color: #666;
    white-space: nowrap;
}

.bible-search-type-select {
    padding: 0.35rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px; /* 16px prevents iOS zoom on focus */
    background: #fff;
    color: #333;
    cursor: pointer;
}

.bible-search-type-select:focus {
    outline: none;
    border-color: #395ba9;
    box-shadow: 0 0 0 2px rgba(57, 91, 169, 0.1);
}

[data-theme="dark"] .bible-search-type-label {
    color: #aaa;
}

[data-theme="dark"] .bible-search-type-select {
    background: #2a2a35;
    border-color: #444;
    color: #ddd;
}

[data-theme="dark"] .bible-search-type-select:focus {
    border-color: #7fa8e8;
    box-shadow: 0 0 0 2px rgba(127, 168, 232, 0.15);
}

/* Search results (right column) */
.bible-search-results {
    margin-top: 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling for Safari */
}

.bible-search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
    font-size: 0.8rem;
    color: #666;
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Back to results button (standalone in right column, between search results and verse result) */
.bible-search-back-btn {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    color: #395ba9;
    font-size: 0.85rem;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 0.5rem;
    transition: background-color 0.15s, color 0.15s;
}

.bible-search-back-btn:hover {
    background: rgba(57, 91, 169, 0.08);
    color: #2a4580;
}

[data-theme="dark"] .bible-search-back-btn {
    color: #7fa8e8;
}

[data-theme="dark"] .bible-search-back-btn:hover {
    background: rgba(127, 168, 232, 0.12);
    color: #9dc0f0;
}

.bible-search-results-list {
    /* Content flows naturally, parent handles scrolling */
}

.bible-search-result-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    padding: 0.75rem;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background 0.15s;
}

.bible-search-result-item:hover {
    background: #f5f5f5;
}

.bible-search-result-item:last-child {
    border-bottom: none;
}

.bible-search-result-ref {
    font-weight: 600;
    font-size: 0.9rem;
    color: #395ba9;
}

.bible-search-result-text {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bible-search-highlight {
    background: #fff3cd;
    padding: 0 2px;
    border-radius: 2px;
}

.bible-search-no-results {
    padding: 1.5rem;
    text-align: center;
    color: #888;
    font-size: 0.9rem;
}

[data-theme="dark"] .bible-search-results {
    background: #252530;
    border-color: #444;
}

[data-theme="dark"] .bible-search-results-header {
    background: #2a2a35;
    border-bottom-color: #444;
    color: #888;
}

[data-theme="dark"] .bible-search-result-item {
    border-bottom-color: #333;
}

[data-theme="dark"] .bible-search-result-item:hover {
    background: #2a2a35;
}

[data-theme="dark"] .bible-search-result-ref {
    color: #7fa8e8;
}

[data-theme="dark"] .bible-search-result-text {
    color: #aaa;
}

[data-theme="dark"] .bible-search-highlight {
    background: #3d3520;
    color: #ffc107;
}

/* ============================================================================
   SEARCH SCOPE FILTER PILLS
   ============================================================================ */

.bible-search-scope {
    margin-bottom: 0.75rem;
}

.bible-scope-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
}

.bible-scope-row-secondary {
    padding-left: 0.25rem;
}

.bible-scope-pill {
    padding: 0.2rem 0.6rem;
    background: #f0f0f0;
    border: none;
    border-radius: 20px;
    font-size: 0.75rem;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.bible-scope-pill:hover {
    background: #e0e0e0;
    color: #333;
}

.bible-scope-pill.active {
    background: #395ba9;
    color: white;
}

[data-theme="dark"] .bible-scope-pill {
    background: #333340;
    color: #aaa;
}

[data-theme="dark"] .bible-scope-pill:hover {
    background: #444450;
    color: #ddd;
}

[data-theme="dark"] .bible-scope-pill.active {
    background: #2a4080;
    color: white;
}

/* ============================================================================
   GROUPED SEARCH RESULTS
   ============================================================================ */

/* Book filter summary bar (horizontal scrollable pills at top of results) */
.bible-search-book-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #eee;
    background: #fafafa;
}

.bible-search-book-pill {
    padding: 0.15rem 0.5rem;
    background: #e8ecf4;
    border: none;
    border-radius: 12px;
    font-size: 0.7rem;
    color: #395ba9;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.bible-search-book-pill:hover {
    background: #d0d8ec;
}

.bible-search-book-count {
    background: #395ba9;
    color: white;
    padding: 0 0.35rem;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 600;
}

[data-theme="dark"] .bible-search-book-summary {
    background: #252530;
    border-bottom-color: #333;
}

[data-theme="dark"] .bible-search-book-pill {
    background: #2a3050;
    color: #7fa8e8;
}

[data-theme="dark"] .bible-search-book-pill:hover {
    background: #334060;
}

[data-theme="dark"] .bible-search-book-count {
    background: #2a4080;
}

/* Collapsible book group headers */
.bible-search-book-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: #f5f5f5;
    border: none;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background 0.15s;
    text-align: left;
}

.bible-search-book-header:hover {
    background: #ebebeb;
}

.bible-search-book-toggle {
    font-size: 0.75rem;
    color: #888;
    width: 1rem;
    text-align: center;
}

.bible-search-book-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: #395ba9;
    flex: 1;
}

.bible-search-book-badge {
    background: #e8ecf4;
    color: #395ba9;
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
}

[data-theme="dark"] .bible-search-book-header {
    background: #2a2a35;
    border-bottom-color: #333;
}

[data-theme="dark"] .bible-search-book-header:hover {
    background: #333340;
}

[data-theme="dark"] .bible-search-book-name {
    color: #7fa8e8;
}

[data-theme="dark"] .bible-search-book-badge {
    background: #2a3050;
    color: #7fa8e8;
}

/* Results within a book group */
.bible-search-book-results .bible-search-result-item {
    padding-left: 2rem;
}

/* Mobile adjustments for scope pills and grouped results */
@media (max-width: 576px) {
    .bible-scope-pill {
        font-size: 0.7rem;
        padding: 0.15rem 0.5rem;
    }

    .bible-search-book-results .bible-search-result-item {
        padding-left: 1.25rem;
    }

    .bible-search-book-pill {
        font-size: 0.65rem;
    }
}

/* ============================================================================
   HISTORY SECTION
   ============================================================================ */

.bible-history-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.bible-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.bible-history-header h6 {
    margin-bottom: 0;
}

.bible-history-section h6 {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    margin-bottom: 0.75rem;
}

.bible-history-clear-btn {
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #888;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.bible-history-clear-btn:hover {
    background: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

[data-theme="dark"] .bible-history-clear-btn {
    border-color: #444;
    color: #888;
}

[data-theme="dark"] .bible-history-clear-btn:hover {
    background: #3d2020;
    border-color: #5a3030;
    color: #f8d7da;
}

.bible-history-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bible-history-item {
    padding: 0.35rem 0.5rem 0.35rem 0.65rem;
    background: #f0f0f0;
    border-radius: 20px;
    font-size: 0.8rem;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    position: relative;
}

.bible-history-item:hover {
    background: #e0e0e0;
    color: #333;
}

.bible-history-icon {
    font-size: 0.65rem;
    color: #999;
    flex-shrink: 0;
}

.bible-history-item:hover .bible-history-icon {
    color: #666;
}

.bible-history-label {
    white-space: nowrap;
}

.bible-history-query {
    font-style: italic;
}

.bible-history-count {
    font-size: 0.65rem;
    color: #999;
    flex-shrink: 0;
}

.bible-history-time {
    font-size: 0.6rem;
    color: #aaa;
    flex-shrink: 0;
    margin-left: 0.1rem;
}

.bible-history-delete {
    font-size: 0.85rem;
    color: #bbb;
    cursor: pointer;
    line-height: 1;
    padding: 0 0.15rem;
    border-radius: 50%;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}

.bible-history-item:hover .bible-history-delete {
    opacity: 1;
}

.bible-history-delete:hover {
    color: #c0392b;
}

/* Show more button */
.bible-history-show-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.4rem;
    background: transparent;
    border: 1px dashed #ccc;
    border-radius: 6px;
    font-size: 0.78rem;
    color: #888;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 0.25rem;
}

.bible-history-show-more:hover {
    background: #f0f0f0;
    border-color: #aaa;
    color: #555;
}

.bible-history-remaining {
    font-size: 0.7rem;
    color: #aaa;
    margin-left: 0.25rem;
}

.bible-history-empty {
    color: #888;
    font-size: 0.85rem;
    font-style: italic;
}

/* Clear dropdown menu */
.bible-history-actions {
    position: relative;
}

.bible-history-clear-wrap {
    position: relative;
}

.bible-history-clear-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.25rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.12);
    z-index: 20;
    min-width: 170px;
    overflow: hidden;
}

.bible-history-clear-menu.show {
    display: block;
}

.bible-history-clear-menu button {
    display: block;
    width: 100%;
    padding: 0.45rem 0.75rem;
    background: none;
    border: none;
    text-align: left;
    font-size: 0.8rem;
    color: #555;
    cursor: pointer;
    transition: background 0.15s;
}

.bible-history-clear-menu button:hover {
    background: #f8d7da;
    color: #721c24;
}

.bible-history-clear-menu button:not(:last-child) {
    border-bottom: 1px solid #eee;
}

.bible-history-guest {
    color: #888;
    font-size: 0.85rem;
    padding: 0.5rem;
}

.bible-history-guest a {
    color: #395ba9;
    text-decoration: underline;
}

/* Guest signup card in history section */
.bible-history-guest-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 0.75rem;
    background: #f8f5f0;
    border: 1px solid #d4a574;
    border-radius: 8px;
    margin: 0.25rem 0;
    gap: 0.5rem;
}

.bible-history-guest-icon {
    font-size: 1.25rem;
    color: #a0a0a0;
}

.bible-history-guest-text {
    font-size: 0.8rem;
    line-height: 1.4;
    color: #555;
}

.bible-history-guest-text strong {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.85rem;
    color: #333;
}

.bible-history-guest-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.15rem;
}

.bible-history-guest-btn {
    display: inline-block;
    padding: 0.3rem 0.9rem;
    background: #3b71ca;
    color: #fff;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s ease;
}

.bible-history-guest-btn:hover {
    background: #305baf;
    color: #fff;
    text-decoration: none;
}

.bible-history-guest-link {
    font-size: 0.75rem;
    color: #6c757d;
    text-decoration: none;
}

.bible-history-guest-link:hover {
    color: #395ba9;
    text-decoration: underline;
}

[data-theme="dark"] .bible-history-guest-card {
    background: #2d2a24;
    border-color: #8b7355;
}

[data-theme="dark"] .bible-history-guest-text {
    color: #a0a0a0;
}

[data-theme="dark"] .bible-history-guest-text strong {
    color: #e0e0e0;
}

[data-theme="dark"] .bible-history-guest-btn {
    background: #4a85d9;
}

[data-theme="dark"] .bible-history-guest-btn:hover {
    background: #5a93e0;
}

[data-theme="dark"] .bible-history-guest-link {
    color: #888;
}

[data-theme="dark"] .bible-history-guest-link:hover {
    color: #7fa8e8;
}

[data-theme="dark"] .bible-history-section {
    border-top-color: #333;
}

[data-theme="dark"] .bible-history-item {
    background: #333340;
    color: #aaa;
}

[data-theme="dark"] .bible-history-item:hover {
    background: #444450;
    color: #ddd;
}

[data-theme="dark"] .bible-history-icon {
    color: #777;
}

[data-theme="dark"] .bible-history-item:hover .bible-history-icon {
    color: #aaa;
}

[data-theme="dark"] .bible-history-time {
    color: #666;
}

[data-theme="dark"] .bible-history-count {
    color: #666;
}

[data-theme="dark"] .bible-history-delete {
    color: #555;
}

[data-theme="dark"] .bible-history-delete:hover {
    color: #e74c3c;
}

[data-theme="dark"] .bible-history-show-more {
    border-color: #444;
    color: #888;
}

[data-theme="dark"] .bible-history-show-more:hover {
    background: #333340;
    border-color: #666;
    color: #ccc;
}

[data-theme="dark"] .bible-history-clear-menu {
    background: #2a2a3a;
    border-color: #444;
    box-shadow: 0 3px 12px rgba(0,0,0,0.3);
}

[data-theme="dark"] .bible-history-clear-menu button {
    color: #bbb;
}

[data-theme="dark"] .bible-history-clear-menu button:hover {
    background: #3d2020;
    color: #f8d7da;
}

[data-theme="dark"] .bible-history-clear-menu button:not(:last-child) {
    border-bottom-color: #404050;
}

[data-theme="dark"] .bible-history-guest a {
    color: #7fa8e8;
}

/* ============================================================================
   EXPAND CHAPTER BUTTON
   ============================================================================ */

.bible-expand-chapter {
    margin-top: 0.75rem;
    text-align: center;
}

.bible-expand-chapter-btn {
    padding: 0.5rem 1rem;
    background: #fff;
    border: 1px solid #395ba9;
    color: #395ba9;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.bible-expand-chapter-btn:hover {
    background: #395ba9;
    color: white;
}

[data-theme="dark"] .bible-expand-chapter-btn {
    background: #252530;
    border-color: #7fa8e8;
    color: #7fa8e8;
}

[data-theme="dark"] .bible-expand-chapter-btn:hover {
    background: #2a4080;
    border-color: #2a4080;
    color: white;
}

/* ============================================================================
   CHAPTER NAVIGATION
   ============================================================================ */

.bible-chapter-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 6px;
}

.bible-chapter-nav-btn {
    padding: 0.4rem 0.75rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.85rem;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.bible-chapter-nav-btn:hover:not(:disabled) {
    background: #395ba9;
    border-color: #395ba9;
    color: white;
}

.bible-chapter-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #f0f0f0;
}

.bible-chapter-nav-current {
    font-size: 0.9rem;
    font-weight: 600;
    color: #395ba9;
}

[data-theme="dark"] .bible-chapter-nav {
    background: #252530;
}

[data-theme="dark"] .bible-chapter-nav-btn {
    background: #2a2a35;
    border-color: #444;
    color: #aaa;
}

[data-theme="dark"] .bible-chapter-nav-btn:hover:not(:disabled) {
    background: #2a4080;
    border-color: #2a4080;
    color: white;
}

[data-theme="dark"] .bible-chapter-nav-btn:disabled {
    background: #1e1e24;
}

[data-theme="dark"] .bible-chapter-nav-current {
    color: #7fa8e8;
}

/* Target verse highlight (for search context) */
.bible-verse-target {
    background: rgba(57, 91, 169, 0.1);
    padding: 0.25rem 0;
    border-radius: 4px;
}

[data-theme="dark"] .bible-verse-target {
    background: rgba(127, 168, 232, 0.15);
}

/* ============================================================================
   MOBILE FIXED COPY BUTTONS
   ============================================================================ */

@media (max-width: 576px) {
    .bible-verse-actions {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0.25rem;
    }

    .bible-display-options {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 0;
        flex: 1;
        gap: 0.4rem;
        flex-wrap: nowrap;
        min-width: 0;
    }

    /* Swap full labels for short symbols on mobile */
    .option-label-full {
        display: none;
    }

    .option-label-short {
        display: inline;
        font-weight: 600;
    }

    .bible-display-option {
        gap: 0.2rem;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    /* Compact font controls on mobile */
    .bible-font-controls {
        margin-left: 0.25rem;
        gap: 0.15rem;
    }

    .bible-font-btn {
        width: 22px;
        height: 22px;
        min-width: 22px;
    }

    .bible-font-btn-decrease {
        font-size: 0.6rem;
    }

    .bible-font-btn-increase {
        font-size: 0.85rem;
    }

    /* Compact copy: icon-only button + small dropdown chevron */
    .bible-copy-btn {
        padding: 0.25rem 0.4rem;
        border-radius: 4px 0 0 4px;
        font-size: 0.75rem;
    }

    .bible-copy-btn .copy-label {
        display: none;
    }

    .bible-copy-dropdown-btn {
        padding: 0.25rem 0.3rem;
        border-radius: 0 4px 4px 0;
        font-size: 0.65rem;
    }

    .bible-copy-formats {
        right: 0;
        left: auto;
    }

    .bible-search-result-item {
        padding: 0.6rem;
    }

    /* Compact footer on mobile — hide keyboard hints, minimal height */
    .bible-keyboard-hints {
        display: none;
    }

    .bible-modal .modal-footer {
        padding: 0.15rem 0.75rem;
        min-height: 0;
        border-top: none;
    }

    .bible-about {
        font-size: 0.6rem;
        margin-bottom: 0;
        opacity: 0.6;
    }
}

/* ============================================================================
   MOBILE PANEL NAVIGATION
   ============================================================================ */

/* Hidden on desktop */
.bible-mobile-nav {
    display: none;
}

@media (max-width: 991px) {
    .bible-mobile-nav {
        display: flex;
        gap: 0.375rem;
        padding: 0.5rem 0;
        margin-bottom: 0.75rem;
        position: sticky;
        top: 0;
        z-index: 10;
        background: #fdfcfa;
    }

    .bible-mobile-nav-btn {
        flex: 1;
        padding: 0.5rem 0.25rem;
        border: 1px solid #ddd;
        background: #fff;
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.8rem;
        font-weight: 500;
        color: #666;
        transition: all 0.15s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        white-space: nowrap;
    }

    .bible-mobile-nav-btn:hover:not(:disabled) {
        background: #f5f5f5;
        border-color: #ccc;
    }

    .bible-mobile-nav-btn.active {
        background: #395ba9;
        border-color: #395ba9;
        color: #fff;
    }

    .bible-mobile-nav-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .bible-mobile-nav-btn i {
        font-size: 0.85rem;
    }

    /* Content indicator dot */
    .bible-mobile-nav-btn.has-content::after {
        content: '';
        width: 6px;
        height: 6px;
        background: #395ba9;
        border-radius: 50%;
        margin-left: 0.25rem;
        flex-shrink: 0;
    }

    .bible-mobile-nav-btn.active.has-content::after {
        background: rgba(255, 255, 255, 0.7);
    }

    /* Hide desktop mode tabs on mobile (mobile nav handles mode switching) */
    .bible-input-modes {
        display: none;
    }

    /* Find row: wrap version + Go to second line so input gets full width */
    .bible-find-row {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .bible-find-input-wrapper {
        flex: 1 1 100%; /* Full width — forces wrap after it */
    }

    .bible-find-version {
        padding: 0 1.4rem 0 0.4rem;
        max-width: none;
        flex: 1;
    }

    .bible-find-go {
        padding: 0 1rem;
        font-size: 0.85rem;
    }

    /* --- Mobile Panel Visibility --- */

    /* Find panel: show find input, hide dropdown + results */
    .bible-modal .modal-body[data-mobile-panel="find"] .bible-result-column {
        display: none;
    }
    .bible-modal .modal-body[data-mobile-panel="find"] #bibleDropdownPanel {
        display: none;
    }

    /* Browse panel: show dropdown, hide find + results */
    .bible-modal .modal-body[data-mobile-panel="browse"] .bible-result-column {
        display: none;
    }
    .bible-modal .modal-body[data-mobile-panel="browse"] #bibleFindPanel {
        display: none;
    }

    /* Results panel: hide input column, show results */
    .bible-modal .modal-body[data-mobile-panel="results"] .bible-input-column {
        display: none;
    }

    /* Clean up results panel top spacing */
    .bible-modal .modal-body[data-mobile-panel="results"] .bible-verse-result {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }

    /* --- Dark Mode --- */

    [data-theme="dark"] .bible-mobile-nav {
        background: #1e1e24;
    }

    [data-theme="dark"] .bible-mobile-nav-btn {
        background: #2a2a35;
        border-color: #444;
        color: #aaa;
    }

    [data-theme="dark"] .bible-mobile-nav-btn:hover:not(:disabled) {
        background: #333340;
        border-color: #555;
    }

    [data-theme="dark"] .bible-mobile-nav-btn.active {
        background: #2a4080;
        border-color: #2a4080;
        color: #fff;
    }

    [data-theme="dark"] .bible-mobile-nav-btn.has-content::after {
        background: #7fa8e8;
    }
}

/* ============================================================================
   DARK MODE SCROLLBARS
   ============================================================================ */

[data-theme="dark"] .bible-modal .modal-body,
[data-theme="dark"] .bible-verse-display,
[data-theme="dark"] .bible-search-results {
    scrollbar-color: #555 #2a2a35;
}

[data-theme="dark"] .bible-modal .modal-body::-webkit-scrollbar,
[data-theme="dark"] .bible-verse-display::-webkit-scrollbar,
[data-theme="dark"] .bible-search-results::-webkit-scrollbar {
    width: 8px;
}

[data-theme="dark"] .bible-modal .modal-body::-webkit-scrollbar-track,
[data-theme="dark"] .bible-verse-display::-webkit-scrollbar-track,
[data-theme="dark"] .bible-search-results::-webkit-scrollbar-track {
    background: #2a2a35;
    border-radius: 4px;
}

[data-theme="dark"] .bible-modal .modal-body::-webkit-scrollbar-thumb,
[data-theme="dark"] .bible-verse-display::-webkit-scrollbar-thumb,
[data-theme="dark"] .bible-search-results::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

[data-theme="dark"] .bible-modal .modal-body::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .bible-verse-display::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .bible-search-results::-webkit-scrollbar-thumb:hover {
    background: #777;
}


/* ============================================================================
   PARALLEL MODE
   ============================================================================ */

/* Version picker (shown when parallel mode is active) */
.bible-parallel-picker {
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}

.bible-parallel-picker-label {
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bible-parallel-picker-versions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.bible-parallel-picker-btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    background: #fff;
    color: #555;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1.4;
}

.bible-parallel-picker-btn:hover {
    border-color: #395ba9;
    color: #395ba9;
}

.bible-parallel-picker-btn.selected {
    background: #395ba9;
    border-color: #395ba9;
    color: #fff;
}

.bible-parallel-picker-btn.primary {
    background: #2c4a8a;
    border-color: #2c4a8a;
    color: #fff;
    cursor: default;
}

.bible-parallel-picker-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.bible-parallel-picker-hint {
    font-size: 0.7rem;
    color: #aaa;
    margin-top: 0.4rem;
}

/* Stacked translation blocks */
.bible-parallel-block {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.bible-parallel-block:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.bible-parallel-version-label {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: #395ba9;
    margin-bottom: 0.5rem;
    padding: 0.2rem 0.5rem;
    background: rgba(57, 91, 169, 0.06);
    border-radius: 4px;
    display: inline-block;
}

.bible-parallel-version-name {
    font-weight: 400;
    color: #888;
    margin-left: 0.5rem;
    font-size: 0.75rem;
}

/* Single-version label (shown above results in non-parallel mode) */
.bible-version-label {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: #395ba9;
    margin-bottom: 0.75rem;
    padding: 0.2rem 0.5rem;
    background: rgba(57, 91, 169, 0.06);
    border-radius: 4px;
    display: block;
    width: fit-content;
}

.bible-version-label-name {
    font-weight: 400;
    color: #888;
    margin-left: 0.5rem;
    font-size: 0.75rem;
}

/* Large passage warning */
.bible-parallel-warning {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #6d5a00;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Dark mode overrides for parallel mode */
[data-theme="dark"] .bible-parallel-picker {
    border-bottom-color: #444;
}

[data-theme="dark"] .bible-parallel-picker-btn {
    background: #2a2a2a;
    border-color: #555;
    color: #ccc;
}

[data-theme="dark"] .bible-parallel-picker-btn:hover {
    border-color: #7fa8e8;
    color: #7fa8e8;
}

[data-theme="dark"] .bible-parallel-picker-btn.selected {
    background: #395ba9;
    border-color: #395ba9;
    color: #fff;
}

[data-theme="dark"] .bible-parallel-picker-btn.primary {
    background: #2c4a8a;
    border-color: #2c4a8a;
    color: #fff;
}

[data-theme="dark"] .bible-parallel-block {
    border-bottom-color: #444;
}

[data-theme="dark"] .bible-parallel-version-label {
    color: #7fa8e8;
    background: rgba(127, 168, 232, 0.08);
}

[data-theme="dark"] .bible-parallel-version-name {
    color: #777;
}

[data-theme="dark"] .bible-version-label {
    color: #7fa8e8;
    background: rgba(127, 168, 232, 0.08);
}

[data-theme="dark"] .bible-version-label-name {
    color: #777;
}

[data-theme="dark"] .bible-parallel-warning {
    background: #3a3000;
    border-color: #6d5a00;
    color: #ffe082;
}

/* === devotional.css === */
/* ========================================
   DAILY DEVOTIONAL STYLES
   ======================================== */

/* --- CSS Variables --- */
:root {
    --devo-bg: #fff;
    --devo-text: #333;
    --devo-text-muted: #6c757d;
    --devo-border: #dee2e6;
    --devo-scripture-bg: #f8f5f0;
    --devo-scripture-border: #d4a574;
    --devo-scripture-text: #5c4a32;
    --devo-body-text: #444;
    --devo-tab-active: #304e96;
    --devo-tab-inactive: #6c757d;
    --devo-tab-active-bg: rgba(48, 78, 150, 0.08);
    --devo-selector-bg: #f8f9fa;
    --devo-selector-border: #dee2e6;
    --devo-badge-bg: #dc3545;
    --devo-author-text: #6c757d;
    --devo-date-text: #304e96;
    --devo-link: #304e96;
    --devo-sub-tab-bg: #f0f0f0;
    --devo-sub-tab-active-bg: #304e96;
    --devo-sub-tab-active-text: #fff;
}

[data-theme="dark"] {
    --devo-bg: #252538;
    --devo-text: #e0e0e0;
    --devo-text-muted: #a0a0a0;
    --devo-border: #404055;
    --devo-scripture-bg: #2d2a24;
    --devo-scripture-border: #8b7355;
    --devo-scripture-text: #d4c4a8;
    --devo-body-text: #c0c0c0;
    --devo-tab-active: #7fb3ff;
    --devo-tab-inactive: #888;
    --devo-tab-active-bg: rgba(127, 179, 255, 0.1);
    --devo-selector-bg: #2d2d44;
    --devo-selector-border: #404055;
    --devo-badge-bg: #dc3545;
    --devo-author-text: #a0a0a0;
    --devo-date-text: #7fb3ff;
    --devo-link: #7fb3ff;
    --devo-sub-tab-bg: #2d2d44;
    --devo-sub-tab-active-bg: #7fb3ff;
    --devo-sub-tab-active-text: #1a1a2e;
}

/* --- Compact Header Toggle (replaces full-width body tabs) --- */
.devo-header-toggle {
    display: flex;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 2px;
    margin-left: auto;
    margin-right: 0.75rem;
    gap: 2px;
}

.devo-header-btn {
    padding: 0.3rem 0.7rem;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    white-space: nowrap;
    line-height: 1.3;
}

.devo-header-btn:hover {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.1);
}

.devo-header-btn.active {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
    font-weight: 600;
}

.devo-header-btn i {
    font-size: 0.8rem;
}

/* Dark mode header toggle */
[data-theme="dark"] .devo-header-toggle {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .devo-header-btn {
    color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .devo-header-btn:hover {
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .devo-header-btn.active {
    background: rgba(255, 255, 255, 0.15);
    color: #e0e0e0;
}

/* --- Tab Panes --- */
.bible-modal .devo-tab-pane {
    display: none;
}

.bible-modal .devo-tab-pane.active {
    display: block;
}

/* --- Grid Layout Fix for Desktop ---
   The .modal-body uses CSS grid on desktop (992px+).
   Devotional pane must span full width.
   Bible pane uses display:contents so its columns become grid items. */
@media (min-width: 992px) {
    .bible-modal .devo-tab-pane#devoTabPaneDevotional {
        grid-column: 1 / -1;
    }

    .bible-modal .devo-tab-pane#devoTabPaneBible.active {
        display: contents;
    }

    .bible-modal .devo-tab-pane#devoTabPanePlan.active {
        display: block;
        grid-column: 1 / -1;
    }

    /* On desktop, cap the devotional body so it doesn't push the modal too tall */
    .devo-body {
        max-height: calc(60vh - 200px);
    }
}

/* --- Devotional Content Area --- */
.devo-content {
    color: var(--devo-text);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#devoContentArea {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Hide content area when JS sets display:none */
#devoContentArea[style*="display: none"] {
    display: none !important;
}

/* On mobile (full-screen modal), devotional tab fills the modal body */
@media (max-width: 576px) {
    .bible-modal .devo-tab-pane#devoTabPaneDevotional.active {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }

    .devo-content {
        flex: 1;
        min-height: 0;
    }
}

/* Devotional Selector (Custom Dropdown) */
.devo-selector {
    margin-bottom: 1rem;
    position: relative;
}

.devo-selector-trigger {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--devo-selector-border);
    border-radius: 0.375rem;
    background: var(--devo-selector-bg);
    color: var(--devo-text);
    font-size: 0.9rem;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.devo-selector-trigger:hover {
    border-color: var(--devo-tab-active);
}

.devo-selector-trigger:focus {
    border-color: var(--devo-tab-active);
    outline: none;
    box-shadow: 0 0 0 0.15rem rgba(48, 78, 150, 0.2);
}

.devo-selector-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.devo-selector-label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.devo-selector-author {
    display: block;
    font-size: 0.75rem;
    color: var(--devo-text-muted);
    font-weight: 400;
    margin-top: 0.1rem;
}

/* Trigger icon (image or initials) */
.devo-selector-trigger-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    background: var(--devo-tab-active);
    margin-right: 0.6rem;
    overflow: hidden;
}

.devo-selector-trigger-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.devo-selector-arrow {
    font-size: 0.75rem;
    color: var(--devo-text-muted);
    margin-left: 0.5rem;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.devo-selector.open .devo-selector-arrow {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.devo-selector-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--devo-bg);
    border: 1px solid var(--devo-selector-border);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 10;
    max-height: 280px;
    overflow-y: auto;
    padding: 0.35rem;
}

[data-theme="dark"] .devo-selector-menu {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.devo-selector.open .devo-selector-menu {
    display: block;
}

/* Dropdown Items */
.devo-selector-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.55rem 0.65rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.12s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    color: var(--devo-text);
}

.devo-selector-item:hover {
    background: var(--devo-tab-active-bg);
}

.devo-selector-item.selected {
    background: var(--devo-tab-active-bg);
}

.devo-selector-item-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    background: var(--devo-tab-active);
    margin-top: 0.1rem;
    overflow: hidden;
}

.devo-selector-item-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.devo-selector-item-info {
    flex: 1;
    min-width: 0;
}

.devo-selector-item-name {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--devo-text);
    line-height: 1.3;
}

.devo-selector-item-author {
    display: block;
    font-size: 0.75rem;
    color: var(--devo-text-muted);
    margin-top: 0.15rem;
}

.devo-selector-item-desc {
    display: -webkit-box;
    font-size: 0.72rem;
    color: var(--devo-text-muted);
    margin-top: 0.25rem;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.devo-selector-item-check {
    color: var(--devo-tab-active);
    font-size: 0.85rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
    visibility: hidden;
}

.devo-selector-item.selected .devo-selector-item-check {
    visibility: visible;
}

/* Scrollbar for dropdown */
.devo-selector-menu::-webkit-scrollbar {
    width: 5px;
}
.devo-selector-menu::-webkit-scrollbar-track {
    background: transparent;
}
.devo-selector-menu::-webkit-scrollbar-thumb {
    background: var(--devo-border);
    border-radius: 3px;
}

/* Date Navigation Row */
.devo-date-nav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.devo-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--devo-border);
    border-radius: 50%;
    background: var(--devo-selector-bg);
    color: var(--devo-text-muted);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.devo-nav-btn:hover {
    background: var(--devo-tab-active-bg);
    color: var(--devo-tab-active);
    border-color: var(--devo-tab-active);
}

.devo-nav-btn i {
    font-size: 0.75rem;
}

.devo-today-btn {
    margin-left: 0.5rem;
    padding: 0.15rem 0.6rem;
    border: 1px solid var(--devo-tab-active);
    border-radius: 1rem;
    background: transparent;
    color: var(--devo-tab-active);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.devo-today-btn:hover {
    background: var(--devo-tab-active);
    color: #fff;
}

[data-theme="dark"] .devo-today-btn:hover {
    color: #1a1a2e;
}

/* Date Header */
.devo-date {
    font-size: 0.85rem;
    color: var(--devo-date-text);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
}

.devo-date i {
    font-size: 1rem;
}

/* Scripture Block */
.devo-scripture {
    background: var(--devo-scripture-bg);
    border-left: 3px solid var(--devo-scripture-border);
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
    border-radius: 0 0.25rem 0.25rem 0;
}

.devo-scripture-text {
    font-style: italic;
    color: var(--devo-scripture-text);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 0.4rem 0;
}

.devo-scripture-ref {
    font-size: 0.8rem;
    color: var(--devo-author-text);
    font-weight: 600;
    text-align: right;
}

/* Body */
.devo-body {
    font-size: 0.92rem;
    line-height: 1.75;
    color: var(--devo-body-text);
    overflow-y: auto;
    padding-right: 0.5rem;
    flex: 1;
    min-height: 0;
}

.devo-body p {
    margin-bottom: 0.75rem;
}

.devo-body p:last-child {
    margin-bottom: 0;
}

/* Floated author image inside devotional body */
.devo-body-author-img {
    float: right;
    max-width: 110px;
    height: auto;
    border-radius: 10px;
    margin: 0.15rem 0 0.75rem 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    shape-outside: margin-box;
}

[data-theme="dark"] .devo-body-author-img {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    opacity: 0.92;
}

/* On mobile, slightly smaller */
@media (max-width: 576px) {
    .devo-body-author-img {
        max-width: 85px;
        border-radius: 8px;
        margin: 0.1rem 0 0.5rem 0.75rem;
    }
}

/* Custom scrollbar for devotional body */
.devo-body::-webkit-scrollbar {
    width: 5px;
}
.devo-body::-webkit-scrollbar-track {
    background: transparent;
}
.devo-body::-webkit-scrollbar-thumb {
    background: var(--devo-border);
    border-radius: 3px;
}

/* Entry title (e.g. Faith's Checkbook daily titles) */
.devo-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--devo-text);
    margin-bottom: 0.6rem;
    line-height: 1.4;
}

.devo-title:empty {
    display: none;
}

/* Author attribution */
.devo-author {
    font-size: 0.8rem;
    color: var(--devo-author-text);
    text-align: right;
    margin-top: 0.75rem;
    font-style: italic;
}

.devo-author-link {
    color: var(--devo-author-text);
    text-decoration: none;
    transition: color 0.15s;
}

.devo-author-link:hover {
    color: var(--devo-tab-active);
    text-decoration: underline;
}

/* --- Toolbar (font size + copy) --- */
.devo-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--devo-border);
}

.devo-font-controls {
    display: flex;
    gap: 0.25rem;
}

.devo-font-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--devo-border);
    border-radius: 4px;
    background: var(--devo-selector-bg);
    color: var(--devo-text-muted);
    cursor: pointer;
    font-weight: 700;
    font-family: serif;
    transition: background-color 0.15s, border-color 0.15s;
}

.devo-font-btn:hover {
    background: var(--devo-tab-active-bg);
    border-color: var(--devo-tab-active);
    color: var(--devo-tab-active);
}

.devo-font-decrease {
    font-size: 0.7rem;
}

.devo-font-increase {
    font-size: 0.95rem;
}

.devo-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--devo-border);
    border-radius: 4px;
    background: var(--devo-selector-bg);
    color: var(--devo-text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.devo-copy-btn:hover {
    background: var(--devo-tab-active-bg);
    border-color: var(--devo-tab-active);
    color: var(--devo-tab-active);
}

.devo-copy-btn.copied {
    background: #198754;
    border-color: #198754;
    color: #fff;
}

[data-theme="dark"] .devo-copy-btn.copied {
    background: #157347;
    border-color: #157347;
}

/* Morning/Evening sub-tabs (paired devotionals: Spurgeon, Winslow) */
.devo-sub-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.devo-sub-tab {
    flex: 1;
    padding: 0.4rem 0.75rem;
    border: none;
    border-radius: 0.25rem;
    background: var(--devo-sub-tab-bg);
    color: var(--devo-text);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    text-align: center;
}

.devo-sub-tab:hover {
    opacity: 0.85;
}

.devo-sub-tab.active {
    background: var(--devo-sub-tab-active-bg);
    color: var(--devo-sub-tab-active-text);
}

/* Loading state */
.devo-loading {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--devo-text-muted);
}

.devo-loading .spinner-border {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 0.15rem;
    margin-right: 0.5rem;
}

/* Error state */
.devo-error {
    text-align: center;
    padding: 1rem;
    color: #dc3545;
    font-size: 0.9rem;
}

/* Empty state (no devotional selected) */
.devo-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--devo-text-muted);
}

.devo-empty i {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    display: block;
}

/* --- Badge on Floating Button --- */
.bible-lookup-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 10px;
    height: 10px;
    background: var(--devo-badge-bg);
    border-radius: 50%;
    border: 2px solid #fff;
    display: none;
    animation: devo-badge-pulse 2s infinite;
}

[data-theme="dark"] .bible-lookup-badge {
    border-color: #1a1a2e;
}

.bible-lookup-badge.active {
    display: block;
}

@keyframes devo-badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* --- Settings Page Styles --- */
.devo-prefs-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.devo-prefs-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--devo-border);
}

.devo-prefs-list li:last-child {
    border-bottom: none;
}

.devo-prefs-list .form-check-label {
    font-size: 0.9rem;
}

.devo-prefs-list .form-check-label small {
    display: block;
    color: var(--devo-text-muted);
    font-size: 0.8rem;
    margin-top: 0.15rem;
}

/* Short text label (mobile) — hidden on desktop */
.devo-header-btn-short {
    display: none;
}

/* --- Responsive --- */
@media (max-width: 576px) {
    /* On mobile: hide full label + icon, show short text label */
    .devo-header-btn-label {
        display: none;
    }

    .devo-header-btn i {
        display: none;
    }

    .devo-header-btn-short {
        display: inline;
    }

    .devo-header-btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.65rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        text-transform: uppercase;
    }

    /* Slightly reduce modal title on mobile for 3-button header */
    .bible-modal .modal-title {
        font-size: 0.9rem;
    }

    .devo-body {
        font-size: 0.88rem;
    }

    .devo-scripture {
        padding: 0.65rem 0.75rem;
    }

    /* Sub-tabs: icon-only on mobile */
    .devo-sub-tab {
        font-size: 0;      /* Hide text */
        padding: 0.45rem;
    }

    .devo-sub-tab i {
        font-size: 0.9rem; /* Show icon */
    }

    /* Copy button: icon-only on mobile */
    .devo-copy-label {
        display: none;
    }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    .bible-lookup-badge {
        animation: none;
    }

    .devo-header-btn,
    .devo-sub-tab,
    .devo-nav-btn,
    .devo-today-btn,
    .devo-font-btn,
    .devo-copy-btn {
        transition: none;
    }
}

/* --- Members-only badge --- */
.devo-members-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    color: #fff;
    background: #6c757d;
    padding: 1px 6px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 4px;
    letter-spacing: 0.02em;
}
.devo-members-badge i {
    font-size: 0.55rem;
    margin-right: 2px;
}

/* --- Print --- */
@media print {
    .devo-header-toggle,
    .devo-selector,
    .devo-sub-tabs,
    .devo-nav-btn,
    .devo-today-btn,
    .devo-toolbar {
        display: none;
    }
}

/* === gill.css === */
/**
 * Gill Commentary Styles
 *
 * Styles for displaying John Gill's Exposition of the Bible
 * in the Bible lookup modal.
 *
 * @package PristineGrace
 * @since 4.4
 */

/* ==========================================================================
   GILL COMMENTARY CONTAINER
   ========================================================================== */

.gill-commentary-section {
    margin-top: 1.5rem;
    border-top: 1px solid #dee2e6;
    padding-top: 1rem;
}

.gill-commentary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.gill-commentary-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gill-commentary-title i {
    color: #6c757d;
}

button.gill-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: #fff;
    border: 1px solid #395ba9;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #395ba9;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: none;
    letter-spacing: normal;
}

button.gill-toggle-btn:hover {
    background: #395ba9;
    color: white;
}

button.gill-toggle-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(57, 91, 169, 0.25);
}

button.gill-toggle-btn.active {
    background: #395ba9;
    color: white;
}

button.gill-toggle-btn.active:hover {
    background: #2e4a8a;
    border-color: #2e4a8a;
}

button.gill-toggle-btn i {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

button.gill-toggle-btn.active i {
    transform: rotate(180deg);
}

#gillCommentaryContent,
.gill-commentary-content {
    display: none !important;
    padding: 1rem;
    background: #fdfcfa;
    border: 1px solid #e9e5df;
    border-radius: 8px;
    max-height: 400px;
    overflow-y: auto;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #333;
    margin-top: 0.75rem;
}

#gillCommentaryContent.show,
.gill-commentary-content.show {
    display: block !important;
}

/* Loading state */
.gill-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: #6c757d;
}

.gill-loading .spinner-border {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.75rem;
}

/* Error state */
.gill-error {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: #fff5f5;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    color: #721c24;
    font-size: 0.9rem;
}

/* Info state (no commentary available) */
.gill-info {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    color: #6c757d;
    font-size: 0.9rem;
    font-style: italic;
}

/* ==========================================================================
   MULTI-VERSE COMMENTARY DISPLAY
   ========================================================================== */

.gill-verse-header {
    font-size: 0.85rem;
    font-weight: 600;
    color: #495057;
    background: #f1f3f4;
    padding: 0.4rem 0.75rem;
    margin: 1rem -1rem 0.75rem -1rem;
    border-top: 1px solid #e9e5df;
    border-bottom: 1px solid #e9e5df;
}

.gill-verse-header:first-child {
    margin-top: 0;
    border-top: none;
}

.gill-verse-content {
    margin-bottom: 1rem;
}

.gill-verse-content:last-child {
    margin-bottom: 0;
}

.gill-verse-content.gill-no-content {
    color: #6c757d;
    font-style: italic;
    padding: 0.5rem 0;
}

.gill-chapter-divider {
    margin: 1.5rem 0;
    border-top: 2px solid #dee2e6;
}

/* ==========================================================================
   COMMENTARY TEXT ELEMENTS
   ========================================================================== */

/* Paragraphs */
.gill-para {
    margin-bottom: 1em;
    text-align: justify;
}

.gill-para:first-child {
    margin-top: 0;
}

.gill-para:last-child {
    margin-bottom: 0;
}

/* Scripture quotations - styled distinctly */
.gill-scripture {
    color: #1a4a7a;
    font-weight: 500;
}

/* Hebrew text */
.gill-hebrew {
    font-family: "SBL Hebrew", "Ezra SIL", "Times New Roman", serif;
    direction: rtl;
    unicode-bidi: isolate;
    font-size: 1.1em;
    color: #5c4033;
    background: #f9f7f4;
    padding: 0 0.25em;
    border-radius: 2px;
}

/* Show transliteration after Hebrew */
.gill-hebrew::after {
    content: " (" attr(data-translit) ")";
    direction: ltr;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 0.85em;
    color: #777;
}

/* Greek text */
.gill-greek {
    font-family: "SBL Greek", "Gentium Plus", "Times New Roman", serif;
    font-style: italic;
    color: #5c4033;
    background: #f9f7f4;
    padding: 0 0.25em;
    border-radius: 2px;
}

/* Show transliteration after Greek */
.gill-greek::after {
    content: " (" attr(data-translit) ")";
    font-style: normal;
    font-size: 0.85em;
    color: #777;
}

/* Bible reference links */
.gill-ref {
    color: #0066cc;
    text-decoration: none;
    border-bottom: 1px dotted #0066cc;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gill-ref:hover {
    color: #004499;
    border-bottom-style: solid;
}

/* Cross-reference links (See commentary on...) */
.gill-crossref {
    color: #6c757d;
    text-decoration: none;
    font-style: italic;
    font-size: 0.9em;
    cursor: pointer;
    transition: color 0.15s ease;
}

.gill-crossref:hover {
    color: #495057;
    text-decoration: underline;
}

/* Footnote markers */
.gill-footnote {
    font-size: 0.8em;
    vertical-align: super;
    color: #6c757d;
    font-weight: 500;
}

/* Block quotes (Targum, etc.) */
.gill-quote {
    margin: 1em 1.5em;
    padding: 0.75em 1em;
    border-left: 3px solid #c9a959;
    background: #fdfbf5;
    font-style: italic;
    color: #555;
}

.gill-quote::before {
    content: none;
}

/* ==========================================================================
   CROSS-REFERENCE INDICATOR
   ========================================================================== */

.gill-crossref-notice {
    display: flex;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    background: #f0f7ff;
    border: 1px solid #b8daff;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.gill-crossref-notice i {
    color: #0066cc;
    margin-right: 0.5rem;
    margin-top: 0.15rem;
}

.gill-crossref-notice .gill-crossref-link {
    color: #0066cc;
    text-decoration: underline;
    cursor: pointer;
}

.gill-crossref-notice .gill-crossref-link:hover {
    color: #004499;
}

/* ==========================================================================
   SEARCH RESULTS
   ========================================================================== */

.gill-search-results {
    margin-top: 1rem;
}

.gill-search-result {
    padding: 0.75rem;
    border-bottom: 1px solid #e9ecef;
    cursor: pointer;
    transition: background 0.15s ease;
}

.gill-search-result:hover {
    background: #f8f9fa;
}

.gill-search-result:last-child {
    border-bottom: none;
}

.gill-search-result-ref {
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.gill-search-result-snippet {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.5;
}

.gill-search-result-snippet mark {
    background: #fff3cd;
    padding: 0 0.15em;
    border-radius: 2px;
}

/* ==========================================================================
   SEARCH TAB ADDITION
   ========================================================================== */

.gill-search-tab {
    display: none;
    padding: 1rem;
}

.gill-search-tab.active {
    display: block;
}

.gill-search-input-wrapper {
    position: relative;
    margin-bottom: 0.75rem;
}

.gill-search-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.95rem;
}

.gill-search-input:focus {
    border-color: #80bdff;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
    .gill-commentary-content {
        max-height: 300px;
        padding: 0.75rem;
        font-size: 0.9rem;
    }

    .gill-quote {
        margin: 0.75em 0.5em;
        padding: 0.5em 0.75em;
    }

    .gill-hebrew::after,
    .gill-greek::after {
        display: block;
        margin-top: 0.25em;
    }
}

/* Mobile-only inline header inside commentary content */
.gill-mobile-header {
    display: none;
}

@media (max-width: 576px) {
    /* On mobile, commentary auto-shows — no toggle needed */
    .gill-commentary-section {
        margin-top: 0.75rem;
        padding-top: 0.5rem;
        border-top: 1px solid #dee2e6;
    }

    /* Hide header entirely — commentary loads automatically */
    .gill-commentary-header {
        display: none;
    }

    .gill-commentary-content {
        max-height: none;
        padding: 0.6rem;
        font-size: 0.85rem;
    }

    /* Small inline header visible on mobile */
    .gill-mobile-header {
        display: block;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-size: 0.7rem;
        font-weight: 600;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        margin-bottom: 0.5rem;
        padding-bottom: 0.35rem;
        border-bottom: 1px solid #eee;
    }

    .gill-mobile-header i {
        margin-right: 0.3em;
        font-size: 0.65rem;
    }

    [data-theme="dark"] .gill-mobile-header {
        color: #8a9ab0;
        border-bottom-color: #3d4450;
    }

    /* Search bar still needs to be visible */
    .gill-search-bar {
        margin-bottom: 0.5rem;
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .gill-commentary-content {
        max-height: none;
        overflow: visible;
        border: none;
        background: white;
    }

    .gill-toggle-btn {
        display: none;
    }

    .gill-ref,
    .gill-crossref {
        color: inherit;
        border: none;
        text-decoration: none;
    }

    .gill-hebrew::after,
    .gill-greek::after {
        color: #666;
    }
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */

[data-theme="dark"] .gill-commentary-section {
    border-top-color: #3d4450;
}

[data-theme="dark"] .gill-commentary-title {
    color: #c8ccd0;
}

[data-theme="dark"] .gill-commentary-title i {
    color: #8a9199;
}

[data-theme="dark"] button.gill-toggle-btn {
    background: #252530;
    border-color: #7fa8e8;
    color: #7fa8e8;
}

[data-theme="dark"] button.gill-toggle-btn:hover {
    background: #2a4080;
    border-color: #2a4080;
    color: white;
}

[data-theme="dark"] button.gill-toggle-btn.active {
    background: #2a4080;
    border-color: #2a4080;
    color: white;
}

[data-theme="dark"] button.gill-toggle-btn.active:hover {
    background: #335099;
    border-color: #335099;
}

[data-theme="dark"] #gillCommentaryContent,
[data-theme="dark"] .gill-commentary-content {
    background: #1e2328;
    border-color: #3d4450;
    color: #c8ccd0;
}

[data-theme="dark"] .gill-loading {
    color: #8a9199;
}

[data-theme="dark"] .gill-error {
    background: #3b2020;
    border-color: #5c3333;
    color: #f5a5a5;
}

[data-theme="dark"] .gill-info {
    background: #252a30;
    border-color: #3d4450;
    color: #8a9199;
}

/* Commentary text elements - dark mode */
[data-theme="dark"] .gill-scripture {
    color: #6db3f2;
}

[data-theme="dark"] .gill-hebrew {
    color: #d4a574;
    background: #2a2520;
}

[data-theme="dark"] .gill-hebrew::after {
    color: #8a9199;
}

[data-theme="dark"] .gill-greek {
    color: #d4a574;
    background: #2a2520;
}

[data-theme="dark"] .gill-greek::after {
    color: #8a9199;
}

[data-theme="dark"] .gill-ref {
    color: #6db3f2;
    border-bottom-color: #6db3f2;
}

[data-theme="dark"] .gill-ref:hover {
    color: #93c5fd;
    border-bottom-color: #93c5fd;
}

[data-theme="dark"] .gill-crossref {
    color: #8a9199;
}

[data-theme="dark"] .gill-crossref:hover {
    color: #c8ccd0;
}

[data-theme="dark"] .gill-footnote {
    color: #8a9199;
}

[data-theme="dark"] .gill-quote {
    background: #252218;
    border-left-color: #b8942e;
    color: #b0b5bb;
}

[data-theme="dark"] .gill-crossref-notice {
    background: #1a2533;
    border-color: #2d4a6d;
}

[data-theme="dark"] .gill-crossref-notice i {
    color: #6db3f2;
}

[data-theme="dark"] .gill-crossref-notice .gill-crossref-link {
    color: #6db3f2;
}

[data-theme="dark"] .gill-crossref-notice .gill-crossref-link:hover {
    color: #93c5fd;
}

/* Search results - dark mode */
[data-theme="dark"] .gill-search-result {
    border-bottom-color: #3d4450;
}

[data-theme="dark"] .gill-search-result:hover {
    background: #252a30;
}

[data-theme="dark"] .gill-search-result-ref {
    color: #c8ccd0;
}

[data-theme="dark"] .gill-search-result-snippet {
    color: #8a9199;
}

[data-theme="dark"] .gill-search-result-snippet mark {
    background: #5c4d1a;
    color: #f5e6a3;
}

[data-theme="dark"] .gill-search-input {
    background: #1e2328;
    border-color: #3d4450;
    color: #c8ccd0;
}

[data-theme="dark"] .gill-search-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

/* Multi-verse display - dark mode */
[data-theme="dark"] .gill-verse-header {
    color: #c8ccd0;
    background: #252a30;
    border-top-color: #3d4450;
    border-bottom-color: #3d4450;
}

[data-theme="dark"] .gill-verse-content.gill-no-content {
    color: #8a9199;
}

[data-theme="dark"] .gill-chapter-divider {
    border-top-color: #4b5563;
}

/* ==========================================================================
   GILL COMMENTARY IN-CONTENT SEARCH
   ========================================================================== */

.gill-search-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
}

.gill-search-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.gill-search-icon {
    position: absolute;
    left: 0.75rem;
    color: #6c757d;
    font-size: 0.875rem;
    pointer-events: none;
}

.gill-search-bar .gill-search-input {
    width: 100%;
    padding: 0.4rem 0.75rem 0.4rem 2rem;
    font-size: 16px; /* Prevent iOS zoom */
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: #fff;
}

.gill-search-bar .gill-search-input:focus {
    outline: none;
    border-color: #395ba9;
    box-shadow: 0 0 0 2px rgba(57, 91, 169, 0.1);
}

.gill-search-bar .gill-search-input::placeholder {
    color: #adb5bd;
}

.gill-search-clear {
    position: absolute;
    right: 0.5rem;
    padding: 0.25rem;
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    line-height: 1;
    font-size: 1rem;
}

.gill-search-clear:hover {
    color: #495057;
}

.gill-search-bar .gill-search-results {
    font-size: 0.8rem;
    color: #6c757d;
    white-space: nowrap;
    min-width: 60px;
    text-align: center;
}

.gill-search-nav {
    display: flex;
    gap: 0.25rem;
}

.gill-search-nav-btn {
    padding: 0.25rem 0.5rem;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    color: #495057;
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1;
}

.gill-search-nav-btn:hover {
    background: #e9ecef;
    border-color: #ced4da;
}

/* Search highlight styling */
.gill-search-highlight {
    background: #fff3cd;
    padding: 0.1em 0.2em;
    border-radius: 2px;
}

.gill-search-highlight.current {
    background: #ffc107;
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.5);
}

/* Dark mode - in-content search */
[data-theme="dark"] .gill-search-bar {
    background: #252a30;
    border-color: #3d4450;
}

[data-theme="dark"] .gill-search-bar .gill-search-input {
    background: #1e2328;
    border-color: #3d4450;
    color: #c8ccd0;
}

[data-theme="dark"] .gill-search-bar .gill-search-input:focus {
    border-color: #7fa8e8;
    box-shadow: 0 0 0 2px rgba(127, 168, 232, 0.15);
}

[data-theme="dark"] .gill-search-bar .gill-search-input::placeholder {
    color: #6c757d;
}

[data-theme="dark"] .gill-search-icon {
    color: #8a9199;
}

[data-theme="dark"] .gill-search-clear {
    color: #8a9199;
}

[data-theme="dark"] .gill-search-clear:hover {
    color: #c8ccd0;
}

[data-theme="dark"] .gill-search-bar .gill-search-results {
    color: #8a9199;
}

[data-theme="dark"] .gill-search-nav-btn {
    background: #1e2328;
    border-color: #3d4450;
    color: #c8ccd0;
}

[data-theme="dark"] .gill-search-nav-btn:hover {
    background: #2d333b;
    border-color: #4b5563;
}

[data-theme="dark"] .gill-search-highlight {
    background: rgba(255, 193, 7, 0.3);
    color: #e8e0c8;
}

[data-theme="dark"] .gill-search-highlight.current {
    background: rgba(255, 193, 7, 0.5);
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.3);
}

/* Dark mode scrollbar for Gill commentary content */
[data-theme="dark"] #gillCommentaryContent {
    scrollbar-color: #555 #2a2a35;
}

[data-theme="dark"] #gillCommentaryContent::-webkit-scrollbar {
    width: 8px;
}

[data-theme="dark"] #gillCommentaryContent::-webkit-scrollbar-track {
    background: #2a2a35;
    border-radius: 4px;
}

[data-theme="dark"] #gillCommentaryContent::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

[data-theme="dark"] #gillCommentaryContent::-webkit-scrollbar-thumb:hover {
    background: #777;
}

/* ==========================================================================
   CROSS REFERENCES (Treasury of Scripture Knowledge)
   ========================================================================== */

.crossref-section {
    margin-top: 1.5rem;
    border-top: 1px solid #dee2e6;
    padding-top: 1rem;
}

.crossref-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.crossref-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.crossref-title i {
    color: #6c757d;
}

button.crossref-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: #fff;
    border: 1px solid #395ba9;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #395ba9;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: none;
    letter-spacing: normal;
}

button.crossref-toggle-btn:hover {
    background: #395ba9;
    color: white;
}

button.crossref-toggle-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(57, 91, 169, 0.25);
}

button.crossref-toggle-btn.active {
    background: #395ba9;
    color: white;
}

button.crossref-toggle-btn.active:hover {
    background: #2e4a8a;
    border-color: #2e4a8a;
}

button.crossref-toggle-btn i {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

/* Responsive text: short labels hidden on desktop */
.crossref-title-short,
.crossref-btn-short {
    display: none;
}

#crossrefContent,
.crossref-content {
    display: none !important;
    padding: 0.75rem;
    background: #fdfcfa;
    border: 1px solid #e9e5df;
    border-radius: 8px;
    max-height: 350px;
    overflow-y: auto;
    margin-top: 0.75rem;
}

#crossrefContent.show,
.crossref-content.show {
    display: block !important;
}

/* Loading and info states */
.crossref-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    color: #6c757d;
}

.crossref-loading .spinner-border {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
}

.crossref-error {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background: #fff5f5;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    color: #721c24;
    font-size: 0.85rem;
}

.crossref-info {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    color: #6c757d;
    font-size: 0.85rem;
    font-style: italic;
}

/* Scope note for multi-verse lookups */
.crossref-scope-note {
    font-size: 0.8rem;
    color: #6c757d;
    font-style: italic;
    margin-bottom: 0.5rem;
}

/* Reference count */
.crossref-count {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #eee;
}

/* Per-verse headers (multi-verse lookups) */
.crossref-verse-header {
    font-size: 0.85rem;
    font-weight: 600;
    color: #495057;
    background: #f1f3f4;
    padding: 0.4rem 0.75rem;
    margin: 1rem -1rem 0.5rem -1rem;
    border-top: 1px solid #e9e5df;
    border-bottom: 1px solid #e9e5df;
}

.crossref-verse-header.first {
    margin-top: 0;
    border-top: none;
}

.crossref-verse-count {
    font-weight: 400;
    color: #6c757d;
    font-size: 0.8rem;
}

/* Reference list */
.crossref-list {
    display: flex;
    flex-direction: column;
}

.crossref-item {
    border-bottom: 1px solid #f0ede8;
}

.crossref-item:last-child {
    border-bottom: none;
}

.crossref-item-row {
    display: flex;
    align-items: center;
    padding: 0.35rem 0;
    gap: 0.375rem;
}

/* Expand/collapse button */
.crossref-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    background: none;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    color: #6c757d;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
    font-size: 0.7rem;
}

.crossref-expand-btn:hover {
    background: #f0f0f0;
    border-color: #adb5bd;
    color: #333;
}

/* Reference link */
.crossref-ref-link {
    color: #0066cc;
    text-decoration: none;
    font-size: 0.9rem;
    cursor: pointer;
    transition: color 0.15s ease;
}

.crossref-ref-link:hover {
    color: #004499;
    text-decoration: underline;
}

/* Inline verse preview */
.crossref-preview {
    padding: 0.4rem 0.5rem 0.5rem 2rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #555;
    font-family: Georgia, "Times New Roman", serif;
}

.crossref-preview-loading {
    display: inline-flex;
    align-items: center;
    color: #6c757d;
    font-size: 0.85rem;
}

.crossref-preview-loading .spinner-border {
    width: 1rem;
    height: 1rem;
}

/* ==========================================================================
   CROSS REFERENCES - RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .crossref-content {
        max-height: 280px;
        padding: 0.5rem;
    }
}

@media (max-width: 576px) {
    .crossref-section {
        margin-top: 0.75rem;
        padding-top: 0.5rem;
    }

    /* Swap to short text on mobile */
    .crossref-title-full,
    .crossref-btn-full {
        display: none;
    }

    .crossref-title-short,
    .crossref-btn-short {
        display: inline;
    }

    /* Compact toggle button on mobile */
    button.crossref-toggle-btn {
        padding: 0.3rem 0.65rem;
        font-size: 0.75rem;
    }

    button.crossref-toggle-btn i {
        font-size: 0.65rem;
    }

    .crossref-title {
        font-size: 0.8rem;
    }

    .crossref-content {
        max-height: 250px;
        padding: 0.4rem;
    }

    .crossref-ref-link {
        font-size: 0.85rem;
    }

    .crossref-preview {
        padding-left: 1.5rem;
        font-size: 0.8rem;
    }
}

/* ==========================================================================
   CROSS REFERENCES - DARK MODE
   ========================================================================== */

[data-theme="dark"] .crossref-section {
    border-top-color: #3d4450;
}

[data-theme="dark"] .crossref-title {
    color: #c8ccd0;
}

[data-theme="dark"] .crossref-title i {
    color: #8a9199;
}

[data-theme="dark"] button.crossref-toggle-btn {
    background: #252530;
    border-color: #7fa8e8;
    color: #7fa8e8;
}

[data-theme="dark"] button.crossref-toggle-btn:hover {
    background: #2a4080;
    border-color: #2a4080;
    color: white;
}

[data-theme="dark"] button.crossref-toggle-btn.active {
    background: #2a4080;
    border-color: #2a4080;
    color: white;
}

[data-theme="dark"] button.crossref-toggle-btn.active:hover {
    background: #335099;
    border-color: #335099;
}

[data-theme="dark"] #crossrefContent,
[data-theme="dark"] .crossref-content {
    background: #1e2328;
    border-color: #3d4450;
}

[data-theme="dark"] .crossref-loading {
    color: #8a9199;
}

[data-theme="dark"] .crossref-error {
    background: #3b2020;
    border-color: #5c3333;
    color: #f5a5a5;
}

[data-theme="dark"] .crossref-info {
    background: #252a30;
    border-color: #3d4450;
    color: #8a9199;
}

[data-theme="dark"] .crossref-scope-note {
    color: #8a9199;
}

[data-theme="dark"] .crossref-count {
    color: #8a9199;
    border-bottom-color: #3d4450;
}

[data-theme="dark"] .crossref-verse-header {
    color: #c8ccd0;
    background: #252a30;
    border-top-color: #3d4450;
    border-bottom-color: #3d4450;
}

[data-theme="dark"] .crossref-verse-count {
    color: #8a9199;
}

[data-theme="dark"] .crossref-item {
    border-bottom-color: #3d4450;
}

[data-theme="dark"] .crossref-expand-btn {
    border-color: #3d4450;
    color: #8a9199;
}

[data-theme="dark"] .crossref-expand-btn:hover {
    background: #2d333b;
    border-color: #4b5563;
    color: #c8ccd0;
}

[data-theme="dark"] .crossref-ref-link {
    color: #6db3f2;
}

[data-theme="dark"] .crossref-ref-link:hover {
    color: #93c5fd;
}

[data-theme="dark"] .crossref-preview {
    color: #b0b5bb;
}

/* Dark mode scrollbar for cross-ref content */
[data-theme="dark"] #crossrefContent {
    scrollbar-color: #555 #2a2a35;
}

[data-theme="dark"] #crossrefContent::-webkit-scrollbar {
    width: 8px;
}

[data-theme="dark"] #crossrefContent::-webkit-scrollbar-track {
    background: #2a2a35;
    border-radius: 4px;
}

[data-theme="dark"] #crossrefContent::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

[data-theme="dark"] #crossrefContent::-webkit-scrollbar-thumb:hover {
    background: #777;
}

/* ==========================================================================
   CROSS REFERENCES - PRINT
   ========================================================================== */

@media print {
    .crossref-content {
        max-height: none;
        overflow: visible;
        border: none;
        background: white;
    }

    .crossref-toggle-btn {
        display: none;
    }

    .crossref-ref-link {
        color: inherit;
        text-decoration: none;
    }

    .crossref-expand-btn {
        display: none;
    }
}

/* ==========================================================================
   STRONG'S CONCORDANCE WORD STUDY
   ========================================================================== */

/* ---------- Clickable word styles ---------- */

/* Both mapped and unmapped words use same inline-block layout for alignment */
.strongs-word,
.strongs-word-plain {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    line-height: 1.2;
    margin: 0 1px;
}

/* Only mapped words get click/hover styling */
.strongs-word {
    border-bottom: 1px dotted #999;
    cursor: pointer;
    transition: all 0.15s ease;
    border-radius: 1px;
}

/* Plain words (no Strong's mapping) need bottom padding to match height of numbered words */
.strongs-word-plain {
    padding-bottom: 0.7em;
}

.strongs-word:hover {
    border-bottom-color: #395ba9;
    color: #395ba9;
    background: rgba(57, 91, 169, 0.05);
}

.strongs-word-active {
    background: rgba(57, 91, 169, 0.12);
    border-bottom: 2px solid #395ba9;
    color: #395ba9;
}

/* Inline Strong's ID labels (interlinear display below each word) */
.strongs-inline-id {
    display: block;
    font-size: 0.55em;
    line-height: 1;
    color: #7a8bb5;
    text-align: center;
    margin-top: 1px;
    font-family: 'Consolas', 'Monaco', monospace;
    letter-spacing: -0.5px;
    pointer-events: none;  /* clicks pass through to parent .strongs-word */
}

/* Extra line spacing when Strong's interlinear mode is active */
.strongs-interlinear {
    line-height: 2.8;
}

/* ---------- Popover container ---------- */

.strongs-popover {
    position: fixed;
    z-index: 1060;
    max-width: 340px;
    min-width: 240px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
    max-height: 380px;
    overflow-y: auto;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Arrow pointing at the word */
.strongs-popover-arrow {
    position: absolute;
    top: -7px;
    left: var(--strongs-arrow-left, 50%);
    transform: translateX(-50%);
    width: 14px;
    height: 7px;
    overflow: hidden;
}

.strongs-popover-arrow::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: #fff;
    border: 1px solid #dee2e6;
}

/* When popover is above the word, arrow points down */
.strongs-popover-above .strongs-popover-arrow {
    top: auto;
    bottom: -7px;
}

.strongs-popover-above .strongs-popover-arrow::before {
    top: auto;
    bottom: 1px;
}

.strongs-popover-content {
    padding: 0.75rem;
    position: relative;
}

/* Close button inside popover */
.strongs-popover-close {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #999;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
    z-index: 1;
}

.strongs-popover-close:hover {
    background: #f0f0f0;
    border-color: #dee2e6;
    color: #333;
}

/* ---------- Popover inner elements ---------- */

.strongs-popover-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    color: #6c757d;
}

.strongs-popover-empty {
    padding: 0.5rem;
    color: #6c757d;
    font-style: italic;
}

.strongs-entry-divider {
    border-top: 1px solid #e9ecef;
    margin: 0.75rem 0;
}

.strongs-entry-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.strongs-number {
    font-weight: 700;
    font-size: 0.9rem;
    color: #333;
}

.strongs-lang-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.strongs-lang-badge.strongs-hebrew {
    background: #f5efe6;
    color: #8b6914;
}

.strongs-lang-badge.strongs-greek {
    background: #e8f0fe;
    color: #1a5fb4;
}

.strongs-lemma {
    font-size: 1.3rem;
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.strongs-lemma.strongs-hebrew {
    font-family: "SBL Hebrew", "Ezra SIL", "Times New Roman", serif;
    color: #5c4033;
}

.strongs-lemma.strongs-greek {
    font-family: "SBL Greek", "Gentium Plus", "Times New Roman", serif;
    color: #1a4a7a;
}

.strongs-translit {
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 0.25rem;
}

.strongs-pronun {
    color: #777;
    font-size: 0.8rem;
}

.strongs-pos {
    font-size: 0.8rem;
    font-style: italic;
    color: #6c757d;
    margin-bottom: 0.375rem;
}

.strongs-definition {
    font-size: 0.85rem;
    color: #333;
    margin-bottom: 0.375rem;
    line-height: 1.55;
}

.strongs-usage {
    font-size: 0.8rem;
    color: #555;
    margin-bottom: 0.25rem;
    line-height: 1.45;
}

.strongs-occurrences-summary {
    font-size: 0.8rem;
    color: #555;
    margin-bottom: 0.375rem;
    line-height: 1.45;
}

.strongs-study-link-container {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #eee;
}

.strongs-study-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #395ba9;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.15s ease;
}

.strongs-study-link:hover {
    color: #2e4a8a;
    text-decoration: underline;
}

/* ---------- Occurrences panel ---------- */

.strongs-occurrences-section {
    margin-top: 1.5rem;
    border-top: 1px solid #dee2e6;
    padding-top: 1rem;
}

.strongs-occ-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.strongs-occ-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.strongs-occ-title i {
    color: #6c757d;
}

.strongs-occ-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    background: none;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.15s ease;
}

.strongs-occ-close:hover {
    background: #f0f0f0;
    border-color: #adb5bd;
    color: #333;
}

.strongs-occ-content {
    padding: 0.75rem;
    background: #fdfcfa;
    border: 1px solid #e9e5df;
    border-radius: 8px;
    max-height: 350px;
    overflow-y: auto;
}

.strongs-occ-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem;
    color: #6c757d;
}

.strongs-occ-error {
    padding: 0.75rem;
    color: #721c24;
    background: #fff5f5;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    font-size: 0.85rem;
}

.strongs-occ-count {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #eee;
}

.strongs-occ-list {
    display: flex;
    flex-direction: column;
}

.strongs-occ-item {
    padding: 0.4rem 0;
    border-bottom: 1px solid #f0ede8;
}

.strongs-occ-item:last-child {
    border-bottom: none;
}

.strongs-occ-ref {
    color: #0066cc;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease;
}

.strongs-occ-ref:hover {
    color: #004499;
    text-decoration: underline;
}

.strongs-occ-text {
    font-size: 0.8rem;
    color: #666;
    line-height: 1.5;
    margin-top: 0.15rem;
}

.strongs-occ-text mark {
    background: #fff3cd;
    padding: 0 0.15em;
    border-radius: 2px;
}

.strongs-occ-more-container {
    text-align: center;
    padding-top: 0.75rem;
}

.strongs-occ-load-more {
    display: inline-block;
    padding: 0.375rem 1rem;
    background: #fff;
    border: 1px solid #395ba9;
    border-radius: 6px;
    color: #395ba9;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.strongs-occ-load-more:hover {
    background: #395ba9;
    color: #fff;
}

/* ==========================================================================
   STRONG'S - RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .strongs-popover {
        max-width: 300px;
        max-height: 320px;
    }

    .strongs-occ-content {
        max-height: 280px;
    }
}

@media (max-width: 576px) {
    .strongs-popover {
        position: fixed;
        left: 8px !important;
        right: 8px;
        max-width: none;
        width: auto;
        bottom: auto;
        max-height: 50vh;
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    }

    .strongs-popover-arrow {
        display: none;
    }

    .strongs-occurrences-section {
        margin-top: 0.75rem;
        padding-top: 0.5rem;
    }

    .strongs-occ-content {
        max-height: 250px;
        padding: 0.5rem;
    }
}

/* ==========================================================================
   STRONG'S - PRINT
   ========================================================================== */

@media print {
    .strongs-word {
        border-bottom: none;
        cursor: default;
        display: inline;
        margin: 0;
    }

    .strongs-word-plain {
        display: inline;
        padding-bottom: 0;
    }

    .strongs-inline-id {
        display: none !important;
    }

    .strongs-popover {
        display: none !important;
    }

    .strongs-occurrences-section {
        display: none !important;
    }
}

/* ==========================================================================
   STRONG'S - DARK MODE
   ========================================================================== */

/* Word styles */
[data-theme="dark"] .strongs-word {
    border-bottom-color: #6c757d;
}

[data-theme="dark"] .strongs-word:hover {
    border-bottom-color: #7fa8e8;
    color: #7fa8e8;
    background: rgba(127, 168, 232, 0.08);
}

[data-theme="dark"] .strongs-word-active {
    background: rgba(127, 168, 232, 0.15);
    border-bottom-color: #7fa8e8;
    color: #7fa8e8;
}

/* Inline Strong's ID labels */
[data-theme="dark"] .strongs-inline-id {
    color: #8a9bc5;
}

/* Popover */
[data-theme="dark"] .strongs-popover {
    background: #1e2328;
    border-color: #3d4450;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .strongs-popover-close {
    color: #6c757d;
}

[data-theme="dark"] .strongs-popover-close:hover {
    background: #2a2f36;
    border-color: #3d4450;
    color: #c8ccd0;
}

[data-theme="dark"] .strongs-popover-arrow::before {
    background: #1e2328;
    border-color: #3d4450;
}

[data-theme="dark"] .strongs-popover-loading {
    color: #8a9199;
}

[data-theme="dark"] .strongs-popover-empty {
    color: #8a9199;
}

[data-theme="dark"] .strongs-entry-divider {
    border-top-color: #3d4450;
}

[data-theme="dark"] .strongs-number {
    color: #c8ccd0;
}

[data-theme="dark"] .strongs-lang-badge.strongs-hebrew {
    background: #2a2520;
    color: #d4a574;
}

[data-theme="dark"] .strongs-lang-badge.strongs-greek {
    background: #1a2533;
    color: #6db3f2;
}

[data-theme="dark"] .strongs-lemma.strongs-hebrew {
    color: #d4a574;
}

[data-theme="dark"] .strongs-lemma.strongs-greek {
    color: #6db3f2;
}

[data-theme="dark"] .strongs-translit {
    color: #b0b5bb;
}

[data-theme="dark"] .strongs-pronun {
    color: #8a9199;
}

[data-theme="dark"] .strongs-pos {
    color: #8a9199;
}

[data-theme="dark"] .strongs-definition {
    color: #c8ccd0;
}

[data-theme="dark"] .strongs-usage {
    color: #b0b5bb;
}

[data-theme="dark"] .strongs-occurrences-summary {
    color: #b0b5bb;
}

[data-theme="dark"] .strongs-study-link-container {
    border-top-color: #3d4450;
}

[data-theme="dark"] .strongs-study-link {
    color: #7fa8e8;
}

[data-theme="dark"] .strongs-study-link:hover {
    color: #93c5fd;
}

/* Occurrences panel - dark mode */
[data-theme="dark"] .strongs-occurrences-section {
    border-top-color: #3d4450;
}

[data-theme="dark"] .strongs-occ-title {
    color: #c8ccd0;
}

[data-theme="dark"] .strongs-occ-title i {
    color: #8a9199;
}

[data-theme="dark"] .strongs-occ-close {
    border-color: #3d4450;
    color: #8a9199;
}

[data-theme="dark"] .strongs-occ-close:hover {
    background: #2d333b;
    border-color: #4b5563;
    color: #c8ccd0;
}

[data-theme="dark"] .strongs-occ-content {
    background: #1e2328;
    border-color: #3d4450;
}

[data-theme="dark"] .strongs-occ-loading {
    color: #8a9199;
}

[data-theme="dark"] .strongs-occ-error {
    background: #3b2020;
    border-color: #5c3333;
    color: #f5a5a5;
}

[data-theme="dark"] .strongs-occ-count {
    color: #8a9199;
    border-bottom-color: #3d4450;
}

[data-theme="dark"] .strongs-occ-item {
    border-bottom-color: #3d4450;
}

[data-theme="dark"] .strongs-occ-ref {
    color: #6db3f2;
}

[data-theme="dark"] .strongs-occ-ref:hover {
    color: #93c5fd;
}

[data-theme="dark"] .strongs-occ-text {
    color: #8a9199;
}

[data-theme="dark"] .strongs-occ-text mark {
    background: #5c4d1a;
    color: #f5e6a3;
}

[data-theme="dark"] .strongs-occ-load-more {
    background: #252530;
    border-color: #7fa8e8;
    color: #7fa8e8;
}

[data-theme="dark"] .strongs-occ-load-more:hover {
    background: #2a4080;
    color: #fff;
}

/* Dark mode scrollbar for Strong's content */
[data-theme="dark"] .strongs-popover {
    scrollbar-color: #555 #2a2a35;
}

[data-theme="dark"] .strongs-popover::-webkit-scrollbar {
    width: 6px;
}

[data-theme="dark"] .strongs-popover::-webkit-scrollbar-track {
    background: #2a2a35;
    border-radius: 3px;
}

[data-theme="dark"] .strongs-popover::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 3px;
}

[data-theme="dark"] .strongs-occ-content {
    scrollbar-color: #555 #2a2a35;
}

[data-theme="dark"] .strongs-occ-content::-webkit-scrollbar {
    width: 8px;
}

[data-theme="dark"] .strongs-occ-content::-webkit-scrollbar-track {
    background: #2a2a35;
    border-radius: 4px;
}

[data-theme="dark"] .strongs-occ-content::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

[data-theme="dark"] .strongs-occ-content::-webkit-scrollbar-thumb:hover {
    background: #777;
}

/* === commentary.css === */
/**
 * Unified Commentary Styles
 *
 * Styles for the tabbed commentary system supporting Gill, Mahan,
 * Fortner, and future commentators. Gill's content classes remain
 * in gill.css; this file handles the tab bar, unified container,
 * and Mahan/Fortner content classes.
 *
 * @package PristineGrace
 * @since 4.5
 */

/* ==========================================================================
   COMMENTARY TAB BAR
   ========================================================================== */

.commentary-tabs-wrapper {
    position: relative;
}

.commentary-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border-bottom: 2px solid #dee2e6;
    padding: 0 0.5rem;
}

/* Scroll hint — hidden on desktop, shown on mobile when tabs overflow */
.commentary-tabs-scroll-hint {
    display: none;
}

.commentary-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.commentary-tab:hover {
    color: #395ba9;
    background: rgba(57, 91, 169, 0.04);
}

.commentary-tab.active {
    color: #395ba9;
    border-bottom-color: #395ba9;
    font-weight: 600;
}

/* Commentary detail label — shows full commentary name below tab bar */
.commentary-detail-label {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: #395ba9;
    margin: 0.5rem 0.5rem 0;
    padding: 0.2rem 0.5rem;
    background: rgba(57, 91, 169, 0.06);
    border-radius: 4px;
    display: block;
    width: fit-content;
}

.commentary-detail-label-name {
    font-weight: 400;
    color: #888;
    margin-left: 0.5rem;
    font-size: 0.75rem;
}

/* ==========================================================================
   COMMENTARY SECTION CONTAINER (replaces .gill-commentary-section)
   ========================================================================== */

.commentary-section {
    margin-top: 1.5rem;
    border-top: 1px solid #dee2e6;
    padding-top: 1rem;
}

.commentary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.commentary-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.commentary-title i {
    color: #6c757d;
}

/* Toggle button - reuses gill-toggle-btn styling pattern */
button.commentary-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: #fff;
    border: 1px solid #395ba9;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #395ba9;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: none;
    letter-spacing: normal;
}

button.commentary-toggle-btn:hover {
    background: #395ba9;
    color: white;
}

button.commentary-toggle-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(57, 91, 169, 0.25);
}

button.commentary-toggle-btn.active {
    background: #395ba9;
    color: white;
}

button.commentary-toggle-btn.active:hover {
    background: #2e4a8a;
    border-color: #2e4a8a;
}

button.commentary-toggle-btn i {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

button.commentary-toggle-btn.active i {
    transform: rotate(180deg);
}

/* Commentary content area */
.commentary-content {
    display: none !important;
    padding: 1rem;
    background: #fdfcfa;
    border: 1px solid #e9e5df;
    border-radius: 0 0 8px 8px;
    max-height: 400px;
    overflow-y: auto;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #333;
}

.commentary-content.show {
    display: block !important;
}

/* When tabs are shown, content gets top border removed (tab bar handles it) */
.commentary-tabs-wrapper ~ .commentary-search-bar + .commentary-content,
.commentary-tabs-wrapper ~ .commentary-content {
    border-top: none;
    border-radius: 0 0 8px 8px;
}

/* Loading state */
.commentary-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: #6c757d;
}

.commentary-loading .spinner-border {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.75rem;
}

/* Error state */
.commentary-error {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: #fff5f5;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    color: #721c24;
    font-size: 0.9rem;
}

/* Info state (no commentary available) */
.commentary-info {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    color: #6c757d;
    font-size: 0.9rem;
    font-style: italic;
}

/* ==========================================================================
   VERSE RANGE BADGE (for Mahan/Fortner range entries)
   ========================================================================== */

.commentary-verse-range {
    display: inline-block;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
    background: #f0f2f5;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    margin-bottom: 0.75rem;
    letter-spacing: 0.01em;
}

/* ==========================================================================
   ENTRY TITLE (for Mahan/Fortner titled entries)
   ========================================================================== */

.commentary-entry-title {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #eee;
}

/* ==========================================================================
   COMMENTARY SEARCH BAR (unified, replaces .gill-search-bar)
   ========================================================================== */

.commentary-search-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}

.commentary-search-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.commentary-search-icon {
    position: absolute;
    left: 0.75rem;
    color: #6c757d;
    font-size: 0.875rem;
    pointer-events: none;
}

.commentary-search-bar .commentary-search-input {
    width: 100%;
    padding: 0.4rem 0.75rem 0.4rem 2rem;
    font-size: 16px; /* Prevent iOS zoom */
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: #fff;
}

.commentary-search-bar .commentary-search-input:focus {
    outline: none;
    border-color: #395ba9;
    box-shadow: 0 0 0 2px rgba(57, 91, 169, 0.1);
}

.commentary-search-bar .commentary-search-input::placeholder {
    color: #adb5bd;
}

.commentary-search-clear {
    position: absolute;
    right: 0.5rem;
    padding: 0.25rem;
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    line-height: 1;
    font-size: 1rem;
}

.commentary-search-clear:hover {
    color: #495057;
}

.commentary-search-bar .commentary-search-results {
    font-size: 0.8rem;
    color: #6c757d;
    white-space: nowrap;
    min-width: 60px;
    text-align: center;
}

.commentary-search-nav {
    display: flex;
    gap: 0.25rem;
}

.commentary-search-nav-btn {
    padding: 0.25rem 0.5rem;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    color: #495057;
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1;
}

.commentary-search-nav-btn:hover {
    background: #e9ecef;
    border-color: #ced4da;
}

/* Search highlight styling */
.commentary-search-highlight {
    background: #fff3cd;
    padding: 0.1em 0.2em;
    border-radius: 2px;
}

.commentary-search-highlight.current {
    background: #ffc107;
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.5);
}

/* ==========================================================================
   MAHAN CONTENT CLASSES
   (Generated HTML classes from extract_mahan.php)
   ========================================================================== */

.mahan-heading {
    text-align: center;
    font-weight: bold;
    margin-bottom: 0.75em;
}

.mahan-title {
    text-align: center;
    margin-bottom: 0.75em;
}

.mahan-para {
    margin-bottom: 1em;
    text-align: justify;
}

.mahan-para:last-child {
    margin-bottom: 0;
}

.mahan-indent {
    margin-left: 2em;
    margin-bottom: 1em;
}

.mahan-quote {
    margin: 1em 1.5em;
    padding: 0.75em 1em;
    border-left: 3px solid #c9a959;
    background: #fdfbf5;
    font-style: italic;
    color: #555;
}

.mahan-right {
    text-align: right;
    margin-bottom: 0.75em;
}

/* Mahan scripture references */
a.mahan-ref {
    color: #0066cc;
    text-decoration: none;
    border-bottom: 1px dotted #0066cc;
    cursor: pointer;
    transition: all 0.15s ease;
}

a.mahan-ref:hover {
    color: #004499;
    border-bottom-style: solid;
}

/* ==========================================================================
   FORTNER CONTENT CLASSES
   (Generated HTML classes from extract_fortner.php)
   ========================================================================== */

.fortner-heading {
    text-align: center;
    font-weight: bold;
    margin-bottom: 0.75em;
}

.fortner-title {
    text-align: center;
    margin-bottom: 0.75em;
}

.fortner-para {
    margin-bottom: 1em;
    text-align: justify;
}

.fortner-para:last-child {
    margin-bottom: 0;
}

.fortner-indent {
    margin-left: 2em;
    margin-bottom: 1em;
}

.fortner-quote {
    margin: 1em 1.5em;
    padding: 0.75em 1em;
    border-left: 3px solid #c9a959;
    background: #fdfbf5;
    font-style: italic;
    color: #555;
}

.fortner-right {
    text-align: right;
    margin-bottom: 0.75em;
}

/* Fortner scripture references */
a.fortner-ref {
    color: #0066cc;
    text-decoration: none;
    border-bottom: 1px dotted #0066cc;
    cursor: pointer;
    transition: all 0.15s ease;
}

a.fortner-ref:hover {
    color: #004499;
    border-bottom-style: solid;
}

/* ==========================================================================
   CALVIN CONTENT CLASSES
   (Generated HTML classes from extract_cmti.php)
   ========================================================================== */

.calvin-heading {
    text-align: center;
    font-weight: bold;
    margin-bottom: 0.75em;
}

.calvin-title {
    text-align: center;
    margin-bottom: 0.75em;
}

.calvin-para {
    margin-bottom: 1em;
    text-align: justify;
}

.calvin-para:last-child {
    margin-bottom: 0;
}

.calvin-indent {
    margin-left: 2em;
    margin-bottom: 1em;
}

.calvin-quote {
    margin: 1em 1.5em;
    padding: 0.75em 1em;
    border-left: 3px solid #c9a959;
    background: #fdfbf5;
    font-style: italic;
    color: #555;
}

.calvin-right {
    text-align: right;
    margin-bottom: 0.75em;
}

/* Calvin scripture references */
a.calvin-ref {
    color: #0066cc;
    text-decoration: none;
    border-bottom: 1px dotted #0066cc;
    cursor: pointer;
    transition: all 0.15s ease;
}

a.calvin-ref:hover {
    color: #004499;
    border-bottom-style: solid;
}

/* Calvin unparseable scripture references */
.calvin-scripture {
    color: #4D80B3;
    font-style: italic;
}

/* Calvin Hebrew text */
.calvin-hebrew {
    font-family: 'SBL Hebrew', 'Ezra SIL', 'Times New Roman', serif;
    font-size: 1.1em;
    direction: rtl;
    unicode-bidi: bidi-override;
}

/* Calvin Greek text */
.calvin-greek {
    font-family: 'SBL Greek', 'Gentium Plus', 'Times New Roman', serif;
    font-size: 1.05em;
}

/* ==========================================================================
   POOLE CONTENT CLASSES
   (Generated HTML classes from extract_cmti.php)
   ========================================================================== */

.poole-heading {
    text-align: center;
    font-weight: bold;
    margin-bottom: 0.75em;
}

.poole-title {
    text-align: center;
    margin-bottom: 0.75em;
}

.poole-para {
    margin-bottom: 1em;
    text-align: justify;
}

.poole-para:last-child {
    margin-bottom: 0;
}

.poole-indent {
    margin-left: 2em;
    margin-bottom: 1em;
}

.poole-quote {
    margin: 1em 1.5em;
    padding: 0.75em 1em;
    border-left: 3px solid #c9a959;
    background: #fdfbf5;
    font-style: italic;
    color: #555;
}

.poole-right {
    text-align: right;
    margin-bottom: 0.75em;
}

/* Poole scripture references */
a.poole-ref {
    color: #0066cc;
    text-decoration: none;
    border-bottom: 1px dotted #0066cc;
    cursor: pointer;
    transition: all 0.15s ease;
}

a.poole-ref:hover {
    color: #004499;
    border-bottom-style: solid;
}

.poole-scripture {
    color: #4D80B3;
    font-style: italic;
}

/* ==========================================================================
   HAWKER CONTENT CLASSES
   (Generated HTML classes from extract_cmti.php)
   ========================================================================== */

.hawker-heading {
    text-align: center;
    font-weight: bold;
    margin-bottom: 0.75em;
}

.hawker-title {
    text-align: center;
    margin-bottom: 0.75em;
}

.hawker-para {
    margin-bottom: 1em;
    text-align: justify;
}

.hawker-para:last-child {
    margin-bottom: 0;
}

.hawker-indent {
    margin-left: 2em;
    margin-bottom: 1em;
}

.hawker-quote {
    margin: 1em 1.5em;
    padding: 0.75em 1em;
    border-left: 3px solid #c9a959;
    background: #fdfbf5;
    font-style: italic;
    color: #555;
}

.hawker-right {
    text-align: right;
    margin-bottom: 0.75em;
}

/* Hawker scripture references */
a.hawker-ref {
    color: #0066cc;
    text-decoration: none;
    border-bottom: 1px dotted #0066cc;
    cursor: pointer;
    transition: all 0.15s ease;
}

a.hawker-ref:hover {
    color: #004499;
    border-bottom-style: solid;
}

.hawker-scripture {
    color: #4D80B3;
    font-style: italic;
}

/* ==========================================================================
   LUTHER CONTENT CLASSES
   (Generated HTML classes from extract_cmti.php)
   ========================================================================== */

.luther-heading {
    text-align: center;
    font-weight: bold;
    margin-bottom: 0.75em;
}

.luther-title {
    text-align: center;
    margin-bottom: 0.75em;
}

.luther-para {
    margin-bottom: 1em;
    text-align: justify;
}

.luther-para:last-child {
    margin-bottom: 0;
}

.luther-indent {
    margin-left: 2em;
    margin-bottom: 1em;
}

.luther-quote {
    margin: 1em 1.5em;
    padding: 0.75em 1em;
    border-left: 3px solid #c9a959;
    background: #fdfbf5;
    font-style: italic;
    color: #555;
}

.luther-right {
    text-align: right;
    margin-bottom: 0.75em;
}

.luther-scripture {
    color: #4D80B3;
    font-style: italic;
}

/* ==========================================================================
   MATTHEW HENRY CONTENT CLASSES
   (Generated HTML classes from extract_mhc.py)
   ========================================================================== */

.mhc-heading {
    display: block;
    text-align: center;
    font-weight: bold;
    margin-bottom: 0.75em;
    font-style: italic;
}

.mhc-para {
    margin-bottom: 1em;
    text-align: justify;
}

.mhc-para:last-child {
    margin-bottom: 0;
}

.mhc-verse-text {
    font-size: 1.05em;
    font-weight: 500;
    color: #4a3520;
}

[data-theme="dark"] .mhc-verse-text {
    color: #d4c4a8;
}

/* ==========================================================================
   SPURGEON'S TREASURY OF DAVID CONTENT CLASSES
   ========================================================================== */

.treasury-heading {
    text-align: center;
    font-weight: bold;
    margin-bottom: 0.75em;
}

.treasury-para {
    margin-bottom: 1em;
    text-align: justify;
}

.treasury-para:last-child {
    margin-bottom: 0;
}

.treasury-indent {
    margin-left: 2em;
    margin-bottom: 1em;
}

.treasury-quote {
    margin: 1em 1.5em;
    padding: 0.75em 1em;
    border-left: 3px solid #c9a959;
    background: #fdfbf5;
    font-style: italic;
    color: #555;
}

.treasury-right {
    text-align: right;
    margin-bottom: 0.75em;
}

.treasury-scripture {
    color: #4D80B3;
    font-style: italic;
}

a.treasury-ref {
    color: #0066cc;
    text-decoration: none;
    border-bottom: 1px dotted #0066cc;
    cursor: pointer;
    transition: all 0.15s ease;
}

a.treasury-ref:hover {
    color: #004499;
    border-bottom-style: solid;
}

/* ==========================================================================
   MOBILE INLINE HEADER
   ========================================================================== */

.commentary-mobile-header {
    display: none;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
    .commentary-content {
        max-height: 300px;
        padding: 0.75rem;
        font-size: 0.9rem;
    }

    .commentary-tabs {
        padding: 0 0.25rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .commentary-tabs::-webkit-scrollbar {
        display: none;
    }

    .commentary-tab {
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
        flex-shrink: 0;
    }

    /* Scroll hint gradient for tabs */
    .commentary-tabs-scroll-hint {
        display: flex;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 2px;
        width: 36px;
        pointer-events: none;
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.95));
        align-items: center;
        justify-content: flex-end;
        padding-right: 4px;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .commentary-tabs-scroll-hint.visible {
        opacity: 1;
    }

    .commentary-tabs-scroll-hint i {
        color: #6c757d;
        font-size: 0.7rem;
        animation: commentaryTabScrollPulse 1.5s ease-in-out infinite;
    }

    @keyframes commentaryTabScrollPulse {
        0%, 100% { transform: translateX(0); opacity: 0.6; }
        50% { transform: translateX(3px); opacity: 1; }
    }

    .mhc-verse-text {
        font-size: 1em;
    }

    .mahan-quote,
    .fortner-quote,
    .calvin-quote,
    .poole-quote,
    .hawker-quote,
    .luther-quote,
    .treasury-quote {
        margin: 0.75em 0.5em;
        padding: 0.5em 0.75em;
    }
}

@media (max-width: 576px) {
    /* On mobile, commentary auto-shows - no toggle needed */
    .commentary-section {
        margin-top: 0.75rem;
        padding-top: 0.5rem;
        border-top: 1px solid #dee2e6;
    }

    /* Hide header entirely - commentary loads automatically */
    .commentary-header {
        display: none;
    }

    .commentary-content {
        max-height: none;
        padding: 0.6rem;
        font-size: 0.85rem;
    }

    /* Small inline header visible on mobile */
    .commentary-mobile-header {
        display: block;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-size: 0.7rem;
        font-weight: 600;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        margin-bottom: 0.5rem;
        padding-bottom: 0.35rem;
        border-bottom: 1px solid #eee;
    }

    .commentary-mobile-header i {
        margin-right: 0.3em;
        font-size: 0.65rem;
    }

    /* Tabs stay visible on mobile for switching — scroll horizontally */
    .commentary-tabs {
        padding: 0;
        margin-bottom: 0;
    }

    .commentary-tab {
        flex-shrink: 0;
        padding: 0.4rem 0.65rem;
        font-size: 0.75rem;
    }

    .commentary-detail-label {
        font-size: 0.72rem;
        margin: 0.35rem 0.35rem 0;
        padding: 0.15rem 0.4rem;
    }

    .commentary-detail-label-name {
        font-size: 0.68rem;
    }

    /* Search bar still needs to be visible */
    .commentary-search-bar {
        margin-bottom: 0;
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .commentary-content {
        max-height: none;
        overflow: visible;
        border: none;
        background: white;
    }

    .commentary-toggle-btn {
        display: none;
    }

    .commentary-tabs {
        display: none;
    }

    .commentary-detail-label {
        display: none;
    }

    a.mahan-ref,
    a.fortner-ref,
    a.calvin-ref,
    a.poole-ref,
    a.hawker-ref,
    a.treasury-ref {
        color: inherit;
        border: none;
        text-decoration: none;
    }
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */

/* Tab bar */
[data-theme="dark"] .commentary-tabs {
    border-bottom-color: #3d4450;
}

[data-theme="dark"] .commentary-tab {
    color: #8a9199;
}

[data-theme="dark"] .commentary-tab:hover {
    color: #7fa8e8;
    background: rgba(127, 168, 232, 0.06);
}

[data-theme="dark"] .commentary-tab.active {
    color: #7fa8e8;
    border-bottom-color: #7fa8e8;
}

/* Scroll hint dark mode */
[data-theme="dark"] .commentary-tabs-scroll-hint {
    background: linear-gradient(to right, transparent, rgba(30, 33, 39, 0.95));
}

[data-theme="dark"] .commentary-tabs-scroll-hint i {
    color: #8a9199;
}

/* Detail label */
[data-theme="dark"] .commentary-detail-label {
    color: #7fa8e8;
    background: rgba(127, 168, 232, 0.08);
}

[data-theme="dark"] .commentary-detail-label-name {
    color: #777;
}

/* Section */
[data-theme="dark"] .commentary-section {
    border-top-color: #3d4450;
}

[data-theme="dark"] .commentary-title {
    color: #c8ccd0;
}

[data-theme="dark"] .commentary-title i {
    color: #8a9199;
}

/* Toggle button */
[data-theme="dark"] button.commentary-toggle-btn {
    background: #252530;
    border-color: #7fa8e8;
    color: #7fa8e8;
}

[data-theme="dark"] button.commentary-toggle-btn:hover {
    background: #2a4080;
    border-color: #2a4080;
    color: white;
}

[data-theme="dark"] button.commentary-toggle-btn.active {
    background: #2a4080;
    border-color: #2a4080;
    color: white;
}

[data-theme="dark"] button.commentary-toggle-btn.active:hover {
    background: #335099;
    border-color: #335099;
}

/* Content area */
[data-theme="dark"] .commentary-content {
    background: #1e2328;
    border-color: #3d4450;
    color: #c8ccd0;
}

[data-theme="dark"] .commentary-loading {
    color: #8a9199;
}

[data-theme="dark"] .commentary-error {
    background: #3b2020;
    border-color: #5c3333;
    color: #f5a5a5;
}

[data-theme="dark"] .commentary-info {
    background: #252a30;
    border-color: #3d4450;
    color: #8a9199;
}

/* Verse range badge */
[data-theme="dark"] .commentary-verse-range {
    color: #8a9199;
    background: #2d333b;
}

/* Entry title */
[data-theme="dark"] .commentary-entry-title {
    color: #c8ccd0;
    border-bottom-color: #3d4450;
}

/* Mobile header */
[data-theme="dark"] .commentary-mobile-header {
    color: #8a9ab0;
    border-bottom-color: #3d4450;
}

/* Search bar */
[data-theme="dark"] .commentary-search-bar {
    background: #252a30;
    border-color: #3d4450;
}

[data-theme="dark"] .commentary-search-bar .commentary-search-input {
    background: #1e2328;
    border-color: #3d4450;
    color: #c8ccd0;
}

[data-theme="dark"] .commentary-search-bar .commentary-search-input:focus {
    border-color: #7fa8e8;
    box-shadow: 0 0 0 2px rgba(127, 168, 232, 0.15);
}

[data-theme="dark"] .commentary-search-bar .commentary-search-input::placeholder {
    color: #6c757d;
}

[data-theme="dark"] .commentary-search-icon {
    color: #8a9199;
}

[data-theme="dark"] .commentary-search-clear {
    color: #8a9199;
}

[data-theme="dark"] .commentary-search-clear:hover {
    color: #c8ccd0;
}

[data-theme="dark"] .commentary-search-bar .commentary-search-results {
    color: #8a9199;
}

[data-theme="dark"] .commentary-search-nav-btn {
    background: #1e2328;
    border-color: #3d4450;
    color: #c8ccd0;
}

[data-theme="dark"] .commentary-search-nav-btn:hover {
    background: #2d333b;
    border-color: #4b5563;
}

[data-theme="dark"] .commentary-search-highlight {
    background: rgba(255, 193, 7, 0.3);
    color: #e8e0c8;
}

[data-theme="dark"] .commentary-search-highlight.current {
    background: rgba(255, 193, 7, 0.5);
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.3);
}

/* Mahan content - dark mode */
[data-theme="dark"] .mahan-quote {
    background: #252218;
    border-left-color: #b8942e;
    color: #b0b5bb;
}

[data-theme="dark"] a.mahan-ref {
    color: #6db3f2;
    border-bottom-color: #6db3f2;
}

[data-theme="dark"] a.mahan-ref:hover {
    color: #93c5fd;
    border-bottom-color: #93c5fd;
}

/* Fortner content - dark mode */
[data-theme="dark"] .fortner-quote {
    background: #252218;
    border-left-color: #b8942e;
    color: #b0b5bb;
}

[data-theme="dark"] a.fortner-ref {
    color: #6db3f2;
    border-bottom-color: #6db3f2;
}

[data-theme="dark"] a.fortner-ref:hover {
    color: #93c5fd;
    border-bottom-color: #93c5fd;
}

/* Calvin content - dark mode */
[data-theme="dark"] .calvin-quote {
    background: #252218;
    border-left-color: #b8942e;
    color: #b0b5bb;
}

[data-theme="dark"] a.calvin-ref {
    color: #6db3f2;
    border-bottom-color: #6db3f2;
}

[data-theme="dark"] a.calvin-ref:hover {
    color: #93c5fd;
    border-bottom-color: #93c5fd;
}

[data-theme="dark"] .calvin-scripture {
    color: #7fa8e8;
}

[data-theme="dark"] .calvin-hebrew {
    color: #e0d8c0;
}

[data-theme="dark"] .calvin-greek {
    color: #d8dce0;
}

/* Poole content - dark mode */
[data-theme="dark"] .poole-quote {
    background: #252218;
    border-left-color: #b8942e;
    color: #b0b5bb;
}

[data-theme="dark"] a.poole-ref {
    color: #6db3f2;
    border-bottom-color: #6db3f2;
}

[data-theme="dark"] a.poole-ref:hover {
    color: #93c5fd;
    border-bottom-color: #93c5fd;
}

[data-theme="dark"] .poole-scripture {
    color: #7fa8e8;
}

/* Hawker content - dark mode */
[data-theme="dark"] .hawker-quote {
    background: #252218;
    border-left-color: #b8942e;
    color: #b0b5bb;
}

[data-theme="dark"] a.hawker-ref {
    color: #6db3f2;
    border-bottom-color: #6db3f2;
}

[data-theme="dark"] a.hawker-ref:hover {
    color: #93c5fd;
    border-bottom-color: #93c5fd;
}

[data-theme="dark"] .hawker-scripture {
    color: #7fa8e8;
}

/* Luther content - dark mode */
[data-theme="dark"] .luther-quote {
    background: #252218;
    border-left-color: #b8942e;
    color: #b0b5bb;
}

[data-theme="dark"] .luther-scripture {
    color: #7fa8e8;
}

/* Treasury of David content - dark mode */
[data-theme="dark"] .treasury-quote {
    background: #252218;
    border-left-color: #b8942e;
    color: #b0b5bb;
}

[data-theme="dark"] a.treasury-ref {
    color: #6db3f2;
    border-bottom-color: #6db3f2;
}

[data-theme="dark"] a.treasury-ref:hover {
    color: #93c5fd;
    border-bottom-color: #93c5fd;
}

[data-theme="dark"] .treasury-scripture {
    color: #7fa8e8;
}

/* Dark mode scrollbar */
[data-theme="dark"] .commentary-content {
    scrollbar-color: #555 #2a2a35;
}

[data-theme="dark"] .commentary-content::-webkit-scrollbar {
    width: 8px;
}

[data-theme="dark"] .commentary-content::-webkit-scrollbar-track {
    background: #2a2a35;
    border-radius: 4px;
}

[data-theme="dark"] .commentary-content::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

[data-theme="dark"] .commentary-content::-webkit-scrollbar-thumb:hover {
    background: #777;
}

/* ==========================================================================
   RESTRICTED COMMENTARY (non-member login prompt)
   ========================================================================== */

.commentary-restricted-snippet {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #495057;
    position: relative;
    -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
}

.commentary-restricted-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1.5rem 1.5rem;
    background: #f8f9fa;
    border: 1px solid #e0e4e8;
    border-radius: 8px;
    margin: 0 0.75rem 0.75rem;
}

.commentary-restricted-icon {
    font-size: 1.5rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
}

.commentary-restricted-message {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #495057;
    margin-bottom: 1rem;
    max-width: 360px;
}

.commentary-restricted-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.commentary-restricted-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 1.25rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.commentary-restricted-btn-primary {
    background: #3b71ca;
    color: #fff;
    border: 1px solid #3b71ca;
}

.commentary-restricted-btn-primary:hover {
    background: #305baf;
    border-color: #305baf;
    color: #fff;
    text-decoration: none;
}

.commentary-restricted-btn-secondary {
    background: transparent;
    color: #3b71ca;
    border: 1px solid #c8d1da;
}

.commentary-restricted-btn-secondary:hover {
    background: #f0f4f8;
    border-color: #3b71ca;
    color: #305baf;
    text-decoration: none;
}

/* Dark mode */
[data-theme="dark"] .commentary-restricted-snippet {
    color: #b0b5bb;
}

[data-theme="dark"] .commentary-restricted-prompt {
    background: #252a30;
    border-color: #3d4450;
}

[data-theme="dark"] .commentary-restricted-icon {
    color: #8a9199;
}

[data-theme="dark"] .commentary-restricted-message {
    color: #b0b5bb;
}

[data-theme="dark"] .commentary-restricted-btn-primary {
    background: #4a85d9;
    border-color: #4a85d9;
}

[data-theme="dark"] .commentary-restricted-btn-primary:hover {
    background: #5a93e0;
    border-color: #5a93e0;
}

[data-theme="dark"] .commentary-restricted-btn-secondary {
    color: #6db3f2;
    border-color: #3d4450;
}

[data-theme="dark"] .commentary-restricted-btn-secondary:hover {
    background: #2a3038;
    border-color: #6db3f2;
    color: #93c5fd;
}

/* Mobile */
@media (max-width: 576px) {
    .commentary-restricted-prompt {
        margin: 0 0.5rem 0.5rem;
        padding: 1rem;
    }

    .commentary-restricted-actions {
        flex-direction: column;
        width: 100%;
    }

    .commentary-restricted-btn {
        justify-content: center;
    }
}

/* === page-loader.css === */
/**
 * Page Loading Indicator
 * Progress bar at top + overlay for slow loads
 */

/* ============================================================================
   PROGRESS BAR
   ============================================================================ */
.page-loader-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #7fd1de, #304e96, #7fd1de);
    background-size: 200% 100%;
    z-index: 999999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

.page-loader-bar.active {
    opacity: 1;
    visibility: visible;
    animation: loader-progress 2s ease-out forwards, loader-shimmer 1s linear infinite;
}

@keyframes loader-progress {
    0% { width: 0; }
    20% { width: 30%; }
    50% { width: 60%; }
    80% { width: 80%; }
    100% { width: 95%; }
}

@keyframes loader-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================================
   OVERLAY
   ============================================================================ */
.page-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.85);
    z-index: 999998;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.page-loader-overlay.active {
    display: flex;
}

/* Dark mode */
[data-theme="dark"] .page-loader-overlay {
    background: rgba(20, 20, 30, 0.9);
}

/* ============================================================================
   SPINNER
   ============================================================================ */
.page-loader-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(48, 78, 150, 0.2);
    border-top-color: #304e96;
    border-radius: 50%;
    animation: loader-spin 0.8s linear infinite;
}

[data-theme="dark"] .page-loader-spinner {
    border-color: rgba(127, 209, 222, 0.2);
    border-top-color: #7fd1de;
}

@keyframes loader-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================================
   LOADING TEXT
   ============================================================================ */
.page-loader-text {
    margin-top: 16px;
    font-size: 0.9rem;
    color: #304e96;
    font-weight: 500;
}

.page-loader-text::after {
    content: '...';
    animation: loader-dots 1s steps(3, end) infinite;
}

@keyframes loader-dots {
    0% { content: ''; }
    33% { content: '.'; }
    66% { content: '..'; }
    100% { content: '...'; }
}

[data-theme="dark"] .page-loader-text {
    color: #7fd1de;
}

/* ============================================================================
   PREVENT DOUBLE-CLICK
   ============================================================================ */
body.page-loading a,
body.page-loading button[type="submit"] {
    pointer-events: none;
    cursor: wait;
}

body.page-loading {
    cursor: wait;
}

/* ============================================================================
   MOBILE
   ============================================================================ */
@media (max-width: 767px) {
    .page-loader-bar {
        height: 4px;
    }

    .page-loader-spinner {
        width: 36px;
        height: 36px;
    }

    .page-loader-text {
        font-size: 0.85rem;
    }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    .page-loader-bar,
    .page-loader-bar.active {
        animation: none;
        width: 100%;
    }

    .page-loader-spinner {
        animation: none;
    }

    .page-loader-text::after {
        animation: none;
    }
}

/* ============================================================================
   PRINT
   ============================================================================ */
@media print {
    .page-loader-bar,
    .page-loader-overlay {
        display: none !important;
    }
}

/* === scripture_tagger.css === */
/**
 * Scripture Tagger Styles - Pristine Grace
 *
 * Styles for scripture reference links and tooltips.
 * Designed to match the Blue Letter Bible look and feel.
 *
 * @package PristineGrace
 * @since 4.4
 */

/* ============================================================================
   SCRIPTURE REFERENCE LINKS
   ============================================================================ */

a.scripture-ref {
    color: #1a3c6e;
    text-decoration: underline;
    text-decoration-color: rgba(26, 60, 110, 0.4);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
    border: none !important;
    background: none !important;
}

a.scripture-ref:hover {
    color: #395ba9;
    text-decoration-color: rgba(57, 91, 169, 0.7);
}

a.scripture-ref:focus {
    outline: 2px solid rgba(57, 91, 169, 0.3);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Dark mode support */
[data-theme="dark"] a.scripture-ref {
    color: #7fa8e8;
    text-decoration-color: rgba(127, 168, 232, 0.4);
}

[data-theme="dark"] a.scripture-ref:hover {
    color: #a3c4f3;
    text-decoration-color: rgba(163, 196, 243, 0.7);
}

/* ============================================================================
   TOOLTIP CONTAINER
   ============================================================================ */

.scripture-tagger-tooltip {
    position: absolute;
    z-index: 10200;
    max-width: 420px;
    min-width: 280px;
    background: #fff;
    border: 1px solid #c0cfe0;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    animation: tooltipFadeIn 0.15s ease-out;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.scripture-tagger-tooltip.tooltip-above {
    animation: tooltipFadeInAbove 0.15s ease-out;
}

@keyframes tooltipFadeInAbove {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================================
   TOOLTIP HEADER
   ============================================================================ */

.scripture-tooltip-header {
    background: linear-gradient(to bottom, #4a6fa5, #3d5d8f);
    color: #fff;
    padding: 10px 14px;
    border-radius: 5px 5px 0 0;
    font-weight: 600;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.scripture-tooltip-header:hover {
    background: linear-gradient(to bottom, #5a7fb5, #4d6d9f);
}

.scripture-tooltip-header:hover .scripture-tooltip-reference {
    text-decoration: underline;
}

.scripture-tooltip-reference {
    flex: 1;
}

.scripture-tooltip-translation {
    font-weight: 400;
    font-size: 13px;
    opacity: 0.9;
    margin-left: 8px;
}

/* ============================================================================
   TOOLTIP CONTENT
   ============================================================================ */

.scripture-tooltip-content {
    padding: 14px;
    color: #333;
    background: #f8fafc;
    max-height: 200px;
    overflow-y: auto;
}

.scripture-tooltip-loading {
    color: #666;
    font-style: italic;
    text-align: center;
    padding: 10px;
}

.scripture-tooltip-text {
    line-height: 1.65;
}

.scripture-tooltip-abbrev {
    font-weight: 600;
    color: #1a3c6e;
}

.scripture-tooltip-text sup {
    font-size: 0.7em;
    color: #4a6fa5;
    font-weight: 700;
    margin-right: 2px;
    vertical-align: super;
}

.scripture-tooltip-verse {
    margin-bottom: 6px;
}

.scripture-tooltip-verse:last-child {
    margin-bottom: 0;
}

.scripture-tooltip-inline-ref {
    font-weight: 700;
    color: #1a3c6e;
    font-size: 0.95em;
}

.scripture-tooltip-error {
    color: #c53030;
    font-style: italic;
}

/* Chapter headers for multi-chapter/multi-reference lookups */
.scripture-tooltip-chapter-header {
    font-weight: 700;
    color: #1a3c6e;
    font-size: 13px;
    margin-bottom: 4px;
}

.scripture-tooltip-chapter-break {
    height: 1px;
    background: #d0dce8;
    margin: 10px 0;
}

/* ============================================================================
   TOOLTIP FOOTER
   ============================================================================ */

.scripture-tooltip-footer {
    background: #e8f0f8;
    padding: 8px 14px;
    border-top: 1px solid #d0dce8;
    border-radius: 0 0 5px 5px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.scripture-tooltip-powered {
    color: #666;
}

.scripture-tooltip-brand {
    color: #1a3c6e;
    font-weight: 700;
}

/* ============================================================================
   DARK MODE TOOLTIP
   ============================================================================ */

[data-theme="dark"] .scripture-tagger-tooltip {
    background: #1e2a3a;
    border-color: #3a4a5e;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .scripture-tooltip-header {
    background: linear-gradient(to bottom, #2d4a70, #243d5c);
}

[data-theme="dark"] .scripture-tooltip-content {
    background: #141e2a;
    color: #e0e6ed;
}

[data-theme="dark"] .scripture-tooltip-abbrev {
    color: #7fa8e8;
}

[data-theme="dark"] .scripture-tooltip-text sup {
    color: #7fa8e8;
}

[data-theme="dark"] .scripture-tooltip-inline-ref {
    color: #7fa8e8;
}

[data-theme="dark"] .scripture-tooltip-chapter-header {
    color: #7fa8e8;
}

[data-theme="dark"] .scripture-tooltip-chapter-break {
    background: #2a3a4e;
}

[data-theme="dark"] .scripture-tooltip-footer {
    background: #1a2636;
    border-color: #2a3a4e;
}

[data-theme="dark"] .scripture-tooltip-powered {
    color: #888;
}

[data-theme="dark"] .scripture-tooltip-brand {
    color: #7fa8e8;
}

/* ============================================================================
   SPECIAL CONTEXTS - Match existing BLB overrides
   ============================================================================ */

/* Hero sections with dark backgrounds - white links */
.article-hero a.scripture-ref,
.broadcaster-hero a.scripture-ref,
.broadcaster-hero a[class*="scripture-ref"],
.broadcaster-description a.scripture-ref,
.broadcaster-description a[class*="scripture-ref"] {
    color: rgba(255, 255, 255, 0.95) !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(255, 255, 255, 0.5) !important;
    border: none !important;
    border-bottom: none !important;
    background: none !important;
}

.article-hero a.scripture-ref:hover,
.broadcaster-hero a.scripture-ref:hover,
.broadcaster-description a.scripture-ref:hover {
    color: #fff !important;
    text-decoration-color: rgba(255, 255, 255, 0.8) !important;
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

@media (max-width: 480px) {
    .scripture-tagger-tooltip {
        max-width: calc(100vw - 80px);
        min-width: 220px;
        left: 40px !important;
        right: 40px !important;
    }

    .scripture-tooltip-header {
        padding: 8px 12px;
        font-size: 14px;
    }

    .scripture-tooltip-content {
        padding: 12px;
        font-size: 13px;
        max-height: 160px;
    }

    .scripture-tooltip-footer {
        padding: 6px 12px;
        font-size: 10px;
    }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    a.scripture-ref {
        color: inherit !important;
        text-decoration: none !important;
    }

    .scripture-tagger-tooltip {
        display: none !important;
    }
}

/* === reading_plan.css === */
/* ========================================
   BIBLE READING PLAN STYLES
   ======================================== */

/* --- CSS Variables --- */
:root {
    --rp-bg: #fff;
    --rp-text: #333;
    --rp-text-muted: #6c757d;
    --rp-border: #dee2e6;
    --rp-accent: #304e96;
    --rp-accent-light: rgba(48, 78, 150, 0.08);
    --rp-success: #198754;
    --rp-success-light: rgba(25, 135, 84, 0.1);
    --rp-card-bg: #f8f9fa;
    --rp-card-border: #dee2e6;
    --rp-card-hover: #e9ecef;
    --rp-progress-bg: #e9ecef;
    --rp-progress-fill: #304e96;
    --rp-check-color: #198754;
    --rp-link: #304e96;
    --rp-icon-muted: #adb5bd;
    --rp-guest-bg: #f8f5f0;
    --rp-guest-border: #d4a574;
}

[data-theme="dark"] {
    --rp-bg: #252538;
    --rp-text: #e0e0e0;
    --rp-text-muted: #a0a0a0;
    --rp-border: #404055;
    --rp-accent: #7fb3ff;
    --rp-accent-light: rgba(127, 179, 255, 0.1);
    --rp-success: #5cb85c;
    --rp-success-light: rgba(92, 184, 92, 0.1);
    --rp-card-bg: #2d2d44;
    --rp-card-border: #404055;
    --rp-card-hover: #363650;
    --rp-progress-bg: #404055;
    --rp-progress-fill: #7fb3ff;
    --rp-check-color: #5cb85c;
    --rp-link: #7fb3ff;
    --rp-icon-muted: #666;
    --rp-guest-bg: #2d2a24;
    --rp-guest-border: #8b7355;
}

/* --- Main Content Container --- */
.rp-content {
    padding: 1rem;
    color: var(--rp-text);
    min-height: 200px;
}

/* --- Guest State (not logged in) --- */
.rp-guest {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: var(--rp-guest-bg);
    border: 1px solid var(--rp-guest-border);
    border-radius: 8px;
    margin: 1rem 0;
}

.rp-guest i.bi-lock {
    font-size: 2.5rem;
    color: var(--rp-icon-muted);
    display: block;
    margin-bottom: 1rem;
}

.rp-guest h6 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--rp-text);
}

.rp-guest p {
    font-size: 0.9rem;
    color: var(--rp-text-muted);
    margin-bottom: 0.5rem;
}

.rp-guest a {
    color: var(--rp-link);
    text-decoration: none;
    font-weight: 500;
}

.rp-guest a:hover {
    text-decoration: underline;
}

.rp-guest i.bi-calendar-check {
    font-size: 2.5rem;
    color: var(--rp-icon-muted);
    display: block;
    margin-bottom: 1rem;
}

.rp-guest-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    margin: 0.75rem 0 1rem;
    font-size: 0.85rem;
    color: var(--rp-text-muted);
}

.rp-guest-features span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.rp-guest-features i {
    color: var(--rp-success);
    font-size: 0.9rem;
}

.rp-guest-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.rp-guest-btn {
    display: inline-block;
    padding: 0.45rem 1.25rem;
    background: #3b71ca;
    color: #fff !important;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: background 0.2s ease;
}

.rp-guest-btn:hover {
    background: #305baf;
}

[data-theme="dark"] .rp-guest-btn {
    background: #4a85d9;
}

[data-theme="dark"] .rp-guest-btn:hover {
    background: #5a93e0;
}

.rp-guest-signin {
    font-size: 0.8rem;
    color: var(--rp-text-muted);
}

/* --- Plan Selection State --- */
.rp-select-header {
    margin-bottom: 1rem;
}

.rp-select-header h6 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--rp-text);
    margin-bottom: 0.25rem;
}

.rp-select-subtitle {
    font-size: 0.85rem;
    color: var(--rp-text-muted);
    margin: 0;
}

/* Plan Cards */
.rp-plan-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.rp-plan-card {
    background: var(--rp-card-bg);
    border: 1px solid var(--rp-card-border);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.rp-plan-card:hover {
    background: var(--rp-card-hover);
    border-color: var(--rp-accent);
}

.rp-plan-card-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--rp-accent-light);
    color: var(--rp-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-top: 2px;
}

.rp-plan-card-body {
    flex: 1;
    min-width: 0;
}

.rp-plan-card-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--rp-text);
    margin-bottom: 0.15rem;
}

.rp-plan-card-desc {
    font-size: 0.8rem;
    color: var(--rp-text-muted);
    line-height: 1.4;
    margin-bottom: 0.35rem;
}

/* Hidden on desktop where descriptions show in full */
.rp-plan-card-toggle {
    display: none;
}

.rp-plan-card-meta {
    font-size: 0.75rem;
    color: var(--rp-text-muted);
}

.rp-plan-card-meta span {
    margin-right: 0.75rem;
}

.rp-plan-card-btn {
    flex-shrink: 0;
    align-self: center;
    background: var(--rp-accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.4rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
}

.rp-plan-card-btn:hover {
    opacity: 0.85;
}

/* --- Active Plan State --- */
.rp-active-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.rp-plan-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--rp-text);
}

.rp-day-label {
    font-size: 0.8rem;
    color: var(--rp-text-muted);
}

/* Progress Section */
.rp-progress-section {
    margin-bottom: 1rem;
}

.rp-progress-bar-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rp-progress-label {
    font-size: 0.75rem;
    color: var(--rp-text-muted);
    min-width: 45px;
}

.rp-progress-bar {
    flex: 1;
    height: 8px;
    background: var(--rp-progress-bg);
    border-radius: 4px;
    overflow: hidden;
}

.rp-progress-fill {
    height: 100%;
    background: var(--rp-progress-fill);
    border-radius: 4px;
    transition: width 0.4s ease;
    min-width: 0;
}

.rp-progress-pct {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rp-accent);
    min-width: 32px;
    text-align: right;
}

/* Section Titles */
.rp-section-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--rp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
    margin-top: 0;
}

/* Today's Readings */
.rp-today-section {
    margin-bottom: 1rem;
}

.rp-readings {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 0.6rem;
}

.rp-reading-item {
    display: flex;
    align-items: center;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    font-size: 0.88rem;
    color: var(--rp-text);
    background: var(--rp-card-bg);
    gap: 0.5rem;
}

.rp-reading-item > i {
    color: var(--rp-icon-muted);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.rp-reading-item.completed > i {
    color: var(--rp-check-color);
}

.rp-reading-item.completed {
    color: var(--rp-text-muted);
}

.rp-reading-item.completed .rp-reading-link {
    text-decoration: line-through;
    text-decoration-color: var(--rp-text-muted);
}

/* Reading checkbox button */
.rp-reading-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0.15rem;
    cursor: pointer;
    color: var(--rp-icon-muted);
    font-size: 0.85rem;
    flex-shrink: 0;
    border-radius: 50%;
    transition: color 0.15s, transform 0.1s;
}

.rp-reading-check:hover {
    color: var(--rp-accent);
    transform: scale(1.15);
}

.rp-reading-item.completed .rp-reading-check {
    color: var(--rp-check-color);
}

.rp-reading-item.completed .rp-reading-check:hover {
    color: var(--rp-text-muted);
}

/* Reading reference links */
.rp-reading-link {
    color: var(--rp-accent);
    text-decoration: none;
    cursor: pointer;
}

.rp-reading-link:hover {
    text-decoration: underline;
}

.rp-reading-item.completed .rp-reading-link {
    color: var(--rp-text-muted);
}

/* Mark Done Button */
.rp-mark-done-btn {
    display: inline-flex;
    align-items: center;
    background: var(--rp-success);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}

.rp-mark-done-btn:hover {
    opacity: 0.85;
}

.rp-mark-done-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Already Done State */
.rp-already-done {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--rp-check-color);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.5rem 0;
}

.rp-already-done i {
    font-size: 1.1rem;
}

/* Undo Button (shown when day is complete) */
.rp-undo-btn {
    background: none;
    border: none;
    color: var(--rp-text-muted);
    font-size: 0.78rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    text-decoration: underline;
    margin-left: 0.5rem;
}

.rp-undo-btn:hover {
    color: var(--rp-text);
}

/* --- Day Navigation --- */
.rp-day-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 0;
    margin: 0.5rem 0;
    border-top: 1px solid var(--rp-border);
    border-bottom: 1px solid var(--rp-border);
}

.rp-nav-btn {
    background: none;
    border: 1px solid var(--rp-border);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    color: var(--rp-text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    transition: background-color 0.15s, color 0.15s;
}

.rp-nav-btn:hover {
    background: var(--rp-card-bg);
    color: var(--rp-text);
}

.rp-nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.rp-nav-date {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rp-text);
    min-width: 80px;
    text-align: center;
}

.rp-today-btn {
    background: var(--rp-accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.2rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-left: 0.25rem;
}

.rp-today-btn:hover {
    opacity: 0.85;
}

/* --- Upcoming Days --- */
.rp-upcoming-section {
    margin-bottom: 1rem;
}

.rp-upcoming {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.rp-upcoming-day {
    background: var(--rp-card-bg);
    border: 1px solid var(--rp-card-border);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s;
}

.rp-upcoming-day:hover {
    background: var(--rp-card-hover);
}

.rp-upcoming-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.2rem;
}

.rp-upcoming-day-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--rp-text-muted);
}

.rp-upcoming-day-check {
    font-size: 0.75rem;
    color: var(--rp-check-color);
}

.rp-upcoming-day-readings {
    font-size: 0.8rem;
    color: var(--rp-text);
    line-height: 1.4;
}

.rp-upcoming-day.completed {
    opacity: 0.6;
}

.rp-upcoming-day.completed .rp-upcoming-day-readings {
    text-decoration: line-through;
    color: var(--rp-text-muted);
}

/* --- Actions Section --- */
.rp-actions-section {
    padding-top: 0.75rem;
    border-top: 1px solid var(--rp-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.rp-reminder-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--rp-text);
    cursor: pointer;
}

.rp-reminder-toggle input[type="checkbox"] {
    accent-color: var(--rp-accent);
}

.rp-cancel-btn {
    background: none;
    border: 1px solid var(--rp-border);
    border-radius: 4px;
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    color: var(--rp-text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.rp-cancel-btn:hover {
    color: #dc3545;
    border-color: #dc3545;
}

/* --- Completed State --- */
.rp-complete {
    text-align: center;
    padding: 2.5rem 1.5rem;
}

.rp-complete i.bi-trophy {
    font-size: 3rem;
    color: #f0ad4e;
    display: block;
    margin-bottom: 1rem;
}

.rp-complete h6 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--rp-text);
    margin-bottom: 0.5rem;
}

.rp-complete p {
    font-size: 0.9rem;
    color: var(--rp-text-muted);
    margin-bottom: 1rem;
}

.rp-complete-plan-name {
    font-size: 0.85rem;
    color: var(--rp-text-muted);
    margin-bottom: 1rem;
}

.rp-restart-btn {
    background: var(--rp-accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1.2rem;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}

.rp-restart-btn:hover {
    opacity: 0.85;
}

/* --- Loading State --- */
.rp-loading {
    text-align: center;
    padding: 2rem;
    color: var(--rp-text-muted);
    font-size: 0.9rem;
}

/* --- Error State --- */
.rp-error {
    text-align: center;
    padding: 1.5rem;
    color: #dc3545;
    font-size: 0.9rem;
}

/* --- Confirmation Dialog --- */
.rp-confirm-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    border-radius: 0.5rem;
}

.rp-confirm-dialog {
    background: var(--rp-bg);
    border-radius: 8px;
    padding: 1.5rem;
    max-width: 320px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.rp-confirm-dialog p {
    font-size: 0.9rem;
    color: var(--rp-text);
    margin-bottom: 1rem;
}

.rp-confirm-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.rp-confirm-yes {
    background: #dc3545;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.rp-confirm-no {
    background: var(--rp-card-bg);
    color: var(--rp-text);
    border: 1px solid var(--rp-border);
    border-radius: 6px;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    cursor: pointer;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 576px) {
    .rp-content {
        padding: 0.75rem;
    }

    .rp-guest {
        padding: 1.5rem 1rem;
    }

    .rp-guest i.bi-lock {
        font-size: 2rem;
    }

    .rp-plan-card {
        padding: 0.7rem;
    }

    .rp-plan-card-icon {
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
    }

    .rp-plan-card-desc {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .rp-plan-card-desc.expanded {
        display: block;
        -webkit-line-clamp: unset;
        overflow: visible;
    }

    .rp-plan-card-toggle {
        display: inline-block;
        font-size: 0.75rem;
        color: var(--rp-accent);
        cursor: pointer;
        padding: 0.15rem 0;
        font-weight: 500;
    }

    .rp-plan-card-btn {
        padding: 0.35rem 0.6rem;
        font-size: 0.72rem;
    }

    .rp-active-header {
        flex-direction: column;
        gap: 0.1rem;
    }

    .rp-actions-section {
        flex-direction: column;
        align-items: flex-start;
    }

    .rp-complete {
        padding: 1.5rem 1rem;
    }

    .rp-complete i.bi-trophy {
        font-size: 2.5rem;
    }

    .rp-plan-active-card {
        padding: 0.8rem;
    }
}

/* ======================================
   MULTI-PLAN SUPPORT
   ====================================== */

/* Active plan cards */
.rp-plan-active-card {
    background: var(--rp-bg);
    border: 1px solid var(--rp-card-border);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.rp-plan-active-card:last-child {
    margin-bottom: 0;
}

/* Add another plan button */
.rp-add-plan {
    text-align: center;
    margin-top: 0.75rem;
}

.rp-add-plan-btn {
    display: inline-flex;
    align-items: center;
    background: none;
    border: 1px dashed var(--rp-border);
    border-radius: 6px;
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
    color: var(--rp-accent);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.rp-add-plan-btn:hover {
    background: var(--rp-accent-light);
    border-color: var(--rp-accent);
}

/* Back button on plan selection (when coming from active view) */
.rp-select-back {
    margin-bottom: 0.75rem;
}

.rp-back-btn {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0.3rem 0;
    font-size: 0.85rem;
    color: var(--rp-accent);
    cursor: pointer;
}

.rp-back-btn:hover {
    text-decoration: underline;
}

/* Enrolled badge on plan cards */
.rp-plan-card.enrolled {
    opacity: 0.65;
    cursor: default;
}

.rp-plan-card-enrolled {
    font-size: 0.75rem;
    color: var(--rp-success);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

/* === music-favorites.css === */
/* ============================================================
   Music Favorites & Playlists
   Shared styles -- bundled site-wide (scripts/build-css.sh).
   ============================================================ */

/* --- Heart + add-to-playlist + info + mobile-kebab icon buttons --- */
.music-fav-btn,
.music-add-btn,
.music-info-btn,
.music-row-menu-btn {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: 0.6;
    flex-shrink: 0;
    transition: opacity .12s, background .12s, color .12s, transform .1s;
}
.music-fav-btn:hover,
.music-add-btn:hover,
.music-info-btn:hover,
.music-row-menu-btn:hover { opacity: 1; background: rgba(139, 92, 246, 0.16); }
.music-fav-btn i,
.music-add-btn i,
.music-info-btn i,
.music-row-menu-btn i { font-size: 1rem; pointer-events: none; }
.music-fav-btn.is-fav { opacity: 1; }
.music-fav-btn.is-fav i { color: #f43f5e; }
.music-fav-btn.is-busy,
.music-add-btn.is-busy { opacity: 0.35; pointer-events: none; }
.music-fav-btn:active,
.music-add-btn:active,
.music-info-btn:active,
.music-row-menu-btn:active { transform: scale(0.84); }

/* Read-only "favorited" badge -- shown on each row whose song is in the
   user's favorites, since the direct heart button moved into the kebab menu
   and we lose the at-a-glance status without it. Hidden by default; visible
   only when applyHeart adds .is-fav (same mechanic that filled in the old
   direct heart). Sits in its own flex slot between the title block and the
   kebab so it never affects title wrapping. */
.music-fav-mark {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: #f43f5e;
    pointer-events: none;
}
.music-fav-mark.is-fav { display: inline-flex; }
.music-fav-mark i { font-size: 0.92rem; }

/* Apple-Music-style context menu for #musicModal + #bmbbUpNextPanel song rows.
   At all viewport widths inside those surfaces, collapse the per-row (info /
   heart / + / remove) cluster into a single vertical kebab. Kebab opens the
   (i) popup in "rich" mode (prepends Favorite, Add to queue, Add to playlist
   and appends a Remove item when context calls for it). The bottom bar
   keeps direct icons -- it has only one row and lots of horizontal room. */
.music-row-menu-btn { display: none; }
#musicModal .msr-actions .music-info-btn,
#musicModal .msr-actions .music-fav-btn,
#musicModal .msr-actions .music-add-btn,
#musicModal .msr-actions .msr-remove,
#musicModal .book-music-track-actions .music-info-btn,
#musicModal .book-music-track-actions .music-fav-btn,
#musicModal .book-music-track-actions .music-add-btn,
#bmbbUpNextPanel .msr-actions .music-info-btn,
#bmbbUpNextPanel .msr-actions .music-fav-btn,
#bmbbUpNextPanel .msr-actions .music-add-btn { display: none; }
#musicModal .msr-actions .music-row-menu-btn,
#musicModal .book-music-track-actions .music-row-menu-btn,
#bmbbUpNextPanel .msr-actions .music-row-menu-btn,
.album-track .music-row-menu-btn {
    display: inline-flex;
    align-self: center;
}

/* Song-info popup -- items: Share / Song page / (Album) */
.music-info-pop { width: 220px; }
/* Hero album-art block -- sits at the very top of the (i) popup. Full-bleed
   square so the cover dominates the popup; clicking it opens the album (a
   visual + functional shortcut that replaces the small Album-list thumbnail
   the popup used to show twice over). */
.music-info-pop-hero {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    margin: 0;
    background: #0f0c1d;
    border: none;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}
.music-info-pop-hero.is-static { cursor: default; }
.music-info-pop-hero-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease-out;
}
.music-info-pop-hero:not(.is-static):hover .music-info-pop-hero-img {
    transform: scale(1.04);
}
.music-info-pop-hero:focus-visible {
    outline: 2px solid #a78bfa;
    outline-offset: -2px;
}
.music-info-pop-list { padding: 4px; }
.music-info-pop-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    text-align: left;
    padding: 9px 11px;
    border-radius: 7px;
    font-size: 0.86rem;
}
.music-info-pop-item:hover { background: rgba(139, 92, 246, 0.16); }
.music-info-pop-item i { font-size: 0.95rem; width: 18px; text-align: center; flex-shrink: 0; }
.music-info-pop-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.music-info-pop-art {
    width: 34px;
    height: 34px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}
.music-info-pop-sub {
    font-size: 0.72rem;
    opacity: 0.55;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.music-info-pop-copy {
    padding: 8px 12px 9px;
    font-size: 0.72rem;
    opacity: 0.55;
    border-top: 1px solid rgba(139, 92, 246, 0.14);
}
/* Gender / genre line -- sits just under the song title in the (i) popup. */
.music-info-pop-gg {
    padding: 6px 12px 7px;
    font-size: 0.74rem;
    opacity: 0.6;
    border-bottom: 1px solid rgba(139, 92, 246, 0.12);
}

/* Labelled variants -- song page action area */
.music-fav-btn-lg,
.music-add-btn-lg {
    width: auto;
    height: auto;
    border-radius: 999px;
    gap: 0.45rem;
    padding: 0.6rem 1.15rem;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid rgba(139, 92, 246, 0.4);
    opacity: 1;
}
.music-fav-btn-lg:hover,
.music-add-btn-lg:hover { background: rgba(139, 92, 246, 0.14); }
.music-fav-btn-lg.is-fav { border-color: rgba(244, 63, 94, 0.55); }
.music-fav-btn-lg.is-fav i { color: #f43f5e; }

/* album / All Music row controls wrapper */
.album-track-favctrls { display: inline-flex; align-items: center; gap: 1px; }

/* --- Popovers (login prompt + add-to-playlist menu), appended to <body> --- */
.music-pop {
    position: fixed;
    z-index: 10060;
    background: #1b1830;
    color: #e7e4ee;
    border: 1px solid #34303f;
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
    width: 264px;
    max-width: calc(100vw - 24px);
    font-size: 0.88rem;
    overflow: hidden;
}
html[data-theme="light"] .music-pop {
    background: #fff;
    color: #1a1a2e;
    border-color: #e2dff0;
}
.music-pop-hidden { display: none; }

.music-login-pop-body { padding: 15px; text-align: center; }
.music-login-pop-body p { margin: 0 0 11px; line-height: 1.45; }
.music-pop-login,
.music-pop-register {
    display: block;
    text-align: center;
    text-decoration: none;
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 600;
    font-size: 0.85rem;
}
.music-pop-login { background: #7c3aed; color: #fff; margin-bottom: 6px; }
.music-pop-login:hover { background: #6d28d9; color: #fff; }
.music-pop-register { color: inherit; opacity: 0.7; }
.music-pop-register:hover { opacity: 1; color: inherit; }

.music-add-pop-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.music-add-pop-head .ttl { flex: 1; }
.music-add-pop-close {
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.55;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
.music-add-pop-close:hover { opacity: 1; background: rgba(139, 92, 246, 0.16); }
html[data-theme="light"] .music-add-pop-head { border-bottom-color: rgba(0, 0, 0, 0.08); }
.music-add-pop-list { max-height: 44vh; overflow-y: auto; padding: 4px; }
.music-add-pop-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 9px;
    border-radius: 7px;
    cursor: pointer;
}
.music-add-pop-row:hover { background: rgba(139, 92, 246, 0.16); }
.music-add-pop-row .chk { width: 16px; flex-shrink: 0; color: #a78bfa; }
.music-add-pop-row .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-add-pop-empty { padding: 12px; text-align: center; opacity: 0.6; font-size: 0.82rem; }
/* "Add to queue" footer item in the + popup -- silent queue-add path
   (no popup, no auto-play). Visual styling mirrors "New playlist" below. */
.music-add-pop-queue {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4px;
}
html[data-theme="light"] .music-add-pop-queue { border-top-color: rgba(0, 0, 0, 0.08); }
.music-add-pop-queue-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: #a78bfa;
    cursor: pointer;
    padding: 8px 9px;
    border-radius: 7px;
    font-size: 0.86rem;
    font-weight: 600;
    text-align: left;
}
.music-add-pop-queue-btn:hover { background: rgba(139, 92, 246, 0.16); }
.music-add-pop-queue-btn i { font-size: 1rem; }

.music-add-pop-new {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4px;
}
html[data-theme="light"] .music-add-pop-new { border-top-color: rgba(0, 0, 0, 0.08); }
.music-add-pop-new-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: #a78bfa;
    cursor: pointer;
    padding: 8px 9px;
    border-radius: 7px;
    font-size: 0.86rem;
    font-weight: 600;
}
.music-add-pop-new-btn:hover { background: rgba(139, 92, 246, 0.16); }
.music-add-pop-new-form { display: none; padding: 8px; gap: 6px; }
.music-add-pop-new-form.open { display: flex; }
.music-add-pop-new-form input {
    flex: 1;
    min-width: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 7px;
    color: inherit;
    padding: 6px 8px;
    /* 16px keeps iOS Safari from zooming in when the field is focused. */
    font-size: 16px;
}
html[data-theme="light"] .music-add-pop-new-form input { background: rgba(0, 0, 0, 0.04); }
.music-add-pop-new-form button {
    background: #7c3aed;
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 6px 11px;
    cursor: pointer;
    font-weight: 600;
}
.music-add-pop-err {
    color: #f87171;
    font-size: 0.78rem;
    padding: 0 12px 9px;
    display: none;
}
.music-add-pop-err.show { display: block; }

/* --- Music modal: segmented nav + favorites/playlists panes --- */
.music-modal-nav {
    display: flex;
    gap: 4px;
    padding: 9px 10px 3px;
}
/* Solid-colored pills -- self-contained contrast, so the tabs stay readable
   on a dark OR a light modal with no dependence on the theme attribute.
   Icon + label on desktop, icon-only on narrow phone widths. */
.music-modal-nav button {
    flex: 1;
    min-width: 0;
    background: #4c3a73;
    border: 1px solid transparent;
    color: #ece8f6;
    border-radius: 999px;
    padding: 7px 8px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .12s, color .12s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.music-modal-nav button > i { font-size: 0.95rem; line-height: 1; }
.music-modal-nav button .ttl { line-height: 1; }
.music-modal-nav button:hover { background: #5e4a8a; color: #fff; }
.music-modal-nav button.active {
    background: #7c3aed;
    color: #fff;
}
/* Brief flash on a tab to indicate an auto-switch (used when bookMusicPlayKeyList
   fires Play / Shuffle and the modal auto-switches to the Queue tab). */
@keyframes mm-tab-just-switched {
    0%   { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.85); }
    40%  { box-shadow: 0 0 0 6px rgba(167, 139, 250, 0.55); }
    100% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0); }
}
.music-modal-nav button.mm-tab-just-switched {
    animation: mm-tab-just-switched 0.9s ease-out 1;
}
/* Mobile / narrow: drop the label, bump the icon, keep the pill compact. */
@media (max-width: 600px) {
    .music-modal-nav { gap: 3px; padding: 8px 8px 3px; }
    .music-modal-nav button { padding: 8px 6px; gap: 0; }
    .music-modal-nav button .ttl { display: none; }
    .music-modal-nav button > i { font-size: 1.1rem; }
}

/* The music modal's base text color is dark regardless of theme (specific
   elements get explicit light colors). Our pane content inherits that, so it
   would be dark-on-dark in dark mode -- set the pane text colour explicitly,
   keyed to the theme so it tracks the modal's themed background. */
.music-modal-pane { color: #e7e4ee; }
html[data-theme="light"] .music-modal-pane { color: #1a1a2e; }

.music-pane-empty { padding: 26px 18px; text-align: center; opacity: 0.65; font-size: 0.9rem; }
.music-pane-login { padding: 26px 18px; text-align: center; }
.music-pane-login p { margin: 0 0 13px; line-height: 1.5; }
.music-pane-login .btn-login {
    display: inline-block;
    background: #7c3aed;
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    padding: 9px 24px;
    font-weight: 600;
}
.music-pane-login .btn-login:hover { background: #6d28d9; color: #fff; }

.music-list-head {
    display: flex;
    /* Always one row -- never wrap. Back/Play/Shuffle are compact icon
       buttons; the title just ellipsizes if it runs out of room. */
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ============ Sticky modal headers ============
 * The tabs + filter band sticks to the top of the modal's scroll area;
 * each view's own header (album-detail back/title/Play/Shuffle row, and
 * the Favorites / Playlists / History list-heads carrying Play/Shuffle)
 * sticks just below it so the back arrow and queue controls stay on
 * screen no matter how far a list is scrolled. --mm-tabs-h is set by JS
 * in floating_stack_template.php to the measured height of the tabs+
 * filter band (with an 88px fallback). */
.music-modal-header {
    position: sticky;
    top: 0;
    z-index: 12;
    background: #fff;
}
[data-theme="dark"] .music-modal-header { background: #1a1a2e; }

.book-music-tracks-header,
.music-list-head {
    position: sticky;
    top: var(--mm-tabs-h, 88px);
    z-index: 11;
    background: #fff;
}
[data-theme="dark"] .book-music-tracks-header,
[data-theme="dark"] .music-list-head {
    background: #1a1a2e;
}
/* Back link -- shared by the modal's Albums, Favorites and Playlists views
   so all three "back" links look identical. Explicit themed color. */
/* Back is a chevron-only icon button -- pairs with the icon Play/Shuffle and
   keeps the detail header to one tidy row. */
.music-list-back {
    background: transparent;
    border: none;
    color: #e7e4ee;
    cursor: pointer;
    opacity: 0.7;
    font-size: 1.05rem;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
}
html[data-theme="light"] .music-list-back { color: #1a1a2e; }
.music-list-back:hover { opacity: 1; background: rgba(139, 92, 246, 0.16); }

/* drag-to-reorder hint line */
.music-reorder-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px 3px;
    font-size: 0.78rem;
    opacity: 0.6;
}
.music-reorder-hint .hint-mobile { display: none; }
@media (max-width: 480px) {
    .music-reorder-hint .hint-desktop { display: none; }
    .music-reorder-hint .hint-mobile { display: inline; }
}
.music-list-head .ttl {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Play/Shuffle controls wrapper in a list-detail header (favorites / playlist
   / recent). flex-shrink:0 so it keeps its size; the header wraps it to a 2nd
   row when the title can't fit beside it. */
.music-list-ctrls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}
/* "New playlist" stays a text pill. */
.music-list-newbtn {
    background: rgba(139, 92, 246, 0.18);
    color: #a78bfa;
    border: none;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.music-list-newbtn:hover { background: rgba(139, 92, 246, 0.32); }
/* Play + Shuffle are compact icon buttons -- no text -- so the detail header
   stays one row at any width. */
.music-list-playbtn,
.music-list-shufflebtn,
.music-list-sharebtn {
    background: rgba(139, 92, 246, 0.18);
    color: #a78bfa;
    border: none;
    border-radius: 999px;
    width: 34px;
    height: 34px;
    padding: 0;
    flex-shrink: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}
.music-list-playbtn:hover,
.music-list-shufflebtn:hover,
.music-list-sharebtn:hover { background: rgba(139, 92, 246, 0.32); }

.music-playlist-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.music-playlist-row:hover { background: rgba(139, 92, 246, 0.1); }
.music-playlist-row .pl-name {
    flex: 1;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.music-playlist-row .pl-count { font-size: 0.78rem; opacity: 0.55; flex-shrink: 0; }
.music-playlist-row .pl-act {
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.5;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    flex-shrink: 0;
}
.music-playlist-row .pl-act:hover { opacity: 1; background: rgba(139, 92, 246, 0.18); }

/* --- Curated public playlists --- */
/* Section heading above each playlist group (Public playlists / Your playlists). */
.music-pane-section-head {
    padding: 12px 12px 6px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.55;
}
/* The curator's Public/Private toggle -- lit purple when the playlist is public. */
.music-playlist-row .pl-act.music-playlist-pubtoggle.is-public {
    color: #a78bfa;
    opacity: 0.9;
}

/* song rows inside the Favorites / playlist-detail panes */
.music-song-list { padding: 2px 0 8px; }
.music-song-row {
    display: flex;
    /* Center everything vertically -- when a title wraps to 2 lines the play
       indicator / duration / icons sit at the row's vertical middle (matches
       the Up Next popup rows). */
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.music-song-row:hover { background: rgba(139, 92, 246, 0.08); }
/* ============ Composed icon-cell ============
 * 40x40 square. Base layer = source-album art (multi-album contexts) OR a
 * play-icon (single-album fallback). Duration sits as a small dark chip in
 * the bottom-right corner -- dim by default, bright (opacity 1) when this
 * row is the playing one. Equalizer overlay covers the whole cell with a
 * dark wash + animated bars when the row is .playing.
 * Replaces the old separate .msr-play + .msr-dur cells. */
.music-song-row .msr-cell {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(139, 92, 246, 0.10);
}
.music-song-row .msr-cell .msr-art {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.music-song-row .msr-cell .msr-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a78bfa;
    font-size: 1.1rem;
    opacity: 0.85;
}
.music-song-row .msr-cell .msr-dur {
    position: absolute;
    right: 2px;
    bottom: 2px;
    font-size: 0.58rem;
    line-height: 1;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    padding: 1px 3px;
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
    opacity: 0.55;
    pointer-events: none;
}
.music-song-row.playing .msr-cell .msr-dur { opacity: 1; }
.music-song-row .msr-cell .msr-eq {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: rgba(0, 0, 0, 0.55);
}
/* Eq shows while playing-and-not-paused, except when the cell is hovered
   (pause icon takes over). When paused, the play icon shows instead -- a
   clear "tap to resume" affordance instead of frozen bars. */
.music-song-row.playing:not(.is-paused) .msr-cell .msr-eq { display: flex; }
.music-song-row.playing:not(.is-paused) .msr-cell:hover .msr-eq { display: none; }
/* Play / Pause icon overlays on the cell. */
.music-song-row .msr-cell .msr-play-icon,
.music-song-row .msr-cell .msr-pause-icon {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: #fff;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.12s;
    pointer-events: none;
}
.music-song-row:not(.playing) .msr-cell:hover .msr-play-icon { opacity: 1; }
.music-song-row.playing.is-paused .msr-cell .msr-play-icon { opacity: 1; }
.music-song-row.playing:not(.is-paused) .msr-cell:hover .msr-pause-icon { opacity: 1; }
.music-song-row .msr-info { flex: 1; min-width: 0; }
.music-song-row .msr-title {
    font-size: 0.88rem;
    font-weight: 600;
    /* Wrap to up to 2 lines (then ellipsis) instead of a hard 1-line clip --
       song titles were getting clipped on narrow viewports. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.music-song-row .msr-album {
    font-size: 0.74rem;
    opacity: 0.55;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Action icons (info / heart / plus / remove) -- one tight cluster, matching
   the spacing of the album tab's track rows. */
/* Action-icon cluster (info / heart / + / remove). Unscoped so the music
   modal song rows AND the mini-player Up Next rows share the exact spacing. */
.msr-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
/* Mobile: collapse the cluster -- buttons closer together, icons slightly
   smaller targets so the title gets more real estate on narrow screens.
   The Queue-row X is hidden entirely on mobile (swipe-right replaces it). */
@media (max-width: 600px) {
    .msr-actions { gap: 0; }
    .msr-actions .music-fav-btn,
    .msr-actions .music-add-btn,
    .msr-actions .music-info-btn,
    .msr-actions .msr-remove {
        width: 28px;
        height: 28px;
    }
    .msr-actions .music-fav-btn i,
    .msr-actions .music-add-btn i,
    .msr-actions .music-info-btn i,
    .msr-actions .msr-remove i { font-size: 0.92rem; }
    .msr-actions .msr-remove-queue { display: none; }
}
.music-song-row .msr-remove {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    opacity: 0.5;
}
.music-song-row .msr-remove:hover { opacity: 1; background: rgba(244, 63, 94, 0.16); color: #f43f5e; }

/* now-playing row: accent fill + the equalizer overlay rides inside the
 * composed .msr-cell. Title + album sub get the playing tint; the cell's
 * own eq overlay handles the animation. */
.music-song-row.playing { background: #7c3aed; border-radius: 7px; }
.music-song-row.playing:hover { background: #7c3aed; }
.music-song-row.playing .msr-title { color: #fff; font-weight: 700; }
.music-song-row.playing .msr-album { color: #e9d5ff; opacity: 1; }
.music-song-row .msr-cell .msr-eq i {
    width: 3px;
    height: 13px;
    background: #fff;
    border-radius: 1px;
    animation: msr-eqbar 0.9s ease-in-out infinite;
}
/* Diverging wave: center peaks first, inner pair next, outer bars last. */
.music-song-row .msr-cell .msr-eq i:nth-child(3) { animation-delay: 0s; }
.music-song-row .msr-cell .msr-eq i:nth-child(2),
.music-song-row .msr-cell .msr-eq i:nth-child(4) { animation-delay: 0.18s; }
.music-song-row .msr-cell .msr-eq i:nth-child(1),
.music-song-row .msr-cell .msr-eq i:nth-child(5) { animation-delay: 0.36s; }
@keyframes msr-eqbar { 0%, 100% { height: 4px; } 50% { height: 13px; } }

/* (.msr-play-now retired 2026-05-23 -- row body click carries play / pause
   / queue-and-play semantics; the icon-cell equalizer indicates playing.) */

/* Queue tab: per-row X (remove from queue). Visible on every row including
   the NOW row -- clicking it on the NOW row loads the next queue track
   (and starts playing it if audio was playing). */

/* Swipe-right state (Queue tab touch). is-swiping disables CSS transitions
   while the finger drags; is-swipe-armed shades the row red so it's clear
   release will delete. */
.music-song-row.is-swiping { transition: none !important; }
.music-song-row.is-swipe-armed {
    background: rgba(239, 68, 68, 0.18);
}

/* drag-to-reorder feedback (SortableJS) */
.music-song-row, .music-playlist-row { cursor: pointer; }
.sortable-ghost { opacity: 0.35; }
.sortable-chosen { background: rgba(139, 92, 246, 0.22); }
.sortable-drag { opacity: 0.9; }

/* Recent tab -- Recent / Most Played segmented toggle (sits in the header). */
.music-recent-toggle {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.12);
}
.music-recent-tab {
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    opacity: 0.65;
    transition: background 0.15s, opacity 0.15s;
}
.music-recent-tab:hover { opacity: 1; }
.music-recent-tab.is-active { background: #7c3aed; color: #fff; opacity: 1; }
/* "Your most played" caption under the Most Played header. */
.music-recent-note {
    padding: 2px 10px 8px;
    font-size: 0.74rem;
    opacity: 0.6;
}
/* Single Clear button -- sits at the right end of the Listening header.
   Wipes the entire queue including the currently playing track. Two-click
   confirm via the .is-confirming class. */
.music-listening-clear {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(139, 92, 246, 0.30);
    background: rgba(139, 92, 246, 0.10);
    color: inherit;
    cursor: pointer;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.85;
    flex-shrink: 0;
}
.music-listening-clear:hover { opacity: 1; background: rgba(139, 92, 246, 0.22); }
.music-listening-clear i { font-size: 0.82rem; }
.music-listening-clear.is-confirming {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.55);
    color: #fca5a5;
    opacity: 1;
}

/* "Save current queue as playlist" inline form (Queue tab). Sits below the
   header; takes a name + creates a playlist with the current queue tracks. */
.music-queue-save-form {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px 4px;
    flex-wrap: wrap;
}
.music-queue-save-input {
    flex: 1; min-width: 140px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(139, 92, 246, 0.40);
    border-radius: 8px;
    color: inherit;
    padding: 7px 10px;
    /* 16px keeps iOS Safari from zoom-on-focus. */
    font-size: 16px;
}
[data-theme="light"] .music-queue-save-input { background: rgba(0, 0, 0, 0.04); }
.music-queue-save-input:focus { outline: 2px solid rgba(124, 58, 237, 0.4); outline-offset: 1px; }
.music-queue-save-submit {
    background: #7c3aed;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}
.music-queue-save-submit:hover { background: #6d28d9; }
.music-queue-save-submit:disabled { opacity: 0.6; cursor: default; }
.music-queue-save-cancel {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    opacity: 0.55;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.music-queue-save-cancel:hover { opacity: 1; background: rgba(139, 92, 246, 0.18); }
.music-queue-save-err {
    flex-basis: 100%;
    color: #f87171;
    font-size: 0.76rem;
    display: none;
    padding-top: 2px;
}
.music-queue-save-err.show { display: block; }
.music-queue-save-ok {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 6px;
    font-size: 0.82rem;
    color: #22c55e;
}
[data-theme="dark"] .music-queue-save-ok { color: #86efac; }
.music-queue-save-ok i { font-size: 1rem; }
.music-queue-save-open {
    margin-left: auto;
    background: rgba(139, 92, 246, 0.18);
    color: #a78bfa;
    border: none;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
}
.music-queue-save-open:hover { background: rgba(139, 92, 246, 0.30); }

/* In-row "Added to queue" banner -- brief green overlay shown over the
   clicked row after a queue-add click, second feedback alongside the
   Up Next popup pulse. Fades in, sits for ~1s, fades out. */
.music-song-row { position: relative; }
.music-song-row .msr-added-banner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(34, 197, 94, 0.92);
    color: #fff;
    font-weight: 700;
    font-size: 0.84rem;
    letter-spacing: 0.02em;
    border-radius: 7px;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 0.18s ease-out, transform 0.18s ease-out;
    z-index: 2;
}
.music-song-row .msr-added-banner.is-visible {
    opacity: 1;
    transform: scale(1);
}
.music-song-row .msr-added-banner i { font-size: 1rem; }
[data-theme="dark"] .music-song-row .msr-added-banner {
    background: rgba(74, 222, 128, 0.92);
    color: #052e16;
}
@media (prefers-reduced-motion: reduce) {
    .music-song-row .msr-added-banner { transition: none; }
}

/* ============ Queue tab: Now Playing card + Just Played accordion ============ */
.music-queue-now {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 12px 14px;
    margin: 0 8px 8px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(59,130,246,0.14));
    border: 1px solid rgba(139, 92, 246, 0.35);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.music-queue-now:hover {
    background: linear-gradient(135deg, rgba(124,58,237,0.26), rgba(59,130,246,0.20));
    border-color: rgba(139, 92, 246, 0.55);
}
.music-queue-now-cover {
    width: 64px; height: 64px;
    flex-shrink: 0;
    border-radius: 6px;
    object-fit: cover;
    background: rgba(0,0,0,0.18);
}
.music-queue-now-cover--none {
    display: block;
}
.music-queue-now-info {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.music-queue-now-title {
    font-weight: 700;
    font-size: 1rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.music-queue-now-sub {
    font-size: 0.78rem;
    opacity: 0.72;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Section heading inside the Queue tab ("Up Next"). */
.music-queue-section-head {
    padding: 6px 12px 4px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.65;
    font-weight: 700;
}
.music-queue-empty-upnext {
    padding: 12px;
    font-size: 0.82rem;
    opacity: 0.65;
}

/* Just Played accordion -- below the Up Next list, collapsed by default. */
.music-queue-just-played-head {
    display: flex; align-items: center; gap: 6px;
    width: calc(100% - 16px);
    margin: 12px 8px 4px;
    padding: 8px 10px;
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.20);
    border-radius: 8px;
    color: inherit;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: left;
}
.music-queue-just-played-head:hover {
    background: rgba(139, 92, 246, 0.16);
}
.music-queue-jp-chev {
    transition: transform 0.18s ease;
    font-size: 0.9rem;
    opacity: 0.7;
}
.music-queue-just-played-head.is-open .music-queue-jp-chev {
    transform: rotate(90deg);
}
/* Per-row play count, shown only in Most Played mode. */
.music-song-row .msr-plays {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.6;
}
.music-song-row .msr-plays i { font-size: 0.7rem; }
.music-song-row.playing .msr-plays { color: #e9d5ff; opacity: 1; }

/* ============ Song detail overlay -- Lyrics & Notes ============ */
.book-modal-content.songdetail-open { min-height: 70vh; }
.music-songdetail {
    position: absolute;
    inset: 0;
    /* Above the modal's sticky header (z-index 10) so it fully covers it. */
    z-index: 20;
    display: flex;
    flex-direction: column;
    background: #fff;
    color: var(--ch-text-primary, #374151);
}
[data-theme="dark"] .music-songdetail { background: #1a1a2e; color: #e5e7eb; }
.music-songdetail-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.18);
    flex-shrink: 0;
}
.music-songdetail-back,
.music-songdetail-close {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.music-songdetail-back:hover,
.music-songdetail-close:hover { background: rgba(139, 92, 246, 0.14); }
.music-songdetail-titles { flex: 1; min-width: 0; }
.music-songdetail-title {
    font-size: 0.98rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.music-songdetail-album {
    font-size: 0.75rem;
    opacity: 0.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.music-songdetail-toggle {
    display: flex;
    justify-content: center;
    padding: 10px 12px 2px;
    flex-shrink: 0;
}
.music-songdetail-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 16px 22px;
}
.music-sd-loading,
.music-sd-empty { opacity: 0.6; font-size: 0.9rem; padding: 0.75rem 0; }
/* Lyrics inside the overlay */
.music-sd-lyric-section {
    font-weight: 700;
    color: #a78bfa;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 1.1rem 0 0.4rem;
}
.music-sd-lyric-section:first-child { margin-top: 0; }
.music-sd-lyric-line { line-height: 1.55; }
.music-sd-lyric-gap { height: 0.7rem; }
/* Notes prose -- shared by the overlay, the lyrics popup, and the song page */
.music-notes-prose { line-height: 1.65; font-size: 0.95rem; }
.music-notes-prose p { margin: 0 0 0.9rem; }
.music-notes-prose p:last-child { margin-bottom: 0; }
/* Curator notes editor */
.music-notes-editbtn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 12px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(139, 92, 246, 0.4);
    background: transparent;
    color: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}
.music-notes-editbtn:hover { background: rgba(139, 92, 246, 0.12); }
.music-notes-editor textarea {
    width: 100%;
    min-height: 240px;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(139, 92, 246, 0.35);
    background: rgba(139, 92, 246, 0.04);
    color: inherit;
    font: inherit;
    font-size: 0.92rem;
    line-height: 1.55;
    resize: vertical;
}
[data-theme="dark"] .music-notes-editor textarea { background: rgba(255, 255, 255, 0.04); }
.music-notes-editor-hint { font-size: 0.72rem; opacity: 0.55; margin: 6px 2px 8px; }
.music-notes-editor-err { font-size: 0.78rem; color: #f43f5e; margin: 4px 2px 8px; }
.music-notes-editor-actions { display: flex; gap: 8px; }
.music-notes-save,
.music-notes-cancel {
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
}
.music-notes-save { background: #7c3aed; color: #fff; }
.music-notes-save:hover { background: #6d28d9; }
.music-notes-save:disabled { opacity: 0.5; cursor: default; }
.music-notes-cancel { background: transparent; color: inherit; border-color: rgba(139, 92, 246, 0.4); }
.music-notes-cancel:hover { background: rgba(139, 92, 246, 0.1); }

/* =====================================================================
   Playlists pane: grid/list mode + Private/Public sub-tabs (2026-05-23).
   Mirrors the Albums-tab layout so the two surfaces feel like one family.
   ===================================================================== */

/* Toolbar above the grid: [ sub-tabs ] ........ [ grid/list ] [ + New ] */
.music-playlist-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 8px;
    flex-wrap: wrap;
}
.music-playlist-toolbar-right {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}
.music-playlist-subtabs {
    display: inline-flex;
    background: rgba(139, 92, 246, 0.10);
    border-radius: 999px;
    padding: 3px;
}
.music-playlist-subtab {
    background: transparent;
    border: none;
    color: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
    opacity: 0.7;
    transition: background 0.15s, opacity 0.15s, color 0.15s;
}
.music-playlist-subtab:hover { opacity: 1; }
.music-playlist-subtab.is-active {
    background: #7c3aed;
    color: #fff;
    opacity: 1;
}
.music-playlist-viewtoggle {
    background: transparent; border: none; color: inherit;
    opacity: 0.7; cursor: pointer;
    width: 30px; height: 30px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 7px; font-size: 1rem;
}
.music-playlist-viewtoggle:hover { opacity: 1; background: rgba(139, 92, 246, 0.16); }

/* Grid container (also used in list mode via .is-list). */
.music-playlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    padding: 0 8px 8px;
}
.music-playlist-grid.is-list {
    display: block;
    padding: 0 4px 8px;
}

/* ---------- Grid card ---------- */
.music-playlist-card {
    position: relative;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.music-playlist-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.music-playlist-card-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.music-playlist-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.music-playlist-card-cover.is-empty i {
    font-size: 2.4rem;
    color: rgba(255, 255, 255, 0.78);
}
.music-playlist-card-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(124, 58, 237, 0.92);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, transform 0.15s;
    z-index: 3;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32);
    padding: 0;
}
.music-playlist-card-play i { line-height: 1; margin-left: 2px; }
.music-playlist-card:hover .music-playlist-card-play,
.music-playlist-card-play:focus { opacity: 1; }
.music-playlist-card-play:hover {
    background: #7c3aed;
    transform: translate(-50%, -50%) scale(1.06);
}
@media (hover: none) {
    .music-playlist-card-play { opacity: 0.92; }
}
.music-playlist-card-title {
    padding: 6px 8px 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ch-text-primary, #374151);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.music-playlist-card-meta {
    padding: 2px 8px 8px;
    font-size: 0.7rem;
    opacity: 0.6;
    color: var(--ch-text-primary, #374151);
    display: flex;
    align-items: center;
    gap: 4px;
}
[data-theme="dark"] .music-playlist-card-title,
[data-theme="dark"] .music-playlist-card-meta { color: #e5e7eb; }
/* Owner-actions cluster (top-right of the card). */
.music-playlist-card-acts {
    position: absolute;
    top: 5px;
    right: 5px;
    display: inline-flex;
    gap: 2px;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.15s;
}
.music-playlist-card:hover .music-playlist-card-acts { opacity: 1; }
@media (hover: none) {
    .music-playlist-card-acts { opacity: 0.88; }
}
/* The action buttons themselves inherit the .pl-act look but darker for
   readability against the cover. */
.music-playlist-card-acts .pl-act,
.music-playlist-row2 .mpr2-acts .pl-act {
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    flex-shrink: 0;
}
.music-playlist-card-acts .pl-act {
    background: rgba(15, 12, 30, 0.55);
    color: #fff;
    opacity: 0.92;
}
.music-playlist-card-acts .pl-act:hover {
    background: rgba(124, 58, 237, 0.85);
    opacity: 1;
}
.music-playlist-card-acts .music-playlist-pubtoggle.is-public,
.music-playlist-row2 .music-playlist-pubtoggle.is-public {
    color: #a78bfa;
    opacity: 0.95;
}

/* ---------- List row (.is-list) ---------- */
.music-playlist-row2 {
    display: grid;
    /* play | cover | title/sub | actions */
    grid-template-columns: 28px 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 7px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.music-playlist-row2:hover { background: rgba(139, 92, 246, 0.1); }
.music-playlist-row2-play {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(124, 58, 237, 0.18);
    color: #7c3aed;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 0.78rem;
    padding: 0;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}
.music-playlist-row2-play i { line-height: 1; margin-left: 1px; }
.music-playlist-row2:hover .music-playlist-row2-play {
    background: rgba(124, 58, 237, 0.92);
    color: #fff;
}
.music-playlist-row2-play:hover {
    background: #7c3aed !important;
    color: #fff !important;
    transform: scale(1.08);
}
[data-theme="dark"] .music-playlist-row2-play { color: #a78bfa; }
.music-playlist-row2 .mpr2-cover {
    width: 40px; height: 40px;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%);
}
.music-playlist-row2 .mpr2-cover img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.music-playlist-row2 .mpr2-cover.is-empty i {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
}
.music-playlist-row2 .mpr2-titlewrap {
    display: flex; flex-direction: column;
    min-width: 0;
    gap: 1px;
}
.music-playlist-row2 .mpr2-title {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--ch-text-primary, #374151);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.music-playlist-row2 .mpr2-sub {
    font-size: 0.7rem;
    opacity: 0.6;
    color: var(--ch-text-primary, #374151);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
[data-theme="dark"] .music-playlist-row2 .mpr2-title,
[data-theme="dark"] .music-playlist-row2 .mpr2-sub { color: #e5e7eb; }
.music-playlist-row2 .mpr2-acts {
    display: inline-flex;
    gap: 2px;
    flex-shrink: 0;
}
.music-playlist-row2 .mpr2-acts .pl-act:hover {
    opacity: 1;
    background: rgba(139, 92, 246, 0.18);
}

/* Mobile tweaks -- tighter grid so cards stay readable on narrow widths. */
@media (max-width: 600px) {
    .music-playlist-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 8px;
    }
    .music-playlist-card-title { font-size: 0.76rem; }
    .music-playlist-card-meta { font-size: 0.66rem; }
    .music-playlist-row2 .mpr2-cover { width: 34px; height: 34px; }
    .music-playlist-row2 { grid-template-columns: 26px 34px minmax(0, 1fr) auto; }
}

/* Shuffled-indicator strip inside the modal's Queue tab. Mirrors the Up Next
   popup's strip so both surfaces look + behave the same: full-width band
   above the queue rows, visible only while shuffle is on. The Queue tab
   walks shuffleOrder in this mode so the rows reflect actual play order. */
.music-queue-shuffle-strip {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: #a78bfa;
    padding: 8px 14px 6px;
}
.music-queue-shuffle-strip i { font-size: 0.82rem; }
.music-queue-reshuffle {
    text-align: center;
    font-size: 0.7rem;
    color: #8b8696;
    font-style: italic;
    padding: 9px 14px 14px;
}