:root { --font-serif: "Merriweather", "Book Antiqua", Palatino, Georgia, serif; --font-sans: "Roboto", system-ui, -apple-system, sans-serif; --font-display: "Montserrat", var(--font-sans); --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 48px; --space-xxl: 64px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 9999px; --transition-base: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
        .light-mode { --color-bg-start: hsl(35, 70%, 90%); --color-bg-end: hsl(200, 70%, 90%); --color-surface: hsla(0, 0%, 100%, 0.7); --color-surface-solid: hsl(0, 0%, 100%); --color-text: #3D352E; --color-text-muted: #8A817C; --color-border: hsla(0, 0%, 80%, 0.5); --color-primary: #1F635C; --color-primary-hover: #174A44; --color-primary-contrast: #FFFFFF; --color-red-letter: #A02C2C; --color-danger: #c53030; --color-danger-hover: #a52a2a; --color-surface-hover: hsla(0,0%,0%,0.05); }
        .dark-mode { --color-bg-start: hsl(220, 40%, 10%); --color-bg-end: hsl(270, 40%, 10%); --color-surface: hsla(220, 13%, 18%, 0.5); --color-surface-solid: hsl(220, 13%, 18%); --color-text: #F0EBE5; --color-text-muted: #918B85; --color-border: hsla(220, 10%, 40%, 0.5); --color-primary: #50C4B7; --color-primary-hover: #73D1C7; --color-primary-contrast: #1A1D24; --color-red-letter: #ff8787; --color-danger: #e57373; --color-danger-hover: #c53030; --color-surface-hover: hsla(0,0%,100%,0.08); }
        
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } 
        html { font-size: 16px; scroll-behavior: smooth; }
        body { font-family: var(--font-sans); color: var(--color-text); min-height: 100vh; overflow-x: hidden; position: relative; }
        .ethereal-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
        .ethereal-wrapper::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 50% 50%, var(--color-bg-start), var(--color-bg-end)); }
        .page-content { display: flex; flex-direction: column; min-height: 100vh; }
        
        /* --- Header & Navigation --- */
        .site-header { padding: var(--space-sm) var(--space-md); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-shrink: 0; position: sticky; top: 0; background-color: var(--color-surface); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); z-index: 100; flex-wrap: wrap; }
        .site-logo { height: 44px; flex-shrink: 0; display: flex; align-items: center; gap: var(--space-sm); text-decoration: none; color: var(--color-text); }
        .site-logo .logo-full { height: 100%; width: auto; object-fit: contain; }
        .logo-light, .logo-dark { display: none; }
        .light-mode .logo-light, .dark-mode .logo-dark { display: block; }
        .logo-mobile-icon, .logo-mobile-text { display: none; }

        .site-nav { display: flex; align-items: center; gap: var(--space-md); margin-left: auto; }
        .site-nav-links { display: flex; list-style: none; gap: var(--space-sm); }
        .site-nav-links a { text-decoration: none; color: var(--color-text-muted); font-weight: 500; font-family: var(--font-sans); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-full); transition: color var(--transition-base), background-color var(--transition-base); }
        .site-nav-links a:hover { background-color: var(--color-surface-hover); color: var(--color-text); }
        .site-nav-links a.active { background-color: var(--color-primary); color: var(--color-primary-contrast); }
        .header-actions { display: flex; align-items: center; gap: var(--space-sm); }
        .mobile-nav-toggle { display: none; background: none; border: none; color: var(--color-text); font-size: 1.5rem; cursor: pointer; z-index: 102; padding: var(--space-sm); }

        /* --- Dropdown CSS --- */
        .site-nav-links .has-dropdown { position: relative; }
        .dropdown-menu { display: none; position: absolute; top: 100%; right: 0; list-style: none; background-color: var(--color-surface-solid); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-sm); min-width: 220px; z-index: 101; box-shadow: 0 8px 30px hsla(0,0%,0%,0.1); }
        .site-nav-links > li.has-dropdown:hover > .dropdown-menu { display: block; }
        .dropdown-toggle { cursor: default; }
        .dropdown-toggle::after { content: '▾'; font-size: 0.8em; margin-left: var(--space-sm); display: inline-block; opacity: 0.6; }
        .dropdown-menu a { display: block; width: 100%; padding: var(--space-sm) var(--space-md); white-space: nowrap; border-radius: var(--radius-md); color: var(--color-text-muted); }
        .dropdown-menu a:hover { background-color: var(--color-surface-hover); color: var(--color-text); }
        .site-nav-links li.has-dropdown.active-parent > a { background-color: var(--color-primary); color: var(--color-primary-contrast); }

        /* --- Language Selector --- */
        .language-selector { position: relative; }
        .language-selector-trigger { display: flex; align-items: center; gap: var(--space-sm); background: none; border: none; font-family: inherit; font-size: 1rem; color: var(--color-text-muted); cursor: pointer; padding: var(--space-sm); border-radius: var(--radius-md); transition: all var(--transition-base); }
        .language-selector-trigger:hover { background-color: var(--color-surface-hover); color: var(--color-text); }
        .language-selector-trigger .icon { font-size: 1.2rem; }
        .language-selector-trigger .lang-text { font-weight: 500; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
        .language-select-dropdown { position: absolute; right: 0; top: calc(100% + 4px); background-color: var(--color-surface-solid); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-sm); width: 250px; box-shadow: 0 8px 30px hsla(0,0%,0%,0.1); visibility: hidden; opacity: 0; transform: translateY(-10px); transition: all var(--transition-base); z-index: 101; }
        .language-selector.is-open .language-select-dropdown { visibility: visible; opacity: 1; transform: translateY(0); }
        .language-select-dropdown-list { list-style: none; max-height: 300px; overflow-y: auto; }
        .language-select-dropdown-list a { display: block; padding: var(--space-sm) var(--space-md); text-decoration: none; color: var(--color-text); border-radius: var(--radius-md); }
        .language-select-dropdown-list a:hover, .language-select-dropdown-list a.selected { background-color: var(--color-surface-hover); }
        .language-select-dropdown-list a.selected { font-weight: 700; color: var(--color-primary); }
        
        /* --- Main Content & Verse Card --- */
        .page-main { flex-grow: 1; display: flex; flex-direction: column; align-items: center; padding: var(--space-xl) var(--space-md); gap: var(--space-lg); }
        .lectern-card { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 900px; background-color: var(--color-surface); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: var(--radius-lg); border: 1px solid var(--color-border); transition: all var(--transition-base); overflow: hidden; }
        .verse-content { flex-grow: 1; padding: var(--space-xl); display: flex; flex-direction: column; justify-content: center; text-align: center; min-height: 200px; transition: opacity 0.2s ease-out; }
        .verse-reference { font-size: 1.1rem; font-family: var(--font-display); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-lg); letter-spacing: 0.05em; text-transform: uppercase; }
        .verse-reference-link { color: inherit; text-decoration: none; display: inline-block; padding-right: 28px; position: relative; }
        .verse-reference-link:hover { color: var(--color-primary); }
        .verse-reference-link-icon { position: absolute; top: 50%; right: 0; transform: translateY(-50%); opacity: 0.4; transition: opacity var(--transition-base); }
        .verse-reference-link:hover .verse-reference-link-icon { opacity: 1; }
        .verse-text { font-family: var(--font-serif); line-height: 1.8; margin: 0 auto; transition: font-size 0.3s ease, line-height 0.3s ease; }

        /* --- FONT SIZING LOGIC --- */
        html[data-font-size="small"] .verse-text { font-size: 1.0rem; }
        html[data-font-size="default"] .verse-text { font-size: 1.25rem; }
        html[data-font-size="large"] .verse-text { font-size: 1.5rem; }
        .text--red-letter { color: var(--color-red-letter); }

        /* --- Search Module --- */
        .main-search-container { width: 100%; max-width: 750px; position: relative; opacity: 0.5; transition: opacity 0.3s ease; }
        .main-search-container:hover, .main-search-container:focus-within { opacity: 1; }
        .passage-search-form { display: flex; gap: var(--space-sm); align-items: center; }
        .passage-search-input-wrapper { position: relative; flex-grow: 1; }
        .passage-search-input { width: 100%; height: 52px; padding: 0 var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-full); font-size: 1rem; background-color: var(--color-surface-solid); color: var(--color-text); transition: all var(--transition-base); }
        @media (min-width: 768px) { .passage-search-input { font-size: 1.25rem; } }
        .passage-search-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent); outline: none; }
        .passage-search-submit { height: 52px; flex-shrink: 0; width: 52px; border-radius: var(--radius-full); border: none; background-color: var(--color-primary); color: var(--color-primary-contrast); font-size: 1.2rem; cursor: pointer; transition: background-color var(--transition-base); }
        .passage-search-submit:hover { background-color: var(--color-primary-hover); }
        .passage-search-suggestions { position: absolute; top: calc(100% + 4px); left: 0; right: 0; list-style: none; margin: 0; padding: var(--space-sm); background-color: var(--color-surface-solid); border: 1px solid var(--color-border); border-radius: var(--radius-md); max-height: 200px; overflow-y: auto; z-index: 1000; box-shadow: 0 8px 30px hsla(0,0%,0%,0.1); }
        .passage-search-suggestions li { padding: var(--space-sm) var(--space-md); cursor: pointer; transition: background-color 0.2s; border-radius: var(--radius-md); }
        .passage-search-suggestions li:hover, .passage-search-suggestions li.is-highlighted { background-color: var(--color-surface-hover); color: var(--color-primary); }
        .passage-search-error { color: var(--color-danger); font-size: 0.9rem; position: absolute; top: 105%; left: 0; width: 100%; text-align: center; display: none; }
        
        /* --- Interactions & Toolbar --- */
        .verse-interactions { padding: var(--space-md) var(--space-lg); display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-md); width: 100%; }
        .reaction-button { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-full); cursor: pointer; border: 1px solid var(--color-border); background-color: var(--color-surface-solid); transition: all 0.2s; }
        .reaction-button.active { background-color: hsla(140, 50%, 50%, 0.2); border-color: hsla(140, 50%, 50%, 0.4); }
        .reaction-button__icon { filter: grayscale(0.5); opacity: 0.7; transition: all 0.2s; font-size: 1.2rem; }
        .reaction-button:hover .reaction-button__icon, .reaction-button.active .reaction-button__icon { filter: grayscale(0); opacity: 1; }
        .reaction-button__count { font-size: 0.9rem; font-weight: 600; color: var(--color-text-muted); }
        .verse-toolbar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding: var(--space-md); border-top: 1px solid var(--color-border); flex-shrink: 0; gap: var(--space-sm); }
        .tool-button, .next-verse-button, .auto-generate-button { display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); border: none; background-color: transparent; cursor: pointer; transition: all var(--transition-base); }
        .tool-button { width: 44px; height: 44px; color: var(--color-text-muted); font-size: 1.2rem; flex-shrink: 0; }
        .tool-button:hover:not([disabled]), .tool-button.is-favorite { background-color: var(--color-surface-hover); color: var(--color-text); }
        .tool-button:disabled { opacity: 0.5; cursor: not-allowed; }
        .next-verse-button, .auto-generate-button { gap: var(--space-sm); height: 52px; padding: 0 var(--space-lg); font-size: 1rem; font-weight: 700; text-decoration: none; flex-shrink: 0; }
        .next-verse-button { background-color: var(--color-primary); color: var(--color-primary-contrast); }
        .next-verse-button:hover { background-color: var(--color-primary-hover); }
        .auto-generate-button { background-color: var(--color-surface-solid); color: var(--color-text-muted); border: 1px solid var(--color-border); }
        .auto-generate-button:hover { background-color: var(--color-surface-hover); }
        .tool-button-group { display: flex; align-items: center; gap: var(--space-sm); }
        
        /* --- Content Modules --- */
        .content-modules-container { padding: var(--space-xl) var(--space-md); display: flex; flex-direction: column; align-items: center; gap: var(--space-xl); width: 100%; }
        .content-module { background-color: var(--color-surface); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: var(--radius-lg); border: 1px solid var(--color-border); padding: var(--space-lg); width: 100%; max-width: 750px; }
        .content-module-title { font-size: 1rem; font-family: var(--font-display); font-weight: 700; color: var(--color-text-muted); margin-bottom: var(--space-md); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border); text-align: center; text-transform: uppercase; letter-spacing: 0.05em; }
        .recommended-articles-list, .randomness-details-list { display: flex; flex-direction: column; gap: var(--space-sm); }
        .recommended-article-link { display: block; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); text-decoration: none; color: var(--color-text); transition: background-color var(--transition-base); font-size: 0.9rem; }
        .recommended-article-link:hover { background-color: var(--color-surface-hover); }
        .history-list { display: flex; flex-direction: column; gap: var(--space-md); }
        .history-item-link { display: block; padding: var(--space-md); background-color: var(--color-surface-hover); border-radius: var(--radius-md); text-decoration: none; color: var(--color-text); font-family: var(--font-serif); font-size: 0.95rem; transition: background-color var(--transition-base); }
        .history-item-link:hover { background-color: hsla(0,0%,0%,0.1); } .dark-mode .history-item-link:hover { background-color: hsla(0,0%,100%,0.1); }
        .history-item-ref { display: block; font-weight: 600; color: var(--color-text-muted); margin-bottom: var(--space-sm); font-size: 0.85rem; font-family: var(--font-sans); }
        .history-item-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; opacity: 0.8; }
        .history-placeholder, .randomness-info-p { text-align: center; color: var(--color-text-muted); padding: var(--space-md) 0; }
        .randomness-info-p { text-align: left; }
        .randomness-info-p a { color: var(--color-primary); text-decoration: none; }
        .randomness-info-p a:hover { color: var(--color-primary-hover); text-decoration: underline; }
        .randomness-details-list { list-style: none; padding-left: 0; }
        
        /* --- Footer & Utils --- */
        .site-footer { margin-top: auto; flex-shrink: 0; padding: var(--space-lg); font-size: 0.9rem; color: var(--color-text-muted); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-md); }
        .footer-copyright, .footer-links { text-align: center; width: 100%; }
        .footer-links a { color: var(--color-text-muted); text-decoration: none; margin: 0 var(--space-sm); transition: color var(--transition-base); }
        .footer-links a:hover { color: var(--color-text); }
        .toast { position: fixed; bottom: -100px; left: 50%; transform: translateX(-50%); padding: var(--space-md) var(--space-lg); background-color: var(--color-surface-solid); color: var(--color-text); border-radius: var(--radius-full); box-shadow: 0 8px 30px hsla(0,0%,0%,0.15); transition: bottom var(--transition-base); font-weight: 500; z-index: 1001; }
        .toast.show { bottom: var(--space-lg); }
        
        .footer-extra-content { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-xl); width: 100%; margin-bottom: var(--space-lg); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-border); }
        .about-footer-v2, .social-links-v2 { display: flex; align-items: center; gap: var(--space-md); }
        .about-logo-v2 { height: 40px; width: auto; object-fit: contain; }
        .social-links-v2 .follow-prompt-v2 { font-weight: 500; }
        .social-link-item-v2 { display: flex; }
        .social-icon-v2 { height: 24px; width: 24px; transition: opacity var(--transition-base); }
        .social-link-item-v2:hover .social-icon-v2 { opacity: 0.7; }
        
        .social-icon-x-light, .social-icon-x-dark { display: none; }
        .light-mode .social-icon-x-light { display: inline; }
        .dark-mode .social-icon-x-dark { display: inline; }
        
        /* --- Search Explainer Link & Popup --- */
        .search-explainer-container { position: relative; text-align: center; margin-top: var(--space-sm); max-width: 750px; width: 100%; }
        .search-explainer-link { font-size: 0.85rem; color: var(--color-text-muted); text-decoration: none; border-bottom: 1px dotted var(--color-text-muted); cursor: pointer; transition: color 0.2s; }
        .search-explainer-link:hover { color: var(--color-primary); border-bottom-style: solid; }
        .search-explainer-popup { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) scale(0.95); width: 95%; max-width: 450px; background-color: var(--color-surface-solid); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: 0 10px 30px hsla(0,0%,0%,0.15); z-index: 1001; text-align: left; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, transform 0.2s ease; }
        .search-explainer-popup.is-visible { opacity: 1; visibility: visible; transform: translateX(-50%) scale(1); }
        .search-explainer-popup h3 { font-family: var(--font-display); font-size: 1.2rem; margin-top: 0; margin-bottom: var(--space-md); color: var(--color-text); }
        .search-explainer-popup p { font-size: 0.95rem; line-height: 1.6; margin-bottom: var(--space-lg); }
        .search-explainer-popup ul { list-style: none; padding-left: 0; font-size: 0.9rem; }
        .search-explainer-popup li { margin-bottom: var(--space-sm); color: var(--color-text-muted); }
        .search-explainer-popup li strong { color: var(--color-text); font-family: monospace; background-color: var(--color-surface-hover); padding: 2px 6px; border-radius: 4px; margin-right: var(--space-sm); }
        .search-explainer-close-btn { position: absolute; top: 8px; right: 12px; background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--color-text-muted); cursor: pointer; transition: color 0.2s; }
        .search-explainer-close-btn:hover { color: var(--color-text); }
        
        /* --- PWA Install Banner --- */
        .pwa-install-banner { display: none; position: fixed; bottom: 0; left: 0; right: 0; background-color: var(--color-surface-solid); color: var(--color-text); padding: var(--space-md); z-index: 2000; box-shadow: 0 -4px 15px hsla(0,0%,0%,0.1); border-top: 1px solid var(--color-border); flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-md); text-align: center; }
        .pwa-install-button, .pwa-dismiss-button { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-full); border: 1px solid var(--color-border); font-weight: 600; cursor: pointer; transition: all var(--transition-base); }
        .pwa-install-button { background-color: var(--color-primary); color: var(--color-primary-contrast); border-color: var(--color-primary); }
        .pwa-install-button:hover { background-color: var(--color-primary-hover); }
        .pwa-dismiss-button { background-color: transparent; color: var(--color-text-muted); }
        .pwa-dismiss-button:hover { background-color: var(--color-surface-hover); }
        
        /* --- Other --- */
        .lang-flag-mobile { display: none; font-size: 1.2rem; line-height: 1; }
        
        /* --- Additions for AJAX Features --- */

/* Loading spinner for buttons */
.fa-spin {
  animation: fa-spin 1s infinite linear;
}
@keyframes fa-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Live search suggestion items */
.passage-search-suggestions .live-suggestion-item {
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  transition: background-color 0.2s;
  border-radius: var(--radius-md);
  line-height: 1.4;
}
.passage-search-suggestions .live-suggestion-item:hover, 
.passage-search-suggestions .live-suggestion-item.is-highlighted {
  background-color: var(--color-surface-hover);
  color: var(--color-primary);
}
.live-suggestion-item strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 1rem;
  margin-bottom: var(--space-xs);
}
.live-suggestion-item p {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  opacity: 0.8;
  color: var(--color-text-muted);
}

        @media (min-width: 769px) {
            .footer-copyright, .footer-links { width: auto; }
            .footer-copyright { text-align: left; }
            .footer-links { text-align: right; }
            .footer-links a { margin: 0 0 0 var(--space-md); }
            .pwa-install-banner { justify-content: space-between; text-align: left; padding: var(--space-md) var(--space-lg); }
        }
        
        @media (max-width: 820px) {
            .verse-toolbar { flex-direction: column; align-items: center; gap: var(--space-md); }
        }
        
        /* --- MOBILE STYLES --- */
        @media (max-width: 768px) { 
            /* --- Mobile Font Sizes --- */
            .verse-text { line-height: 1.7; }
            html[data-font-size="small"] .verse-text { font-size: 0.85rem; }
            html[data-font-size="default"] .verse-text { font-size: 1.0rem; }
            html[data-font-size="large"] .verse-text { font-size: 1.25rem; }

            .verse-text.verse-text--long { font-size: 0.9rem; line-height: 1.5; }
            html[data-font-size="small"] .verse-text.verse-text--long { font-size: 0.8rem; }
            html[data-font-size="large"] .verse-text.verse-text--long { font-size: 1.0rem; }

            .verse-text.verse-text--very-long { font-size: 0.8rem; line-height: 1.45; }
            html[data-font-size="small"] .verse-text.verse-text--very-long { font-size: 0.75rem; }
            html[data-font-size="large"] .verse-text.verse-text--very-long { font-size: 0.9rem; }

            /* --- Other Mobile Styles --- */
            .site-header { gap: var(--space-sm); }
            .mobile-nav-toggle { display: block; }
            .site-logo .logo-full { display: none; }
            .logo-mobile-icon, .logo-mobile-text { display: block; }
            .logo-mobile-icon { height: 32px; width: auto; }
            .logo-mobile-text { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: 1px; }

            .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; order: 3; width: 100%; background-color: var(--color-surface-solid); border-top: 1px solid var(--color-border); box-shadow: 0 4px 10px hsla(0,0%,0%,0.1); max-height: calc(100vh - 65px); overflow-y: auto; padding-bottom: var(--space-lg); }
            body.nav-open .site-nav { display: block; }
            .site-nav-links { flex-direction: column; width: 100%; padding: var(--space-md); gap: var(--space-sm); }
            .site-nav-links a { display: block; text-align: left; width: 100%; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md); }

            /* --- Mobile Dropdown CSS --- */
            .dropdown-menu { display: block; position: static; border: none; box-shadow: none; padding: 0; margin-top: var(--space-sm); margin-left: var(--space-md); background-color: transparent; min-width: unset; }
            .site-nav-links .has-dropdown { padding: 0; }
            .dropdown-toggle { font-weight: 700; color: var(--color-text); padding: var(--space-md) var(--space-lg); }
            .dropdown-toggle::after { display: none; }
            .site-nav-links li.has-dropdown:hover { background: none; }
            .dropdown-menu a { padding-left: var(--space-lg); }

            .language-selector-trigger .lang-text { display: none; }
            .language-selector { position: static; }
            .language-select-dropdown { right: var(--space-md); left: auto; max-width: calc(100vw - (var(--space-md) * 2)); }
            
            .page-main { padding-top: var(--space-md); gap: var(--space-md); }
            .verse-content { padding: var(--space-lg) var(--space-md); }
            .verse-reference { margin-bottom: var(--space-md); }
            
            .content-modules-container { padding-left: 0; padding-right: 0; }
            .verse-interactions { gap: var(--space-md); justify-content: center; flex-wrap: wrap; overflow-x: hidden; padding: var(--space-md); max-width: 350px; }
            .reaction-button { flex-shrink: 0; padding: var(--space-xs) var(--space-sm); gap: var(--space-xs); }
            .reaction-button__icon { font-size: 1rem; }
            .reaction-button__count { font-size: 0.8rem; min-width: 1.5ch; text-align: left; }
            
            .lang-flag-mobile { display: inline; margin-left: var(--space-xs); }
        }