/* ==========================================================================
   SUNDAY SCHOOL TARANIM - REVERSED LAYOUT LIGHT THEME & OBS STYLESHEET
   100% PURE STANDARD VANILLA CSS (NO NESTING FOR MAX COMPATIBILITY)
   ========================================================================== */

:root {
  --font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --panel-font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --slide-font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Universal Typographic Hierarchy Scale */
  --text-3xs: 0.625rem;
  /* 10px - Micro badges, tiny indicators */
  --text-2xs: 0.6875rem;
  /* 11px - Status pills, corner index numbers */
  --text-xs: 0.75rem;
  /* 12px - Subtitles, metadata, hints */
  --text-sm: 0.8125rem;
  /* 13px - Compact buttons, secondary labels, filters */
  --text-base: 0.875rem;
  /* 14px - Standard body, inputs, list items */
  --text-md: 0.9375rem;
  /* 15px - Subheadings, search input, prominent items */
  --text-lg: 1.0625rem;
  /* 17px - Panel headers, section titles */
  --text-xl: 1.25rem;
  /* 20px - Modal titles, prominent song titles */
  --text-2xl: 1.5rem;
  /* 24px - Hero headings */

  --bg-light: #f4f6fc;
  --bg-card: #ffffff;
  --border-card: #e2e8f0;

  --text-main: #0f172a;
  --text-muted: #64748b;

  --accent-blue: #2563eb;
  --accent-purple: #7c3aed;
  --accent-gold: #f59e0b;
  --accent-green: #10b981;

  --shadow-card: 0 6px 20px rgba(37, 99, 235, 0.06);
  --shadow-glow: 0 0 25px rgba(37, 99, 235, 0.2);
  --shadow-popover: 0 12px 35px rgba(0, 0, 0, 0.15);

  /* Uncle Dashboard Design System Tokens */
  --brand: #5b6cf5;
  --brand-dark: #4354e8;
  --brand-light: #a5b0ff;
  --brand-bg: #eef0ff;
  --brand-glow: rgba(91, 108, 245, .18);

  --success: #10b981;
  --success-dark: #059669;
  --success-bg: #d1fae5;
  --danger: #ef4444;
  --danger-dark: #dc2626;
  --danger-bg: #fee2e2;
  --warning: #f59e0b;
  --warning-dark: #d97706;
  --warning-bg: #fef3c7;
  --coupon: #8b5cf6;
  --coupon-dark: #7c3aed;
  --coupon-bg: #ede9fe;
  --coupon-grad: linear-gradient(135deg, #8b5cf6, #7c3aed);

  --bg: #f3f4f9;
  --surface: #ffffff;
  --surface-2: #f7f8fc;
  --surface-3: #eceef7;
  --border: rgba(91, 108, 245, .12);
  --border-solid: #e4e6f0;
  --text: #1a1d2e;
  --text-2: #4b5068;
  --text-3: #8b90a8;

  --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, .07);
  --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, .10);
  --shadow-lg: 0 20px 48px -8px rgba(0, 0, 0, .14);
  --shadow-xl: 0 32px 64px -12px rgba(0, 0, 0, .18);

  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-full: 9999px;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --spring: cubic-bezier(.16, 1, .3, 1);
  --t: .22s;
}

[data-theme="dark"],
body.dark-mode {
  --bg: #0f1219;
  --surface: #171b26;
  --surface-2: #202534;
  --surface-3: #2a3144;
  --border: rgba(129, 140, 248, .22);
  --border-solid: #2d354a;
  --text: #ffffff;
  --text-2: #cbd5e1;
  --text-3: #94a3b8;
  --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, .5);
  --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, .6);
  --shadow-lg: 0 20px 48px -8px rgba(0, 0, 0, .7);
  --shadow-xl: 0 32px 64px -12px rgba(0, 0, 0, .85);
  --brand: #6366f1;
  --brand-dark: #4f46e5;
  --brand-light: #a5b0ff;
  --brand-bg: rgba(99, 102, 241, .2);
  --brand-glow: rgba(99, 102, 241, .28);
  --success-bg: rgba(16, 185, 129, .2);
  --danger-bg: rgba(239, 68, 68, .2);
  --warning-bg: rgba(245, 158, 11, .2);
  --coupon: #a78bfa;
  --coupon-dark: #8b5cf6;
  --coupon-bg: rgba(167, 139, 250, .2);
  --coupon-grad: linear-gradient(135deg, #a78bfa, #8b5cf6);

  --bg-light: #0f1219;
  --bg-card: #171b26;
  --border-card: #2d354a;
  --text-main: #ffffff;
  --text-muted: #94a3b8;
}

/* Theme toggle icon switching */
.theme-toggle-icon-sun {
  display: none !important;
}

.theme-toggle-icon-moon {
  display: inline-block !important;
}

[data-theme="dark"] .theme-toggle-icon-sun,
body.dark-mode .theme-toggle-icon-sun {
  display: inline-block !important;
  color: inherit !important;
}

[data-theme="dark"] .theme-toggle-icon-moon,
body.dark-mode .theme-toggle-icon-moon {
  display: none !important;
}

#btn-toggle-dark-mode i {
  transition: transform 0.25s var(--spring, cubic-bezier(.16, 1, .3, 1));
}

#btn-toggle-dark-mode:hover i {
  transform: rotate(18deg) scale(1.15);
}

/* ═══════════════════════════════════════════════════════════════
   COMPREHENSIVE DARK MODE: HIGH-CONTRAST & ZERO WHITE REMNANTS
   ═══════════════════════════════════════════════════════════════ */

/* Logo Swap for Dark Mode (Switches to white logo) */
[data-theme="dark"] .brand-center-logo,
body.dark-mode .brand-center-logo {
  content: url('logo_tw.png') !important;
}

/* App Background & Typography */
[data-theme="dark"] html,
[data-theme="dark"] body,
[data-theme="dark"] .app-container,
body.dark-mode html,
body.dark-mode body,
body.dark-mode .app-container {
  background-color: var(--bg, #0f1219) !important;
  color: var(--text, #ffffff) !important;
}

/* Top Nav */
[data-theme="dark"] .top-nav,
body.dark-mode .top-nav {
  background-color: var(--bg, #0f1219) !important;
  border-bottom: 1px solid var(--border-solid, #2d354a) !important;
}

[data-theme="dark"] .icon-menu-btn,
body.dark-mode .icon-menu-btn {
  background: var(--surface, #171b26) !important;
  color: var(--text, #ffffff) !important;
  border: 1px solid var(--border-solid, #2d354a) !important;
  box-shadow: var(--shadow-sm) !important;
}

[data-theme="dark"] .icon-menu-btn:hover,
body.dark-mode .icon-menu-btn:hover {
  background: var(--surface-2, #202534) !important;
  color: var(--brand-light, #a5b0ff) !important;
  border-color: var(--brand, #6366f1) !important;
}

/* Centered Search Box & Suggestions */
[data-theme="dark"] .centered-search-box input,
body.dark-mode .centered-search-box input {
  background: var(--surface, #171b26) !important;
  color: var(--text, #ffffff) !important;
  border: 1.5px solid var(--border-solid, #2d354a) !important;
}

[data-theme="dark"] .centered-search-box input::placeholder,
body.dark-mode .centered-search-box input::placeholder {
  color: #64748b !important;
}

[data-theme="dark"] .centered-search-box input:focus,
body.dark-mode .centered-search-box input:focus {
  border-color: var(--brand, #6366f1) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}

[data-theme="dark"] #search-ghost-overlay,
body.dark-mode #search-ghost-overlay {
  color: #64748b !important;
}

[data-theme="dark"] .suggestion-chip,
body.dark-mode .suggestion-chip {
  background: var(--surface-2, #202534) !important;
  border-color: var(--border-solid, #2d354a) !important;
  color: var(--text-2, #cbd5e1) !important;
}

[data-theme="dark"] .suggestion-chip:hover,
body.dark-mode .suggestion-chip:hover {
  background: var(--surface-3, #2a3144) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .suggestion-chip.is-primary-suggestion,
body.dark-mode .suggestion-chip.is-primary-suggestion {
  background: rgba(99, 102, 241, 0.22) !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
  color: var(--brand-light, #a5b0ff) !important;
}

/* Search Dropdown & Results */
[data-theme="dark"] #search-results-dropdown,
[data-theme="dark"] .search-dropdown,
body.dark-mode #search-results-dropdown,
body.dark-mode .search-dropdown {
  background: var(--surface, #171b26) !important;
  border: 1px solid var(--border-solid, #2d354a) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.75) !important;
}

[data-theme="dark"] .search-item,
body.dark-mode .search-item {
  background: transparent !important;
  border-bottom: 1px solid #202534 !important;
  color: var(--text, #ffffff) !important;
}

[data-theme="dark"] .search-item:hover,
body.dark-mode .search-item:hover {
  background: var(--surface-2, #202534) !important;
}

[data-theme="dark"] .search-item .item-title,
body.dark-mode .search-item .item-title {
  color: var(--text, #ffffff) !important;
}

[data-theme="dark"] .search-item .item-matched-line,
body.dark-mode .search-item .item-matched-line {
  color: var(--text-2, #cbd5e1) !important;
}

[data-theme="dark"] .search-item .item-matched-line mark,
body.dark-mode .search-item .item-matched-line mark {
  background: rgba(99, 102, 241, 0.45) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .search-item .item-sub,
body.dark-mode .search-item .item-sub {
  color: var(--text-3, #94a3b8) !important;
}

[data-theme="dark"] .search-item.no-results-item,
body.dark-mode .search-item.no-results-item {
  background: var(--surface, #171b26) !important;
  color: var(--text-3, #94a3b8) !important;
}

[data-theme="dark"] .search-item .item-artist-nametag,
body.dark-mode .search-item .item-artist-nametag {
  background: var(--surface-2, #202534) !important;
  color: var(--text, #ffffff) !important;
  border: 1px solid var(--border-solid, #2d354a) !important;
}

[data-theme="dark"] .btn-toggle-item-preview,
body.dark-mode .btn-toggle-item-preview {
  background: var(--surface-2, #202534) !important;
  border: 1px solid var(--border-solid, #2d354a) !important;
  color: var(--text-2, #cbd5e1) !important;
}

[data-theme="dark"] .btn-toggle-item-preview:hover,
body.dark-mode .btn-toggle-item-preview:hover {
  background: var(--surface-3, #2a3144) !important;
  color: var(--brand-light, #a5b0ff) !important;
}

[data-theme="dark"] .item-preview-box,
body.dark-mode .item-preview-box {
  background: #131720 !important;
  border: 1px solid var(--border-solid, #2d354a) !important;
  color: var(--text-2, #cbd5e1) !important;
}

[data-theme="dark"] .search-did-you-mean-row,
body.dark-mode .search-did-you-mean-row {
  background: #131720 !important;
  border-bottom: 1px solid var(--border-solid, #2d354a) !important;
  color: var(--text-2, #cbd5e1) !important;
}

[data-theme="dark"] .search-did-you-mean-banner,
body.dark-mode .search-did-you-mean-banner {
  background: rgba(99, 102, 241, 0.22) !important;
  color: var(--brand-light, #a5b0ff) !important;
}

/* Main Split Panels */
[data-theme="dark"] .half-panel,
body.dark-mode .half-panel {
  background: var(--surface, #171b26) !important;
  border: 1px solid var(--border-solid, #2d354a) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="dark"] .panel-bar,
body.dark-mode .panel-bar {
  background: #1b202c !important;
  border-bottom: 1px solid var(--border-solid, #2d354a) !important;
}

[data-theme="dark"] .panel-bar .panel-title,
[data-theme="dark"] .panel-title-btn,
body.dark-mode .panel-bar .panel-title,
body.dark-mode .panel-title-btn {
  color: var(--text, #ffffff) !important;
}

[data-theme="dark"] .mini-btn-flat,
body.dark-mode .mini-btn-flat {
  background: var(--surface-2, #202534) !important;
  border: 1px solid var(--border-solid, #2d354a) !important;
  color: var(--text, #ffffff) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .mini-btn-flat:hover,
body.dark-mode .mini-btn-flat:hover {
  background: var(--surface-3, #2a3144) !important;
  color: var(--brand-light, #a5b0ff) !important;
}

[data-theme="dark"] .mini-btn-flat.active,
body.dark-mode .mini-btn-flat.active {
  background: var(--brand, #6366f1) !important;
  color: #ffffff !important;
  border-color: var(--brand-dark, #4f46e5) !important;
}

[data-theme="dark"] #current-line-counter,
body.dark-mode #current-line-counter {
  color: var(--text-2, #cbd5e1) !important;
}

[data-theme="dark"] .presentation-modes-group,
body.dark-mode .presentation-modes-group {
  background: var(--surface, #171b26) !important;
  border: 1px solid var(--border-solid, #2d354a) !important;
}

[data-theme="dark"] .mode-group-btn,
body.dark-mode .mode-group-btn {
  color: var(--text-2, #cbd5e1) !important;
  background: transparent !important;
}

[data-theme="dark"] .mode-group-btn:hover,
body.dark-mode .mode-group-btn:hover {
  background: var(--surface-2, #202534) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .mode-group-btn.active,
body.dark-mode .mode-group-btn.active {
  background: var(--brand, #6366f1) !important;
  color: #ffffff !important;
}

/* Presentation Lines / Cards */
[data-theme="dark"] .line-item,
body.dark-mode .line-item {
  background: var(--surface, #171b26) !important;
  border-bottom: 1px solid #202534 !important;
  color: var(--text, #ffffff) !important;
}

[data-theme="dark"] .line-item:hover,
body.dark-mode .line-item:hover {
  background: #1c2230 !important;
}

[data-theme="dark"] .line-item.active,
body.dark-mode .line-item.active {
  background: rgba(99, 102, 241, 0.22) !important;
  border-inline-start: 4px solid var(--brand, #6366f1) !important;
}

[data-theme="dark"] .slide-lines-body,
[data-theme="dark"] .slide-line-row,
body.dark-mode .slide-lines-body,
body.dark-mode .slide-line-row {
  color: var(--text, #ffffff) !important;
}

[data-theme="dark"] .slide-index-corner,
body.dark-mode .slide-index-corner {
  color: var(--text-3, #94a3b8) !important;
}

[data-theme="dark"] .chord-token-badge,
body.dark-mode .chord-token-badge {
  color: var(--brand-light, #a5b0ff) !important;
}

[data-theme="dark"] .line-item.active .chord-token-badge,
body.dark-mode .line-item.active .chord-token-badge {
  color: #e0e7ff !important;
}

[data-theme="dark"] .slide-badge,
body.dark-mode .slide-badge {
  background: var(--surface-2, #202534) !important;
  border: 1px solid var(--border-solid, #2d354a) !important;
  color: var(--brand-light, #a5b0ff) !important;
}

[data-theme="dark"] .empty-state,
body.dark-mode .empty-state {
  color: var(--text-3, #94a3b8) !important;
}

[data-theme="dark"] .empty-state i,
body.dark-mode .empty-state i {
  color: var(--border-solid, #2d354a) !important;
}

/* Recents Panel & Items */
[data-theme="dark"] .recent-item,
body.dark-mode .recent-item {
  background: var(--surface, #171b26) !important;
  border-bottom: 1px solid #202534 !important;
  color: var(--text, #ffffff) !important;
}

[data-theme="dark"] .recent-item:hover,
body.dark-mode .recent-item:hover {
  background: #1c2230 !important;
}

[data-theme="dark"] .recent-item.active,
body.dark-mode .recent-item.active {
  background: rgba(99, 102, 241, 0.22) !important;
  border-inline-start: 4px solid var(--brand, #6366f1) !important;
}

[data-theme="dark"] .recent-item .recent-title,
body.dark-mode .recent-item .recent-title {
  color: var(--text, #ffffff) !important;
}

[data-theme="dark"] .recent-item .recent-meta,
body.dark-mode .recent-item .recent-meta {
  color: var(--text-3, #94a3b8) !important;
}

[data-theme="dark"] .recent-item .drag-handle-icon,
body.dark-mode .recent-item .drag-handle-icon {
  color: #4b5563 !important;
}

[data-theme="dark"] .recent-item .delete-recent-btn,
body.dark-mode .recent-item .delete-recent-btn {
  background: rgba(239, 68, 68, 0.18) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  color: #f87171 !important;
}

[data-theme="dark"] .recent-item .delete-recent-btn:hover,
body.dark-mode .recent-item .delete-recent-btn:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .new-playlist-bar,
body.dark-mode .new-playlist-bar {
  background: #1b202c !important;
  border-top: 1px solid var(--border-solid, #2d354a) !important;
}

[data-theme="dark"] .new-playlist-bar input,
body.dark-mode .new-playlist-bar input {
  background: var(--surface, #171b26) !important;
  border: 1px solid var(--border-solid, #2d354a) !important;
  color: var(--text, #ffffff) !important;
}

/* Popovers, Drawers & Menus */
[data-theme="dark"] .dropdown-popover,
body.dark-mode .dropdown-popover {
  background: var(--surface, #171b26) !important;
  border: 1px solid var(--border-solid, #2d354a) !important;
  color: var(--text, #ffffff) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.75) !important;
}

[data-theme="dark"] .popover-title,
body.dark-mode .popover-title {
  color: var(--text, #ffffff) !important;
  border-bottom: 1px solid var(--border-solid, #2d354a) !important;
}

[data-theme="dark"] #popover-style,
[data-theme="dark"] .style-drawer,
body.dark-mode #popover-style,
body.dark-mode .style-drawer {
  background: var(--surface, #171b26) !important;
  border-color: var(--border-solid, #2d354a) !important;
  color: var(--text, #ffffff) !important;
}

[data-theme="dark"] .style-tab-btn,
body.dark-mode .style-tab-btn {
  background: var(--surface-2, #202534) !important;
  border: 1px solid var(--border-solid, #2d354a) !important;
  color: var(--text-2, #cbd5e1) !important;
}

[data-theme="dark"] .style-tab-btn:hover,
body.dark-mode .style-tab-btn:hover {
  background: var(--surface-3, #2a3144) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .style-tab-btn.active,
body.dark-mode .style-tab-btn.active {
  background: var(--brand, #6366f1) !important;
  color: #ffffff !important;
  border-color: var(--brand-dark, #4f46e5) !important;
}

[data-theme="dark"] .style-section-title,
body.dark-mode .style-section-title {
  color: var(--text, #ffffff) !important;
  border-bottom: 1px solid #202534 !important;
}

[data-theme="dark"] .style-control-label,
body.dark-mode .style-control-label {
  color: var(--text-2, #cbd5e1) !important;
}

[data-theme="dark"] .segmented-group,
body.dark-mode .segmented-group {
  background: #11141d !important;
  border: 1px solid var(--border-solid, #2d354a) !important;
}

[data-theme="dark"] .segmented-btn,
body.dark-mode .segmented-btn {
  color: var(--text-2, #cbd5e1) !important;
}

[data-theme="dark"] .segmented-btn:hover,
body.dark-mode .segmented-btn:hover {
  background: var(--surface-2, #202534) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .segmented-btn.active,
body.dark-mode .segmented-btn.active {
  background: var(--surface-2, #202534) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .slider-clean,
body.dark-mode .slider-clean {
  background: var(--border-solid, #2d354a) !important;
}

[data-theme="dark"] .custom-font-dropdown-menu,
body.dark-mode .custom-font-dropdown-menu {
  background: var(--surface, #171b26) !important;
  border: 1px solid var(--border-solid, #2d354a) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.75) !important;
}

[data-theme="dark"] .font-dropdown-search-input,
body.dark-mode .font-dropdown-search-input {
  background: var(--surface-2, #202534) !important;
  border: 1px solid var(--border-solid, #2d354a) !important;
  color: var(--text, #ffffff) !important;
}

[data-theme="dark"] .font-dropdown-item,
body.dark-mode .font-dropdown-item {
  color: var(--text, #ffffff) !important;
  border-bottom: 1px solid #202534 !important;
}

[data-theme="dark"] .font-dropdown-item:hover,
body.dark-mode .font-dropdown-item:hover {
  background: var(--surface-2, #202534) !important;
}

/* Bible Popover */
[data-theme="dark"] .bible-popover-box,
body.dark-mode .bible-popover-box {
  background: var(--surface, #171b26) !important;
  color: var(--text, #ffffff) !important;
}

[data-theme="dark"] .bible-book-card,
[data-theme="dark"] .bible-chapter-card,
body.dark-mode .bible-book-card,
body.dark-mode .bible-chapter-card {
  background: var(--surface-2, #202534) !important;
  border: 1px solid var(--border-solid, #2d354a) !important;
  color: var(--text, #ffffff) !important;
}

[data-theme="dark"] .bible-book-card:hover,
body.dark-mode .bible-book-card:hover {
  background: var(--surface-3, #2a3144) !important;
  color: var(--brand-light, #a5b0ff) !important;
  border-color: var(--brand, #6366f1) !important;
}

[data-theme="dark"] .bible-chapter-card:hover,
body.dark-mode .bible-chapter-card:hover {
  background: var(--brand, #6366f1) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .bible-testament-tab,
body.dark-mode .bible-testament-tab {
  background: var(--surface-2, #202534) !important;
  color: var(--text-2, #cbd5e1) !important;
}

[data-theme="dark"] .bible-testament-tab.active,
body.dark-mode .bible-testament-tab.active {
  background: var(--brand, #6366f1) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .bible-search-input-box input,
body.dark-mode .bible-search-input-box input {
  background: var(--surface-2, #202534) !important;
  border: 1px solid var(--border-solid, #2d354a) !important;
  color: var(--text, #ffffff) !important;
}

/* Screens / Cast & Playlists */
[data-theme="dark"] .screen-cast-card,
body.dark-mode .screen-cast-card {
  background: var(--surface-2, #202534) !important;
  border: 1px solid var(--border-solid, #2d354a) !important;
  color: var(--text, #ffffff) !important;
}

[data-theme="dark"] .screen-name,
[data-theme="dark"] .playlist-popover-title,
[data-theme="dark"] .playlist-row-info,
body.dark-mode .screen-name,
body.dark-mode .playlist-popover-title,
body.dark-mode .playlist-row-info {
  color: var(--text, #ffffff) !important;
}

[data-theme="dark"] .playlist-row,
body.dark-mode .playlist-row {
  border-bottom: 1px solid #202534 !important;
}

[data-theme="dark"] .playlist-row:hover,
body.dark-mode .playlist-row:hover {
  background: var(--surface-2, #202534) !important;
}

[data-theme="dark"] .pl-icon-btn,
[data-theme="dark"] .slide-jump-clean-input,
body.dark-mode .pl-icon-btn,
body.dark-mode .slide-jump-clean-input {
  background: var(--surface-2, #202534) !important;
  border: 1px solid var(--border-solid, #2d354a) !important;
  color: var(--text, #ffffff) !important;
}

/* Modals & Dialogs */
[data-theme="dark"] .modal-card,
[data-theme="dark"] .shortcuts-sheet-card,
[data-theme="dark"] .song-info-modal-card,
[data-theme="dark"] .chord-preview-modal-card,
[data-theme="dark"] .custom-song-editor-modal-card,
body.dark-mode .modal-card,
body.dark-mode .shortcuts-sheet-card,
body.dark-mode .song-info-modal-card,
body.dark-mode .chord-preview-modal-card,
body.dark-mode .custom-song-editor-modal-card {
  background: var(--surface, #171b26) !important;
  border: 1px solid var(--border-solid, #2d354a) !important;
  color: var(--text, #ffffff) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.85) !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .shortcuts-sheet-header,
body.dark-mode .modal-header,
body.dark-mode .shortcuts-sheet-header {
  background: #1b202c !important;
  border-bottom: 1px solid var(--border-solid, #2d354a) !important;
  color: var(--text, #ffffff) !important;
}

[data-theme="dark"] .shortcuts-sheet-title,
[data-theme="dark"] .shortcut-label,
[data-theme="dark"] .modal-title,
body.dark-mode .shortcuts-sheet-title,
body.dark-mode .shortcut-label,
body.dark-mode .modal-title {
  color: var(--text, #ffffff) !important;
}

[data-theme="dark"] .shortcut-key,
body.dark-mode .shortcut-key {
  background: var(--surface-2, #202534) !important;
  border: 1px solid var(--border-solid, #2d354a) !important;
  color: var(--text, #ffffff) !important;
}

[data-theme="dark"] .shortcut-row,
body.dark-mode .shortcut-row {
  border-bottom: 1px solid #202534 !important;
}

[data-theme="dark"] .modal-close-btn,
[data-theme="dark"] .close-btn,
body.dark-mode .modal-close-btn,
body.dark-mode .close-btn {
  background: var(--surface-2, #202534) !important;
  border: 1px solid var(--border-solid, #2d354a) !important;
  color: var(--text-2, #cbd5e1) !important;
}

[data-theme="dark"] .modal-close-btn:hover,
[data-theme="dark"] .close-btn:hover,
body.dark-mode .modal-close-btn:hover,
body.dark-mode .close-btn:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #dc2626 !important;
}

[data-theme="dark"] .song-info-section,
body.dark-mode .song-info-section {
  border-bottom: none !important;
}

[data-theme="dark"] .song-info-section-title,
body.dark-mode .song-info-section-title {
  color: var(--text, #ffffff) !important;
}

[data-theme="dark"] .song-info-badge-val,
[data-theme="dark"] .song-info-chord-pill,
body.dark-mode .song-info-badge-val,
body.dark-mode .song-info-chord-pill {
  background: var(--surface-2, #202534) !important;
  border: 1px solid var(--border-solid, #2d354a) !important;
  color: var(--brand-light, #a5b0ff) !important;
}

[data-theme="dark"] .chord-preview-diagram-box,
[data-theme="dark"] .chord-popover-img-wrap,
body.dark-mode .chord-preview-diagram-box,
body.dark-mode .chord-popover-img-wrap {
  background: #0f1219 !important;
  border: 1px solid var(--border-solid, #2d354a) !important;
}

[data-theme="dark"] .chord-popover-content,
body.dark-mode .chord-popover-content {
  background: var(--surface, #171b26) !important;
  border: 1px solid var(--border-solid, #2d354a) !important;
  color: var(--text, #ffffff) !important;
}

/* Slide Editor Bar */
[data-theme="dark"] .se-bar,
body.dark-mode .se-bar {
  background: #1b202c !important;
  border-bottom: 1px solid var(--border-solid, #2d354a) !important;
  color: var(--text, #ffffff) !important;
}

[data-theme="dark"] .se-item,
body.dark-mode .se-item {
  background: var(--surface, #171b26) !important;
  border-bottom: 1px solid #202534 !important;
  color: var(--text, #ffffff) !important;
}

[data-theme="dark"] .se-item.selected,
body.dark-mode .se-item.selected {
  background: rgba(99, 102, 241, 0.22) !important;
  border-inline-start: 4px solid var(--brand, #6366f1) !important;
}

[data-theme="dark"] .se-line-text,
body.dark-mode .se-line-text {
  color: var(--text, #ffffff) !important;
}

[data-theme="dark"] .se-select-btn,
body.dark-mode .se-select-btn {
  background: var(--surface-2, #202534) !important;
  border: 1px solid var(--border-solid, #2d354a) !important;
  color: var(--text, #ffffff) !important;
}

[data-theme="dark"] .se-select-menu,
body.dark-mode .se-select-menu {
  background: var(--surface, #171b26) !important;
  border: 1px solid var(--border-solid, #2d354a) !important;
  color: var(--text, #ffffff) !important;
}

/* Bottom Bar */
[data-theme="dark"] .app-bottom-bar,
body.dark-mode .app-bottom-bar {
  background: #0d1117 !important;
  border-top: 1px solid #202534 !important;
}

[data-theme="dark"] #songs-count-subtext,
body.dark-mode #songs-count-subtext {
  color: var(--text-3, #94a3b8) !important;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}

body,
input,
button,
select,
textarea {
  font-family: var(--panel-font-family);
  font-size: var(--text-base);
  font-weight: 500;
}

@media (max-width: 768px),
(pointer: coarse) {

  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

.fa,
.fas,
.far,
.fab,
.fa-solid,
.fa-regular,
.fa-brands,
[class*=" fa-"],
[class^="fa-"] {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
  font-weight: 900 !important;
  font-style: normal !important;
}

html,
body {
  height: 100vh;
  overflow: hidden;
  /* FITTED SCREEN VIEW - NO SCROLLBAR */
  background-color: var(--bg-light);
  color: var(--text-main);
  touch-action: pan-x pan-y;
  -ms-touch-action: pan-x pan-y;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* UNIVERSAL BIGGER CIRCULAR CHECKBOXES */
input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  border: 2px solid #cbd5e1 !important;
  border-radius: 50% !important;
  background-color: #ffffff !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  transition: all 0.18s ease !important;
  position: relative !important;
  outline: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

input[type="checkbox"]:hover {
  border-color: #2563eb !important;
  transform: scale(1.12) !important;
}

input[type="checkbox"]:checked {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 13px 13px !important;
}

input[type="checkbox"]:checked::after {
  content: none !important;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* TOP NAV STRIP */
.top-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1.5rem;
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  flex-shrink: 0;
}

.brand-text-centered {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-center-logo {
  height: 42px;
  max-width: 170px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));
  transition: transform 0.2s ease;
}

.brand-center-logo:hover {
  transform: scale(1.04);
}

.top-left-options {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.top-options {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* SECTION TITLES & CIRCLE ANGLE PICKER IN POPOVERS */
.popover-section-title {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--accent-blue, #2563eb);
  background: #f8fafc;
  padding: 4px 8px;
  border-radius: 6px;
  margin-top: 6px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-right: 3px solid var(--accent-blue, #2563eb);
}

.circle-angle-picker-wrapper {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}

.circle-angle-dial {
  position: relative;
  width: 58px;
  height: 58px;
  min-width: 58px;
  min-height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #f8fafc 65%, #e2e8f0 100%);
  border: 2px solid #cbd5e1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08), inset 0 2px 4px rgba(255, 255, 255, 0.9), inset 0 -2px 4px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  touch-action: none;
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.circle-angle-dial::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px dashed rgba(148, 163, 184, 0.4);
  pointer-events: none;
}

.circle-angle-dial:hover {
  border-color: var(--accent-blue, #2563eb);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15), 0 6px 18px rgba(37, 99, 235, 0.18);
  transform: scale(1.04);
}

.circle-angle-pointer {
  position: absolute;
  top: 6px;
  width: 4px;
  height: 23px;
  background: linear-gradient(180deg, #2563eb 0%, #3b82f6 100%);
  border-radius: 3px;
  transform-origin: 50% 23px;
  transform: rotate(90deg);
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.4);
}

.circle-angle-center-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e293b, #475569);
  border: 2px solid #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  z-index: 3;
  pointer-events: none;
}

/* ICON MENU BUTTONS & COMPACT POP-OVERS */
.dropdown-wrapper {
  position: relative;
}

.icon-menu-btn {
  background: #f1f5f9;
  border: 1px solid var(--border-card);
  color: var(--text-main);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.icon-menu-btn:hover {
  background: #e2e8f0;
  color: var(--accent-blue);
}

#btn-menu-install {
  position: relative;
  transition: all 0.2s ease;
}

#btn-menu-install.has-update {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #2563eb;
}

.install-update-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 9px;
  height: 9px;
  background: #ef4444;
  border: 2px solid #ffffff;
  border-radius: 50%;
  animation: pulseInstallBadge 1.5s infinite;
}

@keyframes pulseInstallBadge {
  0% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }

  70% {
    transform: scale(1.15);
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }

  100% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

/* SLEEK ULTRA-COMPACT DROPDOWN POPOVER */
.dropdown-popover {
  position: absolute;
  top: 110%;
  right: 0;
  left: auto;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.22) !important;
  padding: 0.55rem 0.75rem;
  min-width: 260px;
  max-width: min(320px, calc(100vw - 1.5rem));
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  z-index: 99999 !important;
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.dropdown-popover::-webkit-scrollbar {
  width: 4px;
}

/* SIDE DRAWER MENU STYLING FOR "التنسيق والخط" */
#popover-style {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: 430px !important;
  max-width: 90vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  background: #ffffff !important;
  box-shadow: -8px 0 30px rgba(15, 23, 42, 0.2) !important;
  z-index: 999999 !important;
  border-radius: 0 !important;
  border: none !important;
  border-left: 1px solid rgba(226, 232, 240, 0.8) !important;
  padding: 1.2rem 1.4rem !important;
  overflow-y: auto !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

#popover-style.hidden {
  display: flex !important;
  transform: translateX(100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#popover-style:not(.hidden) {
  transform: translateX(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.drawer-backdrop,
.popover-backdrop-overlay,
#popover-style-backdrop {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.drawer-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted, #64748b);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.drawer-close-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #0f172a;
}

.dropdown-popover::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.popover-title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-main);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.popover-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 500;
  min-height: 26px;
}

.popover-row label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  font-size: 0.76rem;
}

.compact-control-group {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.popover-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.2rem;
}

.control-select,
.control-input {
  background: #f8fafc;
  border: 1px solid var(--border-card);
  color: var(--text-main);
  padding: 0.25rem 0.45rem;
  border-radius: 6px;
  font-size: 0.76rem;
  outline: none;
  font-weight: 500;
  max-width: 180px;
  width: 100%;
  box-sizing: border-box;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.control-select:focus,
.control-input:focus {
  border-color: var(--accent-blue);
}

/* SLIDER STYLING MATCHING WEBSITE THEME COLORS */
.slider-input {
  width: 70px;
  height: 4px;
  accent-color: var(--accent-blue) !important;
  cursor: pointer;
}

.color-picker-input {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: none;
}

.btn {
  border: none;
  padding: 0.55rem 1.1rem;
  border-radius: 14px;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.btn-primary {
  background: var(--accent-blue);
  color: #fff;
  font-weight: 700;
}

.btn-secondary {
  background: #f1f5f9;
  border: 1px solid var(--border-card);
  color: var(--text-main);
  font-weight: 600;
}

.btn-sm {
  padding: 0.4rem 0.85rem;
  font-size: var(--text-xs);
  border-radius: 10px;
  font-weight: 600;
}

.screen-cast-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.screen-cast-card:hover {
  background: #eff6ff;
}

.screen-cast-card.main-screen-card {
  background: #eff6ff;
  border: 1.5px solid #93c5fd;
}

.screen-cast-card.main-screen-card:hover {
  background: #dbeafe;
}

.screen-cast-card .screen-name {
  font-size: 0.84rem;
  font-weight: 800;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 6px;
}

.screen-cast-card .screen-res {
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 700;
}

/* COPY LINK ANIMATION RIPPLE KEYFRAMES */
@keyframes copyRipple {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.05);
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.45);
  }

  100% {
    transform: scale(1);
  }
}

.btn-copied-anim {
  animation: copyRipple 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background: #10b981 !important;
  color: #ffffff !important;
  border-color: #059669 !important;
}

/* HERO COMPACT CENTERED SEARCH (FITTED NO SCROLL) */
.search-hero {
  padding: 0.65rem 1.5rem 0.65rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  flex-shrink: 0;
}

.search-toolbar {
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle-switch {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-blue);
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 3px 12px;
  border-radius: 20px;
}

.toggle-switch input {
  accent-color: var(--accent-blue);
  cursor: pointer;
}

.centered-search-box {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0.65rem auto 0.65rem auto;
}

.centered-search-box .search-icon {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8 !important;
  font-size: 1.05rem;
  z-index: 10;
}

.centered-search-box input {
  width: 100%;
  background: #ffffff;
  border: none !important;
  color: #0f172a;
  padding: 0.65rem 3rem 0.65rem 7.1rem !important;
  min-height: 48px;
  border-radius: 28px;
  font-size: var(--text-md);
  font-weight: 600;
  outline: none !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.centered-search-box input::placeholder,
#intelligent-search::placeholder {
  font-size: 0.91rem !important;
  font-weight: 500 !important;
  line-height: normal !important;
  opacity: 0.78 !important;
}

@media (max-width: 768px) {
  .centered-search-box input::placeholder,
  #intelligent-search::placeholder {
    font-size: 0.88rem !important;
    line-height: 46px !important;
  }
}

.centered-search-box:has(#clear-search-btn.hidden) input {
  padding-left: 5.5rem !important;
}

.search-ghost-overlay {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 48px;
  padding: 0.65rem 3rem 0.65rem 7.2rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  direction: rtl;
  pointer-events: none;
  user-select: none;
  z-index: 6;
  overflow: hidden;
  white-space: pre;
  font-size: var(--text-md);
  font-weight: 600;
  font-family: var(--panel-font-family);
  box-sizing: border-box;
}

.search-ghost-overlay.hidden {
  display: none !important;
}

.search-ghost-overlay .ghost-text-track {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  direction: rtl;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: pre;
  pointer-events: none;
}

.search-ghost-overlay .ghost-typed-mirror {
  color: transparent;
  visibility: hidden;
  white-space: pre;
  unicode-bidi: isolate;
  direction: rtl;
  flex-shrink: 0;
}

.search-ghost-overlay .ghost-faded-suggestion {
  color: rgba(100, 116, 139, 0.44);
  white-space: pre;
  unicode-bidi: isolate;
  direction: rtl;
  flex-shrink: 0;
  pointer-events: auto;
  cursor: pointer;
  border-radius: 6px;
  padding: 1px 4px;
  transition: all 0.15s ease;
}

.search-ghost-overlay .ghost-faded-suggestion:hover,
.search-ghost-overlay .ghost-faded-suggestion:active {
  color: var(--accent-blue, #2563eb);
  background-color: rgba(37, 99, 235, 0.08);
}

.search-ghost-overlay .ghost-faded-suggestion.is-franco-beside {
  margin-right: 0.45rem;
}

.search-ghost-overlay .ghost-tab-pill {
  position: absolute;
  left: 7.1rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(148, 163, 184, 0.12);
  color: rgba(100, 116, 139, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 7px;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 2px 6px;
  margin: 0;
  line-height: 1.2;
  user-select: none;
  flex-shrink: 0;
  opacity: 0.62;
  z-index: 12;
  animation: ghostPillPop 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.search-ghost-overlay .ghost-tab-pill:hover,
.search-ghost-overlay .ghost-tab-pill:active {
  opacity: 1;
  background: #5b6cf5;
  color: #ffffff;
  border-color: #5b6cf5;
  transform: translateY(-50%) scale(1.04);
}

@keyframes ghostPillPop {
  from {
    opacity: 0;
    transform: translateY(-50%) scale(0.88);
  }

  to {
    opacity: 0.62;
    transform: translateY(-50%) scale(1);
  }
}

.centered-search-box input::selection {
  background: #bfdbfe !important;
  color: #1e3a8a !important;
}

.centered-search-box input::-moz-selection {
  background: #bfdbfe !important;
  color: #1e3a8a !important;
}

.search-item.keyboard-selected {
  background: var(--brand-bg, #eef0ff) !important;
  border: none !important;
  border-inline-start: none !important;
  box-shadow: none !important;
  transform: none !important;
  outline: none !important;
}

[data-theme="dark"] .search-item.keyboard-selected,
body.dark-mode .search-item.keyboard-selected {
  background: rgba(91, 108, 245, 0.22) !important;
  border: none !important;
  border-inline-start: none !important;
  box-shadow: none !important;
  transform: none !important;
  outline: none !important;
}

.centered-search-box input:focus,
.centered-search-box input:active,
.centered-search-box input:focus-visible {
  background: var(--surface, #ffffff) !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.12) !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.centered-search-box .clear-btn {
  position: absolute;
  left: 5.35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.05rem;
  cursor: pointer;
  z-index: 10;
}

.search-inside-controls {
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 15;
  height: auto;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible;
  box-shadow: none !important;
  box-sizing: border-box;
}

.search-inside-toggle,
.icon-only-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #94a3b8;
  cursor: pointer;
  border-radius: 50% !important;
  transition: color 0.18s ease, background-color 0.18s ease;
  flex-shrink: 0;
  box-sizing: border-box;
}

#franco-toggle-btn::after {
  content: "";
  display: block !important;
  position: absolute;
  left: -4.5px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background: #cbd5e1;
  pointer-events: none;
}

.search-inside-toggle.active,
#franco-toggle-btn.active,
#btn-menu-bible.active {
  background: transparent !important;
  border: none !important;
  color: #2563eb !important;
  box-shadow: none !important;
}

@media (hover: hover) {

  .search-inside-toggle:hover,
  #franco-toggle-btn:hover,
  #btn-menu-bible:hover,
  .search-inside-toggle.active:hover,
  #franco-toggle-btn.active:hover,
  #btn-menu-bible.active:hover {
    background: rgba(148, 163, 184, 0.18) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 50% !important;
    transform: none;
  }

  .search-inside-toggle:not(.active):hover,
  #franco-toggle-btn:not(.active):hover,
  #btn-menu-bible:not(.active):hover {
    color: #475569;
  }
}

.search-inside-toggle.active i,
#franco-toggle-btn.active i,
#btn-menu-bible.active i {
  color: #2563eb !important;
}

.search-inside-toggle i {
  font-size: 1.05rem;
  line-height: 1;
}

/* SEARCH DROPDOWN FLUSH ATTACHED DIRECTLY UNDER SEARCH INPUT */
.search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: 16px;
  box-shadow: var(--shadow-popover);
  max-height: 420px;
  overflow-y: auto;
  z-index: 500;
}

/* FUSED 1-RECTANGLE UNIFIED SEARCH BAR & RESULTS CONTAINER WHEN DROPDOWN IS OPEN */
.centered-search-box:has(#search-results-dropdown:not(.hidden)) input,
.centered-search-box.has-open-dropdown input {
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.12) !important;
  background: #ffffff !important;
}

.app-container.use-combined-search-suggestions #search-suggestions-chips:not(.hidden):not(:empty)+.centered-search-box input,
.app-container.use-combined-search-suggestions #search-suggestions-chips:not(.hidden):not(:empty)+.centered-search-box:has(#search-results-dropdown:not(.hidden)) input,
.app-container.use-combined-search-suggestions #search-suggestions-chips:not(.hidden):not(:empty)+.centered-search-box.has-open-dropdown input {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-top-color: transparent !important;
}

#search-results-dropdown:not(.hidden) {
  top: 100% !important;
  border-top: none !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 20px !important;
  border-bottom-right-radius: 20px !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.15) !important;
  border: 1px solid #e2e8f0 !important;
  border-top: none !important;
  margin-top: 0 !important;
}

.search-dropdown::-webkit-scrollbar {
  width: 6px;
}

.search-dropdown::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.franco-translation-header {
  padding: 0.6rem 1.15rem;
  background: #eff6ff;
  border: none !important;
  border-bottom: none !important;
  color: var(--accent-blue);
  font-size: 0.84rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  text-align: right;
  border-radius: 0 !important;
}

.franco-translation-header strong {
  color: #1d4ed8;
  background: #dbeafe;
  padding: 1px 8px;
  border-radius: 6px;
  font-size: 0.9rem;
}

/* FRANCO PROMPT CARD & BANNER WHEN ENGLISH IS TYPED AND FRANCO IS OFF */
/* COMPACT FRANCO RECOMMENDATION CARD & BANNER */
.search-franco-compact-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  margin: 6px 8px 4px 8px !important;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.95), rgba(240, 249, 255, 0.9)) !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08) !important;
}

.franco-compact-lead {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #1e40af;
}

.franco-sparkle-icon {
  color: #2563eb;
  font-size: 1.05rem;
  filter: drop-shadow(0 0 4px rgba(37, 99, 235, 0.4));
  animation: francoSparklePulse 2s ease-in-out infinite;
}

@keyframes francoSparklePulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.9;
  }

  50% {
    transform: scale(1.18);
    opacity: 1;
  }
}

.btn-franco-compact-action {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff !important;
  border: none;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-franco-compact-action:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.4);
}

/* SEARCH DROPDOWN FOOTER: ADD NEW TARNIMA */
.search-dropdown-footer-add {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  margin: 6px 8px 8px 8px;
  background: rgba(248, 250, 252, 0.95);
  border-top: 1px dashed #cbd5e1;
  border-radius: 10px;
}

.search-footer-add-hint {
  font-size: 0.82rem;
  color: #64748b;
  font-weight: 600;
}

.btn-search-footer-add {
  background: #f1f5f9;
  color: #2563eb;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-search-footer-add:hover {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.suggestion-chip.franco-prompt-chip {
  background: #eff6ff !important;
  border: none !important;
  color: #1d4ed8 !important;
  font-weight: 700 !important;
}

.suggestion-chip.franco-prompt-chip:hover {
  background: #2563eb !important;
  color: #ffffff !important;
  border: none !important;
}

.suggestion-chip.franco-prompt-chip:hover i {
  color: #ffffff !important;
}

.search-item {
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: right;
  transition: background 0.12s;
}

.search-item:hover {
  background: #f0f6ff;
}

.search-item .item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.search-item .item-title-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.search-item .item-title {
  font-weight: 700;
  color: #0f172a;
  font-size: var(--text-md);
  flex: 0 1 auto;
  min-width: 0;
}

.search-item .item-artist-avatars {
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  vertical-align: middle;
  flex-shrink: 0;
}

.search-item .item-artist-avatar-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.search-item .item-artist-avatar-wrap:not(:first-child) {
  margin-inline-start: -6px;
}

.search-item .item-artist-avatar {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 1.5px solid var(--surface, #ffffff);
  object-fit: cover;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease;
  pointer-events: auto;
}

[data-theme="dark"] .search-item .item-artist-avatar {
  border-color: #1e2132;
}

.search-item .item-artist-avatar-wrap:hover {
  z-index: 25;
}

.search-item .item-artist-avatar-wrap:hover .item-artist-avatar {
  transform: scale(1.22);
}

/* Small name tag hover style with ~0.5s delay */
.search-item .item-artist-nametag {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  background: #0f172a;
  color: #ffffff;
  font-family: 'Cairo', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  transition: opacity 0.18s cubic-bezier(.4, 0, .2, 1), transform 0.18s cubic-bezier(.16, 1, .3, 1), visibility 0.18s;
  transition-delay: 0s;
  z-index: 100;
}

.search-item .item-artist-nametag::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 4px;
  border-style: solid;
  border-color: #0f172a transparent transparent transparent;
}

[data-theme="dark"] .search-item .item-artist-nametag {
  background: #1e2132;
  color: #e8eaf6;
  border: 1px solid rgba(91, 108, 245, 0.25);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .search-item .item-artist-nametag::before {
  border-color: #1e2132 transparent transparent transparent;
}

.search-item .item-artist-avatar-wrap:hover .item-artist-nametag {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0.5s;
}

.search-item .item-badges-group {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}

.search-load-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 1.6rem);
  margin: 0.8rem auto;
  padding: 0.75rem 1rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  color: var(--accent-blue, #2563eb);
  font-weight: 800;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0.9, 0.3, 1);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.search-load-more-btn:hover,
.search-load-more-btn:active {
  background: var(--accent-blue, #2563eb);
  color: #ffffff;
  border-color: var(--accent-blue, #2563eb);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.search-item .item-badge {
  font-size: 0.72rem;
  color: var(--accent-blue);
  background: #eff6ff;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 7px;
  font-weight: 700;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none !important;
  flex-shrink: 0;
}

.search-item .item-badge.bible-badge {
  color: #7c3aed;
  background: #f5f3ff;
  border: none !important;
}

.search-item .item-badge.lyrics-match-badge {
  color: #0e7490;
  background: #ecfeff;
  border: none !important;
}

/* Highlight matched text in search results */
.search-highlight {
  background: #fef08a;
  color: #78350f;
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 800;
}

.search-item .item-preview-box {
  padding: 0.45rem 0.75rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: #475569;
  line-height: 1.55;
  word-break: break-word;
}

.search-item .line-num-mini {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent-blue);
  background: #e0f2fe;
  padding: 1px 5px;
  border-radius: 4px;
  margin: 0 4px;
  display: inline-block;
}

.search-item .line-num-mini.matched-line-badge {
  color: #7c3aed;
  background: #ede9fe;
}

.search-item .preview-sep {
  color: #94a3b8;
  margin: 0 5px;
  font-size: 0.72rem;
  font-weight: 800;
  vertical-align: middle;
}

.search-item.no-results-item {
  cursor: default !important;
  background: #ffffff !important;
  color: var(--text-muted) !important;
  display: flex;
  align-items: center;
}

.search-item.no-results-item:hover {
  background: #ffffff !important;
}


/* DUAL-COLUMN DASHBOARD (FITTED 100% SCREEN HEIGHT) */
.dashboard-halves {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 1.15rem;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.5rem 0.5rem 1.5rem;
  flex: 1;
  overflow: hidden;
}

.half-panel {
  width: 520px;
  min-width: 0;
  max-width: 100%;
  flex: 1 1 520px;
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.panel-bar {
  padding: 0 1.15rem;
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border-card);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  box-sizing: border-box;
}

.panel-bar .panel-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.panel-bar-start,
.panel-bar-end {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 0.5rem;
}

.panel-bar-center {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.panel-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mini-btn-flat {
  background: #ffffff;
  border: 1.5px solid var(--border-card, #cbd5e1);
  color: var(--text-main, #0f172a);
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.mini-btn-flat:hover {
  background: #eff6ff;
  color: #2563eb;
  transform: translateY(-1px);
}

.mini-btn-flat.active {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #1d4ed8 !important;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.4) !important;
}

/* =========================================================
   GROUPED PRESENTATION MODES BAR (STANDBY, HIDE, HIGHLIGHT)
   ========================================================= */
.presentation-modes-group {
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.mode-group-btn {
  background: transparent;
  border: none;
  outline: none;
  color: #475569;
  width: 28px;
  height: 26px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.82rem;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
  margin: 0;
}

.mode-group-btn:hover {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}

/* ACTIVE STATES FOR MODE GROUP BUTTONS */
#btn-toggle-standby.active-mode,
#btn-toggle-standby.active {
  background: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.35) !important;
}

#btn-toggle-standby.active-mode i,
#btn-toggle-standby.active i {
  color: #ffffff !important;
}

#btn-toggle-blank.active,
#btn-toggle-blank.active-mode {
  background: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(239, 68, 68, 0.35) !important;
}

#btn-toggle-blank.active i,
#btn-toggle-blank.active-mode i {
  color: #ffffff !important;
}

#btn-toggle-highlight-tool.active,
#btn-toggle-highlight-tool.active-mode {
  background: #f59e0b !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(245, 158, 11, 0.35) !important;
}

#btn-toggle-highlight-tool.active i,
#btn-toggle-highlight-tool.active-mode i {
  color: #ffffff !important;
}

.presentation-modes-group .highlight-color-picker-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 3px;
  margin-left: 2px;
}

.presentation-modes-group .highlight-color-picker-wrap.hidden {
  display: none !important;
}

.highlight-color-circle-btn {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1.5px #cbd5e1, 0 1px 3px rgba(0, 0, 0, 0.15);
  background: #ef4444;
  cursor: pointer;
  padding: 0;
  margin: 0;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
}

.highlight-color-circle-btn:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 2px #94a3b8, 0 2px 6px rgba(0, 0, 0, 0.22);
}

.highlight-color-circle-btn:active {
  transform: scale(0.95);
}

.mini-btn-flat.btn-obs-fix {
  background: #fffbeb !important;
  color: #d97706 !important;
  border-color: #fcd34d !important;
  transition: all 0.2s ease;
}

.mini-btn-flat.btn-obs-fix:hover {
  background: #fef3c7 !important;
  color: #b45309 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.18);
}

.counter-text {
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748b;
}

/* FLOATING ACTIVE SONG SCALE BADGE IN PREVIEW PANEL (ICON + VALUE ONLY) */
.presentation-lines-panel {
  position: relative;
}

#active-song-scale-badge,
.floating-scale-badge {
  position: absolute;
  bottom: 12px;
  left: 14px;
  z-index: 15;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #1e293b;
  border: 1px solid #cbd5e1;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.2px;
  user-select: none;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
}

#active-song-scale-badge:hover,
.floating-scale-badge:hover {
  background: #ffffff;
  border-color: #94a3b8;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}

#active-song-scale-badge i,
.floating-scale-badge i {
  color: #2563eb;
  font-size: 0.72rem;
}

#active-song-scale-badge .scale-text,
.floating-scale-badge .scale-text {
  color: #0f172a;
  font-weight: 800;
}

#active-song-scale-badge.hidden,
.floating-scale-badge.hidden {
  display: none !important;
}

/* INLINE SONG SCALE BADGE (FOR RECENTS LIST & SONG ITEMS) */
.song-scale-badge {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  user-select: none;
  vertical-align: middle;
}

.song-scale-badge i {
  font-size: 0.68rem;
  color: #2563eb;
}

.badge-count {
  background: rgba(100, 116, 139, 0.14);
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0px 8px;
  border-radius: 50%;
}

.panel-title-btn {
  background: transparent;
  border: none;
  font-size: 0.88rem;
  font-weight: 800;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all 0.18s ease;
}

.panel-title-btn:hover {
  background: #eff6ff;
  color: #2563eb;
}

.panel-title-btn .title-chevron {
  font-size: 0.72rem;
  color: #64748b;
  transition: transform 0.2s ease;
}

.panel-title-btn:hover .title-chevron {
  color: #2563eb;
}

.mini-btn-danger {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #dc2626;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.mini-btn-danger:hover {
  background: #fca5a5;
  color: #991b1b;
}

.recent-select-all-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0;
}

/* POPOVER PLAYLIST MATCHING APP SLEEK CLEAN DESIGN SYSTEM */
#popover-playlist {
  min-width: 320px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
}

.playlist-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 12px;
}

.playlist-popover-title {
  font-size: 0.98rem;
  font-weight: 800;
  color: #0f172a;
}

.close-popover-x {
  background: transparent;
  border: none;
  font-size: 1.2rem;
  color: #94a3b8;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.close-popover-x:hover {
  color: #ef4444;
  background: #fee2e2;
}

.playlists-list-container {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.playlist-entry-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: all 0.18s ease;
}

.playlist-entry-row:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.playlist-entry-row.active {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  box-shadow: none;
  outline: none;
}

.playlist-row-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 800;
  color: #0f172a;
}

.playlist-count-text {
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748b;
}

.playlist-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pl-icon-btn {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  color: #1e293b;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 6px 10px;
  min-width: 34px;
  height: 34px;
  border-radius: 10px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.06);
}

.pl-icon-btn i {
  color: inherit;
  font-size: 0.95rem;
  transition: color 0.15s ease;
}

.pl-icon-btn.btn-export-pl:hover {
  color: #2563eb !important;
  background: #eff6ff !important;
}

.pl-icon-btn.btn-import-pl:hover {
  color: #10b981 !important;
  background: #ecfdf5 !important;
}

.pl-icon-btn.btn-delete-pl:hover {
  color: #ef4444 !important;
  background: #fef2f2 !important;
}

/* INLINE EXPANDABLE NEW PLAYLIST BAR */
.new-playlist-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.btn-create-playlist-pill {
  width: 100%;
  height: 42px;
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  border: 1.5px dashed rgba(37, 99, 235, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  box-shadow: none;
}

.btn-create-playlist-pill .icon-close {
  display: none;
}

.btn-create-playlist-pill:hover {
  background: rgba(37, 99, 235, 0.14);
  border-color: #2563eb;
  color: #1d4ed8;
}

.new-playlist-bar.active .btn-create-playlist-pill {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: #f1f5f9;
  color: #64748b;
  padding: 0;
  font-size: 1rem;
}

.new-playlist-bar.active .btn-create-playlist-pill:hover {
  background: #e2e8f0;
  color: #1e293b;
  border-color: #94a3b8;
}

.new-playlist-bar.active .btn-create-playlist-pill .icon-plus,
.new-playlist-bar.active .btn-create-playlist-pill .btn-text {
  display: none;
}

.new-playlist-bar.active .btn-create-playlist-pill .icon-close {
  display: inline-block;
}

.new-playlist-input-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  width: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  margin-bottom: 0;
}

.new-playlist-bar.active .new-playlist-input-wrapper {
  width: 100%;
  opacity: 1;
  pointer-events: auto;
  overflow: visible;
}

.new-playlist-input {
  flex: 1;
  width: 100%;
  height: 40px;
  border-radius: 10px;
  border: 1.5px solid rgba(37, 99, 235, 0.35);
  padding: 0 12px;
  font-size: 0.88rem;
  font-weight: 600;
  outline: none;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.new-playlist-input:focus {
  border-color: #2563eb;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.18);
}

.btn-save-inline {
  height: 40px;
  min-width: 40px;
  width: 40px;
  border-radius: 10px;
  background: #10b981;
  color: #ffffff;
  border: none;
  font-size: 0.95rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.btn-save-inline:hover {
  background: #059669;
  transform: translateY(-1px);
}

.lines-list-box,
.recent-list-box {
  flex: 1;
  overflow-y: auto;
}

#presentation-lines-container {
  scroll-behavior: smooth;
}

#presentation-lines-container .line-item:last-child,
#presentation-lines-container .allinone-slide-group:last-child {
  margin-bottom: 0 !important;
}

.line-item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0.95rem 2.5rem 1.85rem 1.15rem;
  min-height: 68px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: all 0.15s ease;
  background: #ffffff;
}

.line-item:hover {
  background: #f8fafc;
}

.line-item.active {
  background: #fffbe6 !important;
  border-right: none !important;
}

.slide-card-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}

.slide-lines-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: right;
  font-size: 1.05rem;
  font-weight: 650;
  color: #0f172a;
  line-height: 1.7;
  letter-spacing: 0.01em;
  padding-left: 36px;
  padding-right: 32px;
}

.slide-line-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: break-word;
  font-size: 1.05rem !important;
}

#btn-playlist-selector,
.panel-title-btn,
#btn-playlist-selector span,
.panel-title-btn span {
  font-weight: 700 !important;
  font-size: var(--text-lg) !important;
}

/* EXTEND/PREVIEW BUTTON FOR SEARCH ITEMS */
.btn-toggle-item-preview {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #475569;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-toggle-item-preview:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #2563eb;
}

.btn-toggle-item-preview.active {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #1d4ed8 !important;
}

.item-preview-box.preview-expandable.hidden {
  display: none !important;
}

.repeat-tag,
.slide-line-row .repeat-tag,
.rep-num-grey {
  color: #94a3b8 !important;
  font-weight: 700 !important;
  font-size: 0.72em !important;
  margin: 0 3px !important;
  display: inline-block !important;
  vertical-align: baseline !important;
  opacity: 0.85 !important;
}

/* Un-condense Jomhuria font for wide spacious layout - SLIDES ONLY */
#obs-presentation-overlay [style*="Jomhuria"],
#obs-presentation-overlay [style*="jomhuria"],
#obs-line-text[style*="Jomhuria"],
#obs-line-text[style*="jomhuria"],
.line-text[style*="Jomhuria"],
.line-text[style*="jomhuria"] {
  letter-spacing: 2.5px;
  word-spacing: 8px;
  font-weight: 400 !important;
}

.slide-badge-side {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748b;
  user-select: none;
}

.slide-badge-side.chorus-badge-side,
.chorus-badge-side,
.badge-num.chorus-num,
.chorus-num {
  color: #ef4444 !important;
  font-weight: 700 !important;
  font-size: 0.72em !important;
}

.badge-num {
  font-weight: 700;
  font-size: 0.72em !important;
  display: inline-block;
  margin-left: 4px;
}

.badge-num.verse-num,
.verse-num,
.stanza-badge-side,
.verse-badge-side,
.slide-badge-layer {
  color: #94a3b8 !important;
  font-weight: 700 !important;
  font-size: 0.72em !important;
}

.stanza-badge-side {
  color: #94a3b8 !important;
  /* Elegant grey for numbers */
  font-weight: 700 !important;
}

.obs-slide-wrapper {
  position: relative;
  display: block;
  text-align: center;
  width: 100%;
  max-width: 100%;
  overflow: visible !important;
}

.obs-lines-wrapper {
  display: block;
  text-align: center;
  width: 100%;
  overflow: visible !important;
}

.obs-first-line-wrapper {
  position: relative !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  justify-content: center !important;
  text-align: center;
  max-width: 100%;
  overflow: visible !important;
  gap: 0.22em !important;
}

.slide-badge-layer {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: -0.06em !important;
  vertical-align: middle !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 0.9 !important;
  font-weight: 700 !important;
  font-size: 0.55em !important;
  line-height: 1 !important;
  margin: 0 !important;
  margin-inline-end: 0.22em !important;
  margin-inline-start: 0 !important;
  padding: 0 !important;
  z-index: 15 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  user-select: none !important;
}

.slide-badge-layer.chorus-badge-side,
.slide-badge-layer.chorus-num {
  color: #ef4444 !important;
  font-weight: 800 !important;
  font-size: 0.55em !important;
}

.slide-badge-layer.stanza-badge-side,
.slide-badge-layer.verse-badge-side,
.slide-badge-layer.verse-num {
  color: #94a3b8 !important;
  font-weight: 700 !important;
  font-size: 0.55em !important;
}

/* FOR LTR / ENGLISH HYMNS: BADGE SITS TO THE LEFT OF THE FIRST LINE */
[dir="ltr"] .slide-badge-layer,
.is-ltr .slide-badge-layer,
.is-ltr-badge {
  left: auto !important;
  right: auto !important;
  top: -0.06em !important;
  margin: 0 !important;
  margin-inline-end: 0.22em !important;
  margin-inline-start: 0 !important;
}

[dir="ltr"] .slide-lines-body,
.is-ltr .slide-lines-body {
  text-align: left !important;
}

[dir="ltr"] .line-item,
.is-ltr.line-item {
  direction: ltr !important;
}

/* ALWAYS BESIDE LINE (NEVER ABOVE IT) IN ALL MODES */
@media (max-aspect-ratio: 1/1),
(orientation: portrait),
(max-width: 768px) {
  .obs-first-line-wrapper {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 0.22em !important;
  }

  .obs-first-line-wrapper .slide-badge-layer,
  .slide-badge-layer {
    display: inline-block !important;
    margin: 0 0.18em !important;
    font-size: 0.52em !important;
  }
}

.obs-vertical-mode .obs-first-line-wrapper {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 0.22em !important;
}

.obs-vertical-mode .obs-first-line-wrapper .slide-badge-layer,
.obs-vertical-mode .slide-badge-layer {
  display: inline-block !important;
  margin: 0 0.18em !important;
  font-size: 0.52em !important;
}

.slide-index-corner {
  position: absolute;
  bottom: 4px;
  left: 10px;
  font-size: 0.65rem !important;
  font-weight: 700;
  color: #94a3b8;
}

.line-item.active .slide-index-corner {
  color: #d97706;
}

.line-item-actions-left {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 10;
}

.line-item-actions-right {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 10;
}

.copy-line-btn,
.split-line-btn,
.launch-fullscreen-btn {
  background: transparent !important;
  border: none !important;
  color: #64748b;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: none !important;
  opacity: 0.75;
}

.copy-line-btn:hover,
.split-line-btn:hover,
.launch-fullscreen-btn:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #2563eb !important;
  opacity: 1;
  transform: scale(1.15);
}

.split-line-btn.active {
  color: #2563eb !important;
  background: rgba(37, 99, 235, 0.12) !important;
  opacity: 1 !important;
  border-radius: 6px !important;
}

.copy-line-btn.copied {
  background: transparent !important;
  color: #10b981 !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 1;
}

.recent-item {
  padding: 0.75rem 1.15rem;
  border-bottom: 1px solid #f1f5f9;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.2s ease, background 0.15s ease;
  position: relative;
  background: #ffffff;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.recent-item.dragging {
  opacity: 0.9;
  transform: scale(1.03) translateY(-2px);
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.25);
  border: 2px solid var(--accent-blue) !important;
  border-radius: 10px;
  z-index: 50;
}

.recent-item .recent-title-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.drag-handle-icon,
.recent-item .drag-handle-icon {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  color: #94a3b8;
  font-size: 0.85rem;
  opacity: 0.65;
  cursor: grab;
  padding: 2px 4px;
  display: inline-block;
}

.recent-title,
.recent-item .recent-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: #0f172a;
}

.recent-item .recent-meta,
.recent-item .recent-subtext {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--text-muted);
}

.recent-item .delete-recent-btn {
  background: #fee2e2 !important;
  border: 1px solid #fca5a5 !important;
  color: #dc2626 !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
}

.recent-item .delete-recent-btn:hover {
  color: #ffffff !important;
  background: #dc2626 !important;
  border-color: #b91c1c !important;
  transform: scale(1.06) !important;
}

.recent-item:hover {
  background: #f8fafc;
}

.recent-item:hover .recent-title {
  color: var(--accent-blue);
}

.recent-item:hover .drag-handle-icon {
  color: var(--accent-blue);
}

.recent-item.active {
  background: #eff6ff;
  border-right: none !important;
}

.empty-state {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--text-muted);
}

.empty-state i {
  font-size: 2.2rem;
  margin-bottom: 0.75rem;
  color: #cbd5e1;
}

.empty-state p {
  font-size: 0.9rem;
  line-height: 1.5;
}

.app-toast {
  position: fixed;
  bottom: 3.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: rgba(15, 23, 42, 0.92);
  color: #ffffff;
  padding: 0.65rem 1.3rem;
  border-radius: 30px;
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  z-index: 9999;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

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

.app-toast.hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  pointer-events: none;
}

/* BIG SLIDE NUMBER JUMP TOAST CARD */
.slide-num-toast-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.85rem;
  gap: 2px;
}

.slide-num-toast-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.slide-num-big-val {
  font-size: 3rem;
  font-weight: 900;
  color: #60a5fa;
  line-height: 1;
  letter-spacing: -0.02em;
  font-family: 'Outfit', sans-serif, system-ui;
}

.slide-num-enter-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  background: rgba(37, 99, 235, 0.9) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
  padding: 4px 10px !important;
  min-width: 44px !important;
  height: 38px !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4) !important;
}

.slide-num-enter-pill i,
.slide-num-enter-pill span {
  color: #ffffff !important;
  font-size: 1.1rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  display: inline-block !important;
}

.slide-num-subtext {
  font-size: 0.82rem;
  font-weight: 700;
  color: #cbd5e1;
  margin-top: 2px;
  letter-spacing: 0.02em;
}

/* BOTTOM FOOTER STATUS STRIP */
.app-bottom-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 1rem;
  background: transparent !important;
  border-top: none !important;
  margin-bottom: 8px !important;
  flex-shrink: 0;
  z-index: 100;
}

/* CREDITS INFO ICON AT BOTTOM LEFT */
.credits-info-btn {
  position: absolute;
  right: 1.15rem;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.95rem;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.credits-info-btn:hover {
  color: var(--accent-blue);
  transform: scale(1.2);
}

/* CREDITS MODAL POPUP */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  z-index: 999999 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-card {
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: 20px;
  box-shadow: var(--shadow-popover);
  width: 100%;
  max-width: 440px;
  overflow: hidden;
  animation: popIn 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-header {
  padding: 1rem 1.25rem;
  background: #f8fafc;
  border-bottom: 1px solid var(--border-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header .modal-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modal-header .modal-title i {
  color: var(--accent-blue);
}

.modal-close-btn {
  background: #f1f5f9;
  border: none;
  color: var(--text-muted);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: all 0.15s ease;
}

.modal-close-btn:hover {
  background: #fee2e2;
  color: #dc2626;
}

.modal-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modal-body .credits-text {
  font-size: 0.92rem;
  color: #334155;
  line-height: 1.6;
  font-weight: 500;
}

.modal-body .credits-link {
  color: var(--accent-blue);
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.modal-body .credits-link:hover {
  text-decoration: underline;
}

.modal-body .credits-author {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 0.65rem 0.9rem;
  border-radius: 12px;
  color: #1e40af;
  font-size: 0.88rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modal-body .credits-author strong {
  color: #1e3a8a;
  font-weight: 800;
}

.songs-count-subtext {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-blue);
  background: #eff6ff;
  border: 1px solid #dbeafe;
  padding: 3px 14px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* FRANCO TRANSLATOR INTRO BANNER MODAL STYLES */
.gemini-intro-card {
  max-width: 420px;
  width: 90%;
  border-radius: 24px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(226, 232, 240, 0.9);
  animation: modalPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.gemini-intro-banner-header {
  position: relative;
  padding: 2.25rem 1.5rem 1.25rem;
  background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 50%, #faf5ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #f1f5f9;
}

.gemini-intro-banner-header .modal-close-btn {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.gemini-intro-banner-header .modal-close-btn:hover {
  background: #fee2e2;
  color: #ef4444;
  border-color: #fca5a5;
  transform: rotate(90deg);
}

.gemini-icon-hero-wrapper {
  width: 76px;
  height: 76px;
  border-radius: 22px;
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #8b5cf6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 2.2rem;
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.3s ease;
}

.gemini-icon-hero-wrapper:hover {
  transform: scale(1.05) rotate(3deg);
}

.gemini-intro-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 10px;
}

.gemini-intro-text {
  color: #475569;
  font-size: 0.96rem;
  line-height: 1.7;
  margin-top: 4px;
  margin-bottom: 22px;
}

.gemini-confirm-btn {
  width: 100%;
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
  color: #ffffff;
  border: none;
  border-radius: 14px;
  padding: 13px 24px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.32);
  transition: all 0.2s ease;
}

.gemini-confirm-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.45);
}

/* =========================================================
   UNIFIED FIRST-VISIT STARTUP HUB & KEYBOARD SHORTCUTS SHEET
   ========================================================= */
.welcome-startup-card {
  max-width: 540px;
  width: 92%;
  max-height: 90vh;
  border-radius: 24px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 32px 64px -12px rgba(15, 23, 42, 0.22);
  display: flex;
  flex-direction: column;
  font-family: 'Cairo', sans-serif;
  animation: fadeScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.welcome-startup-header {
  position: relative;
  padding: 24px 24px 16px;
  background: linear-gradient(180deg, #f3f4f9 0%, #ffffff 100%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.welcome-startup-header .modal-close-btn,
.shortcuts-sheet-header .modal-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #eceef7;
  color: #4b5068;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.welcome-startup-header .modal-close-btn {
  position: absolute;
  top: 16px;
  left: 16px;
}

.welcome-startup-header .modal-close-btn:hover,
.shortcuts-sheet-header .modal-close-btn:hover {
  background: #eef0ff;
  color: #5b6cf5;
  transform: scale(1.08);
}

.welcome-startup-hero-badge {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 8px 24px -4px rgba(91, 108, 245, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  padding: 10px;
}

.welcome-startup-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.welcome-startup-title {
  font-size: 1.22rem;
  font-weight: 800;
  color: #1a1d2e;
  margin: 0 0 4px;
}

.welcome-startup-subtitle {
  font-size: 0.84rem;
  color: #4b5068;
  margin: 0;
  line-height: 1.5;
}

.welcome-startup-body {
  padding: 8px 22px 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.welcome-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.welcome-feature-item {
  width: 100%;
  background: var(--surface-2, #f7f8fc);
  border: 1px solid var(--border-solid, #e4e6f0);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Cairo', sans-serif;
  text-align: right;
  cursor: pointer;
  outline: none;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s var(--spring, cubic-bezier(0.16, 1, 0.3, 1));
}

.welcome-feature-item:hover {
  background: var(--brand-bg, #eef0ff);
  border-color: rgba(91, 108, 245, 0.28);
  transform: translateY(-1px);
}

.welcome-feature-item:active {
  transform: scale(0.98);
}

.welcome-feature-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem;
  flex-shrink: 0;
}

.welcome-feature-name {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text, #1a1d2e);
  line-height: 1.35;
}

.welcome-feature-arrow {
  font-size: 0.72rem;
  color: var(--text-3, #8b90a8);
  flex-shrink: 0;
  transition: transform 0.18s ease, color 0.18s ease;
}

.welcome-feature-item:hover .welcome-feature-arrow {
  color: var(--brand, #5b6cf5);
  transform: translateX(-3px);
}

[data-theme="dark"] .welcome-startup-header,
body.dark-mode .welcome-startup-header {
  background: linear-gradient(180deg, var(--surface-2, #1e2132) 0%, var(--surface, #181b26) 100%) !important;
}

[data-theme="dark"] .welcome-startup-title,
body.dark-mode .welcome-startup-title,
[data-theme="dark"] .welcome-feature-name,
body.dark-mode .welcome-feature-name,
[data-theme="dark"] .welcome-offline-title,
body.dark-mode .welcome-offline-title {
  color: var(--text, #e8eaf6) !important;
}

[data-theme="dark"] .welcome-feature-item,
body.dark-mode .welcome-feature-item,
[data-theme="dark"] .welcome-offline-box,
body.dark-mode .welcome-offline-box {
  background: var(--surface-2, #1e2132) !important;
  border-color: var(--border-solid, #2a2d42) !important;
}

[data-theme="dark"] .welcome-feature-item:hover,
body.dark-mode .welcome-feature-item:hover {
  background: var(--brand-bg, rgba(91, 108, 245, 0.15)) !important;
  border-color: rgba(91, 108, 245, 0.35) !important;
}

[data-theme="dark"] .welcome-startup-footer,
body.dark-mode .welcome-startup-footer {
  background: var(--surface-2, #1e2132) !important;
  border-top-color: var(--border-solid, #2a2d42) !important;
}

.welcome-feature-desc kbd,
.shortcut-keys kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  font-family: 'Cairo', monospace, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: #1a1d2e;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  direction: ltr;
}

/* Integrated Offline Download Box inside Startup Hub */
.welcome-offline-box {
  background: #f7f8fc;
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.welcome-offline-box.is-ready {
  background: #ecfdf5;
}

.welcome-offline-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 200px;
}

.welcome-offline-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.welcome-offline-box.is-ready .welcome-offline-icon {
  background: rgba(16, 185, 129, 0.18);
  color: #059669;
}

.welcome-offline-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.welcome-offline-title {
  font-size: 0.86rem;
  font-weight: 800;
  color: #1a1d2e;
}

.welcome-offline-desc {
  font-size: 0.75rem;
  color: #4b5068;
  line-height: 1.45;
}

.welcome-offline-btn {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 8px 15px;
  font-family: 'Cairo', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 6px 14px rgba(16, 185, 129, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.welcome-offline-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.26) inset, 0 10px 20px rgba(16, 185, 129, 0.28);
}

.welcome-offline-btn:disabled {
  opacity: 0.85;
  cursor: default;
}

.welcome-offline-box.is-ready .welcome-offline-btn {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
  box-shadow: none;
}

.welcome-offline-progress {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 2px;
}

.welcome-offline-progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  overflow: hidden;
}

.welcome-offline-progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #5b6cf5, #10b981);
  border-radius: 999px;
  transition: width 0.2s ease;
}

.welcome-offline-progress-label {
  font-size: 0.74rem;
  font-weight: 700;
  color: #4b5068;
  text-align: center;
}

.welcome-startup-footer {
  padding: 14px 22px 18px;
  background: #f7f8fc;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.welcome-secondary-btn {
  background: #eceef7;
  color: #1a1d2e;
  border: none;
  border-radius: 14px;
  padding: 10px 16px;
  font-family: 'Cairo', sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.welcome-secondary-btn:hover {
  background: #eef0ff;
  color: #5b6cf5;
}

.welcome-primary-btn {
  background: linear-gradient(135deg, #5b6cf5, #4354e8);
  color: #ffffff;
  border: none;
  border-radius: 14px;
  padding: 10px 22px;
  font-family: 'Cairo', sans-serif;
  font-size: 0.88rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 8px 18px rgba(79, 70, 229, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.welcome-primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.26) inset, 0 12px 24px rgba(79, 70, 229, 0.28);
}

/* Keyboard Shortcuts Sheet */
.shortcuts-sheet-card {
  max-width: 620px;
  width: 92%;
  max-height: 95vh;
  border-radius: 24px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 32px 64px -12px rgba(15, 23, 42, 0.22);
  display: flex;
  flex-direction: column;
  font-family: 'Cairo', sans-serif;
  animation: fadeScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.shortcuts-sheet-header {
  position: relative;
  padding: 18px 22px 14px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

.shortcuts-header-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.shortcuts-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #eef0ff;
  color: #5b6cf5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}

.shortcuts-sheet-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #1a1d2e;
  margin: 0;
}

.shortcuts-sheet-subtitle {
  font-size: 0.76rem;
  color: #8b90a8;
  margin: 2px 0 0;
}

.shortcuts-sheet-body {
  padding: 6px 22px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.shortcuts-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shortcuts-group-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: #5b6cf5;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
}

.shortcuts-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shortcut-row {
  background: #f7f8fc;
  border-radius: 12px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.shortcut-label {
  font-size: 0.81rem;
  font-weight: 600;
  color: #1a1d2e;
}

.shortcut-keys {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.74rem;
  color: #8b90a8;
  flex-shrink: 0;
}

@keyframes fadeScaleIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(14px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes sheetUp {
  from {
    transform: translateY(100%);
    opacity: 0.5;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Safari Mobile & Small Screen Bottom-Sheet Architecture for Welcome & Shortcuts */
#modal-welcome-startup.hidden,
#modal-keyboard-shortcuts.hidden {
  display: none !important;
}

@media (max-width: 768px) {

  #modal-welcome-startup.modal-overlay:not(.hidden),
  #modal-keyboard-shortcuts.modal-overlay:not(.hidden) {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  #modal-welcome-startup .welcome-startup-card,
  #modal-keyboard-shortcuts .shortcuts-sheet-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 28px 28px 0 0 !important;
    margin: 0 !important;
    max-height: calc(84dvh - env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 -12px 48px rgba(15, 23, 42, 0.3) !important;
    animation: sheetUp 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .welcome-startup-header::before,
  .shortcuts-sheet-header::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4.5px;
    background: #cbd5e1;
    border-radius: 999px;
  }

  .shortcuts-sheet-header {
    padding: 22px 20px 12px;
    flex-shrink: 0;
  }

  .shortcuts-sheet-body {
    padding: 6px 16px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .welcome-features-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .welcome-startup-header {
    padding: 22px 20px 10px;
    flex-shrink: 0;
  }

  .welcome-startup-hero-badge {
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
    padding: 8px;
    border-radius: 14px;
  }

  .welcome-startup-title {
    font-size: 1.12rem;
    margin: 0 0 3px;
  }

  .welcome-startup-subtitle {
    font-size: 0.78rem;
    line-height: 1.45;
  }

  .welcome-startup-body {
    padding: 6px 16px 14px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    gap: 10px;
  }

  .welcome-feature-item {
    padding: 10px 12px;
    border-radius: 14px;
    gap: 10px;
  }

  .welcome-feature-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 0.95rem;
  }

  .welcome-feature-name {
    font-size: 0.88rem;
  }

  .welcome-feature-desc {
    font-size: 0.77rem;
    line-height: 1.45;
  }

  .welcome-startup-footer {
    padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    flex-shrink: 0 !important;
    background: #f7f8fc !important;
    border-top: 1px solid rgba(91, 108, 245, 0.1) !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04) !important;
  }

  .welcome-secondary-btn {
    padding: 9px 14px;
    font-size: 0.8rem;
    border-radius: 12px;
  }

  .welcome-primary-btn {
    padding: 9px 20px;
    font-size: 0.86rem;
    border-radius: 12px;
  }
}

/* Landscape on Small Screens */
@media (max-width: 900px) and (max-height: 520px) {

  #modal-welcome-startup.modal-overlay:not(.hidden),
  #modal-keyboard-shortcuts.modal-overlay:not(.hidden) {
    justify-content: center !important;
    align-items: center !important;
    padding: 10px !important;
    height: 100dvh !important;
  }

  #modal-welcome-startup .welcome-startup-card,
  #modal-keyboard-shortcuts .shortcuts-sheet-card {
    border-radius: 20px !important;
    width: 95% !important;
    max-width: 560px !important;
    max-height: 92dvh !important;
    margin: auto !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25) !important;
  }

  .welcome-startup-header::before,
  .shortcuts-sheet-header::before {
    display: none !important;
  }

  .welcome-startup-footer {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* OBS EMBEDDED OVERLAY */
.obs-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100% !important;
  z-index: 20000 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  user-select: none;
  background-color: #000000 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}



.obs-overlay[data-chroma="green"] {
  background: #00FF00 !important;
  background-color: #00FF00 !important;
}

.obs-overlay[data-chroma="blue"] {
  background: #0000FF !important;
  background-color: #0000FF !important;
}

.obs-overlay[data-chroma="black"] {
  background: #000000 !important;
  background-color: #000000 !important;
}

/* FULL SCENE WRAPPER & TWO-LAYER ARCHITECTURE IN OVERLAY */
.scene-presentation-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: 10;
}

.scene-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  will-change: clip-path, opacity, transform;
}

.scene-slides-layer {
  z-index: 5;
}

.scene-standby-layer {
  z-index: 6;
  background: transparent;
}

/* SLIDES BACKGROUND MEDIA CONTAINER */
.slides-bg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slides-bg-media {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  transition: object-fit 0.2s ease;
}

/* STANDBY CUSTOM FULLSCREEN MEDIA */
.standby-fullscreen-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.standby-fullscreen-media {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  transition: object-fit 0.2s ease;
}

/* MEDIA FIT MODES */
.media-fit-cover {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
}

.media-fit-fit_width {
  width: 100vw !important;
  height: auto !important;
  max-height: 100vh !important;
  object-fit: contain !important;
  margin: auto !important;
}

.media-fit-fit_height {
  width: auto !important;
  height: 100vh !important;
  max-width: 100vw !important;
  object-fit: contain !important;
  margin: auto !important;
}

.media-fit-fill {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
}

.media-fit-contain {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  object-fit: contain !important;
}

/* STINGER VIDEO TRANSITION OVERLAY (ALPHA WEBM) */
.stinger-transition-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 999999;
  pointer-events: none;
  background: transparent !important;
}

/* TRUE BROADCAST CENTERED RADIAL LUMA REVEAL */
.luma-wipe-incoming-center {
  z-index: 30 !important;
  animation: obsLumaCenterReveal 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  will-change: clip-path, -webkit-clip-path;
}

@keyframes obsLumaCenterReveal {
  0% {
    clip-path: circle(0% at 50% 50%);
    -webkit-clip-path: circle(0% at 50% 50%);
  }

  100% {
    clip-path: circle(125% at 50% 50%);
    -webkit-clip-path: circle(125% at 50% 50%);
  }
}

/* SMOOTH FADE REVEAL & OUTGOING */
.trans-fade-incoming {
  z-index: 30 !important;
  animation: obsFadeReveal 0.6s ease-in-out forwards !important;
  will-change: opacity;
}

.trans-fade-outgoing {
  z-index: 25 !important;
  animation: obsFadeOut 0.6s ease-in-out forwards !important;
  will-change: opacity;
}

@keyframes obsFadeReveal {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes obsFadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* SMOOTH ZOOM & POP REVEAL & OUTGOING */
.trans-zoom-incoming {
  z-index: 30 !important;
  animation: obsZoomReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  will-change: opacity, transform;
}

.trans-zoom-outgoing {
  z-index: 25 !important;
  animation: obsZoomOut 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  will-change: opacity, transform;
}

@keyframes obsZoomReveal {
  0% {
    opacity: 0;
    transform: scale(0.88);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes obsZoomOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

.obs-embedded-preview-card {
  margin: 0 auto 16px auto;
  max-width: 340px;
  width: calc(100% - 32px);
  background: var(--bg-card, #0f172a);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: none !important;
  transition: width 0.05s ease, max-width 0.05s ease;
  position: relative;
}

.obs-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 8px;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.obs-preview-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 13px;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  opacity: 1 !important;
}

.obs-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444 !important;
  box-shadow: 0 0 8px #ef4444 !important;
  animation: pulse-live-dot 1.5s infinite;
}

@keyframes pulse-live-dot {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.2);
    opacity: 1;
  }

  100% {
    transform: scale(0.95);
    opacity: 0.8;
  }
}

.obs-preview-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-preview-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  font-size: 12px;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: none !important;
  transition: all 0.2s ease;
}

.btn-preview-tool:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}

.btn-preview-tool.btn-primary-accent {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
}

.obs-preview-canvas-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #000000;
  box-shadow: none !important;
}

.obs-preview-scale-handle {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  border-radius: 6px 0 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  cursor: nwse-resize;
  z-index: 20;
  user-select: none;
  transition: background 0.2s ease;
}

.obs-preview-scale-handle:hover {
  background: rgba(245, 158, 11, 0.8);
  color: #ffffff;
}

.obs-preview-embedded-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.obs-preview-embedded-screen[data-chroma="green"] {
  background-color: #00FF00 !important;
}

.obs-preview-embedded-screen[data-chroma="blue"] {
  background-color: #0000FF !important;
}

.obs-preview-embedded-screen[data-chroma="black"] {
  background-color: #000000 !important;
}

.obs-preview-embedded-screen[data-chroma="transparent"] {
  background: repeating-conic-gradient(#334155 0% 25%, #1e293b 0% 50%) 50% / 16px 16px !important;
}

.snap-guide {
  position: absolute;
  z-index: 50;
  pointer-events: none;
  border-color: #f59e0b;
  box-shadow: 0 0 10px #f59e0b;
}

.snap-guide.vertical {
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 2px dashed #f59e0b;
}

.snap-guide.horizontal {
  left: 0;
  right: 0;
  top: 50%;
  border-top: 2px dashed #f59e0b;
}

.obs-lower-third-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% + var(--text-pos-x, 0%)), calc(-50% + var(--text-pos-y, 0%))) scale(var(--text-scale, 1)) rotate(var(--text-rot, 0deg));
  transform-origin: center center;
  width: 98vw;
  height: 96vh;
  max-width: 98vw;
  max-height: 96vh;
  text-align: center;
  padding: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  overflow: visible;
  cursor: grab;
}

.obs-line-text {
  display: block;
  font-size: 54px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
  white-space: normal;
  text-align: center;
  margin: 0 auto;
  width: 100%;
  max-width: 98vw;
  overflow: visible;
  word-break: keep-all;
  overflow-wrap: break-word;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.95);
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  paint-order: stroke fill markers;
  -webkit-paint-order: stroke fill markers;
}

.obs-overlay[data-chroma="green"] .obs-line-text {
  cursor: grab;
}

.obs-overlay[data-chroma="green"] .obs-line-text:active {
  cursor: grabbing;
}

/* TEXT APPEARANCE ANIMATIONS FOR CONTAINER & PREVIEW (WITH MOBILE SAFARI WEBKIT COMPATIBILITY) */
/* HIGH-PERFORMANCE 60FPS GPU ACCELERATED TEXT APPEARANCE ANIMATIONS */
/* HIGH-PERFORMANCE 60FPS GPU ACCELERATED TEXT APPEARANCE ANIMATIONS */
@-webkit-keyframes textAppearSlide {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 25px, 0) scale3d(0.96, 0.96, 1);
    transform: translate3d(0, 25px, 0) scale3d(0.96, 0.96, 1);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}

@keyframes textAppearSlide {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 25px, 0) scale3d(0.96, 0.96, 1);
    transform: translate3d(0, 25px, 0) scale3d(0.96, 0.96, 1);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}

@-webkit-keyframes textAppearDrop {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -25px, 0) scale3d(0.96, 0.96, 1);
    transform: translate3d(0, -25px, 0) scale3d(0.96, 0.96, 1);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}

@keyframes textAppearDrop {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -25px, 0) scale3d(0.96, 0.96, 1);
    transform: translate3d(0, -25px, 0) scale3d(0.96, 0.96, 1);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}

@-webkit-keyframes textAppearPop {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.85, 0.85, 1);
    transform: scale3d(0.85, 0.85, 1);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes textAppearPop {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.85, 0.85, 1);
    transform: scale3d(0.85, 0.85, 1);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@-webkit-keyframes textAppearFlip {
  0% {
    opacity: 0;
    -webkit-transform: perspective(600px) rotateX(-45deg);
    transform: perspective(600px) rotateX(-45deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: perspective(600px) rotateX(0deg);
    transform: perspective(600px) rotateX(0deg);
  }
}

@keyframes textAppearFlip {
  0% {
    opacity: 0;
    -webkit-transform: perspective(600px) rotateX(-45deg);
    transform: perspective(600px) rotateX(-45deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: perspective(600px) rotateX(0deg);
    transform: perspective(600px) rotateX(0deg);
  }
}

@-webkit-keyframes textAppearGlow {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(1.06, 1.06, 1);
    transform: scale3d(1.06, 1.06, 1);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes textAppearGlow {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(1.06, 1.06, 1);
    transform: scale3d(1.06, 1.06, 1);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.animate-appear-slide {
  -webkit-animation: textAppearSlide 0.14s cubic-bezier(0.2, 0.9, 0.3, 1) forwards !important;
  animation: textAppearSlide 0.14s cubic-bezier(0.2, 0.9, 0.3, 1) forwards !important;
  will-change: transform, opacity;
}

.animate-appear-drop {
  -webkit-animation: textAppearDrop 0.14s cubic-bezier(0.2, 0.9, 0.3, 1) forwards !important;
  animation: textAppearDrop 0.14s cubic-bezier(0.2, 0.9, 0.3, 1) forwards !important;
  will-change: transform, opacity;
}

.animate-appear-pop {
  -webkit-animation: textAppearPop 0.14s cubic-bezier(0.2, 0.9, 0.3, 1) forwards !important;
  animation: textAppearPop 0.14s cubic-bezier(0.2, 0.9, 0.3, 1) forwards !important;
  will-change: transform, opacity;
}

.animate-appear-flip {
  -webkit-animation: textAppearFlip 0.14s cubic-bezier(0.2, 0.9, 0.3, 1) forwards !important;
  animation: textAppearFlip 0.14s cubic-bezier(0.2, 0.9, 0.3, 1) forwards !important;
  will-change: transform, opacity;
}

.animate-appear-glow {
  -webkit-animation: textAppearGlow 0.14s cubic-bezier(0.2, 0.9, 0.3, 1) forwards !important;
  animation: textAppearGlow 0.14s cubic-bezier(0.2, 0.9, 0.3, 1) forwards !important;
  will-change: transform, opacity;
}

.hidden {
  display: none !important;
}

/* MOBILE RESPONSIVE OPTIMIZATION */
@media (max-width: 768px) {

  html,
  body {
    height: auto;
    overflow-y: auto;
  }

  .app-container {
    height: auto;
    overflow: visible;
  }

  .brand-text-centered {
    display: flex !important;
  }

  .brand-center-logo {
    height: 34px !important;
  }

  .top-nav {
    padding: 0.4rem 0.65rem;
  }

  .icon-menu-btn {
    width: 32px;
    height: 32px;
    font-size: 0.88rem;
  }

  /* DROPDOWN POPOVER ON MOBILE (POSITIONED DIRECTLY UNDER/ABOVE ITS BUTTON) */
  .dropdown-wrapper {
    position: relative !important;
  }

  .dropdown-wrapper .dropdown-popover,
  #popover-playlist {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    right: 0 !important;
    left: auto !important;
    width: min(320px, calc(100vw - 1.5rem)) !important;
    min-width: 260px !important;
    max-width: min(360px, calc(100vw - 1.5rem)) !important;
    margin: 0 !important;
    padding: 0.6rem 0.75rem !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.28) !important;
    border-radius: 14px !important;
    max-height: 65vh !important;
    z-index: 9999 !important;
  }

  .dropdown-popover,
  #popover-style {
    position: fixed !important;
    top: 60px !important;
    left: 0.65rem !important;
    right: 0.65rem !important;
    width: calc(100vw - 1.3rem) !important;
    min-width: unset !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    padding: 0.75rem 0.85rem !important;
    background: rgba(255, 255, 255, 0.99) !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.35) !important;
    border-radius: 16px !important;
    max-height: 78vh !important;
    overflow-y: auto !important;
    z-index: 999999 !important;
  }

  .search-hero {
    padding: 0.4rem 0.65rem;
  }

  .search-toolbar {
    margin-bottom: 0.25rem;
  }

  /* MOBILE SEARCH BAR WITH HIGH TOUCH-FRIENDLY HEIGHT & CRISP FONT WEIGHT */
  .centered-search-box input {
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 0.65rem 3.2rem 0.65rem 6.9rem !important;
    min-height: 48px !important;
    border-radius: 28px !important;
  }

  .centered-search-box:has(#clear-search-btn.hidden) input {
    padding-left: 5.4rem !important;
  }

  .control-select,
  .control-input {
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 0.45rem 0.75rem !important;
    border-radius: 12px !important;
  }

  /* ON MOBILE: PRESENTATION LINES PANEL ABOVE / RECENT SESSION PANEL BELOW */
  .dashboard-halves {
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: visible;
    padding: 0 0.5rem 1.25rem 0.5rem;
    gap: 0.75rem;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .half-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    box-sizing: border-box !important;
  }

  .presentation-lines-panel {
    order: 1;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto;
    max-height: 48vh;
    box-sizing: border-box !important;
  }

  .recent-session-panel {
    order: 2;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 220px !important;
    max-height: none !important;
    overflow: visible !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
  }

  .recent-session-panel .panel-bar,
  .panel-bar {
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
  }

  .recent-list-box {
    max-height: 42vh !important;
    overflow-y: auto !important;
    height: auto !important;
  }

  .line-item {
    padding: 0.55rem 0.75rem;
  }

  .line-text-arabic {
    font-size: 0.95rem;
  }
}

/* OBS WEBSOCKET & QR SCANNER STYLES */
.badge-status {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  position: absolute;
  top: 3px;
  right: 3px;
  border: 1.5px solid #ffffff;
}

.badge-status.disconnected {
  background-color: #ef4444;
}

.badge-status.connected {
  background-color: #10b981;
  box-shadow: 0 0 8px #10b981;
}

.status-pill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  margin-right: auto;
}

.status-pill.offline {
  background-color: #fee2e2;
  color: #dc2626;
}

.status-pill.online {
  background-color: #d1fae5;
  color: #059669;
}

.popover-divider {
  border: none;
  border-top: 1px dashed #e2e8f0;
  margin: 0.2rem 0;
}

.btn-danger {
  background-color: #ef4444 !important;
  color: #ffffff !important;
}

.btn-danger:hover {
  background-color: #dc2626 !important;
}

/* QR SCANNER MODAL & UNIVERSAL MODAL OVERLAY */
.modal-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 999999 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}

.modal-card {
  background: #ffffff;
  border-radius: 16px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

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

.modal-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #94a3b8;
  cursor: pointer;
  line-height: 1;
  padding: 0 0.2rem;
}

.modal-close-btn:hover {
  color: #0f172a;
}

.modal-body {
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.qr-instructions {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

#qr-reader-viewport {
  width: 100%;
  min-height: 250px;
  background-color: #0f172a;
  border-radius: 12px;
  overflow: hidden;
}

.qr-status-msg {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.6rem;
  border-radius: 8px;
  text-align: center;
}

.qr-status-msg.success {
  background-color: #d1fae5;
  color: #059669;
}

.qr-status-msg.error {
  background-color: #fee2e2;
  color: #dc2626;
}

/* COMPACT OBS TRANSITION CONTROL STRIP */
.obs-compact-strip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
}

.strip-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
}

.strip-icon {
  color: var(--accent-blue);
  font-size: 0.85rem;
}

.strip-select {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-main);
  outline: none;
  cursor: pointer;
  padding: 2px 0;
}

.strip-range-item {
  flex: 1;
  min-width: 130px;
}

.strip-range {
  width: 100%;
  accent-color: var(--accent-blue);
  cursor: pointer;
}

.strip-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 42px;
  text-align: right;
}

.strip-btn {
  background: var(--accent-blue);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 0.35rem 0.75rem;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.strip-btn:hover:not(:disabled) {
  background: #1d4ed8;
  transform: translateY(-1px);
}

.strip-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ROUNDED COLOR PICKER INPUTS */
.color-picker-input {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 2px solid #cbd5e1 !important;
  cursor: pointer;
  padding: 0 !important;
  background: none !important;
  overflow: hidden !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.color-picker-input:hover {
  transform: scale(1.1);
  border-color: var(--accent-blue) !important;
}

.color-picker-input::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: 50%;
}

.color-picker-input::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}

/* SEARCH FLOATING SUGGESTION CHIPS */
.search-suggestions-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 8px;
  z-index: 20;
  animation: fadeInChips 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInChips {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.suggestion-chip {
  background: rgba(37, 99, 235, 0.09);
  color: var(--accent-blue);
  border: none;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.suggestion-chip:hover {
  background: var(--accent-blue);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.suggestion-chip .chip-sub {
  font-size: 0.7rem;
  opacity: 0.8;
  font-weight: 500;
}

/* 4-POINTED STAR / SPARKLE ICON */
.icon-star-sparkle,
.fa-star-sparkle {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.18em;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12 6.627 6.627 12 0 12C6.627 12 12 17.373 12 24C12 17.373 17.373 12 24 12C17.373 12 12 6.627 12 0Z'/%3E%3C/svg%3E") no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12 6.627 6.627 12 0 12C6.627 12 12 17.373 12 24C12 17.373 17.373 12 24 12C17.373 12 12 6.627 12 0Z'/%3E%3C/svg%3E") no-repeat center / contain;
  background-color: currentColor;
}

/* SEARCH DID YOU MEAN / FIX SUGGESTION BANNER IN DROPDOWN */
.search-did-you-mean-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(59, 130, 246, 0.04));
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 10px;
  padding: 8px 14px;
  margin: 6px 8px 10px 8px;
  font-size: 0.9rem;
  color: #1e3a8a;
  cursor: pointer;
  transition: all 0.15s ease;
}

.search-did-you-mean-banner:hover {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(59, 130, 246, 0.08));
  border-color: rgba(37, 99, 235, 0.35);
}

.search-did-you-mean-banner .clickable-suggestion-word {
  color: #2563eb;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.search-did-you-mean-banner .clickable-suggestion-word:hover,
.search-did-you-mean-banner:hover .clickable-suggestion-word {
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.1);
  text-decoration-color: #1d4ed8;
}

/* CAST SCREEN CARDS */
.screen-cast-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.screen-cast-card:hover {
  background: #eff6ff;
  border-color: var(--accent-blue);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.1);
}

.screen-cast-card .screen-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.screen-cast-card .screen-name {
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 6px;
}

.screen-cast-card .screen-res {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}

.screen-cast-card .launch-btn-icon {
  color: var(--accent-blue);
  font-size: 0.9rem;
}

/* COMPACT MOBILE RESPONSIVENESS (< 768px) */
@media (max-width: 768px) {
  .top-nav {
    padding: 0.4rem 0.75rem;
  }

  .brand-text-centered .brand-main {
    font-size: 0.95rem;
  }

  .icon-menu-btn {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
  }

  .search-hero {
    padding: 0.4rem 0.75rem 0.6rem;
  }

  .centered-search-box input {
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 0.65rem 2.6rem 0.65rem 6.9rem !important;
    min-height: 48px !important;
    border-radius: 28px !important;
  }

  .centered-search-box:has(#clear-search-btn.hidden) input {
    padding-left: 5.4rem !important;
  }

  .dashboard-halves {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
  }

  .half-panel {
    height: auto;
    max-height: 46vh;
    font-size: 0.88rem;
  }

  /* MOBILE APP BOTTOM BAR STICKS TO BOTTOM OF VIEWPORT EVEN IF PAGE ENDS MID SCREEN */
  html,
  body {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .app-container {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
  }

  .app-bottom-bar {
    margin-top: auto !important;
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 100 !important;
  }

  /* MOBILE PREVIEW: HORIZONTAL 16:9 FIT-TO-WIDTH IN VERTICAL MOBILE MODE */
  .scene-presentation-wrapper {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    aspect-ratio: 16 / 9 !important;
    height: calc(100vw * 9 / 16) !important;
    min-height: calc(100vw * 9 / 16) !important;
    max-height: calc(100vw * 9 / 16) !important;
    overflow: hidden !important;
  }

  .scene-presentation-wrapper .scene-layer,
  .scene-presentation-wrapper .slides-bg-container,
  .scene-presentation-wrapper .slides-bg-media,
  .scene-presentation-wrapper .standby-fullscreen-container,
  .scene-presentation-wrapper .standby-fullscreen-media {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }

  .obs-lower-third-box,
  .lower-third-container {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(calc(-50% + var(--text-pos-x, 0%)), calc(-50% + var(--text-pos-y, 0%))) scale(var(--text-scale, 1)) rotate(var(--text-rot, 0deg)) !important;
    transform-origin: center center !important;
    width: 100vw !important;
    max-width: 100vw !important;
    aspect-ratio: 16 / 9 !important;
    height: calc(100vw * 9 / 16) !important;
    min-height: calc(100vw * 9 / 16) !important;
    max-height: calc(100vw * 9 / 16) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
  }

  .obs-line-text,
  .line-text {
    height: auto !important;
    margin: 0 auto !important;
    text-align: center !important;
    text-align-last: center !important;
    pointer-events: auto !important;
  }

  .obs-line-segment {
    display: inline-block !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    text-align: center !important;
    width: auto !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    pointer-events: auto !important;
  }

  .panel-header {
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
  }

  .panel-header h3 {
    font-size: 0.84rem;
  }

  .presentation-lines-container {
    padding: 0.25rem;
  }

  .line-item {
    padding: 8px 30px 22px 38px;
    font-size: 0.8rem;
    margin-bottom: 4px;
    min-height: 60px;
  }

  .slide-lines-body {
    padding-left: 32px;
    padding-right: 28px;
  }

  .slide-line-row {
    font-size: 1.05rem !important;
    line-height: 1.45;
    max-width: 100%;
  }

  .slide-badge-side {
    min-width: 24px;
    font-size: 0.75rem;
  }

  .slide-index-corner {
    font-size: 0.65rem;
  }

  .control-btn,
  .btn-presenter-nav {
    padding: 0.55rem 0.95rem !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    min-height: 44px !important;
  }

  .search-item {
    padding: 0.45rem 0.65rem;
    font-size: 0.8rem;
  }

  .search-item .item-title {
    font-size: 0.84rem;
  }

  .item-preview-box {
    font-size: 0.75rem;
  }

  .playlist-entry-row {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
  }
}

/* PC LANDSCAPE PREVIEW: MAX FILLS HEIGHT AND WIDTH */
@media (min-width: 769px) and (orientation: landscape) {

  .obs-lower-third-box,
  .lower-third-container {
    padding: 0 !important;
    max-height: 98vh !important;
  }

  .obs-line-text,
  .line-text {
    line-height: 1.35 !important;
    margin: 0 auto !important;
  }

  .obs-line-segment {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* STANDBY PRESENTER BRANDING SCREEN (NO TARANIM SELECTED / LAST SLIDE LOGO) */
.obs-lines-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.22em !important;
  width: 100% !important;
}

.obs-lines-wrapper.is-bible-lines {
  width: 100% !important;
  direction: rtl;
}

.obs-lines-wrapper.is-bible-lines.is-ltr {
  direction: ltr !important;
}

.obs-line-row.is-bible-row {
  display: block !important;
  width: 100% !important;
}

.obs-line-segment.obs-bible-segment {
  white-space: normal !important;
}

.standby-branding {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
  padding: 0;
  animation: fadeIn 0.4s ease-out;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.standby-branding .standby-logo {
  width: 220px;
  height: 220px;
  max-width: 60vw;
  max-height: 45vh;
  object-fit: contain;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.standby-branding .standby-title {
  display: none !important;
}

@media (max-width: 768px) {
  .standby-branding .standby-logo {
    width: 140px;
    height: 140px;
  }
}

/* STANDBY TOGGLE ACTIVE BUTTON STYLING */
#btn-toggle-standby.active-mode {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #1d4ed8 !important;
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.5) !important;
}

#btn-toggle-standby.active-mode i {
  color: #ffffff !important;
}

/* SLEEK BOTTOM FOOTER INFO BAR FOR PRESENTER DISPLAY */
.presenter-footer-bar {
  position: absolute;
  bottom: 16px;
  left: 24px;
  right: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 999;
  direction: rtl;
  font-family: 'Cairo', sans-serif;
}

.presenter-scale-badge {
  display: none !important;
}

.presenter-slide-counter {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-close-overlay-left {
  position: absolute;
  bottom: 14px;
  left: 14px;
  width: 28px;
  height: 28px;
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border-radius: 50%;
  font-size: 0.95rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer !important;
  z-index: 100000 !important;
  transition: all 0.2s cubic-bezier(0.2, 0.9, 0.3, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  pointer-events: auto !important;
  opacity: 0.9;
}

.btn-close-overlay-left:hover {
  background: rgba(0, 0, 0, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  transform: scale(1.12);
  color: #ffffff !important;
  opacity: 1;
}

/* DISPLAY SELECTED RECTANGLE PILL BUTTON IN HEADER */
.display-selected-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 3px 7px 3px 5px;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-width: 125px;
  overflow: hidden;
}

.display-selected-pill:hover {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}

.display-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(37, 99, 235, 0.25);
  color: #60a5fa;
  border: 1px solid rgba(96, 165, 250, 0.4);
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 800;
}

.display-pill-timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: monospace, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: 0.5px;
  padding: 0 2px;
}

.live-dot {
  width: 7px;
  height: 7px;
  background-color: #ef4444;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px #ef4444;
  animation: liveDotPulse 1.5s infinite;
}

@keyframes liveDotPulse {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.25);
    opacity: 1;
    box-shadow: 0 0 12px #ef4444;
  }

  100% {
    transform: scale(0.95);
    opacity: 0.8;
  }
}

.display-pill-close-btn {
  background: #ef4444;
  border: 1px solid #dc2626;
  color: #ffffff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  margin-right: 4px;
  padding: 0;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
}

.display-pill-close-btn:hover {
  background: #dc2626;
  color: #ffffff;
  border-color: #b91c1c;
  transform: scale(1.18);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.6);
}

.display-pill-fs-btn {
  background: var(--accent-blue, #2563eb);
  border: 1px solid #1d4ed8;
  color: #ffffff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 700;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  margin-right: 2px;
  padding: 0;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.4);
}

.display-pill-fs-btn:hover {
  background: #1d4ed8;
  color: #ffffff;
  border-color: #1e40af;
  transform: scale(1.18);
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.6);
}

/* BIBLE NAVIGATOR POPOVER & BUTTON STYLES (LIGHT THEME) */
.icon-only-toggle {
  padding: 0 !important;
  min-width: 32px;
  justify-content: center;
  align-items: center;
}

.bible-popover-box {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 480px;
  background: #ffffff;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.15);
  z-index: 1200;
  padding: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #1e293b;
}

.style-drawer-panel {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 520px !important;
  min-width: 520px !important;
  max-width: 520px !important;
  flex: 0 0 520px !important;
  height: 100% !important;
  max-height: 100% !important;
  background: #ffffff !important;
  border: 1px solid var(--border-card) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-card) !important;
  z-index: 10 !important;
  padding: 14px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  color: #1e293b !important;
  box-sizing: border-box !important;
  transition: all 0.25s ease !important;
}

.style-drawer-scroll-body {
  flex: 1;
  overflow-y: auto;
  padding-left: 4px;
  padding-right: 4px;
}

.bible-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 12px;
}

.bible-header-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #2563eb;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bible-back-btn,
.bible-close-btn {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #64748b;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bible-back-btn:hover,
.bible-close-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.bible-step-view {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  overflow: hidden;
}

.bible-search-input-box {
  position: relative;
  display: flex;
  align-items: center;
}

.bible-search-input-box i {
  position: absolute;
  right: 12px;
  color: #94a3b8;
  font-size: 0.85rem;
}

.bible-search-input-box input,
#bible-book-filter {
  width: 100%;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  padding: 6px 36px 6px 12px !important;
  color: #0f172a !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  outline: none !important;
  box-shadow: none !important;
  font-family: inherit;
}

.bible-search-input-box input:focus {
  border-color: #2563eb;
  background: #ffffff;
}

.bible-testament-tabs {
  display: flex;
  gap: 6px;
}

.bible-tab-btn {
  flex: 1;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #64748b;
  padding: 6px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bible-tab-btn.active,
.bible-tab-btn:hover {
  background: #eff6ff;
  color: #2563eb;
  border-color: #93c5fd;
}

.bible-books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  overflow-y: auto;
  max-height: 320px;
  padding-left: 4px;
}

.bible-book-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 2px;
  user-select: none;
}

.bible-book-card:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  transform: translateY(-1px);
}

.bible-book-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1e293b;
}

.bible-book-count {
  font-size: 0.58rem !important;
  color: #94a3b8;
  font-weight: 600;
  opacity: 0.8;
}

.bible-selected-book-banner {
  font-size: 0.9rem;
  font-weight: 800;
  color: #1d4ed8;
  text-align: center;
  padding: 6px;
  background: #eff6ff;
  border-radius: 8px;
  border: 1px solid #bfdbfe;
}

.bible-chapters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 6px;
  overflow-y: auto;
  max-height: 320px;
  padding: 4px;
}

.bible-chapter-btn {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #1e293b;
  height: 34px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
}

.bible-chapter-btn:hover {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #ffffff;
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

/* BIBLE POPOVER CUSTOM SCROLLBARS */
.bible-books-grid::-webkit-scrollbar,
.bible-chapters-grid::-webkit-scrollbar {
  width: 6px;
}

.bible-books-grid::-webkit-scrollbar-track,
.bible-chapters-grid::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.bible-books-grid::-webkit-scrollbar-thumb,
.bible-chapters-grid::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.bible-books-grid::-webkit-scrollbar-thumb:hover,
.bible-chapters-grid::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* CAST DROPDOWN POPOVER VIEWPORT SAFETY POSITIONING */
#popover-cast {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: auto !important;
  min-width: 270px !important;
  max-width: min(320px, calc(100vw - 24px)) !important;
  max-height: calc(100vh - 90px) !important;
  overflow-y: auto !important;
  z-index: 9999 !important;
}

@media (max-width: 768px) {
  #popover-cast {
    position: fixed !important;
    top: 68px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    z-index: 100000 !important;
  }
}

/* SLIDE JUMP POPOVER STYLING (ATTACHED FLUSH UNDER COUNTER) */
.slide-jump-popover {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 1.25rem !important;
  left: auto !important;
  width: 250px !important;
  min-width: 230px !important;
  background: #ffffff !important;
  border: 1px solid var(--border-card) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18) !important;
  padding: 12px 14px !important;
  z-index: 1000 !important;
  color: #0f172a !important;
}

.slide-jump-popover-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.slide-jump-hint-text {
  font-size: 0.82rem;
  font-weight: 700;
  color: #64748b;
}

.slide-jump-input-group {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

/* REMOVE SPINNER ARROWS FROM NUMBER INPUT */
.slide-jump-clean-input {
  flex: 1;
  height: 38px;
  border-radius: 10px;
  border: 1.5px solid #cbd5e1;
  padding: 0 8px;
  font-size: 1rem;
  font-weight: 800;
  color: #0f172a;
  outline: none;
  text-align: center;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  /* Firefox */
  appearance: textfield;
  background: #ffffff;
  transition: all 0.18s ease;
}

.slide-jump-clean-input::-webkit-outer-spin-button,
.slide-jump-clean-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  /* Chrome, Safari, Edge */
  margin: 0;
}

.slide-jump-clean-input:focus {
  border-color: #2563eb;
  background: #f0f7ff;
}

/* SLIDE JUMP BUTTON HOVER FIX */
.slide-jump-btn-go {
  height: 38px;
  padding: 0 14px;
  background: #2563eb;
  color: #ffffff !important;
  border: none !important;
  outline: none !important;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.slide-jump-btn-go:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
  transform: translateY(-1px);
}

.slide-jump-btn-go:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2) !important;
}

/* BLANK TOGGLE ACTIVE HIGHLIGHT (RED ALERT / EYE ICON - NO STROKE) */
#btn-toggle-blank.active {
  background: #fee2e2 !important;
  color: #dc2626 !important;
  border: none !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2) !important;
}

#btn-toggle-blank.active:hover {
  background: #fecaca !important;
  color: #b91c1c !important;
  border: none !important;
  border-color: transparent !important;
}

/* ==========================================================================
   SLEEK STYLE DRAWER & SEGMENTED CONTROLS (DESIGN UPGRADE)
   ========================================================================== */
.style-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.drawer-header-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.drawer-header-title i {
  color: #2563eb;
}

/* ULTRA-SLEEK TEMPLATES HEADER DROPDOWN & CYCLE CONTROLLER */
.templates-header-dropdown-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 2px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: all 0.2s ease;
  flex: 1;
  max-width: 260px;
  min-width: 170px;
}

.templates-header-dropdown-wrap:hover {
  border-color: #94a3b8;
  background: #e2e8f0;
}

.tmpl-cycle-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background: transparent;
  color: #64748b;
  border-radius: 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.tmpl-cycle-btn:hover {
  background: #ffffff;
  color: #2563eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.tmpl-dropdown-trigger-btn {
  flex: 1;
  min-width: 0;
  height: 26px;
  padding: 0 6px;
  border: none;
  background: transparent;
  border-radius: 7px;
  color: #0f172a;
  font-weight: 700;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tmpl-dropdown-trigger-btn:hover {
  background: rgba(255, 255, 255, 0.6);
}

.tmpl-dropdown-menu-card {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  min-width: 250px;
  max-height: 320px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.06);
  z-index: 1000;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* SLEEK SEGMENTED NAV TABS (HORIZONTALLY SCROLLABLE ON MOBILE) */
.style-nav-tabs {
  display: flex;
  background: #f1f5f9;
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
  margin: 10px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  width: 100%;
  box-sizing: border-box;
}

.style-nav-tabs::-webkit-scrollbar {
  display: none;
}

.style-tab-btn {
  flex: 1 0 auto;
  min-width: max-content;
  border: none;
  background: transparent;
  padding: 7px 9px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748b;
  border-radius: 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  user-select: none;
}

.style-tab-btn i {
  font-size: 0.85rem;
}

.style-tab-btn:hover {
  color: #0f172a;
}

.style-tab-btn.active {
  background: #ffffff;
  color: #2563eb;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.style-tab-content {
  display: block;
}

.style-tab-content.hidden {
  display: none !important;
}

/* STYLE CARDS & 2-COLUMN CONTROL GRID */
.style-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.style-card:hover {
  border-color: #cbd5e1;
}

.style-card-title {
  font-size: 0.86rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  letter-spacing: -0.01em;
}

.style-card-title i {
  color: #2563eb;
  font-size: 0.9rem;
}

.style-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 480px) {
  .style-grid-2 {
    grid-template-columns: 1fr;
  }
}

.control-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.control-field label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #334155;
  letter-spacing: -0.01em;
}

.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.counter-text-chip {
  font-size: 0.74rem;
  font-weight: 700;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  padding: 1px 7px;
  border-radius: 8px;
}

/* SAFE AREA LOCK TOGGLE BUTTON & TRANSFORM CONTROLS */
.safe-area-lock-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  border: 1px solid #bfdbfe !important;
  background: #eff6ff !important;
  color: #2563eb !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.05) !important;
  line-height: 1.3 !important;
  user-select: none !important;
}

.safe-area-lock-btn:hover {
  background: #dbeafe !important;
  border-color: #93c5fd !important;
  color: #1d4ed8 !important;
}

.safe-area-lock-btn.is-unlocked {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #64748b !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.safe-area-lock-btn.is-unlocked:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

.text-transform-reset-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  color: #64748b !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  box-shadow: none !important;
  line-height: 1.3 !important;
  user-select: none !important;
}

.text-transform-reset-btn:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* APPLE-STYLE SEGMENTED BUTTONS */
.segmented-control-group {
  display: flex;
  background: #f1f5f9;
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
  width: 100%;
}

.segmented-btn {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 6px 4px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #64748b;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 5px;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.segmented-btn:hover:not(:disabled):not(.disabled-btn) {
  color: #0f172a;
}

.segmented-btn.active {
  background: #ffffff;
  color: #2563eb;
  font-weight: 800;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

.segmented-btn:disabled,
.segmented-btn.disabled-btn {
  opacity: 0.38 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: grayscale(1);
}

/* COLOR PICKER HEX BADGE WRAPPER */
.color-picker-badge-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  padding: 4px 8px;
  border-radius: 10px;
}

.color-picker-badge-wrap .color-picker-input {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
}

.color-val-hex {
  font-size: 0.76rem;
  font-weight: 700;
  font-family: monospace;
  color: #475569;
}

/* CHROMA BACKGROUND CHIPS */
.chroma-chip-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 6px;
}

.chroma-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}

.chroma-chip:hover {
  border-color: #93c5fd;
  background: #f0f9ff;
}

.chroma-chip.active {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1e40af;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
}

.chroma-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.swatch-black {
  background: #0b0f19;
}

.swatch-green {
  background: #00ff00;
}

.swatch-blue {
  background: #0000ff;
}

.swatch-trans {
  background: linear-gradient(135deg, #cbd5e1 25%, transparent 25%), linear-gradient(225deg, #cbd5e1 25%, transparent 25%), linear-gradient(45deg, #cbd5e1 25%, transparent 25%), linear-gradient(135deg, transparent 75%, #cbd5e1 75%);
  background-size: 8px 8px;
}

/* PURE BLACK BLACKOUT OVERLAY FOR BLANK MODE */
.blank-blackout-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: #000000 !important;
  z-index: 9999999 !important;
  pointer-events: auto;
}

/* OVERLAY BOTTOM-LEFT CONTROLS (X EXIT BUTTON & FULLSCREEN BUTTON) */
.overlay-bottom-left-controls {
  position: absolute !important;
  bottom: 24px !important;
  left: 24px !important;
  top: auto !important;
  right: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  z-index: 99999 !important;
}

.btn-overlay-control,
.btn-close-overlay-left,
.btn-overlay-highlight,
#btn-close-presentation-overlay,
#btn-overlay-toggle-highlight,
#btn-overlay-toggle-fullscreen {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 1.15rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
  opacity: 0.85 !important;
}

.btn-close-overlay-left:hover,
#btn-close-presentation-overlay:hover {
  background: rgba(220, 38, 38, 0.9) !important;
  border-color: rgba(239, 68, 68, 0.8) !important;
  color: #ffffff !important;
  transform: scale(1.12) !important;
  opacity: 1 !important;
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.45) !important;
}

.btn-fullscreen-overlay-left:hover,
#btn-overlay-toggle-fullscreen:hover {
  background: rgba(37, 99, 235, 0.9) !important;
  border-color: rgba(59, 130, 246, 0.8) !important;
  color: #ffffff !important;
  transform: scale(1.12) !important;
  opacity: 1 !important;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.45) !important;
}

/* OVERLAY BOTTOM-RIGHT SLIDE COUNTER & FOOTER BAR (MATCHING PRESENT.HTML) */
/* OVERLAY FOOTER CONTROLS & CLOSE BUTTON (MATCHING PRESENT.HTML) */
.presenter-scale-badge,
#obs-scale-badge {
  position: fixed !important;
  bottom: 12px !important;
  right: 14px !important;
  left: auto !important;
  top: auto !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: none !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
  letter-spacing: 0.3px !important;
  z-index: 99999 !important;
  direction: rtl !important;
  font-family: 'Cairo', sans-serif !important;
  pointer-events: none !important;
}

.presenter-slide-counter,
#obs-slide-counter {
  position: fixed !important;
  bottom: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
  top: auto !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: none !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
  letter-spacing: 0.3px !important;
  z-index: 99999 !important;
  direction: rtl !important;
  font-family: 'Cairo', sans-serif !important;
  pointer-events: none !important;
}

.presenter-scale-badge.hidden,
#obs-scale-badge.hidden,
.presenter-slide-counter.hidden,
#obs-slide-counter.hidden,
#obs-footer-bar.hidden {
  display: none !important;
}

.btn-close-overlay-left {
  position: fixed !important;
  bottom: 12px !important;
  left: 12px !important;
  top: auto !important;
  right: auto !important;
  min-width: 28px !important;
  min-height: 28px !important;
  width: 28px !important;
  height: 28px !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.45) !important;
  border-radius: 50% !important;
  font-size: 0.8rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 99999 !important;
  transition: all 0.2s ease !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  opacity: 0.7 !important;
}

.btn-close-overlay-left:hover,
.btn-close-overlay-left:active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.95) !important;
  opacity: 1 !important;
  transform: none !important;
}

.obs-top-left-header {
  position: absolute !important;
  top: 1.8rem !important;
  left: 2.2rem !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  z-index: 100 !important;
  letter-spacing: 0.5px !important;
  pointer-events: none !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85) !important;
  font-family: inherit !important;
}

/* HIDE CONTROLS MODE FOR IN-APP OVERLAY */
.obs-overlay.controls-hidden .overlay-bottom-left-controls,
.obs-overlay.controls-hidden .btn-close-overlay-left,
.obs-overlay.controls-hidden #obs-footer-bar,
.obs-overlay.controls-hidden #obs-slide-counter,
.obs-overlay.controls-hidden .obs-top-left-header {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ALL IN ONE SCROLLABLE PRESENTATION MODE - PRESENTER WINDOW */
body[data-mode="allinone"] .lower-third-container,
body[data-mode="allinone"] #presenter-box {
  display: block !important;
  top: 30px !important;
  bottom: 30px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  height: calc(100vh - 60px) !important;
  max-height: calc(100vh - 60px) !important;
  overflow-y: auto !important;
  pointer-events: auto !important;
  scroll-behavior: smooth !important;
  padding-top: 25px !important;
  padding-bottom: 40px !important;
  padding-right: 16px !important;
  padding-left: 16px !important;
  box-sizing: border-box !important;
}

/* ALL IN ONE SCROLLABLE PRESENTATION MODE - IN-APP OVERLAY ONLY */
.obs-overlay[data-mode="allinone"] .scene-presentation-wrapper,
.obs-overlay[data-mode="allinone"] .scene-slides-layer,
.obs-overlay.mode-allinone .scene-presentation-wrapper,
.obs-overlay.mode-allinone .scene-slides-layer {
  pointer-events: auto !important;
}

.obs-overlay[data-mode="allinone"] .obs-lower-third-box,
.obs-overlay.mode-allinone .obs-lower-third-box {
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  pointer-events: auto !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
  padding-top: 14px !important;
  padding-bottom: 28px !important;
  padding-right: 12px !important;
  padding-left: 12px !important;
  box-sizing: border-box !important;
  cursor: default !important;
}

.obs-overlay[data-mode="allinone"] .allinone-slide-group {
  margin-bottom: 0.45rem !important;
  padding-bottom: 0.35rem !important;
  padding-top: 0.15rem !important;
}

.obs-overlay[data-mode="allinone"] .allinone-slide-group .obs-line-row {
  margin-top: 0.04em !important;
  margin-bottom: 0.04em !important;
  line-height: 1.25 !important;
}

.allinone-section,
.allinone-slide-group {
  display: block !important;
  width: 100% !important;
  margin-bottom: 1.8rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.22) !important;
  text-align: center !important;
  position: relative !important;
  padding-right: 48px !important;
  padding-left: 20px !important;
  box-sizing: border-box !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.allinone-slide-group.active-allinone-group {
  background: rgba(37, 99, 235, 0.12) !important;
  border-radius: 8px !important;
}

.allinone-slide-group .slide-badge-layer,
.allinone-slide-group .slide-badge-layer.chorus-badge-side,
.allinone-slide-group .slide-badge-layer.stanza-badge-side,
.allinone-slide-group .slide-badge-layer.verse-badge-side,
.allinone-slide-group .chorus-badge-side,
.allinone-slide-group .stanza-badge-side {
  position: absolute !important;
  right: 6px !important;
  left: auto !important;
  top: 6px !important;
  transform: none !important;
  margin: 0 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 0.85 !important;
  z-index: 15 !important;
}

.obs-overlay[data-mode="allinone"] .allinone-slide-group .slide-badge-layer,
.obs-overlay[data-mode="allinone"] .allinone-slide-group .slide-badge-layer.chorus-badge-side,
.obs-overlay[data-mode="allinone"] .allinone-slide-group .slide-badge-layer.stanza-badge-side,
.obs-overlay[data-mode="allinone"] .allinone-slide-group .slide-badge-layer.verse-badge-side {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  top: 4px !important;
  right: 6px !important;
}

.allinone-section:last-child,
.allinone-slide-group:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
}

/* INVISIBLE SCROLLBAR FOR PRESENTER & OVERLAY (FULLY SCROLLABLE) */
.obs-overlay[data-mode="allinone"] .obs-lower-third-box,
body[data-mode="allinone"] #presenter-box,
body[data-mode="allinone"] .lower-third-container,
#presenter-box,
.lower-third-container {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

.obs-overlay[data-mode="allinone"] .obs-lower-third-box::-webkit-scrollbar,
body[data-mode="allinone"] #presenter-box::-webkit-scrollbar,
body[data-mode="allinone"] .lower-third-container::-webkit-scrollbar,
#presenter-box::-webkit-scrollbar,
.lower-third-container::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* LIGHT AUTOMATIC DATA SYNC LOADING SCREEN */
.pwa-sync-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(248, 250, 252, 0.97) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: opacity 0.4s ease, visibility 0.4s ease !important;
  direction: rtl !important;
  font-family: 'Cairo', sans-serif !important;
}

.pwa-sync-overlay.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.pwa-sync-card {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08) !important;
  border-radius: 20px !important;
  padding: 2.2rem 2.5rem !important;
  width: 90% !important;
  max-width: 420px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
}

.pwa-sync-logo {
  height: 52px !important;
  width: auto !important;
  object-fit: contain !important;
}

.pwa-sync-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.5 !important;
}

.pwa-sync-progress-bar {
  width: 100% !important;
  height: 12px !important;
  background: #cbd5e1 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  position: relative !important;
}

.pwa-sync-progress-fill {
  width: 8% !important;
  min-width: 8% !important;
  height: 100% !important;
  background: linear-gradient(90deg, #2563eb 0%, #3b82f6 50%, #10b981 100%) !important;
  background-size: 200% 100% !important;
  animation: shimmerProgress 1.5s linear infinite !important;
  border-radius: 999px !important;
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.6) !important;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes shimmerProgress {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

.pwa-sync-status-text {
  font-size: 0.84rem !important;
  color: #475569 !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   CUSTOM APPLE-GRADE RANGE SLIDERS (DESIGN UPGRADE)
   ========================================================================== */
.slider-input,
.strip-range,
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  cursor: pointer;
  outline: none;
  margin: 4px 0;
}

/* TRACK */
.slider-input::-webkit-slider-runnable-track,
.strip-range::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  background: #e2e8f0;
  border-radius: 999px;
  border: none;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.slider-input::-moz-range-track,
.strip-range::-moz-range-track,
input[type="range"]::-moz-range-track {
  width: 100%;
  height: 6px;
  background: #e2e8f0;
  border-radius: 999px;
  border: none;
  transition: background 0.2s ease;
}

.slider-input:hover::-webkit-slider-runnable-track,
.strip-range:hover::-webkit-slider-runnable-track,
input[type="range"]:hover::-webkit-slider-runnable-track {
  background: #cbd5e1;
}

/* THUMB */
.slider-input::-webkit-slider-thumb,
.strip-range::-webkit-slider-thumb,
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #f8fafc 70%, #eff6ff 100%);
  border: 2px solid #2563eb;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.9);
  margin-top: -7px;
  cursor: grab;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s ease, box-shadow 0.18s ease;
}

.slider-input::-moz-range-thumb,
.strip-range::-moz-range-thumb,
input[type="range"]::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #f8fafc 70%, #eff6ff 100%);
  border: 2px solid #2563eb;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.9);
  cursor: grab;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s ease, box-shadow 0.18s ease;
}

/* HOVER & ACTIVE THUMB STATES */
.slider-input:hover::-webkit-slider-thumb,
.strip-range:hover::-webkit-slider-thumb,
input[type="range"]:hover::-webkit-slider-thumb {
  transform: scale(1.15);
  border-color: #1d4ed8;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.4);
}

.slider-input:active::-webkit-slider-thumb,
.strip-range:active::-webkit-slider-thumb,
input[type="range"]:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.25);
  background: #2563eb;
  border-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.25), 0 4px 12px rgba(37, 99, 235, 0.5);
}

.slider-input:hover::-moz-range-thumb,
.strip-range:hover::-moz-range-thumb,
input[type="range"]:hover::-moz-range-thumb {
  transform: scale(1.15);
  border-color: #1d4ed8;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.4);
}

.slider-input:active::-moz-range-thumb,
.strip-range:active::-moz-range-thumb,
input[type="range"]:active::-moz-range-thumb {
  cursor: grabbing;
  transform: scale(1.25);
  background: #2563eb;
  border-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.25), 0 4px 12px rgba(37, 99, 235, 0.5);
}

/* ==========================================================================
   LIVE SLIDE LINE HIGHLIGHT TOOL WITH LINEAR WIPE ANIMATION
   ========================================================================== */
/* STANDBY BRANDING LOGO FOR OVERLAY & PRESENTER */
.standby-branding {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
}

.standby-branding .standby-logo {
  width: 220px;
  max-width: 45vw;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.6));
}

.standby-nav-buttons-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90vw;
  max-width: 680px;
  margin-top: 28px;
  gap: 16px;
  z-index: 20;
  pointer-events: auto !important;
}

.standby-nav-btn {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  max-width: 48%;
  pointer-events: auto !important;
}

.standby-nav-btn:hover,
.standby-nav-btn:active {
  background: rgba(255, 255, 255, 0.25) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.standby-nav-btn .standby-song-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

/* TEMPLATES CATALOG & CATEGORIES WITH LIVE THUMBNAILS */
.templates-categories-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 2px 10px 2px;
  margin-top: 8px;
  margin-bottom: 8px;
  scrollbar-width: thin;
}

.tmpl-category-btn {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
}

.tmpl-category-btn:hover {
  background: #e2e8f0;
  color: #1e293b;
  transform: translateY(-1px);
}

.tmpl-category-btn.active {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.templates-catalog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 6px;
}

.template-preview-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.template-preview-card:hover {
  transform: translateY(-2px);
  border-color: #93c5fd;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12);
}

.template-thumb-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0f172a;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.template-thumb-video,
.template-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.template-thumb-sim {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  color: #ffffff;
  position: relative;
}

.template-badge-pill {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 2;
}

.template-components-chips {
  position: absolute;
  bottom: 8px;
  right: 8px;
  left: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  z-index: 2;
}

.template-comp-chip {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #f8fafc;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.template-card-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.template-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.template-card-title {
  font-weight: 800;
  font-size: 0.94rem;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 6px;
}

.template-card-desc {
  font-size: 0.76rem;
  color: #64748b;
  line-height: 1.4;
  margin-bottom: 6px;
}

.template-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid #f1f5f9;
}

.template-varieties-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
  background: rgba(241, 245, 249, 0.6);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 10px;
  padding: 8px 10px;
}

.template-varieties-label {
  font-size: 0.73rem;
  font-weight: 700;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 5px;
}

.template-varieties-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 2px 6px;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.template-varieties-bar::-webkit-scrollbar {
  height: 4px;
}

.template-varieties-bar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.template-variety-circle {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 2px solid #cbd5e1;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
  outline: none;
  position: relative;
}

.template-variety-circle:hover {
  transform: scale(1.18);
  border-color: #3b82f6;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
  z-index: 2;
}

.template-variety-circle.active {
  transform: scale(1.25);
  border-color: #2563eb;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.7);
  z-index: 3;
}

/* TEMPLATE SHUFFLE TOGGLE */
.template-shuffle-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.22);
  padding: 3px 8px;
  border-radius: 20px;
  transition: all 0.2s ease;
  user-select: none;
}

.template-shuffle-toggle:hover {
  background: rgba(37, 99, 235, 0.15);
  border-color: #2563eb;
}

.template-shuffle-toggle input[type="checkbox"] {
  accent-color: #2563eb;
  cursor: pointer;
  width: 14px;
  height: 14px;
  margin: 0;
}

.template-shuffle-text {
  font-size: 0.72rem;
  font-weight: 700;
  color: #2563eb;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* TEMPLATE UPDATE BADGE & BUTTONS */
.template-update-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.45);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  animation: pulseTmplUpdate 2s infinite ease-in-out;
}

@keyframes pulseTmplUpdate {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.45);
  }

  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.65);
  }
}

.btn-update-template-card {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35) !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-update-template-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.5) !important;
}

.btn-update-template-card:active {
  transform: scale(0.96);
}

.template-update-prompt-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 10px 14px;
  text-align: right;
  transition: all 0.2s ease;
}

.template-update-prompt-item:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.template-update-prompt-item-name {
  font-size: 0.88rem;
  font-weight: 800;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 7px;
}

.template-update-prompt-item-desc {
  font-size: 0.73rem;
  color: #64748b;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.template-tab-update-dot {
  width: 8px;
  height: 8px;
  background: #f59e0b;
  border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
  box-shadow: 0 0 6px #f59e0b;
  animation: pulseTmplUpdate 1.5s infinite;
}

/* KIDS & PLAYFUL ARABIC FONTS DEFINITIONS & LOCAL FALLBACKS */
@font-face {
  font-family: 'Tufuli Arabic';
  src: local('Tufuli Arabic'), local('Tufuli'), local('DG Tufuli'), local('ArbFONTS-Tufuli');
  font-display: swap;
}

@font-face {
  font-family: 'Tinta Arabic';
  src: local('Tinta Arabic'), local('Tinta'), local('DG Tinta'), local('ArbFONTS-Tinta');
  font-display: swap;
}

@font-face {
  font-family: 'Lutfey Arabic';
  src: local('Lutfey Arabic'), local('Lutfey'), local('DG Lutfey'), local('ArbFONTS-Lutfey');
  font-display: swap;
}

/* TEXT EFFECTS PRESET TEMPLATES (AA PREVIEW TILES) */
.effect-presets-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.effect-presets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.effect-preset-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #0f172a;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 8px 6px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  user-select: none;
  text-align: center;
}

.effect-preset-tile:hover {
  transform: translateY(-2px);
  border-color: #60a5fa;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.25);
}

.effect-preset-tile.active {
  border-color: #3b82f6;
  background: #1e293b;
  box-shadow: 0 0 14px rgba(59, 130, 246, 0.5), inset 0 0 0 1px #3b82f6;
}

.effect-preset-aa-box {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  line-height: 1;
  font-family: 'Alexandria', sans-serif;
  margin-bottom: 4px;
  transition: transform 0.2s ease;
  pointer-events: none;
  paint-order: stroke fill markers;
  -webkit-paint-order: stroke fill markers;
}

.effect-preset-tile:hover .effect-preset-aa-box {
  transform: scale(1.1);
}

.effect-preset-title {
  font-size: 0.67rem;
  font-weight: 700;
  color: #cbd5e1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  pointer-events: none;
}

.effect-preset-del-btn {
  position: absolute;
  top: 3px;
  left: 3px;
  background: rgba(239, 68, 68, 0.85);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  cursor: pointer;
  z-index: 5;
}

.effect-preset-tile:hover .effect-preset-del-btn {
  opacity: 1;
}

/* SLEEK CONTROLS MATCHING CLOSE BUTTON SIZE & STYLE */
.btn-close-overlay-left,
#btn-close-presentation-overlay {
  position: fixed !important;
  bottom: 14px !important;
  left: 14px !important;
  right: auto !important;
  top: auto !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border-radius: 50% !important;
  font-size: 1.15rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 100005 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important;
  pointer-events: auto !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  opacity: 0.88 !important;
}

.btn-close-overlay-left:hover,
.btn-close-overlay-left:active,
#btn-close-presentation-overlay:hover,
#btn-close-presentation-overlay:active {
  background: rgba(220, 38, 38, 0.9) !important;
  border-color: rgba(239, 68, 68, 0.8) !important;
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.45) !important;
  color: #ffffff !important;
  transform: scale(1.08) !important;
  opacity: 1 !important;
}

.presenter-footer-bar {
  position: fixed !important;
  bottom: 14px !important;
  right: 16px !important;
  left: auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  pointer-events: none !important;
  z-index: 999 !important;
  direction: rtl !important;
  font-family: 'Cairo', sans-serif !important;
}

.presenter-slide-counter {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: none !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
  letter-spacing: 0.3px !important;
}

.controls-hidden .btn-close-overlay-left,
.controls-hidden #btn-close-presentation-overlay,
.controls-hidden .btn-overlay-highlight,
.controls-hidden #btn-overlay-toggle-highlight,
.controls-hidden .presenter-footer-bar,
.controls-hidden .presenter-slide-counter {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.btn-overlay-highlight,
#btn-overlay-toggle-highlight {
  position: fixed !important;
  bottom: 14px !important;
  left: 68px !important;
  right: auto !important;
  top: auto !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border-radius: 50% !important;
  font-size: 1.15rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 100005 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important;
  pointer-events: auto !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  opacity: 0.88 !important;
}

.btn-overlay-highlight:hover,
#btn-overlay-toggle-highlight:hover {
  background: rgba(30, 41, 59, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
  transform: scale(1.08) !important;
  opacity: 1 !important;
}

.btn-overlay-highlight.active,
#btn-overlay-toggle-highlight.active {
  background: var(--highlight-bg, #ef4444) !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
  color: #ffffff !important;
  opacity: 1 !important;
  box-shadow: 0 0 18px var(--highlight-bg, rgba(239, 68, 68, 0.75)), 0 6px 16px rgba(0, 0, 0, 0.35) !important;
}

/* MOBILE ONLY OVERLAY CONTROLS SCALING */
@media (max-width: 768px) {
  .btn-close-overlay-left,
  #btn-close-presentation-overlay,
  .btn-overlay-highlight,
  #btn-overlay-toggle-highlight {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    font-size: 0.92rem !important;
    bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 8px)) !important;
  }

  .btn-close-overlay-left,
  #btn-close-presentation-overlay {
    left: 12px !important;
  }

  .btn-overlay-highlight,
  #btn-overlay-toggle-highlight {
    left: 54px !important;
  }

  .presenter-footer-bar {
    bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 8px)) !important;
    right: 12px !important;
  }

  .presenter-slide-counter,
  .presenter-scale-badge,
  #obs-slide-counter,
  #obs-scale-badge {
    font-size: 0.72rem !important;
    gap: 4px !important;
  }
}

.obs-overlay .obs-lower-third-box,
.obs-overlay .obs-line-text,
.obs-overlay .obs-slide-wrapper,
.obs-overlay .obs-lines-wrapper,
.obs-overlay .obs-line-row,
.obs-overlay .obs-line-segment {
  pointer-events: auto !important;
}

.obs-overlay.highlight-mode-active .obs-line-segment,
.obs-overlay.highlight-mode-active .obs-line-row {
  cursor: pointer !important;
  pointer-events: auto !important;
}

.obs-line-row {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center;
  margin: 0.08em 0 !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
}

.obs-line-segment {
  position: relative !important;
  isolation: isolate !important;
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  transition: color 0.25s ease;
  line-height: inherit !important;
  vertical-align: middle;
  box-sizing: border-box !important;
  pointer-events: auto !important;
}

.obs-line-segment.obs-bible-segment {
  white-space: normal !important;
}

.obs-line-segment.line-highlighted,
.obs-line-segment.line-unhighlighting {
  position: relative !important;
  isolation: isolate !important;
  z-index: 5 !important;
  transform: none !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

.obs-line-segment.line-highlighted::before,
.obs-line-segment.line-unhighlighting::before {
  content: '' !important;
  position: absolute !important;
  inset: calc(50% - 0.50em) -0.18em calc(50% - 0.50em) -0.18em !important;
  background: var(--highlight-bg, rgba(239, 68, 68, 0.85)) !important;
  border-radius: 0.18em !important;
  z-index: -1 !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28) !important;
  display: block !important;
  pointer-events: none !important;
}

.obs-line-segment.line-highlighted::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  opacity: 1;
}

.obs-line-segment.line-highlighted.line-animating::before {
  animation: highlightLinearWipeIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  will-change: clip-path, opacity !important;
}

@keyframes highlightLinearWipeIn {
  0% {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
  }
}

.obs-line-segment.line-unhighlighting::before {
  animation: highlightLinearWipeOut 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
  will-change: clip-path, opacity !important;
}

@keyframes highlightLinearWipeOut {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
  }

  100% {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    opacity: 0;
  }
}

.slide-line-row.line-highlight-active {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.slide-line-row.line-highlight-active span {
  background: var(--highlight-bg-light, rgba(239, 68, 68, 0.25)) !important;
  color: #0f172a !important;
  border-radius: 6px;
  padding: 2px 8px;
  border: none !important;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--highlight-bg-light, rgba(239, 68, 68, 0.2)) !important;
  transition: background 0.2s ease;
}

.highlight-popover,
#popover-highlight-color {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
  min-width: 200px !important;
  max-width: calc(100vw - 24px) !important;
  z-index: 999999 !important;
  padding: 10px 12px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.18), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

#popover-highlight-color.hidden {
  display: none !important;
}

.highlight-palette-header {
  font-size: 0.76rem;
  font-weight: 700;
  color: #64748b;
  text-align: center;
  font-family: inherit;
  user-select: none;
}

.highlight-palette-options {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.highlight-color-pill {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  padding: 0;
  outline: none;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
}

.highlight-color-pill:hover {
  transform: scale(1.2);
  box-shadow: 0 0 0 2px #64748b, 0 2px 6px rgba(0, 0, 0, 0.2);
}

.highlight-color-pill.active {
  box-shadow: 0 0 0 2.5px #0f172a, 0 2px 8px rgba(15, 23, 42, 0.35) !important;
  transform: scale(1.15);
}

.highlight-custom-color-btn {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  border-radius: 50%;
  border: 1.5px dashed #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #64748b;
  font-size: 0.72rem;
  position: relative;
  overflow: hidden;
  background: #f8fafc;
  transition: all 0.15s ease;
  margin: 0;
  padding: 0;
  outline: none;
}

.highlight-custom-color-btn:hover {
  border-color: #3b82f6;
  color: #3b82f6;
  background: #eff6ff;
  transform: scale(1.15);
}

.highlight-custom-color-btn input[type="color"] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  top: 0;
  left: 0;
  border: none;
  padding: 0;
}

/* OVERLAY BOTTOM CONTROLS & SLIDE COUNTER (MATCHES PRESENT.HTML EXACTLY) */
.overlay-bottom-left-controls {
  position: fixed !important;
  bottom: 12px !important;
  left: 12px !important;
  top: auto !important;
  right: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  z-index: 99999 !important;
}

.overlay-bottom-left-controls .btn-overlay-control {
  min-width: 32px !important;
  min-height: 32px !important;
  width: 32px !important;
  height: 32px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 1.1rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
}

.overlay-bottom-left-controls .btn-overlay-control:hover {
  color: #ffffff !important;
  transform: scale(1.15) !important;
}

.presenter-footer-bar-right {
  position: fixed !important;
  bottom: 12px !important;
  right: 14px !important;
  left: auto !important;
  top: auto !important;
  display: flex !important;
  align-items: center !important;
  pointer-events: none !important;
  z-index: 99999 !important;
  direction: rtl !important;
  font-family: 'Cairo', sans-serif !important;
}

.presenter-footer-bar-right .presenter-slide-counter {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
}

body.startup-active {
  overflow: hidden !important;
  touch-action: none !important;
  height: 100vh !important;
}

/* STARTUP LOADING OVERLAY (CENTERED LOGO SPLASH SCREEN) */
.startup-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  height: 100vh;
  overflow: hidden;
  touch-action: none;
  background: var(--bg, #f3f4f9);
  z-index: 9999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.28s cubic-bezier(.16, 1, .3, 1), visibility 0.28s cubic-bezier(.16, 1, .3, 1);
  color: var(--text, #1a1d2e);
  font-family: 'Cairo', sans-serif;
}

.startup-loading-overlay.hidden,
.startup-loading-overlay.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.startup-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 420px;
  width: 90%;
  padding: 28px 24px;
}

.startup-logo-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 18px;
}

.startup-logo {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 12px 28px rgba(91, 108, 245, 0.22);
  animation: pulseLogo 1.6s infinite ease-in-out;
}

.startup-brand-wordmark {
  height: 44px;
  max-width: 190px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.08));
}

@keyframes pulseLogo {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.06);
  }
}

.startup-title {
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--text, #1a1d2e);
}

.startup-subtitle {
  font-size: 0.92rem;
  color: var(--text-2, #4b5068);
  margin-bottom: 16px;
  font-weight: 700;
  min-height: 1.5em;
}

.startup-progress-bar {
  width: 260px;
  max-width: 100%;
  height: 8px;
  background: var(--surface-3, #eceef7);
  border-radius: 9999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

.startup-progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(135deg, var(--brand, #5b6cf5), var(--brand-dark, #4354e8));
  border-radius: 9999px;
  transition: width 0.22s cubic-bezier(.16, 1, .3, 1);
}

.startup-progress-pct {
  margin-top: 8px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--brand, #5b6cf5);
}

.btn-startup-bg-continue {
  margin-top: 24px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  color: #334155;
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.btn-startup-bg-continue:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
  transform: translateY(-1px);
}

/* ENHANCED ACTIVE CAST PILL BADGE */
.active-cast-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 6px;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.95), rgba(219, 234, 254, 0.9));
  border: 1px solid rgba(147, 197, 253, 0.8);
  border-radius: 30px;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  transition: all 0.25s ease;
}

.active-cast-pill:hover {
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.9);
  border-color: #60a5fa;
}

.cast-live-badge-icon {
  background: transparent;
  border: none;
  color: #2563eb;
  cursor: pointer;
  padding: 3px;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: transform 0.2s ease;
}

.cast-live-badge-icon:hover {
  transform: scale(1.15);
  color: #1d4ed8;
}

.cast-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulseLiveDot 1.5s infinite ease-in-out;
}

@keyframes pulseLiveDot {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.35);
    opacity: 0.6;
  }
}

.cast-timer-text {
  font-size: 0.78rem;
  font-weight: 800;
  color: #1e40af;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  min-width: 42px;
  text-align: center;
  letter-spacing: 0.05em;
}

.btn-close-cast-pill {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border: none;
  color: #ffffff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  padding: 0;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-close-cast-pill:hover {
  background: linear-gradient(135deg, #f87171, #ef4444);
  transform: scale(1.15) rotate(90deg);
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.5);
}

/* TEMPLATE PRE-RENDER & DOWNLOAD BUTTONS */
.template-actions-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-prerender-template-card {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-prerender-template-card:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
  transform: translateY(-1px);
}

.btn-prerender-template-card.cached {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

.btn-prerender-template-card.cached:hover {
  background: #d1fae5;
  border-color: #6ee7b7;
}

.btn-prerender-template-card.downloading {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
  cursor: wait;
}

.prerender-size-badge {
  background: rgba(0, 0, 0, 0.08);
  padding: 1px 5px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 800;
  color: #475569;
}

/* SINGLE VARIETY DOWNLOAD BUTTON & BADGES */
.btn-download-single-var {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #15803d;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-download-single-var:hover {
  background: #dcfce7;
  border-color: #86efac;
  transform: translateY(-1px);
}

.btn-download-single-var.cached {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

.btn-download-single-var.cached:hover {
  background: #d1fae5;
  border-color: #6ee7b7;
}

.btn-download-single-var.downloading {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
  cursor: wait;
}

.variety-status-pill {
  font-size: 0.68rem;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 6px;
  vertical-align: middle;
}

.variety-status-pill.cached {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.variety-status-pill.not-cached {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
}

.template-variety-circle {
  position: relative;
}

.template-variety-circle .var-check-badge {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #10b981;
  color: #ffffff;
  font-size: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* CUSTOM WEBSITE FONT DROPDOWN COMPONENT */
.custom-font-dropdown-wrap {
  position: relative;
  width: 100%;
}

.custom-font-dropdown-btn {
  width: 100%;
  background: var(--bg-card, #ffffff);
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  color: var(--text-main, #0f172a);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
}

.custom-font-dropdown-btn:hover {
  border-color: #93c5fd;
  background: #f8fafc;
}

.custom-font-dropdown-btn:focus-visible,
.custom-font-dropdown-btn.open {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.font-dropdown-selected-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.font-dropdown-current-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 800;
  color: #1e293b;
}

.font-dropdown-arrow {
  font-size: 0.75rem;
  color: #64748b;
  transition: transform 0.25s ease;
}

.custom-font-dropdown-btn.open .font-dropdown-arrow {
  transform: rotate(180deg);
  color: #2563eb;
}

.custom-font-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 10000;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.16), 0 4px 12px rgba(0, 0, 0, 0.06);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 380px;
  animation: fontDropdownPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

@keyframes fontDropdownPop {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.font-dropdown-search-box {
  position: relative;
  width: 100%;
}

.font-dropdown-search-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.78rem;
  color: #94a3b8;
  pointer-events: none;
}

.font-dropdown-search-input {
  width: 100%;
  padding: 6px 28px 6px 10px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: 0.8rem;
  font-family: inherit;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.font-dropdown-search-input:focus {
  background: #ffffff;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.font-dropdown-items-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  max-height: 310px;
  padding-right: 2px;
}

.font-dropdown-items-list::-webkit-scrollbar {
  width: 5px;
}

.font-dropdown-items-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 6px;
}

.font-dropdown-item {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1.5px solid transparent;
  background: #ffffff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: all 0.15s ease;
}

.font-dropdown-item:hover {
  background: #f1f5f9;
  border-color: #e2e8f0;
}

.font-dropdown-item.active {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.font-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.font-item-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: #0f172a;
}

.font-dropdown-item.active .font-item-name {
  color: #2563eb;
  font-weight: 800;
}

.font-item-check {
  color: #2563eb;
  font-size: 0.82rem;
}

.font-item-preview {
  font-size: 1.05rem;
  color: #334155;
  line-height: 1.35;
  padding-top: 2px;
  letter-spacing: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.font-dropdown-item.active .font-item-preview {
  color: #1e40af;
}


/* ==========================================================================
   OBS STUDIO WEBSOCKET & SCENE CONTROLLER STYLES
   ========================================================================== */

.header-obs-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.obs-badge-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid #ffffff;
  transition: all 0.3s ease;
}

.obs-badge-dot.disconnected {
  background-color: #ef4444;
}

.obs-badge-dot.connecting {
  background-color: #f59e0b;
  box-shadow: 0 0 6px #f59e0b;
}

.obs-badge-dot.connected {
  background-color: #10b981;
  box-shadow: 0 0 8px #10b981;
}

.modal-obs-card {
  max-width: 820px;
  width: 95%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.obs-modal-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  overflow-x: auto;
}

.obs-tab-btn {
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-size: 0.86rem;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.obs-tab-btn:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.obs-tab-btn.active {
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.obs-modal-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}

.obs-tab-content {
  display: none;
}

.obs-tab-content.active {
  display: block;
}

/* ACTIVE PROGRAM SCENE BANNER */
.obs-active-scene-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  color: #ffffff;
  padding: 14px 18px;
  border-radius: 12px;
  margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.15);
}

.active-scene-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.scene-live-tag {
  font-size: 0.76rem;
  font-weight: 700;
  color: #ef4444;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.active-scene-name {
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
}

.obs-scenes-section .section-title,
.obs-transitions-section .section-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #475569;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* SCENES GRID */
.obs-scenes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}

.obs-scene-card {
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

.obs-scene-card:hover {
  transform: translateY(-2px);
  border-color: #3b82f6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.obs-scene-card.active {
  border-color: #ef4444;
  background: #fef2f2;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
}

.obs-scene-icon {
  font-size: 1.5rem;
  color: #64748b;
  transition: color 0.2s ease;
}

.obs-scene-card.active .obs-scene-icon {
  color: #ef4444;
}

.obs-scene-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1e293b;
  word-break: break-word;
  line-height: 1.3;
}

.obs-scene-card.active .obs-scene-name {
  color: #991b1b;
}

.obs-scene-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: #ef4444;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  text-transform: uppercase;
}

.obs-scenes-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 36px 16px;
  color: #64748b;
  font-size: 0.9rem;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px dashed #cbd5e1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.obs-scenes-empty i {
  font-size: 2rem;
  color: #94a3b8;
}

/* TRANSITIONS LIST */
.obs-transitions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.obs-transition-btn {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}

.obs-transition-btn:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
}

.obs-transition-btn.active {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}

/* CONNECTION TAB GRID */
.obs-connect-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 16px;
}

@media (max-width: 768px) {
  .obs-connect-grid {
    grid-template-columns: 1fr;
  }
}

.obs-form-card,
.obs-saved-profiles-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
}

.form-card-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}

.obs-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.input-with-toggle {
  display: flex;
  align-items: center;
  position: relative;
}

.btn-toggle-pw {
  position: absolute;
  left: 10px;
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  font-size: 0.9rem;
}

/* SAVED PROFILES LIST */
.obs-saved-profiles-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
}

.obs-profile-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: all 0.2s ease;
}

.obs-profile-item:hover {
  border-color: #93c5fd;
  background: #f0f9ff;
}

.obs-profile-item.active {
  border-color: #10b981;
  background: #ecfdf5;
}

.profile-main-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.profile-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
}

.profile-address {
  font-size: 0.75rem;
  color: #64748b;
  font-family: monospace;
}

.profile-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* QR CODE SCANNER VIEW */
.obs-qr-scanner-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 10px;
}

.qr-scanner-viewfinder {
  width: 100%;
  max-width: 380px;
  height: 280px;
  background: #0f172a;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
  border: 2px solid #334155;
}

.qr-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qr-placeholder {
  color: #94a3b8;
  text-align: center;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qr-cam-icon {
  font-size: 2.4rem;
  margin-bottom: 10px;
  color: #38bdf8;
}

.qr-laser {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #ef4444, transparent);
  box-shadow: 0 0 12px #ef4444;
  animation: qrLaserScan 2s ease-in-out infinite;
}

@keyframes qrLaserScan {
  0% {
    top: 5%;
  }

  50% {
    top: 95%;
  }

  100% {
    top: 5%;
  }
}

.qr-actions-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.qr-upload-label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.qr-status-msg {
  font-size: 0.8rem;
  color: #64748b;
  text-align: center;
  max-width: 460px;
  line-height: 1.4;
  background: #f8fafc;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}


/* ==========================================================================
   OBS LIVE SCENES SWITCHER BAR (UNDER SEARCH HERO IN CONTROL PANEL)
   ========================================================================== */

.obs-control-panel-scenes-bar {
  max-width: 1200px;
  width: 95%;
  margin: -12px auto 14px auto;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.95));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2), 0 0 14px rgba(37, 99, 235, 0.15);
  animation: obsBarSlideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 10;
}

@keyframes obsBarSlideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.obs-bar-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.obs-bar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.obs-bar-live-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.obs-live-pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
  animation: pulseGreen 1.5s infinite;
}

@keyframes pulseGreen {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }

  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.obs-bar-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 5px;
}

.obs-bar-active-scene-pill {
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.obs-bar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.obs-bar-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
}

.obs-bar-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}

.obs-bar-btn-disconnect:hover {
  background: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
  border-color: #ef4444;
}

/* SCENES HORIZONTAL SCROLL TRACK & BUTTON FITTING */
.obs-bar-scenes-track {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 6px 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.obs-bar-btn-toggle-prev {
  background: rgba(59, 130, 246, 0.2) !important;
  border-color: rgba(59, 130, 246, 0.45) !important;
  color: #bfdbfe !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  transition: all 0.2s ease !important;
}

.obs-bar-btn-toggle-prev:hover {
  background: rgba(59, 130, 246, 0.35) !important;
  border-color: #60a5fa !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.obs-bar-scene-pill {
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 6px 14px;
  color: #f1f5f9;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.18s ease;
  user-select: none;
  flex-shrink: 0;
}

.obs-bar-scene-pill:hover {
  background: rgba(59, 130, 246, 0.3);
  border-color: #3b82f6;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.obs-bar-scene-pill.active {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  border-color: #f87171 !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.6) !important;
}

.obs-bar-scenes-track::-webkit-scrollbar {
  height: 4px;
}

.obs-bar-scenes-track::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.obs-bar-scene-pill {
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 6px 14px;
  color: #f1f5f9;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.obs-bar-scene-pill:hover {
  background: rgba(59, 130, 246, 0.25);
  border-color: #3b82f6;
  color: #ffffff;
  transform: translateY(-1px);
}

.obs-bar-scene-pill.active {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border-color: #f87171;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
  transform: scale(1.03);
}

.obs-bar-scene-pill.active .scene-pill-icon {
  animation: pulse 1s infinite;
}

.scene-pill-badge {
  background: rgba(0, 0, 0, 0.35);
  color: #fecaca;
  font-size: 0.65rem;
  padding: 1px 5px;
  border-radius: 4px;
  margin-right: 4px;
}


.modal-obs-card-compact {
  max-width: 520px !important;
  width: 92% !important;
}

.modal-obs-card-compact .obs-connect-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

.obs-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.obs-row-label {
  font-size: 0.76rem;
  font-weight: 800;
  color: #94a3b8;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}

.obs-bar-transitions-track {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.obs-bar-transition-pill {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 4px 10px;
  color: #cbd5e1;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.obs-bar-transition-pill:hover {
  background: rgba(59, 130, 246, 0.25);
  border-color: #3b82f6;
  color: #ffffff;
}

.obs-bar-transition-pill.active {
  background: #2563eb;
  border-color: #60a5fa;
  color: #ffffff;
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.5);
}


/* REMOTE CONTROLLER BUTTON & BADGE */
.header-remote-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.remote-badge-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid #ffffff;
  transition: all 0.3s ease;
}

.remote-badge-dot.disconnected {
  background-color: #94a3b8;
}

.remote-badge-dot.connected {
  background-color: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulseDot 2s infinite;
}

/* ==========================================================================
   CUSTOM SONG BUILDER & CREATOR MODAL STYLES
   ========================================================================== */

.modal-song-editor-card {
  width: 95vw !important;
  max-width: 1050px !important;
  height: 88vh !important;
  max-height: 860px !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.3) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.modal-song-editor-card .modal-header {
  padding: 10px 18px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-song-editor-card .modal-header-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-song-editor-card .modal-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
}

.modal-song-editor-card .modal-subtitle {
  font-size: 0.74rem;
  color: #64748b;
  margin-top: 1px;
}

/* Metadata Bar */
.song-editor-metadata-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 18px;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}

.song-meta-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.song-meta-field label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 4px;
}

.required-star {
  color: #ef4444;
  font-weight: 900;
}

/* Tabs Navigation */
.song-editor-tabs-nav {
  display: flex;
  gap: 6px;
  padding: 6px 18px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  overflow-x: auto;
}

.song-editor-tab-btn {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.song-editor-tab-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.song-editor-tab-btn.active {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.1);
}

/* Tab Content */
.song-editor-tab-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 10px 18px;
  background: #f8fafc;
}

.song-editor-tab-content.hidden {
  display: none !important;
}

/* Tab 1: Builder Layout */
.song-builder-layout {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 12px;
  flex: 1;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.song-builder-main-col {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.song-builder-toolbar {
  padding: 8px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.song-builder-segments-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Segment Cards */
.song-segment-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.song-segment-card.is-chorus {
  border-color: #93c5fd;
  background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 40px);
}

.song-segment-card.is-verse {
  border-color: #cbd5e1;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 40px);
}

.song-segment-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.segment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 8px;
}

.segment-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 800;
  border: 1px solid transparent;
}

.segment-type-pill.chorus {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

.segment-type-pill.verse {
  background: #f1f5f9;
  color: #334155;
  border-color: #e2e8f0;
}

.segment-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.seg-btn {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #64748b;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.75rem;
  transition: all 0.15s ease;
}

.seg-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #cbd5e1;
}

.seg-btn-danger:hover {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fca5a5;
}

/* Slides Inside Segment */
.segment-slides-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.song-slide-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.slide-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748b;
}

.slide-lines-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.slide-line-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.slide-line-num {
  font-size: 0.72rem;
  font-weight: 800;
  color: #94a3b8;
  width: 16px;
  text-align: center;
}

.slide-line-input {
  flex: 1;
  padding: 6px 10px;
  font-size: 0.85rem;
  font-family: 'Cairo', sans-serif;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  outline: none;
  transition: border-color 0.2s ease;
}

.slide-line-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.slide-line-repeat-select {
  padding: 6px 6px;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  outline: none;
}

.btn-remove-line {
  background: transparent;
  border: none;
  color: #94a3b8;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-remove-line:hover {
  background: #fee2e2;
  color: #ef4444;
}

.btn-add-line-to-slide {
  background: transparent;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.15s ease;
  width: 100%;
}

.btn-add-line-to-slide:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #2563eb;
}

.btn-add-slide-to-segment {
  background: #f1f5f9;
  border: 1px dashed #94a3b8;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.btn-add-slide-to-segment:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* Tab 1: Live Preview Pane */
.song-builder-preview-col {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.preview-col-header {
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.builder-live-slides-preview {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f1f5f9;
}

.preview-slide-card {
  background: #0f172a;
  color: #ffffff;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  border: 1px solid #334155;
  transition: transform 0.15s ease;
}

.preview-slide-card:hover {
  transform: translateY(-1px);
}

.preview-slide-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  color: #94a3b8;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 4px;
  margin-bottom: 4px;
}

.preview-slide-badge {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
}

.preview-slide-badge.chorus {
  background: rgba(37, 99, 235, 0.3);
  color: #60a5fa;
  border: 1px solid #2563eb;
}

.preview-slide-badge.verse {
  background: rgba(100, 116, 139, 0.3);
  color: #cbd5e1;
  border: 1px solid #64748b;
}

.preview-slide-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
  font-family: 'Cairo', sans-serif;
}

.preview-slide-lines .line-row-txt {
  color: #f8fafc;
}

/* Tab 2: Smart Paste */
.smart-paste-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  overflow-y: auto;
}

.smart-paste-info-banner {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.84rem;
  color: #1e40af;
  line-height: 1.4;
}

.smart-paste-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.smart-paste-opt-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Tab 3: Raw JSON */
.raw-json-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
}

.json-textarea {
  font-family: ui-monospace, Menlo, Monaco, Consolas, monospace !important;
  font-size: 0.82rem !important;
  line-height: 1.4 !important;
  background: #0f172a !important;
  color: #38bdf8 !important;
  border-radius: 10px !important;
  border: 1px solid #334155 !important;
  padding: 12px !important;
  flex: 1 !important;
  resize: none !important;
}

/* Modal Footer */
.song-editor-footer {
  padding: 12px 20px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Submit Song for Review - Simple Clean Style */
#btn-submit-song-for-review {
  background: #f8fafc !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  padding: 6px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

#btn-submit-song-for-review:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
  transform: none !important;
  box-shadow: none !important;
}

#btn-submit-song-for-review i {
  color: #64748b !important;
  font-size: 0.8rem !important;
  filter: none !important;
  transition: color 0.15s ease !important;
}

#btn-submit-song-for-review:hover i {
  color: #2563eb !important;
  transform: none !important;
}

/* Custom Song Badge in Search and Recents */
.item-badge,
.item-badge.lyrics-match-badge,
.item-badge.bible-badge,
.item-badge.custom-song-badge {
  border: none !important;
}

.item-badge.custom-song-badge {
  background: #fef3c7;
  color: #b45309;
  border: none !important;
  font-weight: 800;
}

.mini-btn-danger-outline {
  color: #ef4444 !important;
  border-color: #fca5a5 !important;
}

.mini-btn-danger-outline:hover {
  background: #fee2e2 !important;
  color: #dc2626 !important;
}

@media (max-width: 768px) {
  .modal-song-editor-card {
    width: 98vw !important;
    max-width: 100% !important;
    height: 96vh !important;
    height: 96dvh !important;
    max-height: 98dvh !important;
    margin: auto !important;
    border-radius: 12px !important;
  }

  .modal-song-editor-card .modal-header {
    padding: 8px 12px !important;
  }

  .modal-song-editor-card .modal-header-title-wrap {
    gap: 8px !important;
  }

  .modal-song-editor-card .modal-title {
    font-size: 0.92rem !important;
  }

  .modal-song-editor-card .modal-subtitle {
    display: none !important;
  }

  .modal-song-editor-card #btn-import-song-json-file {
    font-size: 0.7rem !important;
    padding: 4px 8px !important;
    gap: 4px !important;
  }

  .song-editor-metadata-bar {
    padding: 6px 10px !important;
    gap: 6px !important;
  }

  .song-editor-metadata-bar .song-meta-field:nth-child(1) {
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }

  .song-editor-metadata-bar .song-meta-field:nth-child(2) {
    flex: 1 1 calc(50% - 3px) !important;
    min-width: 0 !important;
  }

  .song-editor-metadata-bar .song-meta-field:nth-child(3) {
    flex: 1 1 calc(50% - 3px) !important;
    min-width: 0 !important;
  }

  .song-meta-field label {
    font-size: 0.7rem !important;
    margin-bottom: 2px !important;
  }

  .song-meta-field .control-input,
  .song-meta-field .control-select {
    height: 32px !important;
    padding: 4px 8px !important;
    font-size: 0.78rem !important;
  }

  .song-editor-tabs-nav {
    padding: 4px 8px !important;
    gap: 4px !important;
  }

  .song-editor-tab-btn {
    flex: 1 1 0 !important;
    justify-content: center !important;
    padding: 5px 6px !important;
    font-size: 0.74rem !important;
    border-radius: 6px !important;
    gap: 4px !important;
    white-space: nowrap !important;
  }

  .song-editor-tab-content {
    padding: 6px 8px !important;
  }

  .song-builder-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .song-builder-main-col {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 10px !important;
  }

  .song-builder-toolbar {
    padding: 6px 10px !important;
    gap: 6px !important;
  }

  .song-builder-toolbar span {
    font-size: 0.76rem !important;
  }

  .song-builder-toolbar .btn {
    padding: 4px 8px !important;
    font-size: 0.72rem !important;
    border-radius: 6px !important;
  }

  .song-builder-segments-list {
    padding: 6px !important;
    gap: 8px !important;
  }

  .song-segment-card {
    padding: 8px !important;
    gap: 6px !important;
    border-radius: 10px !important;
  }

  .segment-header {
    padding-bottom: 5px !important;
  }

  .segment-type-pill {
    padding: 3px 8px !important;
    font-size: 0.72rem !important;
  }

  .seg-btn {
    width: 26px !important;
    height: 26px !important;
    font-size: 0.7rem !important;
  }

  .song-slide-box {
    padding: 6px 8px !important;
    gap: 6px !important;
    border-radius: 8px !important;
  }

  .slide-box-header {
    font-size: 0.7rem !important;
  }

  .slide-line-row {
    gap: 4px !important;
  }

  .slide-line-num {
    font-size: 0.68rem !important;
    width: 14px !important;
  }

  .slide-line-input {
    padding: 4px 8px !important;
    font-size: 0.8rem !important;
    height: 32px !important;
    border-radius: 6px !important;
  }

  .btn-add-line-to-slide {
    padding: 4px 8px !important;
    font-size: 0.72rem !important;
  }

  .btn-add-slide-to-segment {
    padding: 5px 8px !important;
    font-size: 0.72rem !important;
  }

  .song-builder-preview-col {
    flex: 0 0 auto !important;
    max-height: 145px !important;
    min-height: 90px !important;
    height: auto !important;
    border-radius: 10px !important;
  }

  .preview-col-header {
    padding: 5px 10px !important;
  }

  .preview-col-header span {
    font-size: 0.74rem !important;
  }

  .counter-text-chip {
    padding: 2px 6px !important;
    font-size: 0.7rem !important;
  }

  .builder-live-slides-preview {
    padding: 6px !important;
    gap: 6px !important;
  }

  .preview-slide-card {
    padding: 8px 10px !important;
    gap: 4px !important;
  }

  .preview-slide-lines {
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
  }

  .smart-paste-container {
    gap: 8px !important;
  }

  .smart-paste-info-banner {
    padding: 6px 10px !important;
    font-size: 0.74rem !important;
    gap: 8px !important;
    border-radius: 8px !important;
  }

  #smart-paste-raw-textarea {
    min-height: 100px !important;
    font-size: 0.8rem !important;
    padding: 8px !important;
  }

  .smart-paste-options-grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .smart-paste-opt-card {
    padding: 8px !important;
    gap: 4px !important;
    border-radius: 8px !important;
  }

  .smart-paste-opt-card div {
    font-size: 0.75rem !important;
    margin-bottom: 4px !important;
  }

  .smart-paste-opt-card .checkbox-label {
    font-size: 0.74rem !important;
    margin-bottom: 3px !important;
  }

  #btn-execute-smart-parse {
    padding: 6px 12px !important;
    font-size: 0.78rem !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .json-textarea {
    padding: 8px !important;
    font-size: 0.75rem !important;
  }

  #btn-apply-raw-json-changes {
    padding: 5px 10px !important;
    font-size: 0.75rem !important;
  }

  #song-editor-review-banner {
    margin: 4px 8px 0 8px !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
  }

  #song-editor-review-banner-text {
    font-size: 0.76rem !important;
  }

  #btn-approve-reviewed-song-direct {
    padding: 4px 10px !important;
    font-size: 0.72rem !important;
  }

  .song-editor-footer {
    padding: 8px 10px !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  .footer-start-actions {
    width: 100% !important;
    display: flex !important;
    gap: 4px !important;
  }

  .footer-start-actions button {
    flex: 1 !important;
    padding: 5px 6px !important;
    font-size: 0.72rem !important;
    justify-content: center !important;
  }

  .footer-end-actions {
    width: 100% !important;
    display: flex !important;
    gap: 4px !important;
  }

  .footer-end-actions button {
    flex: 1 !important;
    padding: 6px 6px !important;
    font-size: 0.74rem !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  #btn-save-and-present-song {
    flex: 1.4 !important;
    font-weight: 800 !important;
  }

  #btn-cancel-custom-song-modal {
    flex: 0.7 !important;
  }
}

@media (max-width: 480px) {
  .modal-song-editor-card {
    width: 100vw !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
  }

  .modal-song-editor-card .modal-header {
    border-radius: 0 !important;
  }

  .song-builder-preview-col {
    max-height: 120px !important;
    min-height: 80px !important;
  }
}

/* =========================================================================
   HOTSPOT MODE & DEVICE CONNECTION STYLES
   ========================================================================= */
.online-pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
  animation: hotspotPulse 1.8s infinite cubic-bezier(0.45, 0, 0.55, 1);
  vertical-align: middle;
}

@keyframes hotspotPulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }

  70% {
    transform: scale(1.15);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.hotspot-guide-banner {
  animation: bannerFadeSlide 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes bannerFadeSlide {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hotspot-device-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border-solid, #e2e8f0);
  border-radius: 10px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.hotspot-device-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.hotspot-device-card .device-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.hotspot-device-card .device-name {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text-main, #0f172a);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hotspot-device-card .device-meta {
  font-size: 0.68rem;
  color: var(--text-muted, #64748b);
  display: flex;
  align-items: center;
  gap: 5px;
}

.device-status-badge.can-ctrl {
  color: #059669;
  font-weight: 700;
}

.device-status-badge.view-only {
  color: #d97706;
  font-weight: 700;
}

.device-actions-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.btn-device-perm {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #d97706;
}

.btn-device-perm.active {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
  color: #059669;
}

.btn-device-perm:hover {
  transform: translateY(-1px);
}

.btn-disconnect-device {
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 0.72rem;
  border: none;
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.btn-disconnect-device:hover {
  background: #fee2e2;
  color: #b91c1c;
  transform: translateY(-1px);
}

.btn-block-device {
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 0.72rem;
  border: none;
  background: rgba(100, 116, 139, 0.1);
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.btn-block-device:hover {
  background: #fee2e2;
  color: #dc2626;
  transform: translateY(-1px);
}

.controller-readonly-banner {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999999;
  background: #fef3c7;
  color: #92400e;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 6px 12px;
  border-bottom: 1px solid #fde68a;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.12);
}

/* PERMANENTLY SUPPRESS OLD CONTROLLER BAR */
.hotspot-controller-bar {
  display: none !important;
}

/* CAST ICON CONNECTED INDICATOR BADGE */
.cast-connected-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 2px #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
  animation: badgeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.cast-connected-badge.hidden {
  display: none !important;
}

.cast-connected-badge .badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffffff;
  animation: pulseDot 1.4s infinite ease-in-out;
}

@keyframes badgeIn {
  from {
    transform: scale(0);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes pulseDot {
  0% {
    transform: scale(0.85);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.2);
    opacity: 1;
  }

  100% {
    transform: scale(0.85);
    opacity: 0.8;
  }
}

/* CAST HOTSPOT STATUS BOX & DISCONNECT */
.cast-hotspot-status-box {
  animation: bannerFadeSlide 0.2s ease;
}

.cast-hotspot-status-box.hidden {
  display: none !important;
}

/* LIGHT THEME HOTSPOT GUIDE BANNER & QR */
.hotspot-guide-banner {
  animation: bannerFadeSlide 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hotspot-guide-banner.hidden {
  display: none !important;
}

#hotspot-banner-qr img,
#hotspot-banner-qr canvas {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

/* MOBILE CONTROLLER WAITING / REJECTED OVERLAY */
.controller-waiting-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000080;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: overlayIn 0.2s ease;
}

.controller-waiting-overlay.hidden {
  display: none !important;
}

.controller-waiting-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 28px 24px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 48px -8px rgba(0, 0, 0, 0.22);
  border: 1px solid #e2e8f0;
  animation: fadeScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.waiting-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #eff6ff;
  color: #2563eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 14px;
}

.waiting-icon-wrap.pulse-anim {
  animation: iconPulse 1.8s infinite ease-in-out;
}

@keyframes iconPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
  }

  70% {
    transform: scale(1.06);
    box-shadow: 0 0 0 12px rgba(37, 99, 235, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
  }
}

.controller-waiting-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 8px 0;
  font-family: 'Cairo', sans-serif;
}

.controller-waiting-card p {
  font-size: 0.84rem;
  color: #475569;
  line-height: 1.5;
  margin: 0 0 16px 0;
}

.waiting-progress-bar {
  height: 4px;
  width: 100%;
  background: #f1f5f9;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.waiting-progress-bar .bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 40%;
  background: linear-gradient(90deg, #2563eb, #10b981);
  border-radius: 2px;
  animation: barSlide 1.5s infinite ease-in-out;
}

@keyframes barSlide {
  0% {
    left: -40%;
    width: 40%;
  }

  50% {
    width: 60%;
  }

  100% {
    left: 100%;
    width: 40%;
  }
}

/* =========================================================
   ON-SCREEN DRAGGABLE VIRTUAL KEYBOARD (DESKTOP ONLY)
   ========================================================= */
.virtual-keyboard-window {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 780px;
  max-width: calc(100vw - 32px);
  background: var(--surface, #ffffff);
  border: 1px solid var(--border-solid, #e4e6f0);
  border-radius: 20px;
  box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(91, 108, 245, 0.08);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
  font-family: 'Cairo', sans-serif;
  animation: oskPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  transition: box-shadow 0.2s ease;
}

.virtual-keyboard-window.is-dragging {
  opacity: 0.95;
  box-shadow: 0 32px 70px -10px rgba(15, 23, 42, 0.38), 0 0 0 2px var(--brand, #5b6cf5);
  cursor: grabbing !important;
}

.virtual-keyboard-window.hidden {
  display: none !important;
}

.osk-header {
  padding: 10px 16px;
  background: linear-gradient(180deg, var(--surface-2, #f8fafc) 0%, var(--surface, #ffffff) 100%);
  border-bottom: 1px solid var(--border-solid, #e4e6f0);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: grab;
  touch-action: none;
  gap: 12px;
}

.osk-header:active {
  cursor: grabbing;
}

.osk-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.osk-drag-icon {
  color: var(--text-3, #94a3b8);
  font-size: 0.95rem;
  letter-spacing: -2px;
  cursor: grab;
}

.osk-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.osk-icon {
  color: var(--brand, #5b6cf5);
  font-size: 1rem;
}

.osk-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text, #1e293b);
}

.osk-lang-badge {
  font-size: 0.72rem;
  font-weight: 800;
  background: rgba(91, 108, 245, 0.12);
  color: var(--brand, #5b6cf5);
  padding: 1px 7px;
  border-radius: 6px;
}

.osk-header-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.osk-ctrl-btn {
  background: var(--surface-3, #eceef7);
  color: var(--text-2, #475569);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 5px 10px;
  font-family: 'Cairo', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.18s ease;
}

.osk-ctrl-btn:hover {
  background: var(--brand-bg, #eef0ff);
  color: var(--brand, #5b6cf5);
}

.osk-icon-only-btn {
  padding: 5px 8px;
}

.osk-close-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.9rem;
}

.osk-close-btn:hover {
  background: #fee2e2;
  color: #ef4444;
}

.osk-body {
  padding: 12px 14px 14px;
  background: var(--surface, #ffffff);
}

.osk-keys-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.osk-row {
  display: flex;
  gap: 5px;
  justify-content: center;
  align-items: center;
}

.osk-key {
  font-family: 'Cairo', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  height: 40px;
  min-width: 42px;
  border-radius: 9px;
  border: 1px solid var(--border-solid, #e4e6f0);
  background: var(--surface-2, #f8fafc);
  color: var(--text, #1e293b);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: background-color 0.08s ease, transform 0.06s ease, border-color 0.08s ease, box-shadow 0.08s ease;
  position: relative;
  box-sizing: border-box;
}

.osk-key:hover {
  background: #ffffff;
  border-color: var(--brand, #5b6cf5);
  color: var(--brand, #5b6cf5);
}

.osk-key:active,
.osk-key.is-pressed {
  transform: translateY(2px) scale(0.96);
  background: var(--brand, #5b6cf5) !important;
  border-color: var(--brand-dark, #4354e8) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(91, 108, 245, 0.25), 0 2px 8px rgba(91, 108, 245, 0.35) !important;
}

.osk-key:active .osk-key-shift-hint,
.osk-key.is-pressed .osk-key-shift-hint,
.osk-key.is-active-modifier .osk-key-shift-hint {
  color: rgba(255, 255, 255, 0.85) !important;
}

.osk-lang-badge.is-synced-pulse {
  animation: oskLangPulse 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes oskLangPulse {
  0% {
    transform: scale(1);
    background: var(--brand, #5b6cf5);
    color: #ffffff;
  }

  50% {
    transform: scale(1.18);
    background: var(--brand, #5b6cf5);
    color: #ffffff;
  }

  100% {
    transform: scale(1);
  }
}

/* Key Width Variants */
.osk-key-wide {
  min-width: 66px;
  font-size: 0.82rem;
  font-weight: 800;
}

.osk-key-medium {
  min-width: 58px;
  font-size: 0.8rem;
  font-weight: 800;
}

.osk-key-lang {
  min-width: 84px;
  background: #ede9fe;
  color: #7c3aed;
  border-color: rgba(139, 92, 246, 0.25);
  font-size: 0.82rem;
  font-weight: 800;
}

.osk-key-lang:hover {
  background: #ddd6fe;
  color: #6d28d9;
}

.osk-key-clear {
  min-width: 72px;
  background: #fef3c7;
  color: #d97706;
  border-color: rgba(245, 158, 11, 0.25);
  font-size: 0.8rem;
  font-weight: 800;
}

.osk-key-clear:hover {
  background: #fde68a;
  color: #b45309;
}

.osk-key-bksp {
  min-width: 66px;
  background: #fee2e2;
  color: #dc2626;
  border-color: rgba(239, 68, 68, 0.25);
  font-size: 0.95rem;
}

.osk-key-bksp:hover {
  background: #fecaca;
  color: #b91c1c;
}

.osk-key-enter {
  min-width: 82px;
  background: linear-gradient(135deg, var(--brand, #5b6cf5), var(--brand-dark, #4354e8));
  color: #ffffff;
  border: none;
  font-size: 0.84rem;
  font-weight: 800;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 4px 10px rgba(79, 70, 229, 0.25);
}

.osk-key-enter:hover {
  background: linear-gradient(135deg, #4f61f3, #3646db);
  color: #ffffff;
}

.osk-key-space {
  flex: 1;
  max-width: 320px;
  font-size: 0.82rem;
  color: var(--text-2, #64748b);
}

.osk-key.is-active-modifier {
  background: var(--brand, #5b6cf5) !important;
  color: #ffffff !important;
  border-color: var(--brand-dark, #4354e8) !important;
}

/* Secondary Shift Character Preview */
.osk-key-shift-hint {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 0.62rem;
  color: var(--text-3, #94a3b8);
  pointer-events: none;
  opacity: 0.75;
}

@keyframes oskPopIn {
  from {
    opacity: 0;
    transform: translate(-50%, 18px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

/* Toggle Button Active State */
#btn-toggle-virtual-keyboard.active {
  background: var(--brand-bg, #eef0ff);
  color: var(--brand, #5b6cf5);
  box-shadow: 0 0 0 2px var(--brand, #5b6cf5);
}

/* Desktop Only Constraint */
@media (max-width: 768px) {

  #btn-toggle-virtual-keyboard,
  #virtual-keyboard-window {
    display: none !important;
  }
}

[data-theme="dark"] .virtual-keyboard-window {
  background: #181b26;
  border-color: #2a2d42;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(91, 108, 245, 0.2);
}

[data-theme="dark"] .osk-header {
  background: linear-gradient(180deg, #1e2132 0%, #181b26 100%);
  border-color: #2a2d42;
}

[data-theme="dark"] .osk-body {
  background: #181b26;
}

[data-theme="dark"] .osk-title {
  color: #e8eaf6;
}

[data-theme="dark"] .osk-key {
  background: #1e2132;
  border-color: #2a2d42;
  color: #e8eaf6;
}

[data-theme="dark"] .osk-key:hover {
  background: #252840;
  border-color: var(--brand, #5b6cf5);
}

[data-theme="dark"] .osk-ctrl-btn {
  background: #252840;
  color: #9299be;
}




/* =========================================================================
   PLAYLIST ITEM SLIDE EDITOR + SHAREABLE PLAYLISTS
   Uses Uncle Dashboard tokens (with fallbacks) — Cairo, soft surfaces, spring motion
   ========================================================================= */
.presentation-lines-panel,
.recent-session-panel,
.ple-modal-overlay {
  --se-brand: var(--brand, #5b6cf5);
  --se-brand-dark: var(--brand-dark, #4354e8);
  --se-brand-bg: var(--brand-bg, #eef0ff);
  --se-brand-glow: var(--brand-glow, rgba(91, 108, 245, .18));
  --se-danger: var(--danger, #ef4444);
  --se-danger-bg: var(--danger-bg, #fee2e2);
  --se-surface: var(--surface, #ffffff);
  --se-surface-2: var(--surface-2, #f7f8fc);
  --se-surface-3: var(--surface-3, #eceef7);
  --se-border: var(--border-solid, #e4e6f0);
  --se-text: var(--text, #1a1d2e);
  --se-text-2: var(--text-2, #4b5068);
  --se-text-3: var(--text-3, #8b90a8);
  --se-spring: cubic-bezier(.16, 1, .3, 1);
  --se-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------- Edit bar replaces panel controls ---------- */
.se-bar {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: 'Cairo', sans-serif;
}

.presentation-lines-panel.is-slide-editing .panel-bar>.panel-bar-start,
.presentation-lines-panel.is-slide-editing .panel-bar>.panel-bar-end,
.presentation-lines-panel.is-slide-editing #active-song-scale-badge {
  display: none !important;
}

.presentation-lines-panel.is-slide-editing .se-bar {
  display: flex;
  animation: seBarIn .28s var(--se-spring);
}

.presentation-lines-panel.is-slide-editing .panel-bar {
  background: linear-gradient(180deg, var(--se-brand-bg), var(--se-surface-2));
}

@keyframes seBarIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.se-bar-start,
.se-bar-end {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.se-bar-start {
  flex: 1 1 auto;
}

.se-bar-end {
  flex: 0 0 auto;
}

.se-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border: none;
  border-radius: 12px;
  font-family: 'Cairo', sans-serif;
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .2s var(--se-spring), box-shadow .2s var(--se-ease);
}

.se-btn-primary {
  background: linear-gradient(135deg, var(--se-brand), var(--se-brand-dark));
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 8px 18px rgba(79, 70, 229, .16);
}

.se-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .26) inset, 0 12px 24px rgba(79, 70, 229, .24);
}

.se-btn:active {
  transform: scale(.96);
}

.se-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--se-text);
  font-size: .84rem;
  font-weight: 800;
}

.se-title>i {
  color: var(--se-brand);
  font-size: .72rem;
}

.se-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.se-count {
  flex-shrink: 0;
  background: var(--se-surface);
  color: var(--se-brand);
  border-radius: 9999px;
  padding: 0 8px;
  font-size: .7rem;
  font-weight: 800;
  line-height: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.se-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--se-surface);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.se-sel-group {
  max-width: 0;
  padding: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-width .3s var(--se-spring), opacity .2s var(--se-ease), padding .3s var(--se-spring);
}

.se-sel-group.open {
  max-width: 120px;
  padding: 2px;
  opacity: 1;
  pointer-events: auto;
}

.se-icon-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--se-text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s var(--se-ease), color .15s var(--se-ease), transform .2s var(--se-spring);
}

.se-icon-btn:hover:not(:disabled) {
  background: var(--se-surface-2);
  color: var(--se-brand);
}

.se-icon-btn:active:not(:disabled) {
  transform: scale(.9);
}

.se-icon-btn.is-danger:hover:not(:disabled) {
  background: var(--se-danger-bg);
  color: var(--se-danger);
}

.se-icon-btn.active {
  background: #f59e0b;
  color: #fff;
}

.se-icon-btn:disabled {
  opacity: .35;
  cursor: default;
}

/* Select dropdown */
.se-select-wrap {
  position: relative;
}

.se-select-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 9px;
  border: none;
  border-radius: 12px;
  background: var(--se-surface);
  color: var(--se-text-2);
  font-family: 'Cairo', sans-serif;
  font-size: .8rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  transition: background .15s var(--se-ease), color .15s var(--se-ease);
}

.se-select-btn:hover,
.se-select-btn[aria-expanded="true"] {
  color: var(--se-brand);
  background: var(--se-surface-2);
}

.se-select-btn.has-selection {
  background: var(--se-brand);
  color: #fff;
}

.se-select-btn .se-chev {
  font-size: .6rem;
  opacity: .7;
  transition: transform .2s var(--se-spring);
}

.se-select-btn[aria-expanded="true"] .se-chev {
  transform: rotate(180deg);
}

.se-sel-count {
  min-width: 10px;
  text-align: center;
}

.se-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 158px;
  padding: 5px;
  background: var(--se-surface);
  border: 1px solid var(--se-border);
  border-radius: 18px;
  box-shadow: var(--shadow-xl, 0 32px 64px -12px rgba(0, 0, 0, .18));
  z-index: 60;
  opacity: 0;
  transform: translateY(-4px) scale(.97);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity .16s var(--se-ease), transform .22s var(--se-spring);
}

.se-select-menu.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.se-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--se-text);
  font-family: 'Cairo', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  text-align: right;
  cursor: pointer;
}

.se-menu-item i {
  width: 14px;
  color: var(--se-text-3);
  font-size: .78rem;
}

.se-menu-item:hover {
  background: var(--se-surface-2);
  color: var(--se-brand);
}

.se-menu-item:hover i {
  color: var(--se-brand);
}

/* ---------- Edit-mode slide cards ---------- */
.line-item.se-item {
  cursor: default;
  padding-right: 3.1rem;
  transition: background .15s var(--se-ease), box-shadow .2s var(--se-ease), opacity .2s var(--se-ease);
  animation: seItemIn .3s var(--se-spring) both;
}

@keyframes seItemIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.line-item.se-item:hover {
  background: var(--se-surface-2);
}

.line-item.se-item.is-selected {
  background: var(--se-brand-bg) !important;
  box-shadow: inset 3px 0 0 var(--se-brand);
}

.line-item.se-item.se-just-moved {
  animation: seMoved .5s var(--se-spring);
}

@keyframes seMoved {
  0% {
    background: var(--se-brand-bg);
  }

  100% {
    background: var(--se-surface);
  }
}

.line-item.se-item.se-dragging {
  opacity: .45;
}

.line-item.se-item.se-drop-before {
  box-shadow: inset 0 3px 0 var(--se-brand);
}

.line-item.se-item.se-drop-after {
  box-shadow: inset 0 -3px 0 var(--se-brand);
}

.se-side {
  flex-direction: column;
  gap: 6px !important;
  top: 10px !important;
}

.se-check {
  width: 20px;
  height: 20px;
  border-radius: 7px;
  border: 1.5px solid var(--se-border);
  background: var(--se-surface);
  color: transparent;
  font-size: .62rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all .18s var(--se-spring);
}

.se-check:hover {
  border-color: var(--se-brand);
}

.se-check.on {
  background: var(--se-brand);
  border-color: var(--se-brand);
  color: #fff;
  transform: scale(1.05);
}

.se-grip {
  color: var(--se-text-3);
  font-size: .8rem;
  cursor: grab;
  width: 20px;
  text-align: center;
  touch-action: none;
}

.se-grip:hover {
  color: var(--se-brand);
}

.se-grip:active {
  cursor: grabbing;
}

.se-badge {
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  font-family: 'Cairo', sans-serif;
  padding: 2px 4px;
  transition: background .15s var(--se-ease);
}

.se-badge:hover {
  background: var(--se-surface-3);
}

.se-line {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 10px;
  padding: 0 4px;
  transition: background .15s var(--se-ease);
}

.se-line-text {
  flex: 1;
  min-width: 0;
  outline: none;
  border-radius: 8px;
  padding: 1px 6px;
  cursor: text;
  word-break: break-word;
  transition: background .15s var(--se-ease), box-shadow .15s var(--se-ease);
}

.se-line-text {
  background: var(--se-surface-2);
  box-shadow: inset 0 0 0 1px var(--se-border);
  opacity: .78;
}

.se-line-text:hover {
  background: var(--se-surface-3);
  opacity: 1;
}

.se-line-text:focus {
  opacity: 1;
}

.se-line-text:focus {
  background: var(--se-surface);
  box-shadow: 0 0 0 2px var(--se-brand), 0 0 0 5px var(--se-brand-glow);
}

.se-line.is-hl .se-line-text {
  background: var(--se-hl-bg, rgba(239, 68, 68, .2));
  box-shadow: inset 0 -2px 0 var(--se-hl, #ef4444);
}

.se-item.is-hl-mode .se-line {
  cursor: pointer;
}

.se-item.is-hl-mode .se-line:hover .se-line-text {
  background: rgba(245, 158, 11, .18);
}

.se-line-del {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--se-text-3);
  font-size: .62rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: .55;
  transition: opacity .15s var(--se-ease), background .15s var(--se-ease), color .15s var(--se-ease);
}

.se-line:hover .se-line-del,
.se-line-text:focus+.se-line-del {
  opacity: 1;
}

.se-line-del:hover {
  background: var(--se-danger-bg);
  color: var(--se-danger);
}

.se-act {
  border: none;
  background: transparent;
  color: var(--se-text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s var(--se-ease), color .15s var(--se-ease), transform .2s var(--se-spring);
}

.se-del-corner {
  position: absolute;
  bottom: 4px;
  left: 6px;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  font-size: .7rem;
  z-index: 10;
}

.se-act.is-danger:hover {
  background: var(--se-danger-bg);
  color: var(--se-danger);
}

.se-act:active {
  transform: scale(.88);
}

/* ---------- Recent item: edit pen + edited chip ---------- */
.recent-item-end {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.recent-edit-btn {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  max-width: 26px;
  max-height: 26px;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  box-sizing: border-box;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--se-text-3);
  font-size: .72rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: scale(.85);
  pointer-events: none;
  transition: opacity .18s var(--se-ease), transform .22s var(--se-spring), background .15s var(--se-ease), color .15s var(--se-ease);
}

.recent-edit-btn i {
  font-size: .72rem !important;
  width: 1em;
  height: 1em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.recent-item:hover .recent-edit-btn,
.recent-item.active .recent-edit-btn,
.recent-item.is-editing .recent-edit-btn {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.recent-edit-btn:hover {
  background: var(--se-brand-bg);
  color: var(--se-brand);
}

.recent-item.has-edits .recent-edit-btn {
  color: var(--se-brand);
}

.recent-item.is-editing .recent-edit-btn {
  background: linear-gradient(135deg, var(--se-brand), var(--se-brand-dark));
  color: #fff;
  box-shadow: 0 4px 10px rgba(79, 70, 229, .25);
}

.recent-item.is-editing {
  box-shadow: inset 3px 0 0 var(--se-brand);
}

.recent-edited-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--se-brand-bg);
  color: var(--se-brand);
  font-size: .55rem;
  flex-shrink: 0;
}

.recent-edited-chip.hidden {
  display: none;
}

@media (hover: none) {
  .recent-edit-btn {
    opacity: .7;
    transform: none;
    pointer-events: auto;
  }
}

.pl-icon-btn.btn-share-pl:hover {
  color: var(--brand, #5b6cf5) !important;
  background: var(--brand-bg, #eef0ff) !important;
}

/* ---------- Share / receive modal (bottom sheet on mobile, centered on desktop) ---------- */
.ple-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: pleOverlayIn .2s var(--se-ease);
  font-family: 'Cairo', sans-serif;
}

.ple-modal-overlay.closing {
  animation: pleOverlayOut .25s var(--se-ease) forwards;
}

.ple-modal {
  position: relative;
  width: 100%;
  max-height: 82vh;
  overflow-y: auto;
  background: var(--se-surface);
  color: var(--se-text);
  border-radius: 32px 32px 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, .2);
  padding: 0 20px calc(18px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  animation: pleSheetUp .35s var(--se-spring);
}

.ple-modal.closing {
  animation: pleSheetDown .25s var(--se-ease) forwards;
}

.ple-modal-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 26px;
  margin-bottom: 14px;
}

.ple-modal-header::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 4px;
  background: var(--se-border);
  border-radius: 2px;
}

.ple-modal-header h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
}

.ple-h-icon {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  background: var(--se-brand-bg);
  color: var(--se-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
}

.ple-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--se-surface-3);
  color: var(--se-text-2);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: all .2s var(--se-spring);
}

.ple-close-btn:hover {
  background: var(--se-brand-bg);
  color: var(--se-brand);
  transform: scale(1.1);
}

.ple-modal-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ple-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--se-text-2);
}

.ple-input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  box-sizing: border-box;
  background: var(--se-surface-3);
  border: 1.5px solid var(--se-border);
  border-radius: 14px;
  color: var(--se-text);
  font-family: 'Cairo', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  transition: border-color .15s var(--se-ease), box-shadow .15s var(--se-ease);
}

.ple-input:focus {
  border-color: var(--se-brand);
  outline: none;
  box-shadow: 0 0 0 3px var(--se-brand-glow);
}

.ple-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ple-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px;
  border-radius: 9999px;
  background: var(--se-surface-2);
  color: var(--se-text-2);
  font-size: .72rem;
  font-weight: 700;
}

.ple-meta span.is-brand {
  background: var(--se-brand-bg);
  color: var(--se-brand);
}

.ple-meta span.is-purple {
  background: var(--coupon-bg, #ede9fe);
  color: var(--coupon-dark, #7c3aed);
}

.ple-result {
  display: flex;
  gap: 6px;
  animation: pleFadeScaleIn .25s var(--se-spring);
}

.ple-result.hidden {
  display: none;
}

.ple-link {
  font-size: .78rem;
  font-weight: 600;
  color: var(--se-brand);
}

.ple-icon-btn {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 14px;
  background: var(--se-brand-bg);
  color: var(--se-brand);
  cursor: pointer;
  font-size: .9rem;
  transition: transform .2s var(--se-spring);
}

.ple-icon-btn:hover {
  transform: translateY(-2px);
}

.ple-shared-name {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--se-text);
  line-height: 1.4;
}

.ple-preview-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  background: var(--se-surface-2);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ple-preview-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--se-text);
}

.ple-preview-list li>i {
  color: var(--se-text-3);
  font-size: .72rem;
  width: 14px;
}

.ple-preview-list li span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ple-preview-list li em {
  color: var(--se-brand);
  font-size: .62rem;
  font-style: normal;
}

.ple-preview-list li.more {
  color: var(--se-text-3);
  font-size: .74rem;
  justify-content: center;
}

.ple-question {
  margin: 2px 0 0;
  font-size: .84rem;
  font-weight: 700;
  color: var(--se-text-2);
}

.ple-modal-footer {
  display: flex;
  justify-content: flex-start;
  flex-direction: row-reverse;
  gap: 8px;
  margin-top: 18px;
}

.ple-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--se-brand), var(--se-brand-dark));
  color: #fff;
  font-family: 'Cairo', sans-serif;
  font-size: .86rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 8px 18px rgba(79, 70, 229, .16);
  transition: transform .2s var(--se-spring), box-shadow .2s var(--se-ease);
}

.ple-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .26) inset, 0 12px 24px rgba(79, 70, 229, .24);
}

.ple-btn:disabled {
  opacity: .7;
  cursor: default;
}

.ple-btn-ghost {
  background: var(--se-surface-3);
  color: var(--se-text-2);
  box-shadow: none;
}

.ple-btn-ghost:hover:not(:disabled) {
  box-shadow: none;
  color: var(--se-brand);
}

@media (min-width: 769px) {
  .ple-modal-overlay {
    justify-content: center;
    align-items: center;
    flex-direction: row;
  }

  .ple-modal {
    width: 420px;
    max-height: 90vh;
    border-radius: 24px;
    box-shadow: var(--shadow-xl, 0 32px 64px -12px rgba(0, 0, 0, .18));
    padding-bottom: 20px;
    animation: pleFadeScaleIn .25s var(--se-spring);
  }

  .ple-modal.closing {
    animation: pleFadeOut .2s var(--se-ease) forwards;
  }

  .ple-modal-header::before {
    display: none;
  }

  .ple-modal-header {
    padding-top: 0;
    margin-top: 20px;
  }
}

@keyframes pleOverlayIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes pleOverlayOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes pleSheetUp {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes pleSheetDown {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

@keyframes pleFadeScaleIn {
  from {
    opacity: 0;
    transform: scale(.96) translateY(16px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes pleFadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(.97);
  }
}

@media (prefers-reduced-motion: reduce) {

  .se-bar,
  .line-item.se-item,
  .ple-modal,
  .ple-modal-overlay,
  .se-select-menu {
    animation: none !important;
    transition: none !important;
  }
}

[data-theme="dark"] .presentation-lines-panel.is-slide-editing .panel-bar {
  background: var(--surface-2, #1e2132);
}

/* Share active playlist button (recents header, beside select-all) */
.recent-session-panel .panel-bar-end {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.recent-select-all-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  line-height: 0;
  margin: 0;
}

#recent-select-all-cb {
  margin: 0 !important;
}

.recent-share-btn {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-3, #8b90a8);
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1), transform .2s cubic-bezier(.16, 1, .3, 1);
}

.recent-share-btn svg,
.recent-share-btn i {
  width: 19px;
  height: 19px;
  font-size: 1.1rem;
  line-height: 1;
  display: block;
  margin: auto;
  flex-shrink: 0;
}

.recent-share-btn:hover {
  background: var(--brand-bg, #eef0ff);
  color: var(--brand, #5b6cf5);
  transform: scale(1.12);
}

.recent-share-btn:active {
  transform: scale(.9);
}

/* Desktop: roomier قائمة التشغيل popover */
@media (min-width: 769px) {
  #popover-playlist {
    width: 400px !important;
    min-width: 400px !important;
    max-width: min(420px, calc(100vw - 2rem)) !important;
    padding: 18px !important;
  }

  #popover-playlist .playlists-list-container {
    max-height: 340px;
    gap: 8px;
  }

  #popover-playlist .playlist-entry-row {
    padding: 11px 14px;
    gap: 12px;
  }

  #popover-playlist .playlist-row-info {
    min-width: 0;
    flex: 1;
  }

  #popover-playlist .playlist-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Startup banner: full-width feature card (custom & shareable playlists) */
.welcome-feature-item.welcome-feature-wide {
  grid-column: 1 / -1;
}

.ple-shared-desc {
  margin: -4px 0 2px;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.7;
  color: var(--text-2, #4b5068);
}

/* =========================================================================
   UNIFIED CLOSE (X) BUTTON — one look for every modal / sheet / popover / drawer
   (Uncle Dashboard spec: 34px circle, surface-3, text-2; hover brand-bg + brand + scale)
   Only visual properties are unified; each component keeps its own positioning.
   ========================================================================= */
.modal-close-btn,
.bible-close-btn,
.drawer-close-btn,
.close-popover-x,
.ple-close-btn,
.osk-close-btn,
.welcome-startup-header .modal-close-btn,
.shortcuts-sheet-header .modal-close-btn,
.gemini-intro-banner-header .modal-close-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: var(--surface-3, #eceef7) !important;
  color: var(--text-2, #4b5068) !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-size: 0.95rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  outline: none;
  transition: background .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1), transform .25s cubic-bezier(.16, 1, .3, 1) !important;
}

.modal-close-btn i,
.bible-close-btn i,
.drawer-close-btn i,
.close-popover-x i,
.ple-close-btn i,
.osk-close-btn i {
  font-size: 0.95rem !important;
  color: inherit !important;
  margin: 0 !important;
}

.modal-close-btn:hover,
.bible-close-btn:hover,
.drawer-close-btn:hover,
.close-popover-x:hover,
.ple-close-btn:hover,
.osk-close-btn:hover {
  background: var(--brand-bg, #eef0ff) !important;
  color: var(--brand, #5b6cf5) !important;
  transform: scale(1.1) !important;
}

.modal-close-btn:active,
.bible-close-btn:active,
.drawer-close-btn:active,
.close-popover-x:active,
.ple-close-btn:active,
.osk-close-btn:active {
  transform: scale(.94) !important;
}

.modal-close-btn:focus-visible,
.bible-close-btn:focus-visible,
.drawer-close-btn:focus-visible,
.close-popover-x:focus-visible,
.ple-close-btn:focus-visible,
.osk-close-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--brand-glow, rgba(91, 108, 245, .18)) !important;
}

[data-theme="dark"] .modal-close-btn,
[data-theme="dark"] .bible-close-btn,
[data-theme="dark"] .drawer-close-btn,
[data-theme="dark"] .close-popover-x,
[data-theme="dark"] .ple-close-btn,
[data-theme="dark"] .osk-close-btn {
  background: var(--surface-3, #252840) !important;
  color: var(--text-2, #9299be) !important;
}

/* =========================================================================
   CUSTOM SONG EDITOR (إضافة ترنيمة جديدة) — unified button system
   Primary = brand gradient · Secondary = soft surface · Icon = 30px soft square
   ========================================================================= */
#modal-custom-song-editor .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 34px !important;
  padding: 0 14px !important;
  border: none !important;
  border-radius: 12px !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s cubic-bezier(.4, 0, .2, 1), background .15s ease, color .15s ease !important;
}

#modal-custom-song-editor .btn i {
  font-size: 0.78rem;
}

#modal-custom-song-editor .btn:active {
  transform: scale(.96) !important;
}

#modal-custom-song-editor .btn-primary {
  background: linear-gradient(135deg, var(--brand, #5b6cf5), var(--brand-dark, #4354e8)) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 8px 18px rgba(79, 70, 229, .16) !important;
}

#modal-custom-song-editor .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .26) inset, 0 12px 24px rgba(79, 70, 229, .24) !important;
}

#modal-custom-song-editor .btn-primary.btn-success {
  background: linear-gradient(135deg, var(--success, #10b981), var(--success-dark, #059669)) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 8px 18px rgba(16, 185, 129, .18) !important;
}

#modal-custom-song-editor .btn-secondary {
  background: var(--surface-3, #eceef7) !important;
  color: var(--text-2, #4b5068) !important;
}

#modal-custom-song-editor .btn-secondary:hover {
  background: var(--brand-bg, #eef0ff) !important;
  color: var(--brand, #5b6cf5) !important;
}

/* Segment icon buttons (move / duplicate / delete) */
#modal-custom-song-editor .seg-btn {
  width: 30px !important;
  height: 30px !important;
  border: none !important;
  border-radius: 10px !important;
  background: var(--surface-3, #eceef7) !important;
  color: var(--text-2, #4b5068) !important;
  font-size: 0.74rem !important;
  transition: background .15s ease, color .15s ease, transform .2s cubic-bezier(.16, 1, .3, 1) !important;
}

#modal-custom-song-editor .seg-btn:hover:not(:disabled) {
  background: var(--brand-bg, #eef0ff) !important;
  color: var(--brand, #5b6cf5) !important;
}

#modal-custom-song-editor .seg-btn-danger:hover:not(:disabled) {
  background: var(--danger-bg, #fee2e2) !important;
  color: var(--danger, #ef4444) !important;
}

#modal-custom-song-editor .seg-btn:disabled {
  opacity: .35 !important;
  cursor: default !important;
}

#modal-custom-song-editor .btn-remove-slide.seg-btn {
  width: 26px !important;
  height: 26px !important;
}

/* "Add line / add slide" — same soft brand ghost style */
#modal-custom-song-editor .btn-add-line-to-slide,
#modal-custom-song-editor .btn-add-slide-to-segment {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  height: 34px !important;
  padding: 0 12px !important;
  border: none !important;
  border-radius: 12px !important;
  background: var(--brand-bg, #eef0ff) !important;
  color: var(--brand, #5b6cf5) !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: background .15s ease, transform .2s cubic-bezier(.16, 1, .3, 1) !important;
}

#modal-custom-song-editor .btn-add-line-to-slide {
  height: 30px !important;
  font-size: 0.74rem !important;
}

#modal-custom-song-editor .btn-add-line-to-slide:hover,
#modal-custom-song-editor .btn-add-slide-to-segment:hover {
  background: var(--brand-glow, rgba(91, 108, 245, .18)) !important;
}

/* Remove-line X — same family as other small X */
#modal-custom-song-editor .btn-remove-line {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--text-3, #8b90a8) !important;
  font-size: 0.68rem !important;
}

#modal-custom-song-editor .btn-remove-line:hover {
  background: var(--danger-bg, #fee2e2) !important;
  color: var(--danger, #ef4444) !important;
}

@media (max-width: 768px) {
  #modal-custom-song-editor .btn {
    height: 36px !important;
    padding: 0 10px !important;
    font-size: 0.76rem !important;
  }
}

/* Offline indicator hook (set by setupNetworkSync) */
html.is-offline .app-bottom-bar .songs-count-subtext::after {
  content: ' · أوفلاين';
  color: var(--warning, #f59e0b);
  font-weight: 800;
}

/* =========================================================================
   MODERN UI POLISH, COMPACT MOBILE UI, SMOOTH ANIMATIONS & UX FIXES
   ========================================================================= */

/* 1. Always-circular #recent-count / .badge-count (compact size) */
#recent-count,
.recent-count,
.badge-count {
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  border-radius: 9999px !important;
  aspect-ratio: 1 / 1;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  background: rgba(100, 116, 139, 0.14) !important;
  color: #64748b !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

[data-theme="dark"] #recent-count,
body.dark-mode #recent-count,
[data-theme="dark"] .recent-count,
body.dark-mode .recent-count,
[data-theme="dark"] .badge-count,
body.dark-mode .badge-count {
  background: rgba(148, 163, 184, 0.16) !important;
  color: #94a3b8 !important;
}

/* 2. Centered .empty-state (horizontally & vertically inside panels, without cropping #presentation-lines-container) */
.lines-list-box,
#presentation-lines-container {
  display: block;
}

.recent-list-box,
#recent-session-container {
  display: flex;
  flex-direction: column;
}

.lines-list-box:has(> .empty-state),
#presentation-lines-container:has(> .empty-state) {
  display: flex;
  flex-direction: column;
}

.empty-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: auto !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 150px !important;
  padding: 1.5rem 1rem !important;
  color: var(--text-3, #8b90a8) !important;
  box-sizing: border-box !important;
  animation: uiSoftIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.empty-state i {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0.55rem !important;
}

/* 3. OSK language key icon & unified 34px header controls (#osk-btn-reset-pos) */
.osk-key-lang {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
}

.osk-key-lang i {
  font-size: 0.8rem;
}

#osk-btn-reset-pos,
.osk-header-controls .osk-icon-only-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: var(--surface-3, #eceef7) !important;
  color: var(--text-2, #4b5068) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.88rem !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  transition: background .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1), transform .25s cubic-bezier(.16, 1, .3, 1) !important;
}

#osk-btn-reset-pos:hover,
.osk-header-controls .osk-icon-only-btn:hover {
  background: var(--brand-bg, #eef0ff) !important;
  color: var(--brand, #5b6cf5) !important;
  transform: scale(1.1) !important;
}

#osk-btn-reset-pos:active {
  transform: scale(0.94) !important;
}

#osk-btn-switch-lang {
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 9999px !important;
  border: none !important;
}

/* 4. Reversed & compact .playlist-entry-row (title right-aligned, action buttons on the left, no active side border) */
.playlist-list-container {
  gap: 4px !important;
}

.playlist-entry-row {
  direction: rtl !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  padding: 6px 10px !important;
  border-radius: 11px !important;
  border: none !important;
  background: var(--surface-2, #f7f8fc) !important;
  transition: background 0.18s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.playlist-entry-row:hover {
  background: var(--surface-3, #eceef7) !important;
}

.playlist-entry-row.active {
  background: var(--brand-bg, #eef0ff) !important;
  border: none !important;
  box-shadow: none !important;
}

.playlist-entry-row .playlist-row-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: right !important;
  gap: 5px !important;
}

.playlist-entry-row .playlist-name-text {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-align: right !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playlist-entry-row .playlist-row-actions {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  margin-right: auto !important;
}

.playlist-entry-row .pl-icon-btn {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 7px !important;
  background: var(--surface, #ffffff) !important;
  color: var(--text-2, #4b5068) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), background 0.15s ease, color 0.15s ease !important;
}

.playlist-entry-row .pl-icon-btn i {
  font-size: 0.7rem !important;
}

.playlist-entry-row .pl-icon-btn:hover {
  transform: translateY(-1px) scale(1.06);
}

.playlist-entry-row .pl-icon-btn.btn-rename-pl:hover {
  color: var(--brand, #5b6cf5) !important;
  background: var(--brand-bg, #eef0ff) !important;
}

.playlist-rename-inline-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
}

.playlist-rename-input {
  flex: 1;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1.5px solid var(--brand, #5b6cf5);
  background: var(--surface, #ffffff);
  color: var(--text, #1a1d2e);
  font-family: 'Cairo', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-glow, rgba(91, 108, 245, 0.16));
}

.playlist-rename-save-btn {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border: none;
  border-radius: 8px;
  background: var(--success, #10b981);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.74rem;
  flex-shrink: 0;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.playlist-rename-save-btn:hover {
  transform: scale(1.08);
}

/* 5. Cast popover: Open presentation redirect icon, clean refresh icon, hotspot inline loader & Clean View mini screen graphic */
.cast-refresh-icon-btn {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-3, #8b90a8) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: color 0.18s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cast-refresh-icon-btn:hover {
  color: var(--brand, #5b6cf5) !important;
  background: transparent !important;
  transform: rotate(90deg) scale(1.08);
}

.cast-refresh-icon-btn:active {
  transform: rotate(180deg) scale(0.95);
}

.hotspot-inline-loader {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand, #5b6cf5);
  font-size: 0.82rem;
  margin-right: 4px;
}

.hotspot-inline-loader.hidden {
  display: none !important;
}

.cast-open-url-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  border: none !important;
  background: var(--brand-bg, #eef0ff) !important;
  color: var(--brand, #5b6cf5) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.15s ease, color 0.15s ease !important;
}

.cast-open-url-btn:hover {
  background: var(--brand, #5b6cf5) !important;
  color: #ffffff !important;
  transform: translateY(-1px) scale(1.05);
}

.cast-open-url-btn:active {
  transform: scale(0.94);
}

.clean-view-label-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.clean-view-screen-preview {
  width: 30px;
  height: 19px;
  min-width: 30px;
  border-radius: 5px;
  background: rgb(243 244 248) !important;
  border: 1px solid rgba(148, 163, 184, 0.36) !important;
  box-shadow: none !important;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.clean-view-screen-preview .cv-screen-lines {
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: #64748b !important;
  margin-bottom: 3px;
  box-shadow: none !important;
}

.clean-view-screen-preview .cv-screen-bar {
  position: absolute;
  bottom: 2px;
  left: 3px;
  right: 3px;
  height: 3.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: none !important;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.clean-view-screen-preview .cv-dot {
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: #f87171;
  box-shadow: none !important;
}

.clean-view-screen-preview .cv-pill {
  width: 10px;
  height: 2.5px;
  border-radius: 2px;
  background: #60a5fa;
  box-shadow: none !important;
}

[data-theme="dark"] .clean-view-screen-preview {
  background: rgba(148, 163, 184, 0.18) !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .clean-view-screen-preview .cv-screen-lines {
  background: #94a3b8 !important;
  box-shadow: none !important;
}

.clean-view-toggle-row:has(#btn-toggle-hide-controls:checked) .clean-view-screen-preview .cv-screen-bar {
  opacity: 0.18;
  transform: translateY(2px);
}

/* 6. Locked screen viewport, active search downward slide with 2-row organic/recent suggestions, squished bottom panels & smooth popover/modal animations */
@keyframes uiSoftIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes modalExpandTopToBottom {
  0% {
    opacity: 0;
    transform: translateY(-6px) scaleY(0.86);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0);
  }

  55% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    box-shadow: 0 22px 50px -10px rgba(15, 23, 42, 0.24);
  }
}

@keyframes popoverCollapseClose {
  0% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    box-shadow: 0 22px 50px -10px rgba(15, 23, 42, 0.22);
  }

  100% {
    opacity: 0;
    transform: translateY(-6px) scaleY(0.88);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0);
  }
}

@keyframes modalSmoothOpen {
  0% {
    opacity: 0;
    transform: scale(0.96) translateY(10px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes modalSmoothClose {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  100% {
    opacity: 0;
    transform: scale(0.96) translateY(10px);
  }
}

@keyframes overlayFadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes modalElementFastIn {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Always lock screen size to exact viewport (desktop & mobile) */
html,
body {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.app-container {
  width: 100% !important;
  max-width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.top-nav {
  padding-top: 0.85rem !important;
  padding-bottom: 0.35rem !important;
  flex-shrink: 0 !important;
}

/* Center songs-count-subtext vertically & horizontally in the bottom app bar */
.app-bottom-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 5px 12px !important;
  margin: 0 !important;
  min-height: 26px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.app-bottom-bar .songs-count-subtext {
  font-size: 0.65rem !important;
  padding: 1px 9px !important;
  line-height: 1.3 !important;
  margin: 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.app-bottom-bar .credits-info-btn {
  font-size: 0.78rem !important;
  padding: 2px 4px !important;
}

/* Search Hero & Active Search Motion: search bar smoothly slides down to open 2-row suggestion space */
.search-hero {
  flex-shrink: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  padding: 0.15rem 1.25rem 0.45rem !important;
  box-sizing: border-box !important;
  transition: padding 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.centered-search-box {
  margin: 0.15rem auto !important;
  transition: margin 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.search-hero>#search-suggestions-chips:not(.hidden):not(:empty)+.centered-search-box,
.app-container.is-search-active .search-hero>#search-suggestions-chips:not(.hidden):not(:empty)+.centered-search-box {
  margin-top: 0 !important;
}

.centered-search-box .search-icon {
  right: 1.15rem !important;
}

.centered-search-box input {
  position: relative !important;
  z-index: 5 !important;
  border: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
  border-radius: 28px !important;
  box-sizing: border-box !important;
  height: 54px !important;
  min-height: 54px !important;
  padding-right: 3.35rem !important;
  padding-left: 7.45rem !important;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
  transition:
    height 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    min-height 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    padding 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    border-radius 0.18s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.2s ease !important;
}

.centered-search-box:has(#clear-search-btn.hidden) input {
  padding-left: 5.75rem !important;
}

.search-ghost-overlay {
  height: 54px;
  padding-right: 3.35rem !important;
  padding-left: 9.6rem !important;
}

.search-ghost-overlay:has(.ghost-tab-pill[style*="display: none"]) {
  padding-left: 7.2rem !important;
}

/* Active Search Bar (Borderless Clean Elevation) */
.centered-search-box:has(#intelligent-search:focus) input,
.centered-search-box input:focus,
.centered-search-box input:active,
.centered-search-box input:focus-visible,
.app-container.is-search-active .centered-search-box input,
.centered-search-box:has(#search-results-dropdown:not(.hidden):not(.is-closing)) input {
  height: 58px !important;
  min-height: 58px !important;
  border-radius: 26px !important;
  border: none !important;
  outline: none !important;
  box-shadow: 0 10px 26px -4px rgba(91, 108, 245, 0.14) !important;
}

/* In Virtual Keyboard mode (.is-osk-mode-on), keep the search bar in normal height & normal position */
.app-container.is-osk-mode-on .centered-search-box input,
.app-container.is-osk-mode-on .centered-search-box:has(#intelligent-search:focus) input,
.app-container.is-osk-mode-on .centered-search-box input:focus,
.app-container.is-osk-mode-on .centered-search-box input:active {
  height: 54px !important;
  min-height: 54px !important;
  border-radius: 26px !important;
  border: none !important;
  outline: none !important;
}

.app-container.is-osk-mode-on .search-hero>#search-suggestions-chips {
  display: none !important;
}

/* When #search-results-dropdown is open below the search bar: fuse bottom edge of input to top of dropdown */
.centered-search-box:has(#search-results-dropdown:not(.hidden):not(.is-closing)) input,
.centered-search-box.has-open-dropdown input,
.app-container.is-osk-mode-on .centered-search-box:has(#search-results-dropdown:not(.hidden):not(.is-closing)) input,
.app-container.is-osk-mode-on .centered-search-box.has-open-dropdown input {
  border-top-left-radius: 26px !important;
  border-top-right-radius: 26px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--border-solid, #e4e6f0) !important;
}

/* ============================================================================
   DEFAULT FLOATING PILL-CHIPS SUGGESTION STYLE (PREVIOUS LOOK WITH NEW UPDATES)
   ============================================================================ */
.search-hero>#search-suggestions-chips,
.search-hero>#search-suggestions-chips.hidden,
.search-hero>#search-suggestions-chips:empty,
.app-container.is-search-active .search-hero>#search-suggestions-chips.hidden,
.app-container.is-search-active .search-hero>#search-suggestions-chips:empty {
  position: relative !important;
  z-index: 4 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: min(720px, calc(100vw - 20px)) !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
  gap: 8px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  transition:
    height 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    min-height 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    max-height 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.24s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.search-hero>#search-suggestions-chips::after {
  display: none !important;
}

.app-container.is-search-active .search-hero>#search-suggestions-chips:not(.hidden):not(:empty),
.app-container.is-search-active.is-search-recents .search-hero>#search-suggestions-chips:not(.hidden):not(:empty) {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 1px auto 5px auto !important;
  padding: 2px 6px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow: hidden !important;
  background: transparent !important;
  border: none !important;
}

.search-hero>#search-suggestions-chips .suggestion-chip {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: calc(50% - 10px) !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  margin: 0 !important;
  padding: 0 14px 1px 14px !important;
  background: rgba(148, 163, 184, 0.1) !important;
  color: rgba(71, 85, 105, 0.72) !important;
  border: none !important;
  border-radius: 9999px !important;
  box-shadow: none !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 0.84rem !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  position: relative !important;
  box-sizing: border-box !important;
  transform: none !important;
  animation: none !important;
  transition: background-color 0.16s cubic-bezier(0.16, 1, 0.3, 1), color 0.16s cubic-bezier(0.16, 1, 0.3, 1), transform 0.14s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.search-hero>#search-suggestions-chips .suggestion-chip:not(:last-child)::after {
  display: none !important;
}

.search-hero>#search-suggestions-chips .suggestion-chip span:not(.recent-chip-remove-btn) {
  display: inline-block !important;
  line-height: 1.45 !important;
  padding-bottom: 1px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Top middle result (.is-primary-suggestion) has the accent color with no border */
.search-hero>#search-suggestions-chips .suggestion-chip.is-primary-suggestion {
  background: rgba(37, 99, 235, 0.11) !important;
  color: var(--accent-blue, #2563eb) !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
}

.search-hero>#search-suggestions-chips .suggestion-chip.is-primary-suggestion span {
  font-weight: 800 !important;
}

.search-hero>#search-suggestions-chips .suggestion-chip:hover,
.search-hero>#search-suggestions-chips .suggestion-chip.is-primary-suggestion:hover {
  background: rgba(37, 99, 235, 0.16) !important;
  color: var(--accent-blue, #2563eb) !important;
  border: none !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

.search-hero>#search-suggestions-chips .suggestion-chip:active {
  transform: scale(0.96) !important;
}

/* Clean faded simple look for ordered recent search chips (only clicked Tarnima searches) */
.search-hero>#search-suggestions-chips .suggestion-chip.recent-search-chip {
  background: rgba(148, 163, 184, 0.1) !important;
  color: rgba(71, 85, 105, 0.72) !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  font-size: 0.83rem !important;
  gap: 5px !important;
  transform: none !important;
}

.search-hero>#search-suggestions-chips .suggestion-chip.recent-search-chip .recent-chip-icon {
  font-size: 0.65rem !important;
  opacity: 0.62 !important;
  color: inherit !important;
  flex-shrink: 0 !important;
}

.search-hero>#search-suggestions-chips .suggestion-chip.recent-search-chip:hover {
  background: rgba(91, 108, 245, 0.12) !important;
  color: var(--brand, #5b6cf5) !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

[data-theme="dark"] .search-hero>#search-suggestions-chips .suggestion-chip {
  background: rgba(148, 163, 184, 0.1) !important;
  color: rgba(203, 213, 225, 0.68) !important;
}

[data-theme="dark"] .search-hero>#search-suggestions-chips .suggestion-chip.is-primary-suggestion {
  background: rgba(91, 108, 245, 0.2) !important;
  color: var(--brand-light, #a5b0ff) !important;
}

[data-theme="dark"] .search-hero>#search-suggestions-chips .suggestion-chip.recent-search-chip {
  background: rgba(148, 163, 184, 0.1) !important;
  color: rgba(203, 213, 225, 0.68) !important;
}

#search-suggestions-chips::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

#virtual-keyboard-window #search-suggestions-chips::after {
  display: none !important;
}

/* ============================================================================
   PRESERVED COMBINED SEARCH + SUGGESTIONS BAR STYLE (OPT-IN VIA .use-combined-search-suggestions)
   ============================================================================ */
.app-container.use-combined-search-suggestions .search-hero>#search-suggestions-chips:not(.hidden):not(:empty)+.centered-search-box input,
.app-container.use-combined-search-suggestions.is-search-active .search-hero>#search-suggestions-chips:not(.hidden):not(:empty)+.centered-search-box input {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 26px !important;
  border-bottom-right-radius: 26px !important;
  border-top-color: transparent !important;
}

.app-container.use-combined-search-suggestions .search-hero>#search-suggestions-chips:not(.hidden):not(:empty)+.centered-search-box:has(#search-results-dropdown:not(.hidden):not(.is-closing)) input,
.app-container.use-combined-search-suggestions .search-hero>#search-suggestions-chips:not(.hidden):not(:empty)+.centered-search-box.has-open-dropdown input {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-top-color: transparent !important;
  border-bottom: 1px solid var(--border-solid, #e4e6f0) !important;
}

.app-container.use-combined-search-suggestions .search-hero>#search-suggestions-chips,
.app-container.use-combined-search-suggestions .search-hero>#search-suggestions-chips.hidden,
.app-container.use-combined-search-suggestions .search-hero>#search-suggestions-chips:empty,
.app-container.use-combined-search-suggestions.is-search-active .search-hero>#search-suggestions-chips.hidden,
.app-container.use-combined-search-suggestions.is-search-active .search-hero>#search-suggestions-chips:empty {
  position: relative !important;
  z-index: 4 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: stretch !important;
  width: 100% !important;
  max-width: 720px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  margin-top: 0 !important;
  margin-bottom: -44px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 4px 44px 4px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
  gap: 3px !important;
  background: #ffffff !important;
  border-radius: 26px !important;
  border-top: 2px solid transparent !important;
  border-left: 2px solid transparent !important;
  border-right: 2px solid transparent !important;
  border-bottom: none !important;
  transition:
    height 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    min-height 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    max-height 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    margin-top 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    margin-bottom 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    padding-bottom 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.app-container.use-combined-search-suggestions .search-hero>#search-suggestions-chips::after {
  content: '';
  display: block !important;
  position: absolute;
  bottom: 26px;
  left: 16px;
  right: 16px;
  height: 1px;
  background: var(--border-solid, #e4e6f0);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    left 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    right 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] .app-container.use-combined-search-suggestions .search-hero>#search-suggestions-chips::after {
  background: #2a2d42;
}

[data-theme="dark"] .app-container.use-combined-search-suggestions .search-hero>#search-suggestions-chips {
  background: var(--surface, #181b26) !important;
}

.app-container.use-combined-search-suggestions .search-hero>#search-suggestions-chips:not(.hidden):not(:empty),
.app-container.use-combined-search-suggestions.is-search-active .search-hero>#search-suggestions-chips:not(.hidden):not(:empty),
.app-container.use-combined-search-suggestions.is-search-active.is-search-recents .search-hero>#search-suggestions-chips:not(.hidden):not(:empty) {
  height: 62px !important;
  min-height: 62px !important;
  max-height: 62px !important;
  margin-top: 0 !important;
  margin-bottom: -26px !important;
  padding: 3px 4px 26px 4px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow: hidden !important;
  border-radius: 26px !important;
  border-top: 2px solid rgba(91, 108, 245, 0.22) !important;
  border-left: 2px solid rgba(91, 108, 245, 0.22) !important;
  border-right: 2px solid rgba(91, 108, 245, 0.22) !important;
  border-bottom: none !important;
}

.app-container.use-combined-search-suggestions .search-hero>#search-suggestions-chips:not(.hidden):not(:empty)::after,
.app-container.use-combined-search-suggestions.is-search-active .search-hero>#search-suggestions-chips:not(.hidden):not(:empty)::after {
  opacity: 0.85;
  left: 0;
  right: 0;
}

.app-container.use-combined-search-suggestions .search-hero>#search-suggestions-chips .suggestion-chip {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  margin: 0 !important;
  padding: 0 10px 2px 10px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 13px !important;
  box-shadow: none !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 0.8rem !important;
  line-height: 1.5 !important;
  font-weight: 700 !important;
  color: var(--text, #1a1d2e) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  position: relative !important;
  box-sizing: border-box !important;
  transform: none !important;
  animation: none !important;
  transition: background-color 0.16s cubic-bezier(0.16, 1, 0.3, 1), color 0.16s cubic-bezier(0.16, 1, 0.3, 1), transform 0.12s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.app-container.use-combined-search-suggestions .search-hero>#search-suggestions-chips .suggestion-chip:first-child {
  border-top-right-radius: 21px !important;
  border-bottom-right-radius: 13px !important;
  border-top-left-radius: 11px !important;
  border-bottom-left-radius: 11px !important;
}

.app-container.use-combined-search-suggestions .search-hero>#search-suggestions-chips .suggestion-chip:last-child {
  border-top-left-radius: 21px !important;
  border-bottom-left-radius: 13px !important;
  border-top-right-radius: 11px !important;
  border-bottom-right-radius: 11px !important;
}

.app-container.use-combined-search-suggestions .search-hero>#search-suggestions-chips .suggestion-chip:only-child {
  border-radius: 21px 21px 13px 13px !important;
}

.app-container.use-combined-search-suggestions .search-hero>#search-suggestions-chips .suggestion-chip:not(:last-child)::after {
  content: '';
  display: block !important;
  position: absolute;
  left: -2px;
  top: 22%;
  height: 56%;
  width: 1px;
  background: var(--border-solid, #cbd5e1);
  opacity: 0.8;
  pointer-events: none;
}

.app-container.use-combined-search-suggestions .search-hero>#search-suggestions-chips .suggestion-chip:hover {
  background: var(--surface-3, #eceef7) !important;
  color: var(--brand, #5b6cf5) !important;
  transform: none !important;
  box-shadow: none !important;
}

.app-container.use-combined-search-suggestions .search-hero>#search-suggestions-chips .suggestion-chip.is-primary-suggestion,
.app-container.use-combined-search-suggestions .search-hero>#search-suggestions-chips .suggestion-chip.recent-search-chip.is-primary-suggestion {
  background: transparent !important;
  color: var(--brand, #5b6cf5) !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 900 !important;
  font-size: 0.85rem !important;
}

.app-container.use-combined-search-suggestions .search-hero>#search-suggestions-chips .suggestion-chip.recent-search-chip {
  background: transparent !important;
  color: var(--text, #1a1d2e) !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  gap: 5px !important;
  transform: none !important;
}

/* Bottom 2 panels locked & squished slightly ONLY when search bar is active */
.dashboard-halves {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
  transform-origin: bottom center !important;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), padding 0.42s cubic-bezier(0.22, 1, 0.36, 1), gap 0.42s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.app-container.is-search-active .dashboard-halves {
  transform: scaleY(0.974) scaleX(0.992) !important;
}

.app-container.is-search-active.is-search-recents .dashboard-halves {
  transform: scaleY(0.985) scaleX(0.996) !important;
}

/* Search results & Bible popover fitted to exact current screen height (borderless clean shadow) */
#search-results-dropdown:not(.hidden) {
  height: var(--search-fitted-max-h, calc(100dvh - 155px)) !important;
  max-height: var(--search-fitted-max-h, calc(100dvh - 155px)) !important;
  border: none !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 26px !important;
  border-bottom-right-radius: 26px !important;
  box-sizing: border-box !important;
  box-shadow: 0 18px 42px -8px rgba(15, 23, 42, 0.22) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  transform-origin: top center !important;
}

#search-results-dropdown:not(.hidden):not(.is-closing) {
  animation: modalExpandTopToBottom 0.18s cubic-bezier(0.16, 1, 0.3, 1) backwards !important;
}

#popover-bible:not(.hidden) {
  max-height: var(--search-fitted-max-h, calc(100dvh - 155px)) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transform-origin: top center !important;
}

#popover-bible:not(.hidden):not(.is-closing) {
  animation: modalExpandTopToBottom 0.2s cubic-bezier(0.16, 1, 0.3, 1) backwards !important;
}

#popover-bible .bible-step-view:not(.hidden) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#popover-bible #bible-books-grid,
#popover-bible #bible-chapters-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
}

/* Change التنسيق (#popover-style) right animation -> Top-to-Bottom Expand with zero overflow issues */
#popover-style.hidden {
  display: none !important;
  transform: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#popover-style:not(.hidden) {
  position: fixed !important;
  top: 56px !important;
  right: 1.25rem !important;
  left: auto !important;
  bottom: auto !important;
  width: 420px !important;
  min-width: 0 !important;
  max-width: calc(100vw - 1.5rem) !important;
  height: auto !important;
  max-height: calc(100dvh - 70px) !important;
  border-radius: 18px !important;
  border: 1px solid var(--border-solid, #e4e6f0) !important;
  box-shadow: 0 22px 50px -10px rgba(15, 23, 42, 0.26) !important;
  padding: 0.9rem 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  transform: none !important;
  transform-origin: top center !important;
  transition: none !important;
}

#popover-style:not(.hidden):not(.is-closing) {
  animation: modalExpandTopToBottom 0.2s cubic-bezier(0.16, 1, 0.3, 1) backwards !important;
}

#popover-style .style-drawer-header,
#popover-style .style-nav-tabs {
  flex-shrink: 0 !important;
}

#popover-style .drawer-header-title {
  display: none !important;
}

#popover-style .templates-header-dropdown-wrap {
  flex: 1 !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 36px !important;
  padding: 3px 4px !important;
  margin-inline: 4px !important;
  border-radius: 11px !important;
}

#popover-style .tmpl-cycle-btn,
#popover-style .tmpl-dropdown-trigger-btn {
  height: 30px !important;
}

#popover-style .style-drawer-scroll-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Remove background, shadows & stroke from #btn-split-all-lines and .presentation-modes-group, with circular hover like #franco-toggle-btn */
#btn-split-all-lines {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 50% !important;
  color: #64748b !important;
  transition: color 0.18s ease, background-color 0.18s ease !important;
}

#btn-split-all-lines:hover {
  background: rgba(148, 163, 184, 0.18) !important;
  color: #334155 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 50% !important;
  transform: none !important;
}

#btn-split-all-lines.active {
  background: transparent !important;
  color: #2563eb !important;
  border: none !important;
  box-shadow: none !important;
}

#btn-split-all-lines.active:hover {
  background: rgba(148, 163, 184, 0.18) !important;
  color: #2563eb !important;
}

.presentation-modes-group {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 2px !important;
}

.mode-group-btn {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 50% !important;
  color: #64748b !important;
  transition: color 0.18s ease, background-color 0.18s ease !important;
}

.mode-group-btn:hover {
  background: rgba(148, 163, 184, 0.18) !important;
  color: #334155 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 50% !important;
  transform: none !important;
}

#btn-toggle-standby.active-mode,
#btn-toggle-standby.active {
  background: rgba(37, 99, 235, 0.14) !important;
  color: #2563eb !important;
  box-shadow: none !important;
  border-radius: 50% !important;
}

#btn-toggle-standby.active-mode i,
#btn-toggle-standby.active i {
  color: #2563eb !important;
}

#btn-toggle-blank.active,
#btn-toggle-blank.active-mode {
  background: rgba(239, 68, 68, 0.14) !important;
  color: #dc2626 !important;
  box-shadow: none !important;
  border-radius: 50% !important;
}

#btn-toggle-blank.active i,
#btn-toggle-blank.active-mode i {
  color: #dc2626 !important;
}

#btn-toggle-highlight-tool.active,
#btn-toggle-highlight-tool.active-mode {
  background: rgba(245, 158, 11, 0.16) !important;
  color: #d97706 !important;
  box-shadow: none !important;
  border-radius: 50% !important;
}

#btn-toggle-highlight-tool.active i,
#btn-toggle-highlight-tool.active-mode i {
  color: #d97706 !important;
}

/* Mark #btn-playlist-selector as active when #popover-playlist is open */
#btn-playlist-selector.active,
.dropdown-wrapper:has(#popover-playlist:not(.hidden):not(.is-closing)) #btn-playlist-selector {
  background: var(--brand-bg, #eef0ff) !important;
  color: var(--brand, #5b6cf5) !important;
  border-color: rgba(91, 108, 245, 0.25) !important;
}

#btn-playlist-selector.active i,
.dropdown-wrapper:has(#popover-playlist:not(.hidden):not(.is-closing)) #btn-playlist-selector i {
  color: var(--brand, #5b6cf5) !important;
}

#btn-playlist-selector.active .fa-chevron-down,
.dropdown-wrapper:has(#popover-playlist:not(.hidden):not(.is-closing)) #btn-playlist-selector .fa-chevron-down {
  transform: rotate(180deg);
}

/* Top-to-Bottom Height Expansion strictly for Popovers (NOT fullscreen or bottom/centered modals) */
.dropdown-popover:not(.hidden) {
  max-height: min(78dvh, calc(100dvh - 70px)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  transform-origin: top center !important;
}

.dropdown-popover:not(.hidden):not(.is-closing) {
  animation: modalExpandTopToBottom 0.2s cubic-bezier(0.16, 1, 0.3, 1) backwards !important;
}

/* Modals keep smooth centered/sheet entrance and safe flex scrolling without top-to-bottom popover expansion */
.modal-overlay:not(.hidden) .modal-card,
.ple-modal-overlay:not(.closing) .ple-modal {
  max-height: min(88dvh, calc(100dvh - 24px)) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  animation: modalSmoothOpen 0.22s cubic-bezier(0.16, 1, 0.3, 1) backwards !important;
}

.modal-card>.modal-header,
.modal-card>.welcome-startup-header,
.modal-card>.shortcuts-sheet-header,
.modal-card>.gemini-intro-banner-header,
.modal-card>.song-editor-header {
  flex-shrink: 0 !important;
}

.modal-card>.modal-body,
.modal-card>.welcome-startup-body,
.modal-card>.shortcuts-sheet-body,
.modal-card>.song-editor-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Smooth Close Animations for all Popovers & Modals (.is-closing) */
.dropdown-popover.is-closing,
.dropdown-popover.is-closing:not(.hidden),
#popover-style.is-closing,
#popover-style.is-closing:not(.hidden),
#popover-bible.is-closing,
#popover-bible.is-closing:not(.hidden),
#search-results-dropdown.is-closing,
#search-results-dropdown.is-closing:not(.hidden) {
  pointer-events: none !important;
  transform-origin: top center !important;
  animation: popoverCollapseClose 0.16s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

.modal-overlay.is-closing {
  pointer-events: none !important;
  animation: overlayFadeOut 0.16s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

.modal-overlay.is-closing .modal-card {
  animation: modalSmoothClose 0.16s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

/* Fast Element-by-Element Staggered Content Fade Strictly Inside Popovers */
#popover-style:not(.hidden):not(.is-closing)>*,
#popover-style:not(.hidden):not(.is-closing) .style-tab-content:not(.hidden)>*,
.dropdown-popover:not(.hidden):not(.is-closing)>*,
#popover-playlist:not(.hidden):not(.is-closing) .playlists-list-container>.playlist-entry-row,
#popover-bible:not(.hidden):not(.is-closing)>*,
#popover-bible:not(.hidden):not(.is-closing) .bible-step-view:not(.hidden)>* {
  animation: modalElementFastIn 0.15s cubic-bezier(0.16, 1, 0.3, 1) backwards !important;
}

/* Search results items: completely instant and flicker-free on every keystroke */
#search-results-dropdown .search-item,
.search-item {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

#popover-style:not(.hidden):not(.is-closing)>*:nth-child(1),
#popover-style:not(.hidden):not(.is-closing) .style-tab-content:not(.hidden)>*:nth-child(1),
.dropdown-popover:not(.hidden):not(.is-closing)>*:nth-child(1),
#popover-playlist:not(.hidden):not(.is-closing) .playlists-list-container>.playlist-entry-row:nth-child(1),
#popover-bible:not(.hidden):not(.is-closing)>*:nth-child(1),
#popover-bible:not(.hidden):not(.is-closing) .bible-step-view:not(.hidden)>*:nth-child(1) {
  animation-delay: 0.015s !important;
}

#popover-style:not(.hidden):not(.is-closing)>*:nth-child(2),
#popover-style:not(.hidden):not(.is-closing) .style-tab-content:not(.hidden)>*:nth-child(2),
.dropdown-popover:not(.hidden):not(.is-closing)>*:nth-child(2),
#popover-playlist:not(.hidden):not(.is-closing) .playlists-list-container>.playlist-entry-row:nth-child(2),
#popover-bible:not(.hidden):not(.is-closing)>*:nth-child(2),
#popover-bible:not(.hidden):not(.is-closing) .bible-step-view:not(.hidden)>*:nth-child(2) {
  animation-delay: 0.032s !important;
}

#popover-style:not(.hidden):not(.is-closing)>*:nth-child(3),
#popover-style:not(.hidden):not(.is-closing) .style-tab-content:not(.hidden)>*:nth-child(3),
.dropdown-popover:not(.hidden):not(.is-closing)>*:nth-child(3),
#popover-playlist:not(.hidden):not(.is-closing) .playlists-list-container>.playlist-entry-row:nth-child(3),
#popover-bible:not(.hidden):not(.is-closing)>*:nth-child(3),
#popover-bible:not(.hidden):not(.is-closing) .bible-step-view:not(.hidden)>*:nth-child(3) {
  animation-delay: 0.049s !important;
}

#popover-style:not(.hidden):not(.is-closing)>*:nth-child(4),
#popover-style:not(.hidden):not(.is-closing) .style-tab-content:not(.hidden)>*:nth-child(4),
.dropdown-popover:not(.hidden):not(.is-closing)>*:nth-child(4),
#popover-playlist:not(.hidden):not(.is-closing) .playlists-list-container>.playlist-entry-row:nth-child(4) {
  animation-delay: 0.066s !important;
}

#popover-style:not(.hidden):not(.is-closing) .style-tab-content:not(.hidden)>*:nth-child(5),
.dropdown-popover:not(.hidden):not(.is-closing)>*:nth-child(5),
#popover-playlist:not(.hidden):not(.is-closing) .playlists-list-container>.playlist-entry-row:nth-child(5) {
  animation-delay: 0.083s !important;
}

#popover-style:not(.hidden):not(.is-closing) .style-tab-content:not(.hidden)>*:nth-child(n+6),
.dropdown-popover:not(.hidden):not(.is-closing)>*:nth-child(n+6),
#popover-playlist:not(.hidden):not(.is-closing) .playlists-list-container>.playlist-entry-row:nth-child(n+6) {
  animation-delay: 0.1s !important;
}

/* Modern Dropdown-Popover Style for #modal-screen-choice */
#modal-screen-choice .screen-choice-popover-card {
  width: 346px !important;
  max-width: calc(100vw - 24px) !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  border-radius: 20px !important;
  border: 1px solid var(--border, rgba(91, 108, 245, 0.12)) !important;
  background: var(--surface, #ffffff) !important;
  box-shadow: var(--shadow-xl, 0 28px 56px -12px rgba(15, 23, 42, 0.22)) !important;
  font-family: 'Cairo', sans-serif !important;
  overflow: hidden !important;
  animation: fadeScaleIn 0.22s var(--spring, cubic-bezier(0.16, 1, 0.3, 1)) !important;
}

#modal-screen-choice .screen-choice-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 2px 2px 4px 2px !important;
  background: transparent !important;
  border: none !important;
}

#modal-screen-choice .screen-choice-header-main {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

#modal-screen-choice .screen-choice-icon-badge {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 11px !important;
  background: var(--brand-bg, #eef0ff) !important;
  color: var(--brand, #5b6cf5) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem !important;
  flex-shrink: 0 !important;
}

#modal-screen-choice .screen-choice-header-texts {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  min-width: 0 !important;
}

#modal-screen-choice .screen-choice-title {
  margin: 0 !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  color: var(--text, #1a1d2e) !important;
  line-height: 1.3 !important;
}

#modal-screen-choice .screen-choice-subtitle {
  margin: 0 !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: var(--text-3, #8b90a8) !important;
  line-height: 1.35 !important;
}

#modal-screen-choice .screen-choice-close-btn {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 50% !important;
  background: var(--surface-2, #f7f8fc) !important;
  color: var(--text-2, #4b5068) !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease !important;
}

#modal-screen-choice .screen-choice-close-btn:hover {
  background: var(--brand-bg, #eef0ff) !important;
  color: var(--brand, #5b6cf5) !important;
  transform: scale(1.08) !important;
}

#modal-screen-choice .screen-choice-group {
  background: var(--surface-2, #f7f8fc) !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

#modal-screen-choice .screen-choice-option-btn {
  width: 100% !important;
  padding: 9px 11px !important;
  border-radius: 11px !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  font-family: 'Cairo', sans-serif !important;
  cursor: pointer !important;
  transition: background-color 0.16s ease, transform 0.15s ease, box-shadow 0.16s ease !important;
}

#modal-screen-choice .screen-choice-option-main {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

#modal-screen-choice .screen-choice-option-icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.8rem !important;
  flex-shrink: 0 !important;
  transition: background-color 0.16s ease, color 0.16s ease !important;
}

#modal-screen-choice .screen-choice-option-label {
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: right !important;
}

#modal-screen-choice .screen-choice-option-arrow {
  font-size: 0.74rem !important;
  flex-shrink: 0 !important;
  opacity: 0.8 !important;
  transition: transform 0.16s ease, opacity 0.16s ease !important;
}

/* First Choice: External Screen (Accent Color) */
#modal-screen-choice .screen-choice-option-btn.is-accent {
  background: linear-gradient(135deg, var(--brand, #5b6cf5), var(--brand-dark, #4354e8)) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 6px 16px rgba(91, 108, 245, 0.22) !important;
}

#modal-screen-choice .screen-choice-option-btn.is-accent .screen-choice-option-icon {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

#modal-screen-choice .screen-choice-option-btn.is-accent .screen-choice-option-label,
#modal-screen-choice .screen-choice-option-btn.is-accent .screen-choice-option-arrow {
  color: #ffffff !important;
}

#modal-screen-choice .screen-choice-option-btn.is-accent:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.26) inset, 0 10px 22px rgba(91, 108, 245, 0.3) !important;
}

/* Second Choice: This Screen (Secondary Popover Card) */
#modal-screen-choice .screen-choice-option-btn.is-secondary {
  background: var(--surface, #ffffff) !important;
  color: var(--text, #1a1d2e) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

#modal-screen-choice .screen-choice-option-btn.is-secondary .screen-choice-option-icon {
  background: var(--brand-bg, #eef0ff) !important;
  color: var(--brand, #5b6cf5) !important;
}

#modal-screen-choice .screen-choice-option-btn.is-secondary .screen-choice-option-label {
  color: var(--text, #1a1d2e) !important;
}

#modal-screen-choice .screen-choice-option-btn.is-secondary .screen-choice-option-arrow {
  color: var(--text-3, #8b90a8) !important;
}

#modal-screen-choice .screen-choice-option-btn.is-secondary:hover {
  background: var(--brand-bg, #eef0ff) !important;
  color: var(--brand, #5b6cf5) !important;
}

#modal-screen-choice .screen-choice-option-btn.is-secondary:hover .screen-choice-option-icon {
  background: var(--brand, #5b6cf5) !important;
  color: #ffffff !important;
}

#modal-screen-choice .screen-choice-option-btn.is-secondary:hover .screen-choice-option-label,
#modal-screen-choice .screen-choice-option-btn.is-secondary:hover .screen-choice-option-arrow {
  color: var(--brand, #5b6cf5) !important;
}

/* Dark Mode for #modal-screen-choice */
[data-theme="dark"] #modal-screen-choice .screen-choice-popover-card {
  background: var(--surface, #181b26) !important;
  border-color: var(--border, rgba(91, 108, 245, 0.18)) !important;
}

[data-theme="dark"] #modal-screen-choice .screen-choice-icon-badge {
  background: rgba(91, 108, 245, 0.16) !important;
  color: var(--brand-light, #a5b0ff) !important;
}

[data-theme="dark"] #modal-screen-choice .screen-choice-title {
  color: var(--text, #e8eaf6) !important;
}

[data-theme="dark"] #modal-screen-choice .screen-choice-subtitle {
  color: var(--text-2, #9299be) !important;
}

[data-theme="dark"] #modal-screen-choice .screen-choice-close-btn {
  background: var(--surface-3, #252840) !important;
  color: var(--text-2, #9299be) !important;
}

[data-theme="dark"] #modal-screen-choice .screen-choice-close-btn:hover {
  background: rgba(91, 108, 245, 0.18) !important;
  color: var(--brand-light, #a5b0ff) !important;
}

[data-theme="dark"] #modal-screen-choice .screen-choice-group {
  background: var(--surface-2, #1e2132) !important;
}

[data-theme="dark"] #modal-screen-choice .screen-choice-option-btn.is-secondary {
  background: var(--surface-3, #252840) !important;
  color: var(--text, #e8eaf6) !important;
}

[data-theme="dark"] #modal-screen-choice .screen-choice-option-btn.is-secondary .screen-choice-option-icon {
  background: rgba(91, 108, 245, 0.16) !important;
  color: var(--brand-light, #a5b0ff) !important;
}

[data-theme="dark"] #modal-screen-choice .screen-choice-option-btn.is-secondary .screen-choice-option-label {
  color: var(--text, #e8eaf6) !important;
}

[data-theme="dark"] #modal-screen-choice .screen-choice-option-btn.is-secondary:hover {
  background: rgba(91, 108, 245, 0.2) !important;
}

[data-theme="dark"] #modal-screen-choice .screen-choice-option-btn.is-secondary:hover .screen-choice-option-label,
[data-theme="dark"] #modal-screen-choice .screen-choice-option-btn.is-secondary:hover .screen-choice-option-arrow {
  color: var(--brand-light, #a5b0ff) !important;
}

/* Bible book cards: shortcut abbr at the bottom beside أصحاح with a simple faded look & separator */
.bible-book-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  gap: 3px !important;
}

.bible-book-meta-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100%;
  margin-inline: auto;
  text-align: center;
  gap: 4px;
  flex-wrap: nowrap;
  min-width: 0;
}

.bible-book-meta-sep {
  font-size: 0.65rem;
  color: #94a3b8;
  opacity: 0.65;
  line-height: 1;
  user-select: none;
}

.bible-book-abbr {
  font-size: 0.64rem;
  font-weight: 600;
  padding: 0;
  background: transparent !important;
  color: #94a3b8;
  opacity: 0.8;
  line-height: 1.2;
  flex-shrink: 0;
  letter-spacing: 0;
}

.bible-book-card.selected .bible-book-abbr,
.bible-book-card:hover .bible-book-abbr,
.bible-book-card.selected .bible-book-meta-sep,
.bible-book-card:hover .bible-book-meta-sep {
  background: transparent !important;
  color: var(--brand, #5b6cf5);
  opacity: 0.85;
}

/* 7. Mobile: locked viewport, compact layout, compact التنسيق (#popover-style), and full-screen إضافة ترنيمة جديدة */
@media (max-width: 768px) {

  html,
  body,
  .app-container {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  .top-nav {
    padding: max(0.6rem, calc(env(safe-area-inset-top, 0px) + 0.4rem)) 0.65rem 0.25rem !important;
    min-height: 44px !important;
  }

  .brand-center-logo {
    height: 32px !important;
    max-width: 135px !important;
  }

  .top-left-options,
  .top-options {
    gap: 0.4rem !important;
  }

  .icon-menu-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    font-size: 0.85rem !important;
  }

  .search-hero {
    padding: 0.1rem 0.55rem 0.25rem !important;
  }

  /* Default floating pill-chips suggestions on mobile */
  .search-hero>#search-suggestions-chips,
  .search-hero>#search-suggestions-chips.hidden,
  .search-hero>#search-suggestions-chips:empty,
  .app-container.is-search-active .search-hero>#search-suggestions-chips.hidden,
  .app-container.is-search-active .search-hero>#search-suggestions-chips:empty {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    opacity: 0 !important;
    background: transparent !important;
    border: none !important;
    overflow: hidden !important;
  }

  .app-container.is-search-active .search-hero>#search-suggestions-chips:not(.hidden):not(:empty),
  .app-container.is-search-active.is-search-recents .search-hero>#search-suggestions-chips:not(.hidden):not(:empty) {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 0 auto 3px auto !important;
    padding: 1px 4px !important;
    opacity: 1 !important;
    overflow: hidden !important;
    background: transparent !important;
    border: none !important;
  }

  .search-hero>#search-suggestions-chips .suggestion-chip,
  .search-hero>#search-suggestions-chips .suggestion-chip.recent-search-chip {
    flex: 0 1 auto !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    min-width: 0 !important;
    max-width: calc(50% - 8px) !important;
    padding: 0 12px 1px 12px !important;
    border-radius: 9999px !important;
    border: none !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
    font-size: 0.77rem !important;
    font-weight: 600 !important;
  }

  .search-hero>#search-suggestions-chips .suggestion-chip.is-primary-suggestion {
    font-size: 0.79rem !important;
    font-weight: 800 !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Preserved combined style on mobile (.use-combined-search-suggestions) */
  .app-container.use-combined-search-suggestions .search-hero>#search-suggestions-chips,
  .app-container.use-combined-search-suggestions .search-hero>#search-suggestions-chips.hidden,
  .app-container.use-combined-search-suggestions .search-hero>#search-suggestions-chips:empty,
  .app-container.use-combined-search-suggestions.is-search-active .search-hero>#search-suggestions-chips.hidden,
  .app-container.use-combined-search-suggestions.is-search-active .search-hero>#search-suggestions-chips:empty {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin-top: 0 !important;
    margin-bottom: -38px !important;
    padding: 0 3px 38px 3px !important;
    opacity: 0 !important;
    border-radius: 22px !important;
    border-top-color: transparent !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom: none !important;
    overflow: hidden !important;
  }

  .app-container.use-combined-search-suggestions .search-hero>#search-suggestions-chips::after {
    bottom: 22px;
  }

  .app-container.use-combined-search-suggestions .search-hero>#search-suggestions-chips:not(.hidden):not(:empty),
  .app-container.use-combined-search-suggestions.is-search-active .search-hero>#search-suggestions-chips:not(.hidden):not(:empty),
  .app-container.use-combined-search-suggestions.is-search-active.is-search-recents .search-hero>#search-suggestions-chips:not(.hidden):not(:empty) {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    margin-top: 0 !important;
    margin-bottom: -22px !important;
    padding: 2px 3px 22px 3px !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    border-top: 2px solid rgba(91, 108, 245, 0.22) !important;
    border-left: 2px solid rgba(91, 108, 245, 0.22) !important;
    border-right: 2px solid rgba(91, 108, 245, 0.22) !important;
    border-bottom: none !important;
  }

  .app-container.use-combined-search-suggestions .search-hero>#search-suggestions-chips .suggestion-chip,
  .app-container.use-combined-search-suggestions .search-hero>#search-suggestions-chips .suggestion-chip.recent-search-chip {
    flex: 1 1 0% !important;
    height: 27px !important;
    min-height: 27px !important;
    max-height: 27px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 8px 1px 8px !important;
    border-radius: 11px !important;
    line-height: 1.45 !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
  }

  .app-container.use-combined-search-suggestions .search-hero>#search-suggestions-chips .suggestion-chip:first-child {
    border-top-right-radius: 18px !important;
    border-bottom-right-radius: 11px !important;
    border-top-left-radius: 9px !important;
    border-bottom-left-radius: 9px !important;
  }

  .app-container.use-combined-search-suggestions .search-hero>#search-suggestions-chips .suggestion-chip:last-child {
    border-top-left-radius: 18px !important;
    border-bottom-left-radius: 11px !important;
    border-top-right-radius: 9px !important;
    border-bottom-right-radius: 9px !important;
  }

  .app-container.use-combined-search-suggestions .search-hero>#search-suggestions-chips .suggestion-chip:only-child {
    border-radius: 18px 18px 11px 11px !important;
  }

  .centered-search-box .search-icon {
    right: 0.95rem !important;
    top: 23px !important;
    transform: translateY(-50%) !important;
    height: 24px !important;
    width: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    font-size: 0.98rem !important;
    margin: 0 !important;
  }

  .centered-search-box input {
    min-height: 46px !important;
    height: 46px !important;
    max-height: 46px !important;
    line-height: 46px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 2.85rem !important;
    padding-left: 6.3rem !important;
    font-size: 16px !important;
    border-radius: 22px !important;
    border: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-tap-highlight-color: transparent !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
    box-sizing: border-box !important;
  }

  .centered-search-box .clear-btn:not(.hidden) {
    top: 23px !important;
    transform: translateY(-50%) !important;
    height: 26px !important;
    width: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .centered-search-box .clear-btn.hidden,
  #clear-search-btn.hidden {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .centered-search-box .clear-btn i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    font-size: 0.95rem !important;
  }

  .centered-search-box .search-inside-controls {
    top: 23px !important;
    transform: translateY(-50%) !important;
    left: 0.5rem !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .centered-search-box .search-inside-toggle:not(.search-filter-toggle-btn),
  .centered-search-box .icon-only-toggle:not(.search-filter-toggle-btn) {
    height: 30px !important;
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .centered-search-box .search-inside-toggle i,
  .centered-search-box .icon-only-toggle i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    font-size: 0.95rem !important;
    margin: 0 !important;
  }

  .search-ghost-overlay {
    top: 0 !important;
    height: 46px !important;
    line-height: 46px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    font-size: 16px !important;
    padding-right: 2.85rem !important;
    padding-left: 8.2rem !important;
    box-sizing: border-box !important;
  }

  .search-ghost-overlay:has(.ghost-tab-pill[style*="display: none"]) {
    padding-left: 6.3rem !important;
  }

  .centered-search-box:has(#intelligent-search:focus) input,
  .centered-search-box input:focus,
  .centered-search-box input:active,
  .centered-search-box input:focus-visible,
  .app-container.is-search-active .centered-search-box input,
  .centered-search-box:has(#search-results-dropdown:not(.hidden):not(.is-closing)) input {
    min-height: 46px !important;
    height: 46px !important;
    border-radius: 22px !important;
    border: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .centered-search-box:has(#search-results-dropdown:not(.hidden):not(.is-closing)) input,
  .centered-search-box.has-open-dropdown input {
    border-top-left-radius: 22px !important;
    border-top-right-radius: 22px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border-solid, #e4e6f0) !important;
  }

  .search-hero>#search-suggestions-chips:not(.hidden):not(:empty)+.centered-search-box {
    margin-top: 0 !important;
  }

  .app-container.use-combined-search-suggestions .search-hero>#search-suggestions-chips:not(.hidden):not(:empty)+.centered-search-box input,
  .app-container.use-combined-search-suggestions.is-search-active .search-hero>#search-suggestions-chips:not(.hidden):not(:empty)+.centered-search-box input {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 22px !important;
    border-bottom-right-radius: 22px !important;
    border-top-color: transparent !important;
  }

  .app-container.use-combined-search-suggestions .search-hero>#search-suggestions-chips:not(.hidden):not(:empty)+.centered-search-box:has(#search-results-dropdown:not(.hidden):not(.is-closing)) input,
  .app-container.use-combined-search-suggestions .search-hero>#search-suggestions-chips:not(.hidden):not(:empty)+.centered-search-box.has-open-dropdown input {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-color: transparent !important;
    border-bottom: 1px solid var(--border-solid, #e4e6f0) !important;
  }

  #search-results-dropdown:not(.hidden) {
    height: var(--search-fitted-max-h, calc(100dvh - 135px)) !important;
    max-height: var(--search-fitted-max-h, calc(100dvh - 135px)) !important;
    border-bottom-left-radius: 22px !important;
    border-bottom-right-radius: 22px !important;
  }

  .dashboard-halves {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    padding: 0.15rem 0.5rem 0 !important;
    gap: 0.4rem !important;
  }

  .app-bottom-bar {
    padding: 4px 10px max(4px, env(safe-area-inset-bottom, 0px)) 10px !important;
    margin: 0 !important;
    min-height: 24px !important;
  }

  .half-panel:not(.style-drawer-panel),
  .presentation-lines-panel,
  .recent-session-panel {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .lines-list-box,
  .recent-list-box,
  #presentation-lines-container,
  #recent-session-container {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow-y: auto !important;
  }

  .panel-bar,
  .recent-session-panel .panel-bar {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 0.7rem !important;
    border-top-left-radius: 14px !important;
    border-top-right-radius: 14px !important;
  }

  .panel-title-btn {
    font-size: 0.82rem !important;
    padding: 3px 6px !important;
  }

  .mini-btn-flat {
    min-width: 28px !important;
    height: 28px !important;
    padding: 0 6px !important;
    font-size: 0.78rem !important;
    border-radius: 8px !important;
  }

  #btn-split-all-lines,
  #btn-lines-panel-fullscreen,
  #btn-presenter-fullscreen,
  #btn-prev-line,
  #btn-next-line,
  .mode-group-btn {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    font-size: 0.76rem !important;
    border-radius: 50% !important;
  }

  .slide-line-row {
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
  }

  .recent-item {
    padding: 0.48rem 0.7rem !important;
  }

  .recent-item .recent-title {
    font-size: 0.84rem !important;
  }

  .empty-state {
    min-height: 90px !important;
    padding: 0.75rem !important;
  }

  .empty-state i {
    font-size: 1.5rem !important;
  }

  /* Compact التنسيق (#popover-style) on mobile with top-to-bottom expand & zero overflow issues */
  #popover-style:not(.hidden) {
    top: 50px !important;
    left: 0.45rem !important;
    right: 0.45rem !important;
    width: calc(100vw - 0.9rem) !important;
    max-width: calc(100vw - 0.9rem) !important;
    max-height: calc(100dvh - 60px) !important;
    padding: 0.6rem 0.7rem !important;
    gap: 0.35rem !important;
    border-radius: 18px !important;
    border: none !important;
    overflow: hidden !important;
    transform-origin: top center !important;
  }

  #popover-style:not(.hidden):not(.is-closing) {
    animation: modalExpandTopToBottom 0.2s cubic-bezier(0.16, 1, 0.3, 1) backwards !important;
  }

  #popover-style.is-closing,
  #popover-style.is-closing:not(.hidden),
  .dropdown-popover.is-closing,
  .dropdown-popover.is-closing:not(.hidden),
  #popover-bible.is-closing,
  #popover-bible.is-closing:not(.hidden),
  #search-results-dropdown.is-closing,
  #search-results-dropdown.is-closing:not(.hidden) {
    animation: popoverCollapseClose 0.16s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
  }

  #popover-style .style-drawer-header {
    padding-bottom: 6px !important;
  }

  #popover-style .drawer-header-title {
    display: none !important;
  }

  #popover-style .templates-header-dropdown-wrap {
    flex: 1 !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 32px !important;
    padding: 2px 4px !important;
    margin-inline: 3px !important;
    border: none !important;
    background: var(--surface-3, #eceef7) !important;
  }

  #popover-style .tmpl-cycle-btn,
  #popover-style .tmpl-dropdown-trigger-btn {
    height: 28px !important;
    font-size: 0.76rem !important;
  }

  #popover-style .style-nav-tabs {
    margin: 4px 0 !important;
    padding: 3px !important;
    gap: 3px !important;
    border-radius: 10px !important;
  }

  #popover-style .style-tab-btn {
    padding: 4px 8px !important;
    font-size: 0.74rem !important;
    border-radius: 7px !important;
    gap: 4px !important;
  }

  #popover-style .style-card {
    padding: 8px 10px !important;
    margin-top: 6px !important;
    border-radius: 12px !important;
  }

  #popover-style .style-card:first-child {
    margin-top: 0 !important;
  }

  #popover-style .style-card-title {
    font-size: 0.78rem !important;
    margin-bottom: 5px !important;
    gap: 5px !important;
  }

  #popover-style .style-grid-2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  #popover-style .control-field {
    gap: 2px !important;
  }

  #popover-style .control-field label {
    font-size: 0.72rem !important;
  }

  #popover-style .control-select,
  #popover-style .control-input,
  #popover-style .custom-font-dropdown-btn {
    height: 30px !important;
    min-height: 30px !important;
    padding: 2px 8px !important;
    font-size: 0.74rem !important;
    border-radius: 8px !important;
  }

  #popover-style .segmented-btn {
    padding: 5px 6px !important;
    font-size: 0.74rem !important;
    min-height: 28px !important;
    border-radius: 8px !important;
  }

  #popover-style .control-btn {
    padding: 5px 8px !important;
    font-size: 0.75rem !important;
    min-height: 30px !important;
    border-radius: 9px !important;
  }

  /* Full-screen إضافة ترنيمة جديدة (#modal-custom-song-editor) on mobile with smooth fade & zero outer padding */
  #modal-custom-song-editor.modal-overlay {
    padding: 0 !important;
    margin: 0 !important;
  }

  #modal-custom-song-editor .modal-song-editor-card {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    animation: modalSmoothOpen 0.2s cubic-bezier(0.16, 1, 0.3, 1) backwards !important;
  }

  #modal-custom-song-editor.is-closing .modal-song-editor-card {
    animation: modalSmoothClose 0.16s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
  }
}

/* ============================================================================
   8. Modern Icon-Only Toast (No Side Borders), Compact #btn-show-new-playlist-input,
      and Builder Slide Preview Fullscreen Mode
   ============================================================================ */
@keyframes toastModernIn {
  0% {
    opacity: 0;
    transform: translate(-50%, 16px) scale(0.92);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes toastModernOut {
  0% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, 10px) scale(0.95);
  }
}

#app-toast.app-toast {
  position: fixed !important;
  bottom: 1.35rem !important;
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, 16px) scale(0.92);
  background: rgba(24, 27, 38, 0.94) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  color: #f8fafc !important;
  padding: 0.45rem 0.95rem 0.45rem 0.55rem !important;
  border-radius: 9999px !important;
  border: none !important;
  border-right: none !important;
  border-left: none !important;
  outline: none !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  box-shadow: 0 14px 34px -6px rgba(15, 23, 42, 0.36) !important;
  z-index: 10000000 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem !important;
  max-width: min(92vw, 440px) !important;
  width: max-content !important;
  opacity: 0;
  pointer-events: none;
  transition: none !important;
}

[dir="rtl"] #app-toast.app-toast {
  padding: 0.45rem 0.55rem 0.45rem 0.95rem !important;
}

#app-toast.app-toast.hidden {
  display: none !important;
}

#app-toast.app-toast.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  animation: toastModernIn 0.26s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

#app-toast.app-toast.is-hiding {
  animation: toastModernOut 0.18s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

#app-toast .toast-icon-badge {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  flex-shrink: 0;
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

#app-toast[data-tone="brand"] .toast-icon-badge {
  background: rgba(91, 108, 245, 0.22);
  color: #818cf8;
}

#app-toast[data-tone="warning"] .toast-icon-badge {
  background: rgba(245, 158, 11, 0.22);
  color: #fbbf24;
}

#app-toast[data-tone="danger"] .toast-icon-badge {
  background: rgba(239, 68, 68, 0.22);
  color: #f87171;
}

#app-toast .toast-msg-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Match #btn-show-new-playlist-input & #new-playlist-bar to compact .playlist-entry-row list size */
#popover-playlist .new-playlist-bar {
  margin-top: 2px !important;
  gap: 0.35rem !important;
}

#popover-playlist #btn-show-new-playlist-input.btn-create-playlist-pill {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 6px 10px !important;
  border-radius: 11px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  gap: 0.4rem !important;
  border-width: 1px !important;
}

#popover-playlist .new-playlist-bar.active #btn-show-new-playlist-input.btn-create-playlist-pill {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 !important;
  border-radius: 9px !important;
}

#popover-playlist .new-playlist-input {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 0.65rem !important;
  font-size: 0.8rem !important;
  border-radius: 9px !important;
}

#popover-playlist .btn-save-inline {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 9px !important;
  font-size: 0.78rem !important;
}

/* معاينة الشرائح: Fullscreen Toggle Button & Fullscreen Preview Column */
.builder-preview-fs-btn {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 7px;
  border: none;
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.builder-preview-fs-btn:hover,
.builder-preview-fs-btn.active {
  background: #2563eb;
  color: #ffffff;
}

.song-builder-preview-col.is-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  z-index: 100050 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  background: var(--surface, #ffffff) !important;
  display: flex !important;
  flex-direction: column !important;
}

.song-builder-preview-col.is-fullscreen .preview-col-header {
  padding: 0.65rem 1rem !important;
  font-size: 0.9rem !important;
}

.song-builder-preview-col.is-fullscreen .song-builder-preview-list {
  flex: 1 1 auto !important;
  max-height: none !important;
  padding: 0.85rem 1rem !important;
}

/* ============================================================================
   9. Compact Modern .search-did-you-mean-banner, Smaller #playlist-current-name
      & Counter, and Borderless .song-scale-badge
   ============================================================================ */
.franco-translation-header {
  display: none !important;
}

.search-did-you-mean-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  margin: 4px 10px 4px 10px !important;
  padding: 0 !important;
  flex-wrap: wrap !important;
  max-height: 44px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease, margin 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-did-you-mean-row.is-hiding {
  max-height: 0 !important;
  opacity: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  transform: translateY(-4px);
  pointer-events: none !important;
}

.search-did-you-mean-label {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: rgba(100, 116, 139, 0.72) !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  user-select: none !important;
}

.search-did-you-mean-banner {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  gap: 4px !important;
  background: rgba(91, 108, 245, 0.08) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 3px 10px !important;
  margin: 0 !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: var(--brand, #5b6cf5) !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background-color 0.16s ease, transform 0.16s ease !important;
}

.search-did-you-mean-banner:hover {
  background: rgba(91, 108, 245, 0.14) !important;
  border: none !important;
}

.search-did-you-mean-banner .clickable-suggestion-word {
  color: var(--brand, #5b6cf5) !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 1.5px !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.search-did-you-mean-banner .clickable-suggestion-word:hover,
.search-did-you-mean-banner:hover .clickable-suggestion-word {
  color: var(--brand-dark, #4354e8) !important;
  background: transparent !important;
  text-decoration: underline !important;
  text-decoration-color: var(--brand-dark, #4354e8) !important;
}

/* Smaller #playlist-current-name and playlist counter */
#btn-playlist-selector,
.panel-title-btn,
#btn-playlist-selector span,
.panel-title-btn span,
#playlist-current-name {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
}

.playlist-count-text {
  font-size: 0.68rem !important;
  font-weight: 600 !important;
}

@media (max-width: 768px) {

  #btn-playlist-selector,
  .panel-title-btn,
  #btn-playlist-selector span,
  .panel-title-btn span,
  #playlist-current-name {
    font-size: 0.76rem !important;
  }

  #recent-count,
  .badge-count {
    min-width: 17px !important;
    height: 17px !important;
    font-size: 0.62rem !important;
    padding: 0 3.5px !important;
  }
}

/* Remove border & hide .song-scale-badge & #active-song-scale-badge */
.song-scale-badge,
#active-song-scale-badge,
.floating-scale-badge {
  display: none !important;
}

/* ============================================================================
   10. Mobile Safari & Standalone Web App Top Blur Prevention & Safe Area Layout
   ============================================================================ */
.sr-only {
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
}

html,
body,
.app-container {
  background-color: var(--bg, #f3f4f9) !important;
}

.top-nav {
  background-color: var(--bg, #f3f4f9) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Installed Web App (Add to Home Screen / Standalone Mode on iOS & Android) */
@media all and (display-mode: standalone),
all and (display-mode: fullscreen) {
  @media (max-width: 768px) {
    .top-nav {
      padding-top: max(0.6rem, calc(env(safe-area-inset-top, 0px) + 0.5rem)) !important;
    }

    .app-bottom-bar {
      padding-bottom: max(6px, env(safe-area-inset-bottom, 12px)) !important;
    }
  }
}

html.is-standalone-webapp .top-nav {
  padding-top: max(0.6rem, calc(env(safe-area-inset-top, 0px) + 0.5rem)) !important;
}

html.is-ios-webapp .top-nav {
  padding-top: max(calc(env(safe-area-inset-top, 59px) + 12px), 66px) !important;
}

html.is-standalone-webapp .app-bottom-bar,
html.is-ios-webapp .app-bottom-bar {
  padding-bottom: max(6px, env(safe-area-inset-bottom, 14px)) !important;
}

@media (max-width: 768px) {
  html.is-ios-webapp #popover-style:not(.hidden) {
    top: max(calc(env(safe-area-inset-top, 59px) + 52px), 106px) !important;
    max-height: calc(100dvh - max(calc(env(safe-area-inset-top, 59px) + 62px), 116px)) !important;
  }
}

.startup-loading-overlay.hidden,
.startup-loading-overlay.fade-out,
.pwa-sync-overlay.hidden,
.modal-overlay.hidden,
.obs-overlay.hidden,
.controller-waiting-overlay.hidden,
.ple-modal-overlay.hidden {
  display: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ============================================================================
   11. Desktop Inline Side-Menu (#popover-style) Pushing Main Screen vs. Narrow Popover,
       Draggable Compact .style-nav-tabs, & Virtual Keyboard Lock / Scale System
   ============================================================================ */

/* Desktop Wide Space (>= 1025px): #popover-style acts as an inline side-menu aligned with the search bar and pushing the main panels smoothly */
@media (min-width: 1025px) {

  .search-hero .centered-search-box {
    width: min(100%, 720px) !important;
    margin-right: calc((100% - min(100%, 720px)) / 2) !important;
    margin-left: auto !important;
    transition:
      margin-top 0.28s cubic-bezier(0.16, 1, 0.3, 1),
      margin-bottom 0.28s cubic-bezier(0.16, 1, 0.3, 1),
      margin-right 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      max-width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .search-hero #search-suggestions-chips,
  .app-container .search-hero #search-suggestions-chips,
  .app-container.is-search-active .search-hero #search-suggestions-chips,
  .app-container.is-search-active .search-hero #search-suggestions-chips.hidden,
  .app-container.is-search-active .search-hero #search-suggestions-chips:empty {
    width: min(100%, 720px) !important;
    margin-right: calc((100% - min(100%, 720px)) / 2) !important;
    margin-left: auto !important;
    transition:
      height 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      min-height 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      max-height 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      margin-top 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      margin-bottom 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      padding-bottom 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1),
      border-color 0.24s cubic-bezier(0.22, 1, 0.36, 1),
      margin-right 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      max-width 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  /* Keep the search bar centered when #popover-style is open unless space is tight and #popover-style would overlap it */
  .app-container:has(#popover-style:not(.hidden):not(.is-closing)) .search-hero .centered-search-box,
  .app-container:has(#popover-style:not(.hidden):not(.is-closing)) .search-hero #search-suggestions-chips,
  .app-container.is-search-active:has(#popover-style:not(.hidden):not(.is-closing)) .search-hero #search-suggestions-chips,
  .app-container.is-search-active:has(#popover-style:not(.hidden):not(.is-closing)) .search-hero #search-suggestions-chips.hidden,
  .app-container.is-search-active:has(#popover-style:not(.hidden):not(.is-closing)) .search-hero #search-suggestions-chips:empty {
    width: min(720px, calc(100% - clamp(340px, 28vw, 400px) - 1.25rem)) !important;
    max-width: min(720px, calc(100% - clamp(340px, 28vw, 400px) - 1.25rem)) !important;
    margin-right: max(calc((100% - min(100%, 720px)) / 2), calc(clamp(340px, 28vw, 400px) + 1.25rem)) !important;
    margin-left: auto !important;
  }

  .dashboard-halves {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 1rem !important;
    overflow: visible !important;
  }

  .app-container:has(#popover-style:not(.hidden):not(.is-closing)) .dashboard-halves,
  .app-container.is-search-active:has(#popover-style:not(.hidden):not(.is-closing)) .dashboard-halves,
  .app-container.is-search-active.is-search-recents:has(#popover-style:not(.hidden):not(.is-closing)) .dashboard-halves {
    transform: none !important;
  }

  .dashboard-halves>.half-panel.recent-session-panel,
  .dashboard-halves>.half-panel.presentation-lines-panel {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  #popover-style,
  #popover-style:not(.hidden),
  #popover-style.hidden,
  #popover-style.is-closing {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    margin-top: calc(-1 * var(--style-drawer-top-offset, 58px)) !important;
    height: calc(100% + var(--style-drawer-top-offset, 58px)) !important;
    max-height: calc(100% + var(--style-drawer-top-offset, 58px)) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-card) !important;
    z-index: 30 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    contain: layout style paint !important;
    transform: translateZ(0) !important;
    animation: none !important;
    will-change: width, flex-basis, margin-left, opacity;
    transition:
      width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      min-width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      max-width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      flex-basis 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      padding-left 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      padding-right 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      margin-left 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.2s ease,
      border-width 0.28s ease !important;
  }

  #popover-style>*,
  #popover-style .style-tab-content>* {
    animation: none !important;
  }

  #popover-style:not(.hidden):not(.is-closing) {
    width: clamp(410px, 34vw, 490px) !important;
    min-width: clamp(410px, 34vw, 490px) !important;
    max-width: clamp(410px, 34vw, 490px) !important;
    flex: 0 0 clamp(410px, 34vw, 490px) !important;
    padding: 0.75rem 0.85rem !important;
    border: 1px solid var(--border-solid, #e4e6f0) !important;
    margin-left: 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  #popover-style.hidden,
  #popover-style.is-closing,
  #popover-style.is-closing:not(.hidden) {
    width: 0px !important;
    min-width: 0px !important;
    max-width: 0px !important;
    flex: 0 0 0px !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    border-width: 0px !important;
    margin-left: -1rem !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #popover-style .style-drawer-header,
  #popover-style .style-nav-tabs,
  #popover-style .style-drawer-scroll-body {
    width: calc(clamp(410px, 34vw, 490px) - 1.7rem) !important;
    min-width: calc(clamp(410px, 34vw, 490px) - 1.7rem) !important;
    max-width: calc(clamp(410px, 34vw, 490px) - 1.7rem) !important;
    flex-shrink: 0 !important;
  }

  /* Compact & Draggable .style-nav-tabs on Desktop */
  #popover-style .style-nav-tabs {
    padding: 3px !important;
    gap: 3px !important;
    margin: 6px 0 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  #popover-style .style-nav-tabs .style-tab-btn {
    padding: 4px 7px !important;
    font-size: 0.73rem !important;
    min-height: 26px !important;
    border-radius: 7px !important;
    gap: 4px !important;
    cursor: pointer !important;
  }

  #popover-style .style-nav-tabs .style-tab-btn i {
    font-size: 0.72rem !important;
  }
}

/* Narrow Desktop / Tablet Space (<= 1024px): smoothly turns into floating popover without moving .dashboard-halves */
@media (max-width: 1024px) {

  #popover-style,
  #popover-style:not(.hidden),
  #popover-style.is-closing {
    position: fixed !important;
    z-index: 9999 !important;
    margin: 0 !important;
    flex: 0 0 0px !important;
    transition: top 0.24s cubic-bezier(0.16, 1, 0.3, 1), right 0.24s cubic-bezier(0.16, 1, 0.3, 1), width 0.24s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.24s ease !important;
  }
}

/* Universal cursor rules for draggable .style-nav-tabs */
.style-nav-tabs {
  cursor: pointer;
}

.style-nav-tabs .style-tab-btn {
  cursor: pointer;
}

.style-nav-tabs.is-dragging,
.style-nav-tabs.is-dragging *,
.style-nav-tabs.is-dragging .style-tab-btn {
  cursor: grabbing !important;
}

/* Virtual Keyboard: Lock to Search Bar & Results + Scale Controls + Resize Handles + iPhone QuickType Header */
.virtual-keyboard-window {
  --osk-scale: 1;
  z-index: 10005 !important;
}

.virtual-keyboard-window.is-locked-to-search {
  transform-origin: bottom center !important;
}

.virtual-keyboard-window:not(.is-locked-to-search) {
  transform-origin: top left !important;
}

.virtual-keyboard-window .osk-header {
  padding: 4px 8px !important;
  min-height: 36px !important;
  gap: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.virtual-keyboard-window .osk-header-left,
.virtual-keyboard-window .osk-header-controls {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.virtual-keyboard-window.is-locked-to-search .osk-header {
  cursor: default !important;
}

.virtual-keyboard-window.is-locked-to-search .osk-drag-icon {
  opacity: 0.35;
  cursor: default !important;
}

/* iPhone-style QuickType Suggestions & History Bar inside OSK Header */
.osk-suggestions-bar {
  flex: 1 1 0% !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  padding: 0 2px !important;
}

#virtual-keyboard-window #search-suggestions-chips,
#virtual-keyboard-window #search-suggestions-chips:not(.hidden) {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  gap: 0 !important;
  padding: 0 2px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: none !important;
}

#virtual-keyboard-window #search-suggestions-chips.hidden,
#virtual-keyboard-window #search-suggestions-chips:empty {
  opacity: 0 !important;
  pointer-events: none !important;
}

.osk-suggestions-bar::-webkit-scrollbar,
#virtual-keyboard-window #search-suggestions-chips::-webkit-scrollbar {
  display: none !important;
}

.osk-suggestion-item,
#virtual-keyboard-window #search-suggestions-chips .suggestion-chip {
  flex: 1 0 auto !important;
  min-width: 72px !important;
  max-width: 220px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  margin: 0 !important;
  padding: 0 11px 2px 11px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 0.8rem !important;
  line-height: 1.5 !important;
  font-weight: 700 !important;
  color: var(--text, #1a1d2e) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: ellipsis !important;
  position: relative !important;
  transform: none !important;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease !important;
}

.osk-suggestion-item span:not(.recent-chip-remove-btn),
#virtual-keyboard-window #search-suggestions-chips .suggestion-chip span:not(.recent-chip-remove-btn) {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.5 !important;
  padding-bottom: 1px !important;
}

.osk-suggestion-item:not(:last-child)::after,
#virtual-keyboard-window #search-suggestions-chips .suggestion-chip:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: var(--border-solid, #cbd5e1);
  opacity: 0.8;
  pointer-events: none;
}

.osk-suggestion-item:hover,
#virtual-keyboard-window #search-suggestions-chips .suggestion-chip:hover {
  background: var(--surface-3, #eceef7) !important;
  color: var(--brand, #5b6cf5) !important;
}

.osk-suggestion-item:active,
#virtual-keyboard-window #search-suggestions-chips .suggestion-chip:active {
  transform: scale(0.97) !important;
  background: var(--brand-bg, #eef0ff) !important;
}

.osk-suggestion-item.is-primary-suggestion,
#virtual-keyboard-window #search-suggestions-chips .suggestion-chip.is-primary-suggestion,
#virtual-keyboard-window #search-suggestions-chips .suggestion-chip.recent-search-chip.is-primary-suggestion,
.app-container.use-combined-search-suggestions #search-suggestions-chips .suggestion-chip.recent-search-chip.is-primary-suggestion {
  color: var(--brand, #5b6cf5) !important;
  font-weight: 900 !important;
  font-size: 0.85rem !important;
}

#virtual-keyboard-window #search-suggestions-chips .suggestion-chip.is-primary-suggestion span,
#virtual-keyboard-window #search-suggestions-chips .suggestion-chip.recent-search-chip.is-primary-suggestion span,
.app-container.use-combined-search-suggestions #search-suggestions-chips .suggestion-chip.is-primary-suggestion span,
.app-container.use-combined-search-suggestions #search-suggestions-chips .suggestion-chip.recent-search-chip.is-primary-suggestion span {
  font-weight: 900 !important;
}

[data-theme="dark"] #virtual-keyboard-window #search-suggestions-chips .suggestion-chip.is-primary-suggestion,
[data-theme="dark"] #virtual-keyboard-window #search-suggestions-chips .suggestion-chip.recent-search-chip.is-primary-suggestion,
[data-theme="dark"] .app-container.use-combined-search-suggestions #search-suggestions-chips .suggestion-chip.is-primary-suggestion,
[data-theme="dark"] .app-container.use-combined-search-suggestions #search-suggestions-chips .suggestion-chip.recent-search-chip.is-primary-suggestion {
  color: var(--brand-light, #a5b0ff) !important;
}

.osk-suggestion-item.is-recent,
#virtual-keyboard-window #search-suggestions-chips .suggestion-chip.recent-search-chip {
  font-weight: 600 !important;
  color: rgba(71, 85, 105, 0.72) !important;
  font-size: 0.8rem !important;
  background: transparent !important;
}

.osk-suggestion-item.is-recent .osk-recent-icon,
#virtual-keyboard-window #search-suggestions-chips .suggestion-chip.recent-search-chip .recent-chip-icon {
  font-size: 0.62rem !important;
  opacity: 0.65 !important;
  flex-shrink: 0 !important;
}

[data-theme="dark"] .osk-suggestion-item,
[data-theme="dark"] #virtual-keyboard-window #search-suggestions-chips .suggestion-chip {
  color: #e8eaf6 !important;
}

[data-theme="dark"] .osk-suggestion-item:not(:last-child)::after,
[data-theme="dark"] #virtual-keyboard-window #search-suggestions-chips .suggestion-chip:not(:last-child)::after {
  background: #2a2d42;
}

[data-theme="dark"] .osk-suggestion-item:hover,
[data-theme="dark"] #virtual-keyboard-window #search-suggestions-chips .suggestion-chip:hover {
  background: #252840 !important;
  color: var(--brand-light, #a5b0ff) !important;
}

#osk-btn-reset-pos,
#osk-btn-close {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  flex: 0 0 28px !important;
  padding: 0 !important;
  justify-content: center !important;
  align-items: center !important;
  border-radius: 50% !important;
  font-size: 0.78rem !important;
}

#osk-btn-reset-pos.active {
  background: linear-gradient(135deg, var(--brand, #5b6cf5), var(--brand-dark, #4354e8)) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(91, 108, 245, 0.28) !important;
}

/* OSK Body with Left Vertical Zoom Controls & Right Vertical Drag Handler */
.virtual-keyboard-window .osk-body {
  position: relative !important;
  padding: 10px 12px 12px !important;
}

.osk-scale-controls.osk-side-scale-controls {
  position: absolute !important;
  left: 6px !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--surface-2, #f7f8fc) !important;
  border: 1px solid var(--border-solid, #e4e6f0) !important;
  border-radius: 8px !important;
  padding: 2px 1px !important;
  gap: 1px !important;
  width: 26px !important;
  z-index: 5 !important;
  box-shadow: none !important;
}

[data-theme="dark"] .osk-scale-controls.osk-side-scale-controls {
  background: #1e2132 !important;
  border-color: #2a2d42 !important;
}

.osk-side-drag-handle {
  position: absolute !important;
  right: 6px !important;
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 54px !important;
  border-radius: 8px !important;
  background: var(--surface-2, #f7f8fc) !important;
  border: 1px solid var(--border-solid, #e4e6f0) !important;
  color: var(--text-3, #8b90a8) !important;
  font-size: 0.72rem !important;
  z-index: 5 !important;
  touch-action: none !important;
  user-select: none !important;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease !important;
}

.virtual-keyboard-window.is-locked-to-search .osk-side-drag-handle {
  opacity: 0.35 !important;
  cursor: default !important;
}

.virtual-keyboard-window:not(.is-locked-to-search) .osk-side-drag-handle {
  opacity: 1 !important;
  cursor: grab !important;
  background: var(--brand-bg, #eef0ff) !important;
  border-color: rgba(91, 108, 245, 0.28) !important;
  color: var(--brand, #5b6cf5) !important;
}

.virtual-keyboard-window:not(.is-locked-to-search) .osk-side-drag-handle:hover {
  background: rgba(91, 108, 245, 0.2) !important;
}

.virtual-keyboard-window.is-dragging .osk-side-drag-handle {
  cursor: grabbing !important;
}

[data-theme="dark"] .osk-side-drag-handle {
  background: #1e2132 !important;
  border-color: #2a2d42 !important;
}

.osk-scale-btn {
  width: 22px !important;
  height: 20px !important;
  min-width: 22px !important;
  padding: 0 !important;
  justify-content: center !important;
  border-radius: 5px !important;
  background: transparent !important;
  font-size: 0.6rem !important;
}

.osk-scale-btn:hover {
  background: var(--surface, #ffffff) !important;
  color: var(--brand, #5b6cf5) !important;
}

.osk-scale-label {
  font-size: 0.54rem;
  font-weight: 800;
  color: var(--text-2, #4b5068);
  min-width: 0;
  width: 100%;
  text-align: center;
  line-height: 1;
  padding: 0;
  direction: ltr;
  user-select: none;
}

/* Do NOT pull down search bar when Virtual Keyboard mode is ON */
.app-container.is-osk-mode-on .search-hero>#search-suggestions-chips,
.app-container.is-osk-mode-on.is-search-active .search-hero>#search-suggestions-chips:not(.hidden):has(.suggestion-chip),
.app-container.is-osk-mode-on.is-search-active.is-search-recents .search-hero>#search-suggestions-chips:not(.hidden):has(.suggestion-chip),
.app-container.is-osk-mode-on.is-search-active .search-hero>#search-suggestions-chips:not(.hidden):has(.recent-search-chip) {
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.app-container.is-osk-mode-on .dashboard-halves,
.app-container.is-osk-mode-on.is-search-active .dashboard-halves,
.app-container.is-osk-mode-on.is-search-active.is-search-recents .dashboard-halves {
  transform: none !important;
}

.osk-resize-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  z-index: 25;
}

.osk-resize-tl {
  top: 0;
  left: 0;
  cursor: nwse-resize;
}

.osk-resize-tr {
  top: 0;
  right: 0;
  cursor: nesw-resize;
}

.osk-resize-bl {
  bottom: 0;
  left: 0;
  cursor: nesw-resize;
}

.osk-resize-br {
  bottom: 0;
  right: 0;
  cursor: nwse-resize;
}

/* ============================================================================
   12. Collapsible الترانيم المفتوحة (#recents-panel) Header Button & Smooth Collapse
   ============================================================================ */
.recents-collapse-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 4px !important;
  margin-inline-end: 2px !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-3, #64748b) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: color 0.18s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.recents-collapse-btn:hover {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--brand, #5b6cf5) !important;
}

.recents-collapse-btn:active {
  transform: scale(0.9) !important;
}

.recents-collapse-btn i {
  font-size: 0.82rem !important;
  line-height: 1 !important;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Desktop (> 768px): الترانيم المفتوحة is on the right -> show right arrow */
@media (min-width: 769px) {
  .recents-collapse-icon-desktop {
    display: inline-block !important;
  }

  .recents-collapse-icon-mobile {
    display: none !important;
  }

  .dashboard-halves {
    gap: 1rem !important;
  }

  .dashboard-halves>.half-panel.presentation-lines-panel {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #recents-panel.recent-session-panel {
    flex: 0 0 calc(50% - 0.5rem) !important;
    width: calc(50% - 0.5rem) !important;
    min-width: calc(50% - 0.5rem) !important;
    max-width: calc(50% - 0.5rem) !important;
    background-color: #ffffff !important;
    overflow: hidden !important;
    transition: none !important;
  }

  html.recents-transitions-ready #recents-panel.recent-session-panel {
    will-change: width, min-width, max-width, flex-basis, background-color;
    transition:
      width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
      min-width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
      max-width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
      flex-basis 0.32s cubic-bezier(0.22, 1, 0.36, 1),
      background-color 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  [data-theme="dark"] #recents-panel.recent-session-panel {
    background-color: var(--surface, #181b26) !important;
  }

  #recents-panel.recent-session-panel:not(.is-collapsed):has(#popover-playlist:not(.hidden)),
  #recents-panel.recent-session-panel:not(.is-collapsed) .panel-bar:has(#popover-playlist:not(.hidden)) {
    overflow: visible !important;
  }

  #recents-panel .panel-bar {
    padding-inline-start: 0.75rem !important;
    padding-inline-end: 1rem !important;
    background-color: #f8fafc !important;
    justify-content: space-between !important;
    align-items: center !important;
    overflow: hidden !important;
    transition: none !important;
  }

  html.recents-transitions-ready #recents-panel .panel-bar {
    transition:
      padding-inline-start 0.32s cubic-bezier(0.22, 1, 0.36, 1),
      padding-inline-end 0.32s cubic-bezier(0.22, 1, 0.36, 1),
      border-bottom-color 0.32s cubic-bezier(0.22, 1, 0.36, 1),
      background-color 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  [data-theme="dark"] #recents-panel .panel-bar {
    background-color: var(--surface-2, #1e2132) !important;
  }

  #recents-panel .panel-bar-start {
    justify-content: flex-start !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
  }

  #recents-panel .recents-collapse-btn {
    margin: 0 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    flex: 0 0 32px !important;
  }

  #recents-panel #btn-playlist-selector,
  #recents-panel #recent-count,
  #recents-panel .panel-bar-end {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    transition: none !important;
  }

  html.recents-transitions-ready #recents-panel #btn-playlist-selector,
  html.recents-transitions-ready #recents-panel #recent-count,
  html.recents-transitions-ready #recents-panel .panel-bar-end {
    transition:
      opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  #recents-panel #recent-session-container {
    min-width: 240px !important;
    background: transparent !important;
    transition: none !important;
  }

  html.recents-transitions-ready #recents-panel #recent-session-container {
    transition:
      opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  #recents-panel.recent-session-panel.is-collapsed {
    flex: 0 0 46px !important;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    background-color: #f8fafc !important;
    cursor: pointer;
  }

  [data-theme="dark"] #recents-panel.recent-session-panel.is-collapsed {
    background-color: var(--surface-2, #1e2132) !important;
  }

  #recents-panel.is-collapsed .panel-bar {
    padding-inline-start: 6px !important;
    padding-inline-end: 0px !important;
    border-bottom-color: transparent !important;
    background-color: #f8fafc !important;
    overflow: hidden !important;
  }

  [data-theme="dark"] #recents-panel.is-collapsed .panel-bar {
    background-color: var(--surface-2, #1e2132) !important;
  }

  #recents-panel.is-collapsed .recents-collapse-btn {
    opacity: 1 !important;
    visibility: visible !important;
    color: var(--text-2, #4b5068) !important;
  }

  #recents-panel.is-collapsed .recents-collapse-icon-desktop {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 0.9rem !important;
    transform: rotate(180deg) !important;
  }

  #recents-panel.is-collapsed #btn-playlist-selector,
  #recents-panel.is-collapsed #recent-count,
  #recents-panel.is-collapsed .panel-bar-end {
    opacity: 0 !important;
    transform: translateX(8px) !important;
    pointer-events: none !important;
  }

  #recents-panel.is-collapsed #recent-session-container {
    opacity: 0 !important;
    transform: translateX(12px) !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  .dashboard-halves:has(#recents-panel.is-collapsed)>.half-panel.presentation-lines-panel {
    flex: 1 1 0px !important;
    max-width: 100% !important;
  }
}

/* Only resize #recents-panel inside .dashboard-halves when #popover-style is docked BESIDE it (>= 1025px), never when overlaying (<= 1024px) */
@media (min-width: 1025px) {
  .app-container:has(#popover-style:not(.hidden):not(.is-closing)) #recents-panel.recent-session-panel:not(.is-collapsed) {
    flex: 0 0 calc((100% - clamp(410px, 34vw, 490px) - 2rem) / 2) !important;
    width: calc((100% - clamp(410px, 34vw, 490px) - 2rem) / 2) !important;
    min-width: calc((100% - clamp(410px, 34vw, 490px) - 2rem) / 2) !important;
    max-width: calc((100% - clamp(410px, 34vw, 490px) - 2rem) / 2) !important;
  }
}

@keyframes popoverExpandBottomToTop {
  0% {
    opacity: 0;
    transform: translateY(6px) scaleY(0.86);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

/* Mobile (<= 768px): الترانيم المفتوحة is at the bottom -> show down arrow */
@media (max-width: 768px) {
  .recents-collapse-icon-desktop {
    display: none !important;
  }

  .recents-collapse-icon-mobile {
    display: inline-block !important;
  }

  #recents-panel.recent-session-panel {
    transition: none !important;
  }

  html.recents-transitions-ready #recents-panel.recent-session-panel {
    transition:
      flex-grow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
      flex-basis 0.32s cubic-bezier(0.22, 1, 0.36, 1),
      min-height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
      max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  #recents-panel #recent-session-container {
    transition: none !important;
  }

  html.recents-transitions-ready #recents-panel #recent-session-container {
    transition: opacity 0.22s ease, max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  #recents-panel.is-collapsed {
    flex: 0 0 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    overflow: visible !important;
  }

  .dashboard-halves:has(#recents-panel.is-collapsed #popover-playlist:not(.hidden)),
  #recents-panel.is-collapsed:has(#popover-playlist:not(.hidden)) {
    overflow: visible !important;
    z-index: 500 !important;
  }

  #recents-panel.is-collapsed .panel-bar {
    border-bottom: none !important;
    border-radius: 14px !important;
    overflow: visible !important;
  }

  #recents-panel.is-collapsed .recents-collapse-icon-mobile {
    transform: rotate(180deg) !important;
  }

  #recents-panel.is-collapsed #recent-session-container {
    opacity: 0 !important;
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  /* When mobile الترانيم المفتوحة is collapsed at the bottom, open قائمة التشغيل (#popover-playlist) UPWARD */
  #recents-panel.is-collapsed #popover-playlist,
  #recents-panel.is-collapsed .dropdown-wrapper #popover-playlist {
    position: absolute !important;
    top: auto !important;
    bottom: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    max-height: min(60dvh, calc(100dvh - 150px)) !important;
    transform-origin: bottom right !important;
    z-index: 999999 !important;
  }

  #recents-panel.is-collapsed #popover-playlist:not(.hidden):not(.is-closing) {
    animation: popoverExpandBottomToTop 0.2s cubic-bezier(0.16, 1, 0.3, 1) backwards !important;
  }
}

/* ============================================================================
   13. Unified Cast Menu (#popover-cast), Style Drawer Right-Side Scrollbar & Unified Desktop/Mobile Controls
   ============================================================================ */

/* Hide .remote-badge-dot.connected */
.remote-badge-dot,
.remote-badge-dot.connected {
  display: none !important;
}

/* Modern Uncle-Dashboard Redesign for #popover-cast (.dropdown-popover) */
#popover-cast {
  width: 318px !important;
  min-width: 300px !important;
  max-width: calc(100vw - 20px) !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;
  border-radius: 20px !important;
  border: 1px solid var(--border, rgba(91, 108, 245, 0.12)) !important;
  background: var(--surface, #ffffff) !important;
  box-shadow: var(--shadow-xl, 0 28px 56px -12px rgba(15, 23, 42, 0.22)) !important;
  font-family: 'Cairo', sans-serif !important;
}

#popover-cast.hidden {
  display: none !important;
}

@media (max-width: 768px) {
  .dropdown-wrapper #popover-cast,
  #popover-cast {
    position: fixed !important;
    top: 58px !important;
    left: 10px !important;
    right: 10px !important;
    width: calc(100vw - 20px) !important;
    min-width: 0 !important;
    max-width: 356px !important;
    margin: 0 auto !important;
    margin-inline: auto !important;
    z-index: 999999 !important;
  }
}

/* Status banner inside cast popover */
#popover-cast .cast-hotspot-status-box {
  padding: 8px 10px !important;
  background: rgba(16, 185, 129, 0.1) !important;
  border: none !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

#popover-cast .cast-hotspot-status-box.hidden {
  display: none !important;
}

#popover-cast .cast-hotspot-status-info {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  color: #059669 !important;
}

#popover-cast .btn-cast-disconnect-pill {
  padding: 4px 10px !important;
  font-size: 0.7rem !important;
  font-family: 'Cairo', sans-serif !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  background: var(--danger, #ef4444) !important;
  color: #ffffff !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: transform 0.15s ease, opacity 0.15s ease !important;
}

#popover-cast .btn-cast-disconnect-pill:hover {
  opacity: 0.92 !important;
}

/* Section 1: Screens & Display Link Group */
#popover-cast .cast-section-group {
  background: var(--surface-2, #f7f8fc) !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

#popover-cast .screens-cast-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

#popover-cast .cast-screens-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 2px !important;
}

#popover-cast .cast-section-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  color: var(--text-2, #4b5068) !important;
}

#popover-cast .cast-section-label i {
  color: var(--brand, #5b6cf5) !important;
  font-size: 0.8rem !important;
}

#popover-cast .cast-refresh-icon-btn {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border-radius: 50% !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-3, #8b90a8) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.72rem !important;
  cursor: pointer !important;
  transition: background-color 0.16s ease, color 0.16s ease, transform 0.25s ease !important;
}

#popover-cast .cast-refresh-icon-btn:hover {
  background: rgba(148, 163, 184, 0.16) !important;
  color: var(--brand, #5b6cf5) !important;
}

#popover-cast .screens-cast-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* Redesigned Screen Cast Card */
#popover-cast .screen-cast-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 7px 9px !important;
  border-radius: 11px !important;
  background: var(--surface, #ffffff) !important;
  border: none !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  cursor: pointer !important;
  transition: background-color 0.16s ease, transform 0.15s ease, box-shadow 0.16s ease !important;
}

#popover-cast .screen-cast-card:hover {
  background: var(--brand-bg, #eef0ff) !important;
  transform: none !important;
  box-shadow: none !important;
}

#popover-cast .screen-cast-main {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

#popover-cast .screen-cast-icon-box {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 9px !important;
  background: var(--brand-bg, #eef0ff) !important;
  color: var(--brand, #5b6cf5) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.78rem !important;
  flex-shrink: 0 !important;
}

#popover-cast .screen-cast-card:hover .screen-cast-icon-box {
  background: var(--brand, #5b6cf5) !important;
  color: #ffffff !important;
}

#popover-cast .screen-cast-card .screen-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

#popover-cast .screen-name-row {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
}

#popover-cast .screen-cast-card .screen-name {
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  color: var(--text, #1a1d2e) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#popover-cast .screen-chip {
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  padding: 1px 6px !important;
  border-radius: 999px !important;
  background: var(--surface-3, #eceef7) !important;
  color: var(--text-2, #4b5068) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

#popover-cast .screen-cast-card .screen-res {
  font-size: 0.66rem !important;
  font-weight: 600 !important;
  color: var(--text-3, #8b90a8) !important;
  line-height: 1.2 !important;
}

#popover-cast .screen-cast-action-icon {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-3, #8b90a8) !important;
  font-size: 0.74rem !important;
  flex-shrink: 0 !important;
  transition: color 0.16s ease, transform 0.16s ease !important;
}

#popover-cast .screen-cast-card:hover .screen-cast-action-icon,
#popover-cast .screen-cast-card:hover .launch-btn-icon {
  color: var(--brand, #5b6cf5) !important;
}

/* URL Copy & Open Presentation Row inside section */
#popover-cast .cast-url-actions-row {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

#popover-cast #btn-copy-obs-url {
  flex: 1 1 0% !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  border-radius: 9px !important;
  background: var(--surface, #ffffff) !important;
  border: none !important;
  color: var(--text-2, #4b5068) !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 0.73rem !important;
  font-weight: 800 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: background-color 0.16s ease, color 0.16s ease !important;
}

#popover-cast #btn-copy-obs-url:hover {
  background: var(--brand-bg, #eef0ff) !important;
  color: var(--brand, #5b6cf5) !important;
}

/* Quick Toggles Row (Clean View + Hotspot + QR Scanner) */
#popover-cast .hotspot-mode-section.cast-unified-controls-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

#popover-cast .cast-menu-pill-btn {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  border-radius: 12px !important;
  background: var(--surface-2, #f7f8fc) !important;
  border: none !important;
  color: var(--text-2, #4b5068) !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: background-color 0.16s ease, color 0.16s ease, transform 0.15s ease !important;
}

#popover-cast .cast-menu-pill-btn:hover {
  background: var(--surface-3, #eceef7) !important;
  color: var(--text, #1a1d2e) !important;
}

#popover-cast .cast-menu-pill-btn:active,
#popover-cast .cast-qr-icon-btn:active {
  transform: scale(0.96) !important;
}

#popover-cast .cast-tile-checkbox {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
}

#popover-cast .cast-pill-icon {
  font-size: 0.8rem !important;
  color: inherit !important;
  flex-shrink: 0 !important;
  transition: color 0.16s ease !important;
}

.hotspot-device-card .device-meta,
.device-meta {
  display: none !important;
}

#popover-cast .clean-view-toggle-row:has(#btn-toggle-hide-controls:checked),
#popover-cast .hotspot-toggle-tile:has(#btn-toggle-hotspot-mode:checked) {
  background: var(--brand-bg, #eef0ff) !important;
  color: var(--brand, #5b6cf5) !important;
}

#popover-cast .clean-view-toggle-row:has(#btn-toggle-hide-controls:checked) .cast-pill-icon,
#popover-cast .hotspot-toggle-tile:has(#btn-toggle-hotspot-mode:checked) .cast-pill-icon {
  color: var(--brand, #5b6cf5) !important;
}

#popover-cast .hotspot-toggle-tile:has(#hotspot-mode-inline-loader:not(.hidden)) .cast-pill-icon {
  display: none !important;
}

#popover-cast .cast-qr-icon-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  background: var(--surface-2, #f7f8fc) !important;
  border: none !important;
  color: var(--text-2, #4b5068) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
  transition: background-color 0.16s ease, color 0.16s ease, transform 0.15s ease !important;
}

#popover-cast .cast-open-url-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  padding: 0 !important;
  border-radius: 9px !important;
  background: var(--surface, #ffffff) !important;
  border: none !important;
  color: var(--text-2, #4b5068) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  transition: background-color 0.16s ease, color 0.16s ease !important;
}

#popover-cast .cast-qr-icon-btn:hover,
#popover-cast .cast-open-url-btn:hover {
  background: var(--brand-bg, #eef0ff) !important;
  color: var(--brand, #5b6cf5) !important;
  transform: none !important;
}

/* Hotspot Guide Banner inside #popover-cast */
#popover-cast .hotspot-guide-banner {
  background: var(--surface-2, #f7f8fc) !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

#popover-cast .hotspot-guide-banner.hidden {
  display: none !important;
}

#popover-cast .hotspot-guide-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
}

#popover-cast .hotspot-guide-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  color: var(--text, #1a1d2e) !important;
}

#popover-cast .hotspot-guide-title i {
  color: var(--brand, #5b6cf5) !important;
}

#popover-cast .hotspot-ip-badge {
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: var(--brand-bg, #eef0ff) !important;
  color: var(--brand, #5b6cf5) !important;
}

#popover-cast .hotspot-guide-sub {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  color: var(--text-3, #8b90a8) !important;
  line-height: 1.35 !important;
}

#popover-cast .hotspot-qr-wrap {
  display: flex !important;
  justify-content: center !important;
  padding: 2px 0 !important;
}

#popover-cast .hotspot-banner-qr {
  background: #ffffff !important;
  padding: 6px !important;
  border-radius: 12px !important;
  min-width: 126px !important;
  min-height: 126px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
}

#popover-cast .hotspot-url-copy-row {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

#popover-cast .hotspot-url-input {
  flex: 1 !important;
  min-width: 0 !important;
  height: 30px !important;
  font-size: 0.68rem !important;
  padding: 0 8px !important;
  border: none !important;
  border-radius: 8px !important;
  background: var(--surface, #ffffff) !important;
  color: var(--text-2, #4b5068) !important;
  direction: ltr !important;
  text-align: left !important;
}

#popover-cast .btn-copy-hotspot-pill {
  height: 30px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  border: none !important;
  background: var(--brand-bg, #eef0ff) !important;
  color: var(--brand, #5b6cf5) !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Dark theme overrides for redesigned #popover-cast */
[data-theme="dark"] #popover-cast .cast-section-group,
body.dark-mode #popover-cast .cast-section-group,
[data-theme="dark"] #popover-cast .hotspot-guide-banner,
body.dark-mode #popover-cast .hotspot-guide-banner {
  background: var(--surface-2, #1e2132) !important;
}

[data-theme="dark"] #popover-cast .screen-cast-card,
body.dark-mode #popover-cast .screen-cast-card,
[data-theme="dark"] #popover-cast #btn-copy-obs-url,
body.dark-mode #popover-cast #btn-copy-obs-url,
[data-theme="dark"] #popover-cast .cast-open-url-btn,
body.dark-mode #popover-cast .cast-open-url-btn {
  background: var(--surface-3, #252840) !important;
  border: none !important;
}

/* Unify #popover-style (.style-drawer-panel) across Desktop & Mobile + Sleek Right-Side Scrollbar */
#popover-style {
  overflow: hidden !important;
}

#popover-style .style-drawer-header {
  padding-bottom: 4px !important;
}

#popover-style .templates-header-dropdown-wrap {
  flex: 1 !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 32px !important;
  padding: 2px 4px !important;
  margin-inline: 3px !important;
  border: none !important;
  border-radius: 10px !important;
  background: var(--surface-3, #eceef7) !important;
}

#popover-style .tmpl-cycle-btn,
#popover-style .tmpl-dropdown-trigger-btn {
  height: 28px !important;
  font-size: 0.76rem !important;
}

#popover-style .style-nav-tabs {
  margin: 4px 0 6px 0 !important;
  padding: 3px !important;
  gap: 3px !important;
  border-radius: 10px !important;
  background: var(--surface-3, #eceef7) !important;
}

#popover-style .style-tab-btn {
  padding: 4px 8px !important;
  font-size: 0.74rem !important;
  min-height: 26px !important;
  border-radius: 7px !important;
  gap: 4px !important;
}

/* Universal Sleek Scrollbars across All Panels, Dropdowns & Modals + Right-Side Scrollbar Placement */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.38) transparent;
}

*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

*::-webkit-scrollbar-track {
  background: transparent !important;
  margin: 4px 0;
}

*::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.38) !important;
  border-radius: 9999px !important;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(91, 108, 245, 0.58) !important;
}

[data-theme="dark"] * {
  scrollbar-color: rgba(148, 163, 184, 0.28) transparent;
}

[data-theme="dark"] *::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.28) !important;
}

[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
  background: rgba(91, 108, 245, 0.62) !important;
}

/* Move vertical scrollbars to the RIGHT side in RTL scroll containers while preserving RTL child layout */
#popover-style .style-drawer-scroll-body,
#presentation-lines-container,
#recent-session-container,
#search-results-dropdown,
.font-dropdown-items-list,
.tmpl-dropdown-menu,
.modal-body,
.ple-modal-body {
  direction: ltr !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(148, 163, 184, 0.38) transparent !important;
}

#popover-style .style-drawer-scroll-body>*,
#presentation-lines-container>*,
#recent-session-container>*,
#search-results-dropdown>*,
.font-dropdown-items-list>*,
.tmpl-dropdown-menu>*,
.modal-body>*,
.ple-modal-body>* {
  direction: rtl !important;
}

#popover-style .style-drawer-scroll-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 4px !important;
  padding-left: 2px !important;
}

/* Keep hidden scrollbars hidden on horizontal chip/tab tracks and presenter stage */
.style-nav-tabs,
.osk-suggestions-bar,
#virtual-keyboard-window #search-suggestions-chips,
.obs-overlay[data-mode="allinone"] .obs-lower-third-box,
body[data-mode="allinone"] #presenter-box,
body[data-mode="allinone"] .lower-third-container,
#presenter-box,
.lower-third-container {
  scrollbar-width: none !important;
}

.style-nav-tabs::-webkit-scrollbar,
.osk-suggestions-bar::-webkit-scrollbar,
#virtual-keyboard-window #search-suggestions-chips::-webkit-scrollbar,
.obs-overlay[data-mode="allinone"] .obs-lower-third-box::-webkit-scrollbar,
body[data-mode="allinone"] #presenter-box::-webkit-scrollbar,
body[data-mode="allinone"] .lower-third-container::-webkit-scrollbar,
#presenter-box::-webkit-scrollbar,
.lower-third-container::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

#popover-style .style-card {
  padding: 8px 10px !important;
  margin-top: 6px !important;
  border-radius: 12px !important;
}

#popover-style .style-card:first-child {
  margin-top: 0 !important;
}

#popover-style .style-card-title {
  font-size: 0.78rem !important;
  margin-bottom: 5px !important;
  gap: 5px !important;
}

#popover-style .style-grid-2 {
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}

#popover-style .control-field {
  gap: 2px !important;
}

#popover-style .control-field label {
  font-size: 0.72rem !important;
}

#popover-style .control-select,
#popover-style .control-input,
#popover-style .custom-font-dropdown-btn {
  height: 30px !important;
  min-height: 30px !important;
  padding: 2px 8px !important;
  font-size: 0.74rem !important;
  border-radius: 8px !important;
}

#popover-style .segmented-btn {
  padding: 5px 6px !important;
  font-size: 0.74rem !important;
  min-height: 28px !important;
  border-radius: 8px !important;
}

#popover-style .control-btn {
  padding: 5px 8px !important;
  font-size: 0.75rem !important;
  min-height: 30px !important;
  border-radius: 9px !important;
}

/* ============================================================================
   14. Prepare vs. Present Mode & Device Role Segmented Controls
   ============================================================================ */
#main-device-role-card {
  background: var(--surface-2, #f7f8fc) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 14px !important;
  padding: 7px 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  transition: background-color 0.2s ease !important;
}

#main-device-role-card .device-name {
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  color: var(--text-2, #4b5068) !important;
  gap: 6px !important;
}

#main-device-role-card .device-name i {
  color: var(--brand, #5b6cf5) !important;
  font-size: 0.78rem !important;
}

#main-device-role-card.is-prepare-mode {
  background: var(--coupon-bg, #ede9fe) !important;
  border: none !important;
}

.device-role-segmented {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--surface, #ffffff) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 2px !important;
  gap: 2px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="dark"] .device-role-segmented {
  background: var(--surface-3, #252840) !important;
  border-color: var(--border-solid, #2a2d42) !important;
}

.btn-main-device-role,
.btn-device-role {
  border: none !important;
  background: transparent !important;
  color: var(--text-2, #4b5068) !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  padding: 4px 8px !important;
  border-radius: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: background-color 0.16s ease, color 0.16s ease, transform 0.12s ease !important;
}

.btn-main-device-role:hover,
.btn-device-role:hover {
  background: var(--surface-2, #f7f8fc) !important;
  color: var(--text, #1a1d2e) !important;
}

.btn-main-device-role.active.is-present,
.btn-device-role.active.is-present {
  background: var(--success, #10b981) !important;
  color: #ffffff !important;
}

.btn-main-device-role.active.is-prepare,
.btn-device-role.active.is-prepare {
  background: var(--coupon, #8b5cf6) !important;
  color: #ffffff !important;
}

.btn-device-role.active.is-view {
  background: var(--warning, #f59e0b) !important;
  color: #ffffff !important;
}

.device-status-badge.prepare-mode {
  background: var(--coupon-bg, #ede9fe) !important;
  color: var(--coupon-dark, #7c3aed) !important;
  border-color: rgba(139, 92, 246, 0.3) !important;
}

#btn-toggle-prepare-mode.is-prepare-active {
  background: var(--coupon-bg, #ede9fe) !important;
  color: var(--coupon-dark, #7c3aed) !important;
  border-color: rgba(139, 92, 246, 0.38) !important;
}

.prepare-mode-locked-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100% !important;
  margin: 0 !important;
  padding: 6px 12px !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  background: var(--coupon-bg, #ede9fe);
  color: var(--coupon-dark, #7c3aed);
  font-family: 'Cairo', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
}

[data-theme="dark"] .prepare-mode-locked-banner {
  background: rgba(139, 92, 246, 0.16);
  color: #c4b5fd;
  border: none !important;
}

.prepare-banner-info {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prepare-banner-action-btn {
  border: none !important;
  background: var(--coupon, #8b5cf6) !important;
  color: #ffffff !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
  transition: background-color 0.16s ease, transform 0.12s ease !important;
}

.prepare-banner-action-btn:hover {
  background: var(--coupon-dark, #7c3aed) !important;
}

.line-item.is-locked-live {
  outline: 2px dashed rgba(139, 92, 246, 0.55) !important;
  outline-offset: -2px !important;
}

/* =========================================================================
   LIVE PREVIEWABLE DRAG-TO-ORDER (PLAYLIST RECENTS & SLIDE EDIT MODE)
   ========================================================================= */

.is-live-sorting {
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Easy-to-grab pill handle with order number on recent items */
.recent-item-start {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.drag-handle-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 34px;
  height: 26px;
  padding: 0 7px;
  border-radius: 9px;
  background: var(--surface-2, #f7f8fc);
  color: var(--text-3, #8b90a8);
  cursor: grab;
  touch-action: none;
  flex-shrink: 0;
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

.recent-item:hover .drag-handle-pill,
.drag-handle-pill:hover {
  background: var(--brand-bg, #eef0ff);
  color: var(--brand, #5b6cf5);
  transform: scale(1.04);
}

.drag-handle-pill:active {
  cursor: grabbing;
  transform: scale(0.96);
}

.drag-handle-pill .drag-handle-icon {
  padding: 0;
  font-size: 0.76rem;
  color: inherit !important;
  opacity: 0.85;
}

.recent-order-num {
  font-family: 'Cairo', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  color: inherit;
}

.recent-title-stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  gap: 1px;
}

.recent-title-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.recent-drag-snippet {
  font-family: 'Cairo', sans-serif;
  font-size: 0.71rem;
  font-weight: 500;
  color: var(--text-3, #8b90a8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  opacity: 0.78;
}

/* Quick 1-click Up/Down step buttons on recent items */
.recent-step-btns {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.92);
  transition: opacity 0.16s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.recent-item:hover .recent-step-btns,
.recent-item.active .recent-step-btns,
.recent-item.is-editing .recent-step-btns {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.recent-step-btn {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 7px;
  background: var(--surface-2, #f7f8fc);
  color: var(--text-2, #4b5068);
  font-size: 0.62rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.recent-step-btn:hover:not(:disabled) {
  background: var(--brand-bg, #eef0ff);
  color: var(--brand, #5b6cf5);
  transform: translateY(-1px);
}

.recent-step-btn:disabled {
  opacity: 0.28;
  cursor: default;
}

.recent-item.recent-just-moved {
  animation: seMoved 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Larger, friendlier grip + step buttons in Slide Edit Mode (.se-item) */
.se-grip {
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px;
  background: var(--se-surface-2, #f7f8fc);
  color: var(--se-text-2, #4b5068) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.se-grip:hover {
  background: var(--se-brand-bg, #eef0ff);
  color: var(--se-brand, #5b6cf5) !important;
  transform: scale(1.06);
}

.se-grip:active {
  cursor: grabbing;
  transform: scale(0.95);
}

.se-corner-actions {
  position: absolute;
  bottom: 4px;
  left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  z-index: 10;
}

.se-corner-actions .se-del-corner {
  position: static;
}

.se-step-btn {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  font-size: 0.62rem;
  background: var(--se-surface-2, #f7f8fc);
  color: var(--se-text-2, #4b5068);
  opacity: 0.72;
}

.se-item:hover .se-step-btn {
  opacity: 1;
}

.se-step-btn:hover:not(:disabled) {
  background: var(--se-brand-bg, #eef0ff);
  color: var(--se-brand, #5b6cf5);
}

.se-step-btn:disabled {
  opacity: 0.25;
  cursor: default;
}

/* In-Place Live Preview Slot */
.recent-item.is-drag-preview-slot,
.line-item.se-item.is-drag-preview-slot {
  position: relative;
  background: var(--brand-bg, rgba(91, 108, 245, 0.1)) !important;
  box-shadow: inset 0 0 0 2px var(--brand, #5b6cf5) !important;
  border-radius: 12px !important;
  opacity: 0.72 !important;
}

/* Floating Drag Preview Card following the pointer */
.sortable-floating-card {
  position: fixed;
  top: 0;
  z-index: 999999;
  pointer-events: none;
  background: var(--surface, #ffffff);
  color: var(--text, #1a1d2e);
  border-radius: 14px;
  padding: 9px 13px;
  box-shadow: 0 20px 44px -8px rgba(15, 23, 42, 0.26), 0 0 0 1.5px var(--brand, #5b6cf5);
  font-family: 'Cairo', sans-serif;
  direction: rtl;
  will-change: transform;
  backdrop-filter: blur(10px);
}

[data-theme="dark"] .sortable-floating-card,
body.dark-mode .sortable-floating-card {
  background: rgba(24, 27, 38, 0.96);
  color: #e8eaf6;
  box-shadow: 0 22px 48px -8px rgba(0, 0, 0, 0.65), 0 0 0 1.5px var(--brand, #5b6cf5);
}

.sortable-floating-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sortable-floating-grip {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--brand-bg, #eef0ff);
  color: var(--brand, #5b6cf5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.74rem;
  flex-shrink: 0;
}

.sortable-floating-texts {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  gap: 1px;
}

.sortable-floating-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.sortable-floating-title {
  font-size: 0.84rem;
  font-weight: 800;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sortable-floating-sub {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-2, #4b5068);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.88;
}

[data-theme="dark"] .sortable-floating-sub,
body.dark-mode .sortable-floating-sub {
  color: #9299be;
}

.sortable-floating-group-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--brand-bg, #eef0ff);
  color: var(--brand, #5b6cf5);
  font-size: 0.66rem;
  font-weight: 800;
  flex-shrink: 0;
}

@media (hover: none) {
  .recent-step-btns {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .se-step-btn {
    opacity: 1;
  }
}

/* =========================================================================
   RECENT SEARCH CHIP HOVER 'X' REMOVE BUTTON (FADED CHIP BG, NO OVERLAP)
   ========================================================================= */

.suggestion-chip.recent-search-chip {
  position: relative !important;
  overflow: hidden !important;
}

.suggestion-chip.recent-search-chip .recent-chip-text {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: -webkit-mask-image 0.16s ease, mask-image 0.16s ease;
}

.search-hero>#search-suggestions-chips .suggestion-chip.recent-search-chip:hover .recent-chip-text,
#virtual-keyboard-window #search-suggestions-chips .suggestion-chip.recent-search-chip:hover .recent-chip-text,
.suggestion-chip.recent-search-chip:hover .recent-chip-text {
  -webkit-mask-image: linear-gradient(to right, transparent 0px, transparent 20px, #000 32px);
  mask-image: linear-gradient(to right, transparent 0px, transparent 20px, #000 32px);
}

.search-hero>#search-suggestions-chips .suggestion-chip.recent-search-chip .recent-chip-remove-btn,
#virtual-keyboard-window #search-suggestions-chips .suggestion-chip.recent-search-chip .recent-chip-remove-btn,
.suggestion-chip.recent-search-chip .recent-chip-remove-btn {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  width: 28px !important;
  padding: 0 4px 0 8px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: linear-gradient(90deg, rgba(226, 231, 250, 0.98) 65%, rgba(226, 231, 250, 0) 100%) !important;
  color: inherit !important;
  font-size: 0.7rem !important;
  opacity: 0 !important;
  pointer-events: none !important;
  cursor: pointer !important;
  z-index: 3 !important;
  transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease !important;
}

.suggestion-chip.recent-search-chip .recent-chip-remove-btn i {
  display: block !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

[data-theme="dark"] .search-hero>#search-suggestions-chips .suggestion-chip.recent-search-chip .recent-chip-remove-btn,
[data-theme="dark"] #virtual-keyboard-window #search-suggestions-chips .suggestion-chip.recent-search-chip .recent-chip-remove-btn,
[data-theme="dark"] .suggestion-chip.recent-search-chip .recent-chip-remove-btn,
body.dark-mode .suggestion-chip.recent-search-chip .recent-chip-remove-btn {
  background: linear-gradient(90deg, rgba(30, 34, 50, 0.98) 65%, rgba(30, 34, 50, 0) 100%) !important;
}

.search-hero>#search-suggestions-chips .suggestion-chip.recent-search-chip:hover .recent-chip-remove-btn,
#virtual-keyboard-window #search-suggestions-chips .suggestion-chip.recent-search-chip:hover .recent-chip-remove-btn,
.suggestion-chip.recent-search-chip:hover .recent-chip-remove-btn {
  opacity: 0.9 !important;
  pointer-events: auto !important;
}

.search-hero>#search-suggestions-chips .suggestion-chip.recent-search-chip .recent-chip-remove-btn:hover,
#virtual-keyboard-window #search-suggestions-chips .suggestion-chip.recent-search-chip .recent-chip-remove-btn:hover,
.suggestion-chip.recent-search-chip .recent-chip-remove-btn:hover {
  opacity: 1 !important;
  color: inherit !important;
  transform: scale(1.1) !important;
}

/* Mobile: X button always visible as an extended non-overlapping inline section */
@media (max-width: 768px) {
  .search-hero>#search-suggestions-chips .suggestion-chip.recent-search-chip,
  .suggestion-chip.recent-search-chip {
    padding: 0 10px 0 0 !important;
    gap: 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
  }

  .search-hero>#search-suggestions-chips .suggestion-chip.recent-search-chip .recent-chip-text,
  .search-hero>#search-suggestions-chips .suggestion-chip.recent-search-chip:hover .recent-chip-text,
  .suggestion-chip.recent-search-chip .recent-chip-text,
  .suggestion-chip.recent-search-chip:hover .recent-chip-text {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    padding-bottom: 1px !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .search-hero>#search-suggestions-chips .suggestion-chip.recent-search-chip .recent-chip-remove-btn,
  #virtual-keyboard-window #search-suggestions-chips .suggestion-chip.recent-search-chip .recent-chip-remove-btn,
  .suggestion-chip.recent-search-chip .recent-chip-remove-btn {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    width: 24px !important;
    min-width: 24px !important;
    height: 100% !important;
    min-height: 26px !important;
    padding: 0 6px 0 7px !important;
    margin: 0 2px 0 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(148, 163, 184, 0.14) !important;
    border-right: 1px solid rgba(148, 163, 184, 0.22) !important;
    border-radius: 9999px 0 0 9999px !important;
    color: inherit !important;
    font-size: 0.65rem !important;
    opacity: 0.9 !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  [data-theme="dark"] .search-hero>#search-suggestions-chips .suggestion-chip.recent-search-chip .recent-chip-remove-btn,
  [data-theme="dark"] .suggestion-chip.recent-search-chip .recent-chip-remove-btn,
  body.dark-mode .suggestion-chip.recent-search-chip .recent-chip-remove-btn {
    background: rgba(148, 163, 184, 0.14) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .search-hero>#search-suggestions-chips .suggestion-chip.recent-search-chip .recent-chip-remove-btn:active,
  .suggestion-chip.recent-search-chip .recent-chip-remove-btn:active {
    background: rgba(148, 163, 184, 0.22) !important;
    color: inherit !important;
    opacity: 1 !important;
    transform: scale(0.95) !important;
  }
}

/* =========================================================================
   COMPACT BOTTOM BAR LEGAL DISCLAIMER & TERMS MODAL
   ========================================================================= */

.app-bottom-bar .bottom-bar-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 100%;
}

.app-bottom-bar .songs-count-subtext {
  margin: 0 !important;
}

.app-bottom-bar .bottom-bar-dot {
  color: var(--text-3, #8b90a8);
  font-size: 0.65rem;
  opacity: 0.65;
  user-select: none;
  line-height: 1;
}

.app-bottom-bar .legal-footer-trigger {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: none;
  padding: 1px 4px;
  border-radius: var(--r-xs, 6px);
  font-family: 'Cairo', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--text-3, #64748b);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color 0.18s ease;
  line-height: 1.3;
  white-space: nowrap;
}

.app-bottom-bar .legal-footer-trigger:hover {
  color: var(--brand, #5b6cf5);
}

[data-theme="dark"] .app-bottom-bar .legal-footer-trigger,
body.dark-mode .app-bottom-bar .legal-footer-trigger {
  color: #9299be;
}

[data-theme="dark"] .app-bottom-bar .legal-footer-trigger:hover,
body.dark-mode .app-bottom-bar .legal-footer-trigger:hover {
  color: #a5b0ff;
  background: rgba(91, 108, 245, 0.16);
}

/* LEGAL MODAL STYLING (UNCLE DASHBOARD DESIGN SYSTEM) */
.legal-modal-card {
  max-width: 520px !important;
  width: 94% !important;
  max-height: 86vh !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: var(--r-xl, 24px) !important;
  background: var(--surface, #ffffff) !important;
  border: 1px solid var(--border-solid, #e4e6f0) !important;
  box-shadow: var(--shadow-xl, 0 32px 64px -12px rgba(0, 0, 0, .18)) !important;
  overflow: hidden !important;
  font-family: 'Cairo', sans-serif !important;
}

.legal-modal-header {
  padding: 14px 18px !important;
  background: var(--surface, #ffffff) !important;
  border-bottom: 1px solid var(--border-solid, #e4e6f0) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

.legal-header-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.legal-header-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--brand-bg, #eef0ff);
  color: var(--brand, #5b6cf5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.legal-modal-title {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 800;
  color: var(--text, #1a1d2e);
  line-height: 1.3;
}

.legal-modal-subtitle {
  margin: 1px 0 0 0;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-3, #8b90a8);
}

.legal-modal-body {
  padding: 16px 20px 20px 20px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  flex: 1 1 auto !important;
  font-size: 0.8rem !important;
  line-height: 1.65 !important;
  color: var(--text-2, #4b5068) !important;
}

.legal-modal-body p {
  margin: 0 !important;
}

.legal-modal-body strong {
  color: var(--text, #1a1d2e) !important;
  font-weight: 800 !important;
}

.legal-raw-divider {
  border: none;
  border-top: 1px solid var(--border-solid, #e4e6f0);
  margin: 4px 0;
}

.legal-raw-en {
  font-size: 0.74rem !important;
  line-height: 1.55 !important;
  text-align: left;
}

.legal-raw-copyright {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: var(--text-3, #8b90a8) !important;
  text-align: center !important;
  padding-top: 4px !important;
}

@media (max-width: 768px) {
  .app-bottom-bar .legal-footer-trigger {
    font-size: 0.6rem;
    padding: 1px 4px;
  }

  #modal-credits.modal-overlay {
    justify-content: flex-end !important;
    align-items: center !important;
    flex-direction: column !important;
    padding: 0 !important;
  }

  #modal-credits .legal-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 84vh !important;
    border-radius: 28px 28px 0 0 !important;
    animation: sheetUp 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
}

/* =========================================================================
   UNIFIED SLIDE EDITOR & NEW HYMN CREATOR (#slide-edit-bar & .se-item)
   ========================================================================= */

.recent-add-song-btn i {
  font-size: 0.92rem !important;
  width: auto !important;
  height: auto !important;
}

.recent-share-btn.recent-delete-selected-btn {
  color: var(--danger, #ef4444) !important;
  background: transparent !important;
}

.recent-share-btn.recent-delete-selected-btn i {
  font-size: 0.92rem !important;
  width: auto !important;
  height: auto !important;
}

.recent-share-btn.recent-delete-selected-btn:hover {
  background: var(--danger-bg, #fee2e2) !important;
  color: var(--danger-dark, #dc2626) !important;
  transform: scale(1.12);
}

.recent-share-btn.recent-delete-selected-btn:active {
  transform: scale(0.9);
}

/* UNIVERSAL DELETE CONFIRMATION MODAL */
.delete-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: overlayIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: 'Cairo', sans-serif;
}

.delete-confirm-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface, #ffffff);
  color: var(--text, #1a1d2e);
  border-radius: var(--r-xl, 24px);
  box-shadow: var(--shadow-xl, 0 32px 64px -12px rgba(0, 0, 0, 0.18));
  padding: 22px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
  animation: fadeScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.delete-confirm-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--danger-bg, #fee2e2);
  color: var(--danger, #ef4444);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin: 0 auto 2px;
  position: relative;
}

.delete-confirm-count-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 9999px;
  background: var(--danger, #ef4444);
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35);
}

.delete-confirm-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text, #1a1d2e);
  margin: 0;
}

.delete-confirm-msg {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-2, #4b5068);
  line-height: 1.6;
  margin: 0;
}

.delete-confirm-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.delete-confirm-btn {
  flex: 1;
  height: 40px;
  border: none;
  border-radius: var(--r-md, 14px);
  font-family: 'Cairo', sans-serif;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1), background 0.16s ease, box-shadow 0.16s ease;
}

.delete-confirm-btn.is-cancel {
  background: var(--surface-3, #eceef7);
  color: var(--text-2, #4b5068);
}

.delete-confirm-btn.is-cancel:hover {
  background: var(--surface-2, #f7f8fc);
  color: var(--text, #1a1d2e);
}

.delete-confirm-btn.is-delete {
  background: linear-gradient(135deg, var(--danger, #ef4444), var(--danger-dark, #dc2626));
  color: #ffffff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 8px 18px rgba(239, 68, 68, 0.22);
}

.delete-confirm-btn.is-delete:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.26) inset, 0 12px 24px rgba(239, 68, 68, 0.3);
}

.delete-confirm-btn:active {
  transform: scale(0.96);
}

.recent-item.is-new-song-naming {
  background: var(--surface, #ffffff) !important;
  box-shadow: inset 3px 0 0 var(--brand, #5b6cf5), 0 4px 14px rgba(91, 108, 245, 0.12) !important;
  animation: seItemIn 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.recent-title-inline-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Cairo', sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text, #1a1d2e);
  padding: 2px 4px;
  border-radius: 6px;
}

.recent-title-inline-input::placeholder {
  color: var(--text-3, #8b90a8);
  font-weight: 600;
}

/* Delete & Share buttons right beside .recent-edit-btn with exact same style */
.recent-item.has-edits .recent-edit-btn.recent-del-btn,
.recent-item.has-edits .recent-edit-btn.recent-share-item-btn {
  color: var(--se-text-3, #8b90a8);
}

.recent-item.is-editing .recent-edit-btn.recent-del-btn,
.recent-item.is-editing .recent-edit-btn.recent-share-item-btn {
  background: var(--se-surface-2, #f7f8fc);
  color: var(--se-text-2, #4b5068);
  box-shadow: none;
}

.recent-edit-btn.recent-del-btn:hover,
.recent-item.is-editing .recent-edit-btn.recent-del-btn:hover {
  background: var(--se-danger-bg, #fee2e2) !important;
  color: var(--se-danger, #ef4444) !important;
}

.recent-edit-btn.recent-share-item-btn:hover,
.recent-item.is-editing .recent-edit-btn.recent-share-item-btn:hover {
  background: var(--brand-bg, #eef0ff) !important;
  color: var(--brand, #5b6cf5) !important;
}

/* 3-dots button & outside info button on recent-item: match btn-share-active-playlist circle hover style */
.recent-item-end .recent-edit-btn.recent-info-item-btn,
.recent-item-end .recent-more-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border: none !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--text-3, #8b90a8) !important;
  line-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s cubic-bezier(.4, 0, .2, 1),
              color .15s cubic-bezier(.4, 0, .2, 1),
              transform .2s cubic-bezier(.16, 1, .3, 1) !important;
}

.recent-item-end .recent-edit-btn.recent-info-item-btn i,
.recent-item-end .recent-more-btn i {
  width: 19px !important;
  height: 19px !important;
  font-size: 1.05rem !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: auto !important;
  flex-shrink: 0 !important;
}

.recent-item-end .recent-edit-btn.recent-info-item-btn:hover,
.recent-item-end .recent-more-btn:hover,
.recent-item-end .recent-more-btn.is-open {
  background: var(--brand-bg, #eef0ff) !important;
  color: var(--brand, #5b6cf5) !important;
  transform: scale(1.12) !important;
}

.recent-item-end .recent-edit-btn.recent-info-item-btn:active,
.recent-item-end .recent-more-btn:active {
  transform: scale(.9) !important;
}

.recent-item-end .recent-edit-btn:not(.is-confirm-title):not(.recent-info-item-btn) {
  display: none !important;
}

@media (max-width: 768px) {
  .recent-item-end .recent-edit-btn.recent-info-item-btn,
  .recent-item-end .recent-more-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
  }
  .recent-item-end .recent-edit-btn.recent-info-item-btn i,
  .recent-item-end .recent-more-btn i {
    font-size: 1.1rem !important;
  }
}

[data-theme="dark"] .recent-item-end .recent-edit-btn.recent-info-item-btn:hover,
[data-theme="dark"] .recent-item-end .recent-more-btn:hover,
[data-theme="dark"] .recent-item-end .recent-more-btn.is-open,
body.dark-mode .recent-item-end .recent-edit-btn.recent-info-item-btn:hover,
body.dark-mode .recent-item-end .recent-more-btn:hover,
body.dark-mode .recent-item-end .recent-more-btn.is-open {
  background: var(--brand-bg, rgba(91, 108, 245, .15)) !important;
  color: var(--brand-light, #a5b0ff) !important;
}

.recent-item-more-menu {
  position: fixed;
  z-index: 999999;
  min-width: 164px;
  padding: 5px;
  border-radius: var(--r-md, 14px);
  background: var(--surface, #ffffff);
  border: 1px solid var(--border-solid, #e4e6f0);
  box-shadow: var(--shadow-lg, 0 20px 48px -8px rgba(0, 0, 0, .14));
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: 'Cairo', sans-serif;
  animation: fadeScaleIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.recent-more-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 11px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text, #1a1d2e);
  font-family: 'Cairo', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: right;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

.recent-more-menu-item i {
  width: 16px;
  text-align: center;
  color: var(--brand, #5b6cf5);
  font-size: 0.78rem;
}

.recent-more-menu-item:hover,
.recent-more-menu-item:active {
  background: var(--surface-2, #f7f8fc);
  color: var(--brand, #5b6cf5);
}

.recent-more-menu-item.is-danger {
  color: var(--danger, #ef4444);
}

.recent-more-menu-item.is-danger i {
  color: var(--danger, #ef4444);
}

.recent-more-menu-item.is-danger:hover,
.recent-more-menu-item.is-danger:active {
  background: var(--danger-bg, #fee2e2);
  color: var(--danger, #ef4444);
}

/* Compact local-only icon indicator for custom songs */
.recent-local-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 4px;
  border-radius: 6px;
  background: var(--warning-bg, #fef3c7);
  color: var(--warning-dark, #d97706);
  font-size: 0.62rem;
  flex-shrink: 0;
}

[data-theme="dark"] .recent-local-chip,
body.dark-mode .recent-local-chip {
  background: rgba(245, 158, 11, 0.16);
  color: #fbbf24;
}

/* Make #slide-edit-bar (.se-bar) compact and match .panel-bar style */
.presentation-lines-panel.is-slide-editing .panel-bar {
  overflow: visible !important;
  background: #f8fafc !important;
}

[data-theme="dark"] .presentation-lines-panel.is-slide-editing .panel-bar,
body.dark-mode .presentation-lines-panel.is-slide-editing .panel-bar {
  background: var(--surface-2, #1e2132) !important;
}

#slide-edit-bar.se-bar {
  gap: 8px !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

#slide-edit-bar .se-bar-start {
  gap: 6px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

#slide-edit-bar .se-bar-end {
  gap: 6px !important;
  flex: 0 0 auto !important;
}

#slide-edit-bar .se-btn.se-btn-primary {
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  gap: 5px !important;
  box-shadow: 0 2px 6px rgba(91, 108, 245, 0.2) !important;
}

#slide-edit-bar .se-title {
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  gap: 5px !important;
}

#slide-edit-bar .se-title>i {
  font-size: 0.7rem !important;
}

#slide-edit-bar .se-count {
  height: 20px !important;
  min-width: 20px !important;
  padding: 0 6px !important;
  font-size: 0.7rem !important;
}

#slide-edit-bar .se-select-btn {
  height: 32px !important;
  padding: 0 10px !important;
  border-radius: 12px !important;
  font-size: 0.78rem !important;
  gap: 5px !important;
  background: var(--se-surface, #ffffff) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

#slide-edit-bar .se-select-btn.has-selection,
[data-theme="dark"] #slide-edit-bar .se-select-btn.has-selection,
body.dark-mode #slide-edit-bar .se-select-btn.has-selection {
  background: var(--se-brand, var(--brand, #5b6cf5)) !important;
  color: #ffffff !important;
}

#slide-edit-bar .se-group.se-tools-group {
  height: 32px !important;
  padding: 2px !important;
  gap: 2px !important;
  border-radius: 12px !important;
  background: var(--se-surface, #ffffff) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  display: inline-flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

[data-theme="dark"] #slide-edit-bar .se-select-btn,
[data-theme="dark"] #slide-edit-bar .se-group.se-tools-group,
body.dark-mode #slide-edit-bar .se-select-btn,
body.dark-mode #slide-edit-bar .se-group.se-tools-group {
  background: var(--surface-3, #252840) !important;
}

#slide-edit-bar .se-group.se-tools-group .se-icon-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 9px !important;
  font-size: 0.8rem !important;
  background: transparent !important;
}

#slide-edit-bar .se-group.se-tools-group .se-icon-btn:hover:not(:disabled) {
  background: var(--se-surface-2, #f7f8fc) !important;
  color: var(--brand, #5b6cf5) !important;
}

#slide-edit-bar .se-group.se-tools-group .se-icon-btn.active {
  background: #f59e0b !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}

#slide-edit-bar .sa-ai-icon-btn {
  color: var(--brand, #5b6cf5) !important;
}

.sa-add-seg-wrap,
.sa-ai-paste-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.sa-add-seg-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  min-width: 145px;
  padding: 5px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border-solid, #e4e6f0);
  border-radius: 14px;
  box-shadow: var(--shadow-xl, 0 24px 48px -10px rgba(0, 0, 0, 0.2));
  z-index: 130;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: seBarIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.sa-add-seg-popover.hidden {
  display: none !important;
}

/* AI Smart Paste Floating Popover */
.sa-ai-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: min(340px, 86vw);
  padding: 12px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border-solid, #e4e6f0);
  border-radius: 18px;
  box-shadow: var(--shadow-xl, 0 32px 64px -12px rgba(0, 0, 0, 0.22));
  z-index: 130;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: seBarIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.sa-ai-popover.hidden {
  display: none !important;
}

.sa-ai-pop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text, #1a1d2e);
}

.sa-ai-pop-header span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand, #5b6cf5);
}

.sa-ai-pop-close {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: var(--surface-3, #eceef7);
  color: var(--text-2, #4b5068);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  cursor: pointer;
}

.sa-ai-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1.5px solid var(--border-solid, #e4e6f0);
  background: var(--surface-2, #f7f8fc);
  color: var(--text, #1a1d2e);
  font-family: 'Cairo', sans-serif;
  font-size: 0.8rem;
  line-height: 1.55;
  resize: vertical;
  min-height: 130px;
  outline: none;
}

.sa-ai-textarea:focus {
  border-color: var(--brand, #5b6cf5);
  background: var(--surface, #ffffff);
  box-shadow: 0 0 0 3px var(--brand-glow, rgba(91, 108, 245, 0.16));
}

.sa-ai-pop-footer {
  display: flex;
  justify-content: flex-end;
}

.sa-ai-submit-btn {
  width: 100%;
  justify-content: center;
}

/* Simple frameless, shadowless + and duplicate icons at top-left corner of .line-item.se-item */
.line-item.se-item {
  min-height: 76px;
  padding-left: 2.15rem !important;
}

.sa-top-left-add-btn,
.sa-top-left-dup-btn {
  position: absolute;
  left: 6px;
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--text-3, #8b90a8);
  font-size: 0.74rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 12;
  opacity: 0.68;
  transition: color 0.15s ease, opacity 0.15s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.sa-top-left-add-btn {
  top: 5px;
}

.sa-top-left-dup-btn {
  top: 28px;
  font-size: 0.7rem;
}

.sa-top-left-add-btn:hover,
.sa-top-left-dup-btn:hover {
  color: var(--brand, #5b6cf5);
  opacity: 1;
  transform: scale(1.14);
  background: transparent !important;
  box-shadow: none !important;
}

.sa-top-left-add-btn:active,
.sa-top-left-dup-btn:active {
  transform: scale(0.92);
}

/* Smaller .se-line-text and matching size for repeat chip, line duplicate, and line delete (X) */
.se-line-text {
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
  padding: 2px 7px !important;
}

/* Empty placeholder inside contenteditable line */
.se-line-text[contenteditable="true"]:empty::before {
  content: attr(data-placeholder);
  color: var(--text-3, #94a3b8);
  opacity: 0.65;
  pointer-events: none;
}

/* Compact repetition chip, duplicate button & delete X button matching the exact same size */
.sa-rep-chip,
.se-line-dup,
.se-line-del {
  flex-shrink: 0;
  height: 20px !important;
  min-width: 20px !important;
  padding: 0 5px !important;
  border-radius: 6px !important;
  border: 1px solid var(--border-solid, #e4e6f0) !important;
  background: var(--surface, #ffffff) !important;
  color: var(--text-3, #8b90a8) !important;
  font-family: 'Cairo', sans-serif;
  font-size: 0.64rem !important;
  font-weight: 800;
  line-height: 1;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  direction: ltr;
  opacity: 0.9 !important;
  transition: all 0.15s ease;
}

.se-line-dup,
.se-line-del {
  width: 20px !important;
  padding: 0 !important;
  font-size: 0.6rem !important;
}

.sa-rep-chip:hover,
.se-line-dup:hover {
  border-color: var(--brand, #5b6cf5) !important;
  color: var(--brand, #5b6cf5) !important;
  background: var(--brand-bg, #eef0ff) !important;
  opacity: 1 !important;
}

.se-line-del:hover {
  border-color: var(--se-danger, #ef4444) !important;
  color: var(--se-danger, #ef4444) !important;
  background: var(--se-danger-bg, #fee2e2) !important;
  opacity: 1 !important;
}

.sa-rep-chip.is-active {
  background: var(--brand-bg, #eef0ff) !important;
  border-color: var(--brand, #5b6cf5) !important;
  color: var(--brand, #5b6cf5) !important;
  opacity: 1 !important;
}

/* Remove double horizontal padding inside slide edit cards */
.line-item.se-item .slide-lines-body {
  padding-left: 0 !important;
  padding-right: 0 !important;
  gap: 4px !important;
}

/* Mobile compact layout for .se-line-text & AI Smart Paste popover position fix */
@media (max-width: 768px) {
  .line-item.se-item {
    min-height: 54px !important;
    padding: 0.4rem 2.2rem 0.45rem 1.85rem !important;
  }

  .line-item.se-item .slide-lines-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 3px !important;
  }

  .se-line {
    gap: 4px !important;
  }

  .se-line-text {
    font-size: 0.74rem !important;
    line-height: 1.32 !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
  }

  .sa-rep-chip,
  .se-line-dup,
  .se-line-del {
    height: 18px !important;
    min-width: 18px !important;
    font-size: 0.58rem !important;
    border-radius: 5px !important;
  }

  .se-line-dup,
  .se-line-del {
    width: 18px !important;
  }

  .sa-ai-popover {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    margin: 0 auto !important;
    z-index: 99999 !important;
  }
}

/* Hide toast completely when presentation overlay is active */
body.has-active-overlay #app-toast,
body:has(#obs-presentation-overlay:not(.hidden)) #app-toast {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Persistent Side Notification for Hotspot Device Connection Requests */
.hotspot-auth-side-notif {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 1000050;
  width: min(350px, calc(100vw - 24px));
  pointer-events: none;
  font-family: 'Cairo', sans-serif;
}

.hotspot-auth-side-notif.hidden {
  display: none !important;
}

.hotspot-auth-notif-card {
  pointer-events: auto;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border-solid, #e4e6f0);
  border-radius: var(--r-xl, 20px);
  box-shadow: var(--shadow-xl, 0 24px 48px -12px rgba(0, 0, 0, 0.22));
  overflow: hidden;
  animation: hotspotSideNotifIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes hotspotSideNotifIn {
  from {
    opacity: 0;
    transform: translateX(-24px) translateY(8px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
}

.hotspot-auth-notif-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-solid, #e4e6f0);
  background: var(--surface, #ffffff);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hotspot-auth-notif-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.hotspot-auth-notif-badge {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--brand-bg, #eef0ff);
  color: var(--brand, #5b6cf5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.hotspot-auth-notif-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text, #1a1d2e);
  line-height: 1.25;
}

.hotspot-auth-notif-subtitle {
  font-size: 0.72rem;
  color: var(--text-3, #8b90a8);
  line-height: 1.3;
}

.hotspot-auth-notif-close {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background: var(--surface-3, #eceef7);
  color: var(--text-2, #4b5068);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.18s ease;
}

.hotspot-auth-notif-close:hover {
  background: var(--brand-bg, #eef0ff);
  color: var(--brand, #5b6cf5);
  transform: scale(1.08);
}

.hotspot-auth-notif-body {
  padding: 12px 14px 14px;
}

.hotspot-auth-notif-body .auth-device-details {
  background: var(--surface-2, #f7f8fc);
  border: 1px solid var(--border-solid, #e4e6f0);
  border-radius: var(--r-md, 14px);
  padding: 10px 12px;
  margin-bottom: 10px;
}

.hotspot-auth-notif-body .auth-device-icon-circle {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.12);
  color: var(--success, #10b981);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}

.hotspot-auth-notif-body .auth-device-name {
  font-weight: 800;
  color: var(--text, #1a1d2e);
  font-size: 0.84rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hotspot-auth-notif-body .auth-device-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 0.72rem;
  color: var(--text-3, #8b90a8);
  margin-top: 2px;
  flex-wrap: wrap;
}

.hotspot-auth-notif-desc {
  font-size: 0.76rem;
  color: var(--text-2, #4b5068);
  margin: 0 0 12px 0;
  line-height: 1.45;
}

.hotspot-auth-notif-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.hotspot-auth-btn-reject {
  padding: 7px 12px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: var(--danger, #ef4444) !important;
  border: 1px solid #fca5a5 !important;
  background: var(--surface, #ffffff) !important;
  border-radius: var(--r-md, 12px) !important;
  cursor: pointer;
  justify-content: center;
}

.hotspot-auth-btn-accept {
  padding: 7px 12px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  border-radius: var(--r-md, 12px) !important;
  cursor: pointer;
  justify-content: center;
}

@media (max-width: 768px) {
  .hotspot-auth-side-notif {
    left: 12px;
    right: 12px;
    bottom: 14px;
    width: auto;
  }
}

/* =========================================================================
   SIMPLIFIED HOTSPOT & AVAILABLE DEVICES LAYOUT + DEVICE CHOICE MODAL
   ========================================================================= */
.hotspot-devices-unified {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hotspot-connected-subheader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-2, #4b5068);
  padding: 2px 2px 0;
}

.hotspot-connected-subheader i {
  color: var(--brand, #5b6cf5);
  margin-left: 4px;
}

.hotspot-devices-count-pill {
  font-size: 0.66rem;
  background: var(--brand-bg, #eef0ff);
  color: var(--brand, #5b6cf5);
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 800;
}

.hotspot-devices-list-compact {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.available-devices-section {
  margin-top: 0;
  padding: 8px;
  border-top: none;
  border-radius: 14px;
  background: var(--surface-2, #f7f8fc);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: 'Cairo', sans-serif;
}

[data-theme="dark"] .available-devices-section,
body.dark-mode .available-devices-section {
  background: var(--surface-2, #1e2132);
}

.avail-device-choice-modal {
  max-width: 420px;
}

.avail-choice-subtitle {
  margin: 0 0 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-2, #4b5068);
}

.avail-choice-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.avail-choice-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--r-lg, 18px);
  border: 1px solid var(--border-solid, #e4e6f0);
  background: var(--surface-2, #f7f8fc);
  color: var(--text, #1a1d2e);
  font-family: 'Cairo', sans-serif;
  text-align: right;
  cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1), background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.avail-choice-card:hover {
  background: var(--surface, #ffffff);
  border-color: var(--brand, #5b6cf5);
  box-shadow: var(--shadow-sm, 0 2px 8px -2px rgba(0, 0, 0, .07));
  transform: translateY(-1px);
}

.avail-choice-card:active {
  transform: scale(0.98);
}

.avail-choice-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  background: var(--brand-bg, #eef0ff);
  color: var(--brand, #5b6cf5);
}

.avail-choice-card.is-grant .avail-choice-icon {
  background: rgba(16, 185, 129, 0.14);
  color: #059669;
}

.avail-choice-card.is-disconnect .avail-choice-icon {
  background: var(--danger-bg, #fee2e2);
  color: var(--danger, #ef4444);
}

.avail-choice-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.avail-choice-text strong {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text, #1a1d2e);
}

.avail-choice-text small {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-3, #8b90a8);
  line-height: 1.35;
}

.avail-choice-arrow {
  font-size: 0.78rem;
  color: var(--text-3, #8b90a8);
  flex-shrink: 0;
}

.available-devices-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 2px;
}

.available-devices-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--text-2, #4b5068);
}

.available-devices-title i {
  color: var(--brand, #5b6cf5);
  font-size: 0.78rem;
}

.btn-scan-available-devices {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  border: none;
  background: var(--surface, #ffffff);
  color: var(--brand, #5b6cf5);
  font-family: 'Cairo', sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 0.14s ease, background 0.16s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.btn-scan-available-devices:hover {
  background: var(--brand-bg, #eef0ff);
}

.btn-scan-available-devices:active {
  transform: scale(0.96);
}

.available-devices-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 170px;
  overflow-y: auto;
}

.available-devices-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface, #ffffff);
  border: none;
  color: var(--text-3, #8b90a8);
  font-size: 0.7rem;
  font-weight: 600;
  text-align: center;
}

.available-device-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 11px;
  background: var(--surface, #ffffff);
  border: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  cursor: pointer;
  transition: transform 0.14s ease, background 0.16s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

[data-theme="dark"] .btn-scan-available-devices,
body.dark-mode .btn-scan-available-devices,
[data-theme="dark"] .available-devices-empty,
body.dark-mode .available-devices-empty,
[data-theme="dark"] .available-device-card,
body.dark-mode .available-device-card {
  background: var(--surface-3, #252840);
}

.available-device-card:hover {
  background: var(--brand-bg, #eef0ff);
}

.available-device-card:active {
  transform: scale(0.98);
}

.available-device-card.is-connected {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.32);
}

.avail-dev-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.avail-dev-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--brand-bg, #eef0ff);
  color: var(--brand, #5b6cf5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  flex-shrink: 0;
}

.avail-dev-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.avail-dev-title-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.avail-dev-name {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--text, #1a1d2e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.avail-dev-net-badge {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  flex-shrink: 0;
}

.avail-dev-net-badge.same-net {
  background: rgba(16, 185, 129, 0.14);
  color: #059669;
}

.avail-dev-net-badge.remote-net {
  background: var(--brand-bg, #eef0ff);
  color: var(--brand, #5b6cf5);
}

.avail-dev-sub {
  font-size: 0.67rem;
  color: var(--text-3, #8b90a8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-request-device-connect {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, var(--brand, #5b6cf5), var(--brand-dark, #4354e8));
  color: #ffffff;
  font-family: 'Cairo', sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(91, 108, 245, 0.22);
}

.btn-request-device-connect.connected {
  background: var(--success, #10b981);
  box-shadow: none;
}

/* Native 0ms touch response on mobile slides and controls */
.line-item,
.btn,
.icon-menu-btn,
.slide-line-row {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* =========================================================================
   NEWDATA ENRICHMENT UI:
   1. INLINE CHORDS PREVIEW & FULLSCREEN LINES PANEL
   2. 3-DOTS PANEL-BAR OVERFLOW MENU
   3. SONG INFO & STREAMING LINKS MODAL
   4. INTELLIGENT SEARCH EXPANDABLE FILTER DRAWER (TAGS & ARTISTS)
   ========================================================================= */

/* --- 1. Chords Preview Button, Inline Chords & Fullscreen Panel --- */
#btn-toggle-chords-preview.active {
  background: var(--coupon-bg, #ede9fe) !important;
  color: var(--coupon-dark, #7c3aed) !important;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.22);
}

#btn-toggle-chords-preview.is-disabled-no-chords {
  opacity: 0.38 !important;
  color: var(--text-3, #8b90a8) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Prevent #current-line-counter from ever wrapping into multiple lines on tight panels */
.presentation-lines-panel .panel-bar-start,
.presentation-lines-panel .panel-bar-end {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.presentation-lines-panel .panel-bar-start,
.presentation-lines-panel .panel-bar-start.panel-controls.dropdown-wrapper {
  gap: 2px !important;
}

.panel-nav-cluster {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0px !important;
  flex-shrink: 0 !important;
}

#current-line-counter,
.presentation-lines-panel .counter-text {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: max-content !important;
  line-height: 1 !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  padding: 0 2px !important;
  letter-spacing: -0.02em !important;
}

#btn-lines-panel-fullscreen,
#btn-presenter-fullscreen,
#btn-prev-line,
#btn-next-line {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #64748b !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  font-size: 0.82rem !important;
  transition: color 0.18s ease, background-color 0.18s ease !important;
  flex-shrink: 0 !important;
}

#btn-lines-panel-fullscreen:hover,
#btn-presenter-fullscreen:hover,
#btn-prev-line:hover,
#btn-next-line:hover {
  background: rgba(148, 163, 184, 0.18) !important;
  color: #334155 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 50% !important;
  transform: none !important;
}

#btn-lines-panel-fullscreen.active,
#btn-presenter-fullscreen.active {
  background: rgba(37, 99, 235, 0.14) !important;
  color: #2563eb !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 50% !important;
}

#btn-lines-panel-fullscreen.active i,
#btn-presenter-fullscreen.active i {
  color: #2563eb !important;
}

[data-theme="dark"] #btn-lines-panel-fullscreen,
body.dark-mode #btn-lines-panel-fullscreen,
[data-theme="dark"] #btn-presenter-fullscreen,
body.dark-mode #btn-presenter-fullscreen,
[data-theme="dark"] #btn-prev-line,
body.dark-mode #btn-prev-line,
[data-theme="dark"] #btn-next-line,
body.dark-mode #btn-next-line {
  color: var(--text-2, #cbd5e1) !important;
  background: transparent !important;
}

[data-theme="dark"] #btn-lines-panel-fullscreen:hover,
body.dark-mode #btn-lines-panel-fullscreen:hover,
[data-theme="dark"] #btn-presenter-fullscreen:hover,
body.dark-mode #btn-presenter-fullscreen:hover,
[data-theme="dark"] #btn-prev-line:hover,
body.dark-mode #btn-prev-line:hover,
[data-theme="dark"] #btn-next-line:hover,
body.dark-mode #btn-next-line:hover {
  background: var(--surface-2, #202534) !important;
  color: #ffffff !important;
}

[data-theme="dark"] #btn-lines-panel-fullscreen.active,
body.dark-mode #btn-lines-panel-fullscreen.active,
[data-theme="dark"] #btn-presenter-fullscreen.active,
body.dark-mode #btn-presenter-fullscreen.active {
  background: var(--brand, #6366f1) !important;
  color: #ffffff !important;
}

[data-theme="dark"] #btn-lines-panel-fullscreen.active i,
body.dark-mode #btn-lines-panel-fullscreen.active i,
[data-theme="dark"] #btn-presenter-fullscreen.active i,
body.dark-mode #btn-presenter-fullscreen.active i {
  color: #ffffff !important;
}

/* Fullscreen mode for half-panel presentation-lines-panel */
.presentation-lines-panel.is-lines-panel-fullscreen {
  position: fixed !important;
  inset: 12px !important;
  z-index: 98000 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: var(--r-xl, 24px) !important;
  background: var(--surface, #ffffff) !important;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.28), 0 0 0 1px var(--border-solid, #e4e6f0) !important;
  animation: fadeScaleIn 0.25s var(--spring, cubic-bezier(.16, 1, .3, 1));
  display: flex !important;
  flex-direction: column !important;
}

.presentation-lines-panel.is-lines-panel-fullscreen #presentation-lines-container {
  direction: rtl !important;
}

@media (min-width: 900px) {
  .presentation-lines-panel.is-lines-panel-fullscreen #presentation-lines-container {
    display: grid !important;
    direction: rtl !important;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)) !important;
    gap: 10px !important;
    align-content: start !important;
    padding: 14px !important;
  }

  .presentation-lines-panel.is-lines-panel-fullscreen #presentation-lines-container .line-item {
    margin-bottom: 0 !important;
    height: 100%;
    direction: rtl !important;
  }
}

@media (max-width: 768px) {
  .presentation-lines-panel.is-lines-panel-fullscreen {
    inset: 0 !important;
    border-radius: 0 !important;
  }
}

/* Plain-text inline chords above each word inside .line-item (no pill effects, no active-slide color changes) */
.slide-line-row.has-inline-chords {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
  direction: rtl;
  row-gap: 4px;
  column-gap: 0.28em;
  padding-top: 2px;
  padding-bottom: 1px;
  line-height: 1.4;
}

.chord-phrase-seg {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  vertical-align: bottom;
  min-width: 0;
}

.chord-phrase-seg.chord-only-seg {
  margin-inline-end: 4px;
}

.chord-token-slot {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 13px;
  line-height: 1;
  direction: ltr;
  unicode-bidi: isolate;
  margin-bottom: 1px;
  user-select: none;
}

.chord-token-slot:empty {
  display: none;
}

.chord-token-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  margin: 0 1px;
  border: none !important;
  border-radius: var(--r-full, 9999px) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: 'Cairo', sans-serif;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--text-3, #8b90a8) !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s cubic-bezier(.4, 0, .2, 1),
              color .15s cubic-bezier(.4, 0, .2, 1),
              transform .2s cubic-bezier(.16, 1, .3, 1);
}

.chord-token-badge:hover {
  background: var(--brand-bg, #eef0ff) !important;
  color: var(--brand, #5b6cf5) !important;
  transform: none !important;
  box-shadow: none !important;
}

.chord-token-badge:active {
  transform: none !important;
}

.line-item.active .chord-token-badge {
  color: var(--brand-dark, #4354e8) !important;
  font-size: 0.71rem;
  font-weight: 900;
}

.line-item.active .chord-token-badge:hover {
  background: var(--brand-bg, #eef0ff) !important;
  color: var(--brand, #5b6cf5) !important;
}

[data-theme="dark"] .chord-token-badge,
body.dark-mode .chord-token-badge {
  color: var(--text-3, #64748b) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

[data-theme="dark"] .chord-token-badge:hover,
body.dark-mode .chord-token-badge:hover {
  background: var(--brand-bg, rgba(91, 108, 245, .18)) !important;
  color: var(--brand-light, #a5b0ff) !important;
}

[data-theme="dark"] .line-item.active .chord-token-badge,
body.dark-mode .line-item.active .chord-token-badge {
  color: #818cf8 !important;
  font-weight: 900;
}

.chord-lyric-seg {
  display: inline;
  white-space: nowrap;
  line-height: 1.38;
}

/* Compact bold smaller slightly faded #94a3b8 chords in Presenter & Overlay Preview */
.obs-line-row.has-obs-chords {
  margin-top: 0.2em !important;
  margin-bottom: 0.1em !important;
  padding-top: 0.08em !important;
}

.obs-chord-word-wrap {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  vertical-align: bottom !important;
  line-height: 1.25 !important;
  margin: 0 0.04em !important;
  padding: 0 !important;
}

.obs-chord-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.16em !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
  color: #94a3b8 !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 0.22em !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  margin-bottom: 0.45em !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important;
  -webkit-text-stroke: 0px transparent !important;
  -webkit-text-stroke-width: 0px !important;
  text-stroke: 0px transparent !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  user-select: none !important;
  opacity: 0.72 !important;
}

.obs-chord-badge * {
  -webkit-text-stroke: 0px transparent !important;
  -webkit-text-stroke-width: 0px !important;
  text-stroke: 0px transparent !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important;
  color: inherit !important;
}

.obs-chord-lyric {
  display: inline-block !important;
  line-height: 1.28 !important;
  padding-top: 0.04em !important;
  white-space: nowrap !important;
}

/* Chords compact transpose controller inside .presentation-modes-group */
.chords-transpose-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--surface-2, #f7f8fc);
  border: 1px solid var(--border-solid, #e4e6f0);
  border-radius: var(--r-full, 9999px);
  padding: 2px 4px;
  margin-right: 4px;
  margin-left: 2px;
  box-shadow: var(--shadow-sm, 0 2px 8px -2px rgba(0, 0, 0, .07));
  direction: ltr;
  font-family: 'Cairo', sans-serif;
  max-width: 170px;
  opacity: 1;
  transform: scale(1);
  transform-origin: center right;
  vertical-align: middle;
  transition: max-width 0.28s var(--spring, cubic-bezier(.16, 1, .3, 1)),
              opacity 0.22s var(--ease, cubic-bezier(.4, 0, .2, 1)),
              transform 0.28s var(--spring, cubic-bezier(.16, 1, .3, 1)),
              margin 0.22s var(--ease, cubic-bezier(.4, 0, .2, 1)),
              padding 0.22s var(--ease, cubic-bezier(.4, 0, .2, 1));
}

.chords-transpose-ctrl.hidden {
  display: inline-flex !important;
  max-width: 0 !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-width: 0 !important;
  pointer-events: none !important;
  transform: scale(0.82) !important;
}

[data-theme="dark"] .chords-transpose-ctrl {
  background: var(--surface-2, #1e2132);
  border-color: var(--border-solid, #2a2d42);
}

.chords-transpose-btn {
  width: 22px;
  height: 22px;
  border-radius: var(--r-full, 9999px);
  border: none;
  background: var(--surface-3, #eceef7);
  color: var(--text, #1a1d2e);
  font-family: 'Cairo', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s var(--spring, cubic-bezier(.16, 1, .3, 1));
}

.chords-transpose-btn:hover {
  background: var(--brand, #5b6cf5);
  color: #ffffff;
  transform: scale(1.12);
}

.chords-transpose-btn:active {
  transform: scale(0.92);
}

[data-theme="dark"] .chords-transpose-btn {
  background: var(--surface-3, #252840);
  color: var(--text, #e8eaf6);
}

[data-theme="dark"] .chords-transpose-btn:hover {
  background: var(--brand, #5b6cf5);
  color: #ffffff;
}

.chords-transpose-badge {
  background: transparent;
  border: none;
  font-family: 'Cairo', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-2, #4b5068);
  padding: 1px 7px;
  min-width: 28px;
  height: 22px;
  border-radius: var(--r-full, 9999px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s var(--spring, cubic-bezier(.16, 1, .3, 1)),
              color 0.2s var(--spring, cubic-bezier(.16, 1, .3, 1)),
              transform 0.2s var(--spring, cubic-bezier(.16, 1, .3, 1)),
              box-shadow 0.2s var(--spring, cubic-bezier(.16, 1, .3, 1));
  white-space: nowrap;
}

.chords-transpose-badge:hover {
  background: var(--surface-3, #eceef7);
  color: var(--brand, #5b6cf5);
}

[data-theme="dark"] .chords-transpose-badge {
  color: var(--text-2, #9299be);
}

[data-theme="dark"] .chords-transpose-badge:hover {
  background: var(--surface-3, #252840);
  color: var(--brand-light, #a5b0ff);
}

.chords-transpose-badge.is-transposed {
  background: var(--coupon-grad, linear-gradient(135deg, #8b5cf6, #7c3aed));
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35);
}

.chords-transpose-badge.is-transposed:hover {
  opacity: 0.95;
  transform: scale(1.06);
}

@keyframes transposePulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.chords-transpose-badge.pulse-anim {
  animation: transposePulse 0.22s var(--spring, cubic-bezier(.16, 1, .3, 1));
}

/* Backward compatibility for floating toolbar if dynamically used */
.chords-floating-toolbar {
  position: absolute;
  bottom: 10px;
  left: 12px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-solid, #e4e6f0);
  box-shadow: var(--shadow-sm, 0 2px 8px -2px rgba(0, 0, 0, .07));
  direction: ltr;
  font-family: 'Cairo', sans-serif;
}

/* --- 2. Responsive 3-Dots Overflow Menu in .panel-bar --- */
.panel-modes-more-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.presentation-modes-group .is-always-in-more,
.presentation-modes-group .is-overflow-hidden,
.presentation-modes-group.is-overflow-compact .mode-overflow-candidate,
.panel-more-menu-item.hidden {
  display: none !important;
}

.presentation-modes-group.is-overflow-compact .panel-modes-more-wrap {
  display: inline-flex !important;
}

@media (max-width: 768px) {
  .presentation-lines-panel .panel-bar {
    padding: 0 0.45rem !important;
    gap: 4px !important;
  }

  .presentation-lines-panel .panel-bar-start,
  .presentation-lines-panel .panel-bar-start.panel-controls.dropdown-wrapper {
    gap: 1px !important;
  }

  .presentation-lines-panel .panel-nav-cluster {
    gap: 0px !important;
  }

  .presentation-lines-panel .panel-bar-end {
    gap: 2px !important;
  }

  .presentation-lines-panel .presentation-modes-group {
    gap: 1px !important;
  }

  #btn-lines-panel-fullscreen,
  #btn-presenter-fullscreen,
  #btn-prev-line,
  #btn-next-line,
  .presentation-lines-panel .mode-group-btn {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    font-size: 0.76rem !important;
  }

  #current-line-counter,
  .presentation-lines-panel .counter-text {
    font-size: 0.74rem !important;
    padding: 0 1px !important;
    letter-spacing: -0.02em !important;
  }

  .presentation-lines-panel .chords-transpose-ctrl {
    padding: 1px 3px !important;
    gap: 2px !important;
    margin-right: 2px !important;
    margin-left: 1px !important;
  }

  .presentation-lines-panel .chords-transpose-btn {
    width: 20px !important;
    height: 20px !important;
    font-size: 0.66rem !important;
  }

  .presentation-lines-panel .chords-transpose-badge {
    height: 20px !important;
    min-width: 22px !important;
    padding: 0 4px !important;
    font-size: 0.68rem !important;
  }
}

.panel-modes-more-btn {
  position: relative;
}

.panel-modes-more-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand, #5b6cf5);
  box-shadow: 0 0 0 1.5px #ffffff;
}

.panel-modes-more-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 9999;
  min-width: 195px;
  padding: 6px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border-solid, #e4e6f0);
  border-radius: var(--r-lg, 18px);
  box-shadow: var(--shadow-xl, 0 24px 48px -12px rgba(0, 0, 0, .18));
  display: flex;
  flex-direction: column;
  gap: 2px;
  direction: ltr !important;
  animation: fadeScaleIn 0.2s var(--spring, cubic-bezier(.16, 1, .3, 1));
}

.panel-more-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--text, #1a1d2e);
  font-family: 'Cairo', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  direction: ltr !important;
  text-align: left !important;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.panel-more-menu-item:hover {
  background: var(--surface-2, #f7f8fc);
  color: var(--brand, #5b6cf5);
}

.panel-more-menu-item.is-active {
  background: var(--brand-bg, #eef0ff);
  color: var(--brand, #5b6cf5);
}

.panel-more-item-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--surface-3, #eceef7);
  color: var(--text-2, #4b5068);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  flex-shrink: 0;
}

.panel-more-menu-item.is-active .panel-more-item-icon {
  background: var(--brand, #5b6cf5);
  color: #ffffff;
}

.panel-more-item-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
}

.panel-more-item-state {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-3, #eceef7);
  color: var(--text-3, #8b90a8);
}

.panel-more-menu-item.is-active .panel-more-item-state {
  background: rgba(91, 108, 245, 0.16);
  color: var(--brand-dark, #4354e8);
}

/* --- 3. Song Info & Streaming Links Modal (Uncle Dashboard Design System) --- */
#modal-song-info.song-info-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  height: 100dvh !important;
  z-index: 999999 !important;
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 16px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  animation: overlayIn 0.2s var(--ease, cubic-bezier(.4, 0, .2, 1));
}

#modal-song-info.song-info-modal-overlay.hidden {
  display: none !important;
}

#modal-song-info .song-info-modal-card {
  width: 94% !important;
  max-width: 560px !important;
  min-height: 420px !important;
  height: auto !important;
  max-height: min(86dvh, calc(100dvh - 32px)) !important;
  margin: auto !important;
  background: var(--surface, #ffffff) !important;
  border: 1px solid var(--border-solid, #e4e6f0) !important;
  border-radius: var(--r-xl, 24px) !important;
  box-shadow: var(--shadow-xl, 0 32px 64px -12px rgba(0, 0, 0, .18)) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  animation: fadeScaleIn 0.25s var(--spring, cubic-bezier(.16, 1, .3, 1)) !important;
  font-family: 'Cairo', sans-serif !important;
}

.song-info-modal-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100% !important;
  box-sizing: border-box !important;
  background: var(--surface, #ffffff) !important;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border-solid, #e4e6f0);
}

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

.song-info-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.song-info-modal-title {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--text, #1a1d2e);
  line-height: 1.35;
}

.song-info-modal-subtitle {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-3, #8b90a8);
}

.song-info-modal-body {
  padding: 16px 20px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100% !important;
  box-sizing: border-box !important;
  gap: 16px;
}

.song-info-modal-body>* {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Musical stats grid (Scale, Maqam, BPM, Time Sig) - Simple modern minimal look */
.song-info-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 8px;
}

.song-info-stat-box {
  background: var(--surface-2, #f7f8fc);
  border: none;
  border-radius: 12px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.song-info-stat-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-3, #8b90a8);
}

.song-info-stat-value {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text, #1a1d2e);
  direction: ltr;
  text-align: right;
}

/* Streaming & App Links row (Simple clean app icons) */
.song-info-section {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.song-info-section-title {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--text-3, #8b90a8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.song-info-links-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.song-app-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 calc(50% - 6px);
  min-width: 120px;
  box-sizing: border-box;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--surface-2, #f7f8fc);
  border: none;
  color: var(--text, #1a1d2e);
  text-decoration: none;
  font-family: 'Cairo', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  transition: background 0.16s ease, transform 0.16s ease;
}

.song-app-icon-btn i,
.song-app-icon-btn svg {
  font-size: 1.1rem;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.song-app-icon-btn:hover {
  transform: translateY(-1px);
  background: var(--surface-3, #eceef7);
}

.song-app-icon-btn.app-youtube i {
  color: #ef4444;
}

.song-app-icon-btn.app-spotify i {
  color: #10b981;
}

.song-app-icon-btn.app-apple i {
  color: #f43f5e;
}

.song-app-icon-btn.app-anghami i,
.song-app-icon-btn.app-anghami svg {
  color: #8b5cf6;
}

.song-app-icon-btn.app-soundcloud i {
  color: #f97316;
}

/* Chords list inside Info Modal */
.song-info-chords-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  direction: rtl;
  justify-content: flex-start;
  width: 100%;
}

.song-info-chord-pill {
  direction: ltr;
  unicode-bidi: isolate;
  padding: 3px 9px;
  border-radius: 8px;
  background: var(--surface-2, #f7f8fc);
  color: var(--text, #1a1d2e);
  font-size: 0.76rem;
  font-weight: 800;
  border: none;
}

/* Authors, Tags & Bible chips inside Info Modal */
.song-info-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.song-info-author-chip,
.song-info-tag-chip,
.song-info-bible-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-family: 'Cairo', sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  background: var(--surface-2, #f7f8fc);
  border: none;
  color: var(--text, #1a1d2e);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.song-info-author-chip:has(.song-info-author-avatar) {
  padding-inline-start: 4px;
}

.song-info-author-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.song-info-author-chip:hover,
.song-info-tag-chip:hover,
.song-info-bible-chip:hover {
  background: var(--brand-bg, #eef0ff);
  color: var(--brand, #5b6cf5);
}

.song-info-role-badge {
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--text-3, #8b90a8);
}

@media (max-width: 768px) {
  #modal-song-info.song-info-modal-overlay:not(.hidden) {
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  #modal-song-info .song-info-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin: auto 0 0 0 !important;
    min-height: 68dvh !important;
    height: auto !important;
    max-height: 88dvh !important;
    border-radius: 28px 28px 0 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-sizing: border-box !important;
    box-shadow: 0 -12px 48px rgba(15, 23, 42, 0.3) !important;
    animation: sheetUp 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .song-info-modal-header {
    padding: 22px 20px 12px !important;
  }

  .song-info-modal-body {
    padding: 14px 18px calc(22px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .song-info-modal-header::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4.5px;
    background: var(--border-solid, #cbd5e1);
    border-radius: 999px;
  }
}

/* --- 4. Intelligent Search Filter Icon & Expandable Filter Drawer --- */
.search-filter-toggle-btn {
  position: relative;
  opacity: 0;
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden;
  pointer-events: none;
  transform: scale(0.82);
  transition: width 0.26s var(--spring, cubic-bezier(.16, 1, .3, 1)),
    opacity 0.22s ease,
    transform 0.26s var(--spring, cubic-bezier(.16, 1, .3, 1)),
    background 0.18s ease,
    color 0.18s ease !important;
}

.app-container.is-search-active .search-filter-toggle-btn,
.centered-search-box:focus-within .search-filter-toggle-btn,
.search-filter-toggle-btn.has-active-filters,
.search-filter-toggle-btn.is-open {
  opacity: 1;
  width: 32px !important;
  min-width: 32px !important;
  pointer-events: auto;
  transform: scale(1);
}

.search-filter-toggle-btn.is-open,
.search-filter-toggle-btn.has-active-filters {
  background: var(--brand-bg, #eef0ff) !important;
  color: var(--brand, #5b6cf5) !important;
}

.search-filter-count-badge {
  position: absolute;
  top: 2px;
  left: 2px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--brand, #5b6cf5);
  color: #ffffff;
  font-family: 'Cairo', sans-serif;
  font-size: 0.62rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 1.5px #ffffff;
}

/* Smooth animated expandable filter drawer attached to search box (No glow, no shadows, no extra strokes) */
.search-filter-drawer {
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--surface, #ffffff);
  border: none !important;
  box-shadow: none !important;
  transition: max-height 0.32s var(--spring, cubic-bezier(.16, 1, .3, 1)),
    opacity 0.2s ease;
}

.search-filter-drawer.is-open {
  max-height: 240px;
  opacity: 1;
  pointer-events: auto;
  border-top: 1px solid rgba(228, 230, 240, 0.65) !important;
  box-shadow: none !important;
}

.search-filter-drawer-inner {
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  direction: rtl;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.search-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;
}

.search-filter-tabs {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--surface-2, #f7f8fc);
  padding: 3px;
  border-radius: 10px;
  border: none !important;
  box-shadow: none !important;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 520px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  transition: max-width 0.26s var(--spring, cubic-bezier(.16, 1, .3, 1)),
    opacity 0.2s ease,
    padding 0.22s ease,
    margin 0.22s ease;
}

.search-filter-tabs::-webkit-scrollbar {
  display: none;
}

.search-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  height: 26px;
  border-radius: 7px;
  border: none !important;
  box-shadow: none !important;
  background: transparent;
  color: var(--text-2, #4b5068);
  font-family: 'Cairo', sans-serif;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s ease, color 0.16s ease;
}

.search-filter-tab.active {
  background: var(--brand-bg, #eef0ff);
  color: var(--brand, #5b6cf5);
  box-shadow: none !important;
}

.filter-tab-count {
  font-size: 0.64rem;
  font-weight: 800;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--surface-3, #eceef7);
  color: var(--text-3, #8b90a8);
}

.search-filter-tab.active .filter-tab-count {
  background: rgba(91, 108, 245, 0.16);
  color: var(--brand, #5b6cf5);
}

.search-filter-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: flex-end;
  min-width: 0;
  transition: flex 0.26s var(--spring, cubic-bezier(.16, 1, .3, 1));
}

.search-filter-mini-search {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--surface-2, #f7f8fc) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 9px !important;
  padding: 0 8px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  max-width: 185px;
  width: 100%;
  box-sizing: border-box !important;
  overflow: hidden;
  transition: max-width 0.26s var(--spring, cubic-bezier(.16, 1, .3, 1)),
    width 0.26s var(--spring, cubic-bezier(.16, 1, .3, 1)),
    padding 0.22s ease;
}

.filter-mini-search-icon-btn,
.filter-mini-search-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-3, #8b90a8);
  font-size: 0.72rem;
  cursor: pointer;
  flex-shrink: 0;
}

.filter-mini-search-close-btn {
  display: none;
}

.filter-mini-search-close-btn:hover {
  color: var(--danger, #ef4444);
}

.search-filter-header.is-mini-search-expanded .search-filter-tabs {
  max-width: 0 !important;
  width: 0 !important;
  opacity: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

.search-filter-header.is-mini-search-expanded .search-filter-header-actions {
  flex: 1 1 100%;
  width: 100%;
}

.search-filter-header.is-mini-search-expanded .search-filter-mini-search {
  max-width: 100% !important;
  width: 100% !important;
  flex: 1 1 auto;
  padding: 0 8px !important;
}

.search-filter-header.is-mini-search-expanded .filter-mini-search-close-btn {
  display: inline-flex !important;
}

@media (max-width: 768px) {
  .search-filter-drawer-inner {
    padding: 6px 8px 8px;
    gap: 5px;
  }

  .search-filter-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .search-filter-tabs {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 2px !important;
    padding-inline-end: 22px !important;
    gap: 2px !important;
    border-radius: 8px !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0px, black 32px, black 100%) !important;
    mask-image: linear-gradient(to right, transparent 0px, black 32px, black 100%) !important;
  }

  .search-filter-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .search-filter-header.is-mini-search-expanded .search-filter-tabs {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .search-filter-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    height: 24px;
    padding: 2px 7px;
    font-size: 0.7rem;
    gap: 4px;
    border-radius: 6px;
  }

  .filter-tab-count {
    font-size: 0.6rem;
    padding: 0 4px;
  }

  .search-filter-mini-search {
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    border-radius: 8px !important;
  }

  .search-filter-header-actions {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    position: relative !important;
    z-index: 10 !important;
    margin-inline-start: auto !important;
  }

  .search-filter-header:not(.is-mini-search-expanded) .search-filter-header-actions {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
  }

  .search-filter-header:not(.is-mini-search-expanded) .search-filter-mini-search {
    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    padding: 0 !important;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0 !important;
  }

  .search-filter-header:not(.is-mini-search-expanded) .search-filter-mini-search #search-filter-subquery,
  .search-filter-header:not(.is-mini-search-expanded) .search-filter-mini-search .filter-mini-search-close-btn {
    display: none !important;
    width: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .search-filter-chips-scroll {
    gap: 4px;
    max-height: 112px;
    padding: 2px 0;
  }

  .search-filter-chip {
    gap: 5px;
    padding: 3px 9px;
    font-size: 0.73rem;
  }

  .search-filter-chip:has(.filter-chip-avatar) {
    padding-inline-start: 3px;
  }

  .filter-chip-avatar {
    width: 21px;
    height: 21px;
  }

  .search-filter-chip .chip-song-count {
    font-size: 0.63rem;
  }

  .search-item .item-badge {
    width: 20px;
    height: 20px;
    font-size: 0.64rem;
    border-radius: 6px;
  }
}

/* Override all .centered-search-box input rules so #search-filter-subquery stays compact & shadow-free */
.centered-search-box #search-filter-drawer #search-filter-subquery,
.centered-search-box #search-filter-drawer #search-filter-subquery:focus,
.centered-search-box #search-filter-drawer #search-filter-subquery:active,
.centered-search-box #search-filter-drawer #search-filter-subquery:focus-visible,
.centered-search-box:has(#intelligent-search:focus) #search-filter-drawer #search-filter-subquery,
.centered-search-box:has(#clear-search-btn.hidden) #search-filter-drawer #search-filter-subquery,
.app-container.is-search-active .centered-search-box #search-filter-drawer #search-filter-subquery,
.centered-search-box:has(#search-results-dropdown:not(.hidden):not(.is-closing)) #search-filter-drawer #search-filter-subquery,
.centered-search-box.has-open-dropdown #search-filter-drawer #search-filter-subquery {
  border: none !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  color: var(--text, #1a1d2e) !important;
  width: 100% !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  line-height: 28px !important;
  padding: 0 2px !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.search-filter-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 9px;
  height: 28px;
  border-radius: 8px;
  border: none !important;
  box-shadow: none !important;
  background: var(--danger-bg, #fee2e2);
  color: var(--danger-dark, #dc2626);
  font-family: 'Cairo', sans-serif;
  font-size: 0.71rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.search-filter-active-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  padding-bottom: 2px;
  border: none !important;
}

.search-filter-chips-scroll {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 148px;
  overflow-y: auto;
  padding: 3px 0;
}

.search-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  border: none !important;
  box-shadow: none !important;
  background: var(--surface-2, #f7f8fc);
  color: var(--text, #1a1d2e);
  font-family: 'Cairo', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  user-select: none;
}

.search-filter-chip:hover {
  background: var(--brand-bg, #eef0ff);
  color: var(--brand, #5b6cf5);
  border: none !important;
  box-shadow: none !important;
}

.search-filter-chip.selected {
  background: var(--brand, #5b6cf5);
  color: #ffffff;
  border: none !important;
  box-shadow: none !important;
}

.search-filter-chip:has(.filter-chip-avatar) {
  padding-inline-start: 4px;
}

.filter-chip-avatar {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.search-filter-chip .chip-song-count {
  font-size: 0.68rem;
  font-weight: 800;
  opacity: 0.72;
}

.search-filter-chip.selected .chip-song-count {
  opacity: 0.92;
}

@media (min-width: 769px) {
  .search-filter-chips-scroll {
    gap: 8px;
    max-height: 192px;
    padding: 4px 0;
  }

  .search-filter-chip {
    gap: 8px;
    padding: 5px 14px;
    font-size: 0.84rem;
  }

  .search-filter-chip:has(.filter-chip-avatar) {
    padding-inline-start: 5px;
  }

  .filter-chip-avatar {
    width: 32px;
    height: 32px;
  }

  .search-filter-chip .chip-song-count {
    font-size: 0.72rem;
  }
}

/* Keep centered-search-box rounded nicely when filter drawer is open & remove upper input glow */
.centered-search-box:has(.search-filter-drawer.is-open) {
  border-radius: 26px !important;
  box-shadow: none !important;
}

.centered-search-box:has(.search-filter-drawer.is-open)>#intelligent-search,
.app-container.is-search-active .centered-search-box:has(.search-filter-drawer.is-open)>#intelligent-search,
.centered-search-box:has(.search-filter-drawer.is-open):has(#intelligent-search:focus)>#intelligent-search {
  border-top-left-radius: 26px !important;
  border-top-right-radius: 26px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

/* Collapse flex gap when filter button is hidden so icons never shift or collide */
.search-filter-toggle-btn {
  margin-inline-start: -8px !important;
}

.app-container.is-search-active .search-filter-toggle-btn,
.centered-search-box:focus-within .search-filter-toggle-btn,
.centered-search-box:has(#clear-search-btn:not(.hidden)) .search-filter-toggle-btn,
.search-filter-toggle-btn.has-active-filters,
.search-filter-toggle-btn.is-open {
  opacity: 1;
  width: 32px !important;
  min-width: 32px !important;
  margin-inline-start: 0 !important;
  pointer-events: auto;
  transform: scale(1);
}

/* Pin search-icon, clear-btn, and search-inside-controls to the exact vertical center of #intelligent-search
   so expanding/collapsing .search-filter-drawer never shifts the icons down or up */
.centered-search-box>.search-icon,
.centered-search-box>.clear-btn,
.centered-search-box>.search-inside-controls {
  top: 27px !important;
  transform: translateY(-50%) !important;
  transition: top 0.28s cubic-bezier(0.16, 1, 0.3, 1), left 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.app-container:not(.is-osk-mode-on).is-search-active .centered-search-box>.search-icon,
.app-container:not(.is-osk-mode-on).is-search-active .centered-search-box>.clear-btn,
.app-container:not(.is-osk-mode-on).is-search-active .centered-search-box>.search-inside-controls,
.app-container:not(.is-osk-mode-on) .centered-search-box:focus-within>.search-icon,
.app-container:not(.is-osk-mode-on) .centered-search-box:focus-within>.clear-btn,
.app-container:not(.is-osk-mode-on) .centered-search-box:focus-within>.search-inside-controls,
.app-container:not(.is-osk-mode-on) .centered-search-box:has(.search-filter-drawer.is-open)>.search-icon,
.app-container:not(.is-osk-mode-on) .centered-search-box:has(.search-filter-drawer.is-open)>.clear-btn,
.app-container:not(.is-osk-mode-on) .centered-search-box:has(.search-filter-drawer.is-open)>.search-inside-controls,
.app-container:not(.is-osk-mode-on) .centered-search-box:has(#search-results-dropdown:not(.hidden):not(.is-closing))>.search-icon,
.app-container:not(.is-osk-mode-on) .centered-search-box:has(#search-results-dropdown:not(.hidden):not(.is-closing))>.clear-btn,
.app-container:not(.is-osk-mode-on) .centered-search-box:has(#search-results-dropdown:not(.hidden):not(.is-closing))>.search-inside-controls {
  top: 29px !important;
  transform: translateY(-50%) !important;
}

.app-container.is-search-active .centered-search-box>.clear-btn,
.centered-search-box:focus-within>.clear-btn,
.centered-search-box:has(#clear-search-btn:not(.hidden))>.clear-btn,
.centered-search-box:has(.search-filter-toggle-btn.has-active-filters)>.clear-btn,
.centered-search-box:has(.search-filter-toggle-btn.is-open)>.clear-btn {
  left: 7.8rem !important;
}

/* Prevent .ghost-tab-pill from overlapping .clear-btn (X button) when filter icon is visible */
.app-container.is-search-active .centered-search-box .search-ghost-overlay .ghost-tab-pill,
.centered-search-box:focus-within .search-ghost-overlay .ghost-tab-pill,
.centered-search-box:has(#clear-search-btn:not(.hidden)) .search-ghost-overlay .ghost-tab-pill,
.centered-search-box:has(.search-filter-toggle-btn.has-active-filters) .search-ghost-overlay .ghost-tab-pill,
.centered-search-box:has(.search-filter-toggle-btn.is-open) .search-ghost-overlay .ghost-tab-pill {
  left: 9.7rem !important;
}

.app-container.is-search-active .centered-search-box:has(#clear-search-btn.hidden) .search-ghost-overlay .ghost-tab-pill,
.centered-search-box:focus-within:has(#clear-search-btn.hidden) .search-ghost-overlay .ghost-tab-pill,
.centered-search-box:has(.search-filter-toggle-btn.has-active-filters):has(#clear-search-btn.hidden) .search-ghost-overlay .ghost-tab-pill,
.centered-search-box:has(.search-filter-toggle-btn.is-open):has(#clear-search-btn.hidden) .search-ghost-overlay .ghost-tab-pill {
  left: 7.85rem !important;
}

.app-container.is-search-active .centered-search-box .search-ghost-overlay,
.centered-search-box:focus-within .search-ghost-overlay,
.centered-search-box:has(#clear-search-btn:not(.hidden)) .search-ghost-overlay,
.centered-search-box:has(.search-filter-toggle-btn.has-active-filters) .search-ghost-overlay,
.centered-search-box:has(.search-filter-toggle-btn.is-open) .search-ghost-overlay {
  padding-left: 12.25rem !important;
}

.app-container.is-search-active .centered-search-box .search-ghost-overlay:has(.ghost-tab-pill[style*="display: none"]),
.centered-search-box:focus-within .search-ghost-overlay:has(.ghost-tab-pill[style*="display: none"]),
.centered-search-box:has(#clear-search-btn:not(.hidden)) .search-ghost-overlay:has(.ghost-tab-pill[style*="display: none"]),
.centered-search-box:has(.search-filter-toggle-btn.has-active-filters) .search-ghost-overlay:has(.ghost-tab-pill[style*="display: none"]),
.centered-search-box:has(.search-filter-toggle-btn.is-open) .search-ghost-overlay:has(.ghost-tab-pill[style*="display: none"]) {
  padding-left: 9.65rem !important;
}

.app-container.is-search-active .centered-search-box>#intelligent-search,
.centered-search-box:focus-within>#intelligent-search,
.centered-search-box:has(#clear-search-btn:not(.hidden))>#intelligent-search,
.centered-search-box:has(.search-filter-toggle-btn.has-active-filters)>#intelligent-search,
.centered-search-box:has(.search-filter-toggle-btn.is-open)>#intelligent-search {
  padding-left: 9.65rem !important;
}

.app-container.is-search-active .centered-search-box:has(#clear-search-btn.hidden)>#intelligent-search,
.centered-search-box:focus-within:has(#clear-search-btn.hidden)>#intelligent-search,
.centered-search-box:has(.search-filter-toggle-btn.has-active-filters):has(#clear-search-btn.hidden)>#intelligent-search,
.centered-search-box:has(.search-filter-toggle-btn.is-open):has(#clear-search-btn.hidden)>#intelligent-search {
  padding-left: 7.9rem !important;
}

@media (max-width: 768px) {
  .search-filter-toggle-btn {
    margin-inline-start: -4px !important;
  }

  .app-container.is-search-active .search-filter-toggle-btn,
  .centered-search-box:focus-within .search-filter-toggle-btn,
  .centered-search-box:has(#clear-search-btn:not(.hidden)) .search-filter-toggle-btn,
  .search-filter-toggle-btn.has-active-filters,
  .search-filter-toggle-btn.is-open {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    margin-inline-start: 0 !important;
  }

  .centered-search-box>.search-icon,
  .centered-search-box>.clear-btn,
  .centered-search-box>.search-inside-controls,
  .app-container:not(.is-osk-mode-on).is-search-active .centered-search-box>.search-icon,
  .app-container:not(.is-osk-mode-on).is-search-active .centered-search-box>.clear-btn,
  .app-container:not(.is-osk-mode-on).is-search-active .centered-search-box>.search-inside-controls,
  .app-container:not(.is-osk-mode-on) .centered-search-box:focus-within>.search-icon,
  .app-container:not(.is-osk-mode-on) .centered-search-box:focus-within>.clear-btn,
  .app-container:not(.is-osk-mode-on) .centered-search-box:focus-within>.search-inside-controls,
  .app-container:not(.is-osk-mode-on) .centered-search-box:has(.search-filter-drawer.is-open)>.search-icon,
  .app-container:not(.is-osk-mode-on) .centered-search-box:has(.search-filter-drawer.is-open)>.clear-btn,
  .app-container:not(.is-osk-mode-on) .centered-search-box:has(.search-filter-drawer.is-open)>.search-inside-controls {
    top: 23px !important;
    transform: translateY(-50%) !important;
  }

  .app-container.is-search-active .centered-search-box>.clear-btn,
  .centered-search-box:focus-within>.clear-btn,
  .centered-search-box:has(#clear-search-btn:not(.hidden))>.clear-btn,
  .centered-search-box:has(.search-filter-toggle-btn.has-active-filters)>.clear-btn,
  .centered-search-box:has(.search-filter-toggle-btn.is-open)>.clear-btn {
    left: 6.75rem !important;
  }

  .app-container.is-search-active .centered-search-box .search-ghost-overlay .ghost-tab-pill,
  .centered-search-box:focus-within .search-ghost-overlay .ghost-tab-pill,
  .centered-search-box:has(#clear-search-btn:not(.hidden)) .search-ghost-overlay .ghost-tab-pill,
  .centered-search-box:has(.search-filter-toggle-btn.has-active-filters) .search-ghost-overlay .ghost-tab-pill,
  .centered-search-box:has(.search-filter-toggle-btn.is-open) .search-ghost-overlay .ghost-tab-pill {
    left: 8.6rem !important;
  }

  .app-container.is-search-active .centered-search-box:has(#clear-search-btn.hidden) .search-ghost-overlay .ghost-tab-pill,
  .centered-search-box:focus-within:has(#clear-search-btn.hidden) .search-ghost-overlay .ghost-tab-pill,
  .centered-search-box:has(.search-filter-toggle-btn.has-active-filters):has(#clear-search-btn.hidden) .search-ghost-overlay .ghost-tab-pill,
  .centered-search-box:has(.search-filter-toggle-btn.is-open):has(#clear-search-btn.hidden) .search-ghost-overlay .ghost-tab-pill {
    left: 6.8rem !important;
  }

  .app-container.is-search-active .centered-search-box .search-ghost-overlay,
  .centered-search-box:focus-within .search-ghost-overlay,
  .centered-search-box:has(#clear-search-btn:not(.hidden)) .search-ghost-overlay,
  .centered-search-box:has(.search-filter-toggle-btn.has-active-filters) .search-ghost-overlay,
  .centered-search-box:has(.search-filter-toggle-btn.is-open) .search-ghost-overlay {
    padding-left: 11.2rem !important;
  }

  .app-container.is-search-active .centered-search-box>#intelligent-search,
  .centered-search-box:focus-within>#intelligent-search,
  .centered-search-box:has(#clear-search-btn:not(.hidden))>#intelligent-search,
  .centered-search-box:has(.search-filter-toggle-btn.has-active-filters)>#intelligent-search,
  .centered-search-box:has(.search-filter-toggle-btn.is-open)>#intelligent-search {
    padding-left: 8.55rem !important;
  }

  .app-container.is-search-active .centered-search-box:has(#clear-search-btn.hidden)>#intelligent-search,
  .centered-search-box:focus-within:has(#clear-search-btn.hidden)>#intelligent-search,
  .centered-search-box:has(.search-filter-toggle-btn.has-active-filters):has(#clear-search-btn.hidden)>#intelligent-search,
  .centered-search-box:has(.search-filter-toggle-btn.is-open):has(#clear-search-btn.hidden)>#intelligent-search {
    padding-left: 6.85rem !important;
  }
}

.centered-search-box:has(#search-results-dropdown.hidden) .search-filter-drawer.is-open {
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  box-shadow: none !important;
}

/* Search preview chorus & verse mini badges */
.search-item .line-num-mini.is-chorus-mini-badge {
  background: var(--coupon-bg, #ede9fe);
  color: var(--coupon-dark, #7c3aed);
  font-weight: 800;
}

.search-item .line-num-mini.is-chorus-mini-badge.matched-line-badge {
  background: var(--coupon-grad, linear-gradient(135deg, #8b5cf6, #7c3aed));
  color: #ffffff;
}

[data-theme="dark"] .search-item .line-num-mini.is-chorus-mini-badge,
body.dark-mode .search-item .line-num-mini.is-chorus-mini-badge {
  background: rgba(139, 92, 246, 0.22);
  color: #c4b5fd;
}

/* =========================================================================
   PIANO CHORD DIAGRAMS & INTERACTIVE TOOLTIP/PREVIEW (Uncle Dashboard Design System)
   ========================================================================= */

.chord-token-badge,
.obs-chord-badge span,
.obs-chord-item,
.song-info-chord-pill {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  border-radius: var(--r-full, 9999px) !important;
  transition: background .15s cubic-bezier(.4, 0, .2, 1),
              color .15s cubic-bezier(.4, 0, .2, 1),
              transform .2s cubic-bezier(.16, 1, .3, 1);
}

.chord-token-badge:hover,
.obs-chord-badge span:hover,
.obs-chord-item:hover,
.song-info-chord-pill:hover {
  background: var(--brand-bg, #eef0ff) !important;
  color: var(--brand, #5b6cf5) !important;
  transform: none !important;
  box-shadow: none !important;
}

.chord-token-badge:active,
.obs-chord-badge span:active,
.obs-chord-item:active,
.song-info-chord-pill:active {
  transform: none !important;
}

.chord-piano-img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: var(--r-sm, 10px);
  /* Transforms pianochord.org red (#cb443d) accurately into website accent color (--brand: #5b6cf5) */
  filter: hue-rotate(230deg) saturate(1.4) brightness(1.08);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  transition: filter var(--t, .22s) var(--ease, cubic-bezier(.4, 0, .2, 1));
}

/* Desktop Floating Hover Popover (Follows Mouse Cursor & Compact Size) */
.chord-diagram-popover {
  position: fixed;
  z-index: 9999999;
  pointer-events: none !important;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.92);
  transition: opacity .12s var(--ease, cubic-bezier(.4, 0, .2, 1)),
              transform .15s var(--spring, cubic-bezier(.16, 1, .3, 1)),
              visibility .12s;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .2));
  direction: rtl;
  will-change: left, top, opacity, transform;
}

.chord-diagram-popover.visible {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.chord-diagram-popover-content {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border-solid, #e4e6f0);
  border-radius: var(--r-md, 14px);
  padding: 6px;
  min-width: 140px;
  max-width: 195px;
  box-shadow: var(--shadow-lg, 0 20px 48px -8px rgba(0, 0, 0, .14));
  font-family: 'Cairo', sans-serif;
  pointer-events: none !important;
}

.chord-popover-header {
  display: none !important;
}

.chord-popover-name {
  font-family: 'Cairo', sans-serif;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--brand, #5b6cf5);
  direction: ltr;
}

.chord-popover-badge {
  font-family: 'Cairo', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-2, #4b5068);
  background: var(--surface-2, #f7f8fc);
  padding: 1px 6px;
  border-radius: var(--r-full, 9999px);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.chord-popover-img-wrap {
  background: #ffffff;
  border-radius: var(--r-sm, 10px);
  padding: 4px;
  border: 1px solid var(--border-solid, #e4e6f0);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50px;
  overflow: hidden;
}

.chord-popover-img-wrap .chord-piano-img {
  max-width: 190px;
}

.chord-popover-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--text-3, #8b90a8);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 8px 4px;
}

.chord-popover-arrow {
  display: none !important;
}

/* Mobile & Modal Chord Preview Sheet */
.chord-preview-modal-card {
  width: 100%;
  max-width: 440px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border-solid, #e4e6f0);
  border-radius: var(--r-xl, 24px);
  overflow: hidden;
  box-shadow: var(--shadow-xl, 0 32px 64px -12px rgba(0, 0, 0, .18));
  font-family: 'Cairo', sans-serif;
  direction: rtl;
}

.chord-preview-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-solid, #e4e6f0);
  position: relative;
}

.chord-preview-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text, #1a1d2e);
}

.chord-preview-title span {
  color: var(--brand, #5b6cf5);
  direction: ltr;
  display: inline-block;
}

.chord-preview-subtitle {
  margin: 2px 0 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-3, #8b90a8);
}

.chord-preview-modal-body {
  padding: 16px 18px 20px;
}

.chord-preview-diagram-box {
  background: #ffffff;
  border: 1.5px solid var(--border-solid, #e4e6f0);
  border-radius: var(--r-lg, 18px);
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm, 0 2px 8px -2px rgba(0, 0, 0, .07));
  overflow: hidden;
  min-height: 100px;
}

.chord-preview-diagram-box .chord-piano-img {
  max-width: 100%;
  height: auto;
}

.chord-preview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-3, #8b90a8);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 24px 12px;
}

.chord-preview-footer-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.chord-preview-tag {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--brand, #5b6cf5);
  background: var(--brand-bg, #eef0ff);
  padding: 4px 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Uncle Dashboard Responsive: Mobile Bottom Sheet */
@media (max-width: 768px) {
  .chord-preview-modal-overlay {
    justify-content: flex-end !important;
    align-items: center !important;
    flex-direction: column !important;
    padding: 0 !important;
  }

  .chord-preview-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: var(--r-2xl, 32px) var(--r-2xl, 32px) 0 0 !important;
    border-bottom: none !important;
    animation: sheetUp .35s var(--spring, cubic-bezier(.16, 1, .3, 1)) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }

  .chord-preview-modal-header {
    padding-top: 22px !important;
  }

  .chord-preview-modal-header::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: var(--border-solid, #e4e6f0);
    border-radius: 2px;
  }
}

/* =========================================================================
   IN-APP HOTSPOT & OFFLINE REMOTE QR SCANNER MODAL (Uncle Dashboard Design System)
   ========================================================================= */
#modal-hotspot-qr-scanner.hotspot-qr-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 16px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  animation: overlayIn 0.2s var(--ease, cubic-bezier(.4, 0, .2, 1));
  direction: rtl;
  font-family: 'Cairo', sans-serif !important;
}

#modal-hotspot-qr-scanner.hotspot-qr-modal-overlay.hidden {
  display: none !important;
}

#modal-hotspot-qr-scanner .hotspot-qr-modal-card {
  width: 94% !important;
  max-width: 460px !important;
  height: auto !important;
  max-height: min(88dvh, calc(100dvh - 32px)) !important;
  margin: auto !important;
  background: var(--surface, #ffffff) !important;
  border: 1px solid var(--border-solid, #e4e6f0) !important;
  border-radius: var(--r-xl, 24px) !important;
  box-shadow: var(--shadow-xl, 0 32px 64px -12px rgba(0, 0, 0, .18)) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  animation: fadeScaleIn 0.25s var(--spring, cubic-bezier(.16, 1, .3, 1)) !important;
  font-family: 'Cairo', sans-serif !important;
  direction: rtl !important;
}

[data-theme="dark"] #modal-hotspot-qr-scanner .hotspot-qr-modal-card,
body.dark-mode #modal-hotspot-qr-scanner .hotspot-qr-modal-card {
  background: var(--surface, #181b26) !important;
  border-color: var(--border-solid, #2a2d42) !important;
}

.hotspot-qr-modal-header {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 16px 20px 14px !important;
  margin: 0 !important;
  background: var(--surface, #ffffff) !important;
  border-bottom: 1px solid var(--border-solid, #e4e6f0) !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

[data-theme="dark"] .hotspot-qr-modal-header,
body.dark-mode .hotspot-qr-modal-header {
  background: var(--surface, #181b26) !important;
  border-bottom-color: var(--border-solid, #2a2d42) !important;
}

.hotspot-qr-header-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.hotspot-qr-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--brand-bg, #eef0ff);
  color: var(--brand, #5b6cf5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

[data-theme="dark"] .hotspot-qr-header-icon,
body.dark-mode .hotspot-qr-header-icon {
  background: rgba(91, 108, 245, 0.16);
  color: var(--brand-light, #a5b0ff);
}

.hotspot-qr-header-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hotspot-qr-header-title {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--text, #1a1d2e);
  line-height: 1.3;
}

[data-theme="dark"] .hotspot-qr-header-title,
body.dark-mode .hotspot-qr-header-title {
  color: var(--text, #e8eaf6);
}

.hotspot-qr-header-sub {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-3, #8b90a8);
  line-height: 1.35;
}

.hotspot-qr-close-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 50% !important;
  background: var(--surface-3, #eceef7) !important;
  color: var(--text-2, #4b5068) !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s var(--spring, cubic-bezier(.16, 1, .3, 1)) !important;
}

.hotspot-qr-close-btn:hover {
  background: var(--brand-bg, #eef0ff) !important;
  color: var(--brand, #5b6cf5) !important;
  transform: scale(1.08) !important;
}

[data-theme="dark"] .hotspot-qr-close-btn,
body.dark-mode .hotspot-qr-close-btn {
  background: var(--surface-3, #252840) !important;
  color: var(--text-2, #9299be) !important;
}

.hotspot-qr-modal-body {
  padding: 16px 20px 20px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  box-sizing: border-box !important;
}

.hotspot-qr-scanner-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hotspot-qr-viewfinder {
  position: relative;
  width: 100%;
  height: 220px;
  border-radius: var(--r-lg, 18px);
  background: var(--surface-2, #f7f8fc);
  border: 1.5px dashed var(--border-solid, #cbd5e1);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

[data-theme="dark"] .hotspot-qr-viewfinder,
body.dark-mode .hotspot-qr-viewfinder {
  background: var(--surface-2, #1e2132);
  border-color: var(--border-solid, #2a2d42);
}

.hotspot-qr-viewfinder .qr-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hotspot-qr-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  text-align: center;
  z-index: 2;
}

.hotspot-qr-cam-badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brand-bg, #eef0ff);
  color: var(--brand, #5b6cf5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

[data-theme="dark"] .hotspot-qr-cam-badge,
body.dark-mode .hotspot-qr-cam-badge {
  background: rgba(91, 108, 245, 0.16);
  color: var(--brand-light, #a5b0ff);
}

.hotspot-qr-placeholder-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-2, #4b5068);
  max-width: 260px;
  line-height: 1.45;
}

[data-theme="dark"] .hotspot-qr-placeholder-title,
body.dark-mode .hotspot-qr-placeholder-title {
  color: var(--text-2, #9299be);
}

.hotspot-qr-start-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 18px;
  border-radius: var(--r-md, 14px);
  background: linear-gradient(135deg, var(--brand, #5b6cf5), var(--brand-dark, #4354e8));
  color: #ffffff;
  border: none;
  font-family: 'Cairo', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 8px 18px rgba(79, 70, 229, .18);
  transition: transform 0.18s var(--spring, cubic-bezier(.16, 1, .3, 1)), box-shadow 0.18s ease;
}

.hotspot-qr-start-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .26) inset, 0 12px 24px rgba(79, 70, 229, .26);
}

.qr-scanner-laser {
  position: absolute;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand, #5b6cf5), #38bdf8, var(--brand, #5b6cf5), transparent);
  box-shadow: 0 0 12px var(--brand, #5b6cf5);
  z-index: 4;
  animation: qrLaserScan 2.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes qrLaserScan {
  0%, 100% { top: 16%; opacity: 0.65; }
  50% { top: 84%; opacity: 1; }
}

.hotspot-qr-actions-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.hotspot-qr-upload-pill {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--r-md, 14px);
  background: var(--surface-2, #f7f8fc);
  border: 1px solid var(--border-solid, #e4e6f0);
  color: var(--text, #1a1d2e);
  font-family: 'Cairo', sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
  user-select: none;
}

.hotspot-qr-upload-pill i {
  color: var(--brand, #5b6cf5);
  font-size: 0.9rem;
}

.hotspot-qr-upload-pill:hover {
  background: var(--brand-bg, #eef0ff);
  color: var(--brand, #5b6cf5);
  border-color: rgba(91, 108, 245, 0.3);
}

[data-theme="dark"] .hotspot-qr-upload-pill,
body.dark-mode .hotspot-qr-upload-pill {
  background: var(--surface-2, #1e2132);
  border-color: var(--border-solid, #2a2d42);
  color: var(--text, #e8eaf6);
}

.hotspot-manual-connect-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: var(--r-lg, 18px);
  background: var(--surface-2, #f7f8fc);
  border: 1px solid var(--border-solid, #e4e6f0);
  margin: 0;
}

[data-theme="dark"] .hotspot-manual-connect-card,
body.dark-mode .hotspot-manual-connect-card {
  background: var(--surface-2, #1e2132);
  border-color: var(--border-solid, #2a2d42);
}

.hotspot-manual-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--text-2, #4b5068);
}

.hotspot-manual-label i {
  color: var(--brand, #5b6cf5);
}

[data-theme="dark"] .hotspot-manual-label,
body.dark-mode .hotspot-manual-label {
  color: var(--text-2, #9299be);
}

.hotspot-manual-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hotspot-manual-input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--r-md, 14px);
  background: var(--surface, #ffffff);
  border: 1.5px solid var(--border-solid, #e4e6f0);
  color: var(--text, #1a1d2e);
  font-family: 'Cairo', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  direction: ltr;
  text-align: right;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.hotspot-manual-input:focus {
  border-color: var(--brand, #5b6cf5);
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-glow, rgba(91, 108, 245, .18));
}

[data-theme="dark"] .hotspot-manual-input,
body.dark-mode .hotspot-manual-input {
  background: var(--surface-3, #252840);
  border-color: var(--border-solid, #2a2d42);
  color: var(--text, #e8eaf6);
}

.hotspot-manual-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--r-md, 14px);
  background: linear-gradient(135deg, var(--brand, #5b6cf5), var(--brand-dark, #4354e8));
  color: #ffffff;
  border: none;
  font-family: 'Cairo', sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 8px 18px rgba(79, 70, 229, .16);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.hotspot-manual-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .26) inset, 0 12px 24px rgba(79, 70, 229, .24);
}

@media (max-width: 768px) {
  #modal-hotspot-qr-scanner.hotspot-qr-modal-overlay:not(.hidden) {
    padding: 0 !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    flex-direction: column !important;
  }

  #modal-hotspot-qr-scanner .hotspot-qr-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: auto 0 0 0 !important;
    max-height: 88dvh !important;
    border-radius: var(--r-2xl, 32px) var(--r-2xl, 32px) 0 0 !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, .24) !important;
    animation: sheetUp 0.35s var(--spring, cubic-bezier(.16, 1, .3, 1)) !important;
  }

  .hotspot-qr-modal-header {
    padding: 22px 18px 12px !important;
  }

  .hotspot-qr-modal-header::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: var(--border-solid, #cbd5e1);
    border-radius: 2px;
  }

  .hotspot-qr-modal-body {
    padding: 14px 18px calc(22px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .hotspot-qr-viewfinder {
    height: 195px;
  }
}

/* ============================================================================
   REDESIGN UPDATE:
   1. Mobile #clear-search-btn strict hide & spacing
   2. Top-Nav clean icon-only buttons with .recent-share-btn hover
   3. Compact Style Drawer (#popover-style), 5 Tabs, Circle Swatches,
      Canva Hover Transitions, Standby Live Preview, Auto-Assign & Templates
   ============================================================================ */

/* 1. Strict hide for #clear-search-btn when .hidden is present */
#clear-search-btn.hidden,
.centered-search-box .clear-btn.hidden,
.centered-search-box > #clear-search-btn.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 2. Top-Nav: Solid page-matched bg (prevents iOS WebKit top banner blur) & no border */
.top-nav {
  background: var(--bg, #f3f4f9) !important;
  background-color: var(--bg, #f3f4f9) !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

[data-theme="dark"] .top-nav,
body.dark-mode .top-nav {
  background: var(--bg, #0f1117) !important;
  background-color: var(--bg, #0f1117) !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.top-nav .icon-menu-btn,
[data-theme="dark"] .top-nav .icon-menu-btn,
body.dark-mode .top-nav .icon-menu-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 50% !important;
  color: var(--text-3, #8b90a8) !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.top-nav .icon-menu-btn:hover {
  background: var(--brand-bg, #eef0ff) !important;
  color: var(--brand, #5b6cf5) !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.top-nav .icon-menu-btn.active,
.top-nav .icon-menu-btn.active-menu-btn,
.top-nav .icon-menu-btn.desktop-only-btn.active,
.top-nav .icon-menu-btn.desktop-only-btn.active-menu-btn {
  background: var(--brand-bg, #eef0ff) !important;
  color: var(--brand, #5b6cf5) !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

[data-theme="dark"] .top-nav .icon-menu-btn:hover,
body.dark-mode .top-nav .icon-menu-btn:hover {
  background: rgba(91, 108, 245, 0.18) !important;
  color: var(--brand-light, #a5b0ff) !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

[data-theme="dark"] .top-nav .icon-menu-btn.active,
[data-theme="dark"] .top-nav .icon-menu-btn.active-menu-btn,
[data-theme="dark"] .top-nav .icon-menu-btn.desktop-only-btn.active,
[data-theme="dark"] .top-nav .icon-menu-btn.desktop-only-btn.active-menu-btn,
body.dark-mode .top-nav .icon-menu-btn.active,
body.dark-mode .top-nav .icon-menu-btn.active-menu-btn,
body.dark-mode .top-nav .icon-menu-btn.desktop-only-btn.active,
body.dark-mode .top-nav .icon-menu-btn.desktop-only-btn.active-menu-btn {
  background: rgba(91, 108, 245, 0.22) !important;
  color: var(--brand-light, #a5b0ff) !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.top-nav .icon-menu-btn:active,
[data-theme="dark"] .top-nav .icon-menu-btn:active,
body.dark-mode .top-nav .icon-menu-btn:active {
  transform: scale(0.95) !important;
}

/* 3. Redesigned Style Drawer Panel (#popover-style) & 5 Concise Tabs */
#popover-style.style-drawer-panel .style-nav-tabs {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 4px !important;
  padding: 6px 10px !important;
  background: var(--surface, #ffffff) !important;
  border-bottom: 1px solid var(--border-solid, #e4e6f0) !important;
  box-shadow: none !important;
}

[data-theme="dark"] #popover-style.style-drawer-panel .style-nav-tabs,
body.dark-mode #popover-style.style-drawer-panel .style-nav-tabs {
  background: var(--surface, #181b26) !important;
  border-bottom-color: var(--border-solid, #2a2d42) !important;
  box-shadow: none !important;
}

#popover-style.style-drawer-panel .style-tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 7px 6px !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  border: none !important;
  background: var(--surface-2, #f7f8fc) !important;
  color: var(--text-2, #4b5068) !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-theme="dark"] #popover-style.style-drawer-panel .style-tab-btn,
body.dark-mode #popover-style.style-drawer-panel .style-tab-btn {
  background: var(--surface-2, #1e2132) !important;
  color: var(--text-2, #9299be) !important;
  box-shadow: none !important;
}

#popover-style.style-drawer-panel .style-tab-btn:hover {
  background: var(--brand-bg, #eef0ff) !important;
  color: var(--brand, #5b6cf5) !important;
  box-shadow: none !important;
}

#popover-style.style-drawer-panel .style-tab-btn.active {
  background: linear-gradient(135deg, var(--brand, #5b6cf5), var(--brand-dark, #4354e8)) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

#popover-style.style-drawer-panel .style-drawer-scroll-body {
  padding: 10px 12px 18px !important;
}

#popover-style.style-drawer-panel .style-card {
  padding: 11px 12px !important;
  border-radius: 14px !important;
  border: 1px solid var(--border-solid, #e4e6f0) !important;
  background: var(--surface, #ffffff) !important;
  box-shadow: var(--shadow-sm, 0 2px 8px -2px rgba(0,0,0,0.06)) !important;
}

[data-theme="dark"] #popover-style.style-drawer-panel .style-card,
body.dark-mode #popover-style.style-drawer-panel .style-card {
  background: var(--surface, #181b26) !important;
  border-color: var(--border-solid, #2a2d42) !important;
}

#popover-style.style-drawer-panel .style-card-title {
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  margin-bottom: 8px !important;
  color: var(--text, #1a1d2e) !important;
}

[data-theme="dark"] #popover-style.style-drawer-panel .style-card-title,
body.dark-mode #popover-style.style-drawer-panel .style-card-title {
  color: var(--text, #e8eaf6) !important;
}

#popover-style.style-drawer-panel .segmented-btn {
  font-family: 'Cairo', sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  padding: 6px 8px !important;
  border-radius: 9px !important;
}

/* 4. Circular Chroma Color Swatches + Custom Color Picker */
.chroma-circle-group {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 4px 2px !important;
}

.chroma-circle-swatch {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 3px !important;
  border-radius: 50% !important;
  border: 2px solid var(--border-solid, #cbd5e1) !important;
  background: var(--surface, #ffffff) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  position: relative !important;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s ease, box-shadow 0.18s ease !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="dark"] .chroma-circle-swatch,
body.dark-mode .chroma-circle-swatch {
  background: var(--surface-2, #1e2132) !important;
  border-color: var(--border-solid, #2a2d42) !important;
}

.chroma-circle-swatch:hover {
  transform: scale(1.1) !important;
  border-color: var(--brand, #5b6cf5) !important;
}

.chroma-circle-swatch.active {
  border-color: var(--brand, #5b6cf5) !important;
  box-shadow: 0 0 0 3px var(--brand-glow, rgba(91, 108, 245, 0.25)) !important;
  transform: scale(1.08) !important;
}

.chroma-circle-swatch .circle-swatch-fill {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15) !important;
}

.chroma-circle-swatch .swatch-black {
  background: #000000 !important;
}

.chroma-circle-swatch .swatch-green {
  background: #00ff00 !important;
}

.chroma-circle-swatch .swatch-blue {
  background: #0000ff !important;
}

.chroma-circle-swatch .swatch-trans {
  background-color: #ffffff !important;
  background-image:
    linear-gradient(45deg, #cbd5e1 25%, transparent 25%),
    linear-gradient(-45deg, #cbd5e1 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #cbd5e1 75%),
    linear-gradient(-45deg, transparent 75%, #cbd5e1 75%) !important;
  background-size: 8px 8px !important;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0 !important;
}

.chroma-custom-picker-btn {
  margin: 0 !important;
  overflow: hidden !important;
}

.chroma-custom-picker-btn input[type="color"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  border: none !important;
  padding: 0 !important;
}

.chroma-custom-picker-btn .chroma-custom-fill {
  background: conic-gradient(from 90deg, #ef4444, #f59e0b, #10b981, #3b82f6, #8b5cf6, #ec4899, #ef4444);
  color: #ffffff !important;
  font-size: 0.72rem !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65) !important;
}

/* 5. Live 16:9 Standby Screen Preview Box */
.standby-live-preview-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 118px;
  border-radius: 12px;
  overflow: hidden;
  background: #000000;
  border: 1.5px solid var(--border-solid, #cbd5e1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.35);
}

.standby-live-preview-box[data-chroma="black"] {
  background: #000000;
}

.standby-live-preview-box[data-chroma="green"] {
  background: #00ff00;
}

.standby-live-preview-box[data-chroma="blue"] {
  background: #0000ff;
}

.standby-live-preview-box[data-chroma="transparent"] {
  background-color: #1e293b;
  background-image:
    linear-gradient(45deg, #334155 25%, transparent 25%),
    linear-gradient(-45deg, #334155 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #334155 75%),
    linear-gradient(-45deg, transparent 75%, #334155 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
}

.standby-preview-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.standby-preview-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  pointer-events: none;
}

.standby-preview-logo {
  position: relative;
  z-index: 3;
  width: 56px;
  height: 56px;
  max-width: 65%;
  max-height: 65%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55));
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.standby-preview-logo.hidden {
  display: none !important;
}

/* 6. Canva-Style Hover Transition Cards (Bigger Grid) */
.canva-transition-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}

.canva-trans-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 8px 6px !important;
  border-radius: 13px !important;
  border: 1.5px solid var(--border-solid, #e4e6f0) !important;
  background: var(--surface-2, #f7f8fc) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-theme="dark"] .canva-trans-card,
body.dark-mode .canva-trans-card {
  background: var(--surface-2, #1e2132) !important;
  border-color: var(--border-solid, #2a2d42) !important;
}

.canva-trans-card:hover {
  border-color: var(--brand, #5b6cf5) !important;
  background: var(--brand-bg, #eef0ff) !important;
  transform: translateY(-2px) !important;
}

.canva-trans-card.active {
  border-color: var(--brand, #5b6cf5) !important;
  background: var(--brand-bg, #eef0ff) !important;
  box-shadow: 0 0 0 2.5px var(--brand-glow, rgba(91, 108, 245, 0.24)) !important;
}

[data-theme="dark"] .canva-trans-card.active,
body.dark-mode .canva-trans-card.active {
  background: rgba(91, 108, 245, 0.18) !important;
}

.trans-preview-stage {
  position: relative;
  width: 100%;
  height: 56px;
  border-radius: 9px;
  background: #0f172a;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.trans-slide-a,
.trans-slide-b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cairo', sans-serif;
  font-size: 0.88rem;
  font-weight: 900;
  color: #ffffff;
}

.trans-slide-a {
  background: linear-gradient(135deg, #1e293b, #334155);
  z-index: 1;
}

.trans-slide-b {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  z-index: 2;
  opacity: 0;
}

.trans-card-label {
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  color: var(--text, #1a1d2e) !important;
  line-height: 1.15 !important;
}

[data-theme="dark"] .canva-trans-card .trans-card-label,
body.dark-mode .canva-trans-card .trans-card-label {
  color: var(--text, #e8eaf6) !important;
}

.canva-trans-card.active .trans-card-label {
  color: var(--brand, #5b6cf5) !important;
}

[data-theme="dark"] .canva-trans-card.active .trans-card-label,
body.dark-mode .canva-trans-card.active .trans-card-label {
  color: var(--brand-light, #a5b0ff) !important;
}

/* Hover animations for Canva transition cards */
@keyframes canvaLumaWipe {
  0%, 15% { clip-path: circle(0% at 50% 50%); opacity: 1; }
  65%, 85% { clip-path: circle(120% at 50% 50%); opacity: 1; }
  100% { clip-path: circle(0% at 50% 50%); opacity: 0; }
}

@keyframes canvaFadeAnim {
  0%, 15% { opacity: 0; }
  55%, 80% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes canvaZoomAnim {
  0%, 15% { opacity: 0; transform: scale(0.45); }
  55%, 80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.15); }
}

@keyframes canvaStingerSweep {
  0% { transform: translateX(120%) skewX(-18deg); }
  50% { transform: translateX(0%) skewX(-18deg); }
  100% { transform: translateX(-120%) skewX(-18deg); }
}

@keyframes canvaCutAnim {
  0%, 48% { opacity: 0; }
  50%, 90% { opacity: 1; }
  92%, 100% { opacity: 0; }
}

.canva-trans-card:hover .trans-stage-luma .trans-slide-b {
  animation: canvaLumaWipe 1.35s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.canva-trans-card:hover .trans-stage-fade .trans-slide-b {
  animation: canvaFadeAnim 1.35s ease-in-out infinite;
}

.canva-trans-card:hover .trans-stage-zoom .trans-slide-b {
  animation: canvaZoomAnim 1.35s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.trans-stinger-sweep {
  position: absolute;
  inset: -4px;
  background: linear-gradient(90deg, transparent, #38bdf8, #ffffff, #6366f1, transparent);
  z-index: 3;
  transform: translateX(130%) skewX(-18deg);
  pointer-events: none;
}

.canva-trans-card:hover .trans-stage-stinger .trans-stinger-sweep {
  animation: canvaStingerSweep 1.35s ease-in-out infinite;
}

.canva-trans-card:hover .trans-stage-stinger .trans-slide-b {
  animation: canvaCutAnim 1.35s steps(1) infinite;
}

.canva-trans-card:hover .trans-stage-cut .trans-slide-b {
  animation: canvaCutAnim 1.1s steps(1) infinite;
}

/* 7. Redesigned Workspaces Switcher, Auto-Assign CSS Popovers & Ultra-Compact Templates Library */
.style-drawer-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  position: relative !important;
  padding-bottom: 6px !important;
}

.style-drawer-header-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.workspace-inline-card {
  padding: 6px 8px !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 40 !important;
}

.workspace-switcher-bar {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 36px !important;
  padding: 3px 4px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  background: var(--surface-2, #f7f8fc) !important;
  border: 1px solid var(--border-solid, #e4e6f0) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .workspace-switcher-bar,
body.dark-mode .workspace-switcher-bar {
  background: var(--surface-2, #1e2132) !important;
  border-color: var(--border-solid, #2a2d42) !important;
  box-shadow: none !important;
}

.workspace-switcher-bar .tmpl-cycle-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 9px !important;
  background: var(--surface, #ffffff) !important;
  color: var(--text-2, #4b5068) !important;
  border: 1px solid var(--border-solid, #e4e6f0) !important;
  font-size: 0.72rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.16s ease !important;
}

[data-theme="dark"] .workspace-switcher-bar .tmpl-cycle-btn,
body.dark-mode .workspace-switcher-bar .tmpl-cycle-btn {
  background: var(--surface-3, #252840) !important;
  border-color: var(--border-solid, #2a2d42) !important;
  color: var(--text-2, #9299be) !important;
}

.workspace-switcher-bar .tmpl-cycle-btn:hover {
  background: var(--brand-bg, #eef0ff) !important;
  color: var(--brand, #5b6cf5) !important;
  border-color: rgba(91, 108, 245, 0.35) !important;
}

.workspace-switcher-bar .tmpl-dropdown-trigger-btn {
  flex: 1 !important;
  min-width: 0 !important;
  height: 28px !important;
  padding: 0 10px !important;
  border-radius: 9px !important;
  background: transparent !important;
  border: none !important;
  color: var(--text, #1a1d2e) !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  cursor: pointer !important;
}

[data-theme="dark"] .workspace-switcher-bar .tmpl-dropdown-trigger-btn,
body.dark-mode .workspace-switcher-bar .tmpl-dropdown-trigger-btn {
  color: var(--text, #e8eaf6) !important;
}

.workspace-switcher-bar .tmpl-dropdown-trigger-btn:hover {
  background: rgba(91, 108, 245, 0.08) !important;
}

.workspace-trigger-content {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-trigger-icon {
  color: var(--brand, #5b6cf5);
  font-size: 0.84rem;
  flex-shrink: 0;
}

.workspace-trigger-arrow {
  font-size: 0.7rem;
  color: var(--text-3, #8b90a8);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.workspace-popover-card {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  left: 0 !important;
  min-width: 250px !important;
  max-height: 310px !important;
  overflow-y: auto !important;
  background: var(--surface, #ffffff) !important;
  border: 1px solid var(--border-solid, #e4e6f0) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-xl, 0 24px 48px -12px rgba(15, 23, 42, 0.22)) !important;
  z-index: 2500 !important;
  padding: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  animation: fadeScaleIn 0.2s var(--spring, cubic-bezier(0.16, 1, 0.3, 1)) !important;
}

.workspace-popover-card.hidden {
  display: none !important;
}

[data-theme="dark"] .workspace-popover-card,
body.dark-mode .workspace-popover-card {
  background: var(--surface, #181b26) !important;
  border-color: var(--border-solid, #2a2d42) !important;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.65) !important;
}

.workspace-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 8px;
  border-bottom: 1px solid var(--border-solid, #e4e6f0);
}

[data-theme="dark"] .workspace-popover-header,
body.dark-mode .workspace-popover-header {
  border-bottom-color: var(--border-solid, #2a2d42);
}

.workspace-popover-title {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-2, #4b5068);
}

[data-theme="dark"] .workspace-popover-title,
body.dark-mode .workspace-popover-title {
  color: var(--text-2, #9299be);
}

.workspace-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 9px;
  border: none;
  background: linear-gradient(135deg, var(--brand, #5b6cf5), var(--brand-dark, #4354e8));
  color: #ffffff;
  font-family: 'Cairo', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(91, 108, 245, 0.22);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.workspace-add-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(91, 108, 245, 0.3);
}

.workspace-popover-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.workspace-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 11px;
  background: var(--surface-2, #f7f8fc);
  border: 1px solid transparent;
  transition: all 0.16s ease;
}

[data-theme="dark"] .workspace-item-row,
body.dark-mode .workspace-item-row {
  background: var(--surface-2, #1e2132);
}

.workspace-item-row:hover {
  background: var(--brand-bg, #eef0ff);
  border-color: rgba(91, 108, 245, 0.25);
}

.workspace-item-row.active {
  background: var(--brand-bg, #eef0ff);
  border-color: var(--brand, #5b6cf5);
}

[data-theme="dark"] .workspace-item-row.active,
body.dark-mode .workspace-item-row.active {
  background: rgba(91, 108, 245, 0.18);
  border-color: var(--brand, #5b6cf5);
}

.workspace-item-select-btn {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0;
  text-align: right;
  font-family: 'Cairo', sans-serif;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.workspace-item-title-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text, #1a1d2e);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-theme="dark"] .workspace-item-title-line,
body.dark-mode .workspace-item-title-line {
  color: var(--text, #e8eaf6);
}

.workspace-item-row.active .workspace-item-title-line {
  color: var(--brand, #5b6cf5);
}

[data-theme="dark"] .workspace-item-row.active .workspace-item-title-line,
body.dark-mode .workspace-item-row.active .workspace-item-title-line {
  color: var(--brand-light, #a5b0ff);
}

.workspace-item-sub-badge {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--text-3, #8b90a8);
  padding-right: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-item-actions {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.workspace-item-action-btn {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: none;
  background: var(--surface, #ffffff);
  color: var(--text-2, #4b5068);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

[data-theme="dark"] .workspace-item-action-btn,
body.dark-mode .workspace-item-action-btn {
  background: var(--surface-3, #252840);
  color: var(--text-2, #9299be);
}

.workspace-item-action-btn:hover {
  background: var(--brand, #5b6cf5);
  color: #ffffff;
}

.workspace-item-action-btn.danger:hover {
  background: var(--danger, #ef4444);
  color: #ffffff;
}

/* Auto-Assign Templates Card with Custom CSS Popover */
.auto-assign-templates-card {
  position: relative;
  z-index: 30;
  overflow: visible !important;
}

.auto-assign-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

.auto-assign-slot {
  background: var(--surface-2, #f7f8fc);
  border: 1px solid var(--border-solid, #e4e6f0);
  border-radius: 12px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

[data-theme="dark"] .auto-assign-slot,
body.dark-mode .auto-assign-slot {
  background: var(--surface-2, #1e2132);
  border-color: var(--border-solid, #2a2d42);
}

.auto-assign-slot-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.auto-assign-slot-icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.74rem;
}

.auto-assign-slot-icon.taranim {
  background: rgba(91, 108, 245, 0.14);
  color: var(--brand, #5b6cf5);
}

.auto-assign-slot-icon.bible {
  background: rgba(16, 185, 129, 0.14);
  color: var(--success, #10b981);
}

.auto-assign-slot-label {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--text, #1a1d2e);
}

[data-theme="dark"] .auto-assign-slot-label,
body.dark-mode .auto-assign-slot-label {
  color: var(--text, #e8eaf6);
}

.auto-assign-popover-wrap {
  position: relative;
  width: 100%;
}

.auto-assign-trigger-btn {
  width: 100%;
  height: 32px;
  padding: 0 9px;
  border-radius: 9px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border-solid, #e4e6f0);
  color: var(--text, #1a1d2e);
  font-family: 'Cairo', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  cursor: pointer;
  transition: all 0.16s ease;
}

[data-theme="dark"] .auto-assign-trigger-btn,
body.dark-mode .auto-assign-trigger-btn {
  background: var(--surface-3, #252840);
  border-color: var(--border-solid, #2a2d42);
  color: var(--text, #e8eaf6);
}

.auto-assign-trigger-btn:hover,
.auto-assign-trigger-btn[aria-expanded="true"] {
  border-color: var(--brand, #5b6cf5);
  box-shadow: 0 0 0 2px var(--brand-glow, rgba(91, 108, 245, 0.16));
}

.auto-assign-trigger-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  text-align: right;
}

.auto-assign-trigger-arrow {
  font-size: 0.68rem;
  color: var(--text-3, #8b90a8);
  transition: transform 0.18s ease;
  flex-shrink: 0;
}

.auto-assign-trigger-btn[aria-expanded="true"] .auto-assign-trigger-arrow {
  transform: rotate(180deg);
  color: var(--brand, #5b6cf5);
}

.auto-assign-css-popover {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  left: 0;
  min-width: 175px;
  max-height: 230px;
  overflow-y: auto;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border-solid, #e4e6f0);
  border-radius: 13px;
  box-shadow: var(--shadow-xl, 0 20px 44px -10px rgba(15, 23, 42, 0.22));
  padding: 5px;
  z-index: 2600;
  display: flex;
  flex-direction: column;
  gap: 3px;
  animation: fadeScaleIn 0.18s var(--spring, cubic-bezier(0.16, 1, 0.3, 1));
}

.auto-assign-css-popover.hidden {
  display: none !important;
}

[data-theme="dark"] .auto-assign-css-popover,
body.dark-mode .auto-assign-css-popover {
  background: var(--surface, #181b26);
  border-color: var(--border-solid, #2a2d42);
  box-shadow: 0 20px 44px -10px rgba(0, 0, 0, 0.65);
}

.auto-assign-popover-option {
  width: 100%;
  padding: 6px 9px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text, #1a1d2e);
  font-family: 'Cairo', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  cursor: pointer;
  transition: all 0.14s ease;
}

[data-theme="dark"] .auto-assign-popover-option,
body.dark-mode .auto-assign-popover-option {
  color: var(--text, #e8eaf6);
}

.auto-assign-popover-option:hover {
  background: var(--surface-2, #f7f8fc);
  color: var(--brand, #5b6cf5);
}

[data-theme="dark"] .auto-assign-popover-option:hover,
body.dark-mode .auto-assign-popover-option:hover {
  background: var(--surface-2, #1e2132);
  color: var(--brand-light, #a5b0ff);
}

.auto-assign-popover-option.active {
  background: var(--brand-bg, #eef0ff);
  color: var(--brand, #5b6cf5);
  font-weight: 800;
}

[data-theme="dark"] .auto-assign-popover-option.active,
body.dark-mode .auto-assign-popover-option.active {
  background: rgba(91, 108, 245, 0.18);
  color: var(--brand-light, #a5b0ff);
}

.auto-assign-popover-create-btn {
  width: 100%;
  margin-top: 2px;
  padding: 6px 9px;
  border-radius: 8px;
  border: 1px dashed rgba(91, 108, 245, 0.35);
  background: rgba(91, 108, 245, 0.06);
  color: var(--brand, #5b6cf5);
  font-family: 'Cairo', sans-serif;
  font-size: 0.73rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.auto-assign-popover-create-btn:hover {
  background: var(--brand, #5b6cf5);
  color: #ffffff;
  border-style: solid;
}

/* 8. Open Full Templates Page Button & Ultra-Compact Clean Template Cards */
.tmpl-open-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--brand-bg, #eef0ff);
  color: var(--brand, #5b6cf5) !important;
  font-size: 0.72rem;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.18s ease;
}

.tmpl-open-page-btn i,
.style-card-title .tmpl-open-page-btn i {
  color: currentColor !important;
  font-size: 0.72rem !important;
  transition: color 0.18s ease;
}

[data-theme="dark"] .tmpl-open-page-btn,
body.dark-mode .tmpl-open-page-btn {
  background: var(--brand-bg, rgba(91, 108, 245, 0.16));
  color: var(--brand-light, #a5b0ff) !important;
}

.tmpl-open-page-btn:hover,
[data-theme="dark"] .tmpl-open-page-btn:hover,
body.dark-mode .tmpl-open-page-btn:hover {
  background: var(--brand, #5b6cf5) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.tmpl-open-page-btn:hover i,
.style-card-title .tmpl-open-page-btn:hover i,
[data-theme="dark"] .tmpl-open-page-btn:hover i,
[data-theme="dark"] .style-card-title .tmpl-open-page-btn:hover i {
  color: #ffffff !important;
}

#popover-style .templates-catalog-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  max-height: 410px !important;
  padding: 2px !important;
}

#popover-style .template-preview-card {
  border-radius: 12px !important;
  border: 1px solid var(--border-solid, #e4e6f0) !important;
  background: var(--surface-2, #f7f8fc) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: none !important;
  transition: border-color 0.18s ease, transform 0.18s ease !important;
}

[data-theme="dark"] #popover-style .template-preview-card,
body.dark-mode #popover-style .template-preview-card {
  background: var(--surface-2, #1e2132) !important;
  border-color: var(--border-solid, #2a2d42) !important;
}

#popover-style .template-preview-card:hover {
  border-color: var(--brand, #5b6cf5) !important;
  transform: translateY(-1px) !important;
}

#popover-style .tmpl-card-thumb-wrap {
  height: 78px !important;
  position: relative !important;
  overflow: hidden !important;
  background: #0f172a !important;
}

#popover-style .tmpl-card-body {
  padding: 6px 8px 4px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

#popover-style .tmpl-card-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
}

#popover-style .tmpl-card-title {
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  color: var(--text, #1a1d2e) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
}

[data-theme="dark"] #popover-style .tmpl-card-title,
body.dark-mode #popover-style .tmpl-card-title {
  color: var(--text, #e8eaf6) !important;
}

#popover-style .tmpl-card-desc,
#popover-style .tmpl-card-Badges-overlay .tmpl-badge-chip:not(.tmpl-compact-status-dot) {
  display: none !important;
}

#popover-style .template-varieties-Section {
  margin-top: 2px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

#popover-style .template-varieties-header {
  display: none !important;
}

#popover-style .template-varieties-bar {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px 0 !important;
  overflow-x: auto !important;
}

#popover-style .template-variety-circle {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border-radius: 50% !important;
}

#popover-style .tmpl-card-footer {
  padding: 5px 8px 7px !important;
  margin-top: auto !important;
  border-top: none !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

#popover-style .tmpl-card-footer .btn {
  padding: 4px 8px !important;
  font-size: 0.71rem !important;
  border-radius: 8px !important;
  min-height: 26px !important;
}

/* Workspace Name Editor Modal (Uncle Dashboard Mobile Bottom Sheet & Desktop Centered) */
#modal-template-editor.workspace-editor-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  background: rgba(15, 23, 42, 0.48) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 16px !important;
  font-family: 'Cairo', sans-serif !important;
  direction: rtl !important;
  animation: overlayIn 0.2s var(--ease, cubic-bezier(0.4, 0, 0.2, 1)) !important;
}

#modal-template-editor.workspace-editor-modal-overlay.hidden {
  display: none !important;
}

#modal-template-editor .workspace-editor-modal-card {
  width: 100% !important;
  max-width: 420px !important;
  background: var(--surface, #ffffff) !important;
  border: 1px solid var(--border-solid, #e4e6f0) !important;
  border-radius: var(--r-xl, 24px) !important;
  box-shadow: var(--shadow-xl, 0 32px 64px -12px rgba(0, 0, 0, 0.22)) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  animation: fadeScaleIn 0.25s var(--spring, cubic-bezier(0.16, 1, 0.3, 1)) !important;
}

[data-theme="dark"] #modal-template-editor .workspace-editor-modal-card,
body.dark-mode #modal-template-editor .workspace-editor-modal-card {
  background: var(--surface, #181b26) !important;
  border-color: var(--border-solid, #2a2d42) !important;
}

.workspace-editor-modal-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--border-solid, #e4e6f0);
}

[data-theme="dark"] .workspace-editor-modal-header,
body.dark-mode .workspace-editor-modal-header {
  border-bottom-color: var(--border-solid, #2a2d42);
}

.workspace-editor-header-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.workspace-editor-header-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--brand-bg, #eef0ff);
  color: var(--brand, #5b6cf5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.workspace-editor-header-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.workspace-editor-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text, #1a1d2e);
}

[data-theme="dark"] .workspace-editor-title,
body.dark-mode .workspace-editor-title {
  color: var(--text, #e8eaf6);
}

.workspace-editor-subtitle {
  margin: 0;
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--text-3, #8b90a8);
}

.workspace-editor-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--surface-3, #eceef7);
  color: var(--text-2, #4b5068);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
}

.workspace-editor-close-btn:hover {
  background: var(--brand-bg, #eef0ff);
  color: var(--brand, #5b6cf5);
  transform: scale(1.08);
}

.workspace-editor-modal-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.workspace-editor-field-label {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-2, #4b5068);
}

[data-theme="dark"] .workspace-editor-field-label,
body.dark-mode .workspace-editor-field-label {
  color: var(--text-2, #9299be);
}

.workspace-editor-input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--surface-2, #f7f8fc);
  border: 1.5px solid var(--border-solid, #e4e6f0);
  color: var(--text, #1a1d2e);
  font-family: 'Cairo', sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  box-sizing: border-box;
  transition: all 0.16s ease;
}

[data-theme="dark"] .workspace-editor-input,
body.dark-mode .workspace-editor-input {
  background: var(--surface-3, #252840);
  border-color: var(--border-solid, #2a2d42);
  color: var(--text, #e8eaf6);
}

.workspace-editor-input:focus {
  outline: none;
  border-color: var(--brand, #5b6cf5);
  box-shadow: 0 0 0 3px var(--brand-glow, rgba(91, 108, 245, 0.18));
}

.workspace-editor-modal-footer {
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border-solid, #e4e6f0);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

[data-theme="dark"] .workspace-editor-modal-footer,
body.dark-mode .workspace-editor-modal-footer {
  border-top-color: var(--border-solid, #2a2d42);
}

.workspace-editor-cancel-btn {
  padding: 8px 16px;
  border-radius: 12px;
  border: 1px solid var(--border-solid, #e4e6f0);
  background: var(--surface-2, #f7f8fc);
  color: var(--text-2, #4b5068);
  font-family: 'Cairo', sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}

.workspace-editor-submit-btn {
  padding: 8px 18px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, var(--brand, #5b6cf5), var(--brand-dark, #4354e8));
  color: #ffffff;
  font-family: 'Cairo', sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(91, 108, 245, 0.24);
}

@media (max-width: 768px) {
  #modal-template-editor.workspace-editor-modal-overlay:not(.hidden) {
    padding: 0 !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
  }

  #modal-template-editor .workspace-editor-modal-card {
    max-width: 100% !important;
    border-radius: 28px 28px 0 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 12px) !important;
    animation: sheetUp 0.32s var(--spring, cubic-bezier(0.16, 1, 0.3, 1)) !important;
  }

  .workspace-editor-modal-header {
    padding-top: 22px;
  }

  .workspace-editor-modal-header::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-solid, #cbd5e1);
  }
}

/* 9. Sleek Broadcast Chroma Green Simulated Studio Banner */
.broadcast-chroma-sim-banner {
  position: relative;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 50% 35%, rgba(0, 255, 0, 0.26), rgba(6, 78, 59, 0.92) 75%),
    linear-gradient(135deg, #052e16 0%, #064e3b 50%, #022c22 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 8px 10px;
  box-sizing: border-box;
  overflow: hidden;
  user-select: none;
}

.broadcast-chroma-sim-banner.pos-top {
  justify-content: flex-start;
  padding-top: 24px;
}

.broadcast-chroma-sim-banner.pos-center {
  justify-content: center;
}

.broadcast-chroma-sim-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 255, 0, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 0, 0.09) 1px, transparent 1px);
  background-size: 16px 16px;
  pointer-events: none;
}

.broadcast-chroma-key-tag {
  position: absolute;
  top: 6px;
  right: 7px;
  z-index: 3;
  background: rgba(0, 0, 0, 0.68);
  border: 1px solid rgba(0, 255, 0, 0.55);
  color: #4ade80;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.broadcast-chroma-key-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00ff00;
  box-shadow: 0 0 6px #00ff00;
}

.broadcast-chroma-Safe-frame {
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  pointer-events: none;
}

.broadcast-chroma-lyric-pill {
  position: relative;
  z-index: 2;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 3px 12px;
  color: #ffffff;
  font-family: 'Cairo', sans-serif;
  font-size: 0.74rem;
  font-weight: 900;
  text-align: center;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0 2px 6px rgba(0, 0, 0, 0.85);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.broadcast-chroma-sim-banner.pos-center .broadcast-chroma-lyric-pill {
  font-size: 0.86rem;
  padding: 5px 14px;
}

/* 10. Remote Control Opt-In Hint */
.remote-adv-disabled-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-2, #f7f8fc);
  border: 1px dashed var(--border-solid, #cbd5e1);
  color: var(--text-2, #4b5068);
  font-size: 0.75rem;
  font-weight: 600;
}

[data-theme="dark"] .remote-adv-disabled-hint,
body.dark-mode .remote-adv-disabled-hint {
  background: var(--surface-2, #1e2132);
  border-color: var(--border-solid, #2a2d42);
  color: var(--text-2, #9299be);
}

/* 11. Modern Uncle-Dashboard Redesign for #popover-install (.dropdown-popover) */
#popover-install {
  width: 320px !important;
  min-width: 296px !important;
  max-width: calc(100vw - 20px) !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  border-radius: 20px !important;
  border: 1px solid var(--border-solid, #e4e6f0) !important;
  background: var(--surface, #ffffff) !important;
  box-shadow: var(--shadow-xl, 0 28px 56px -12px rgba(15, 23, 42, 0.22)) !important;
  font-family: 'Cairo', sans-serif !important;
}

#popover-install.hidden {
  display: none !important;
}

[data-theme="dark"] #popover-install,
body.dark-mode #popover-install {
  background: var(--surface, #181b26) !important;
  border-color: var(--border-solid, #2a2d42) !important;
  box-shadow: 0 28px 56px -12px rgba(0, 0, 0, 0.65) !important;
}

@media (max-width: 768px) {
  .dropdown-wrapper #popover-install,
  #popover-install {
    position: fixed !important;
    top: 58px !important;
    left: 10px !important;
    right: 10px !important;
    width: calc(100vw - 20px) !important;
    min-width: 0 !important;
    max-width: 356px !important;
    margin: 0 auto !important;
    margin-inline: auto !important;
    z-index: 999999 !important;
  }
}

#popover-install .install-popover-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

#popover-install .install-popover-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

#popover-install .install-popover-icon-badge {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--brand-bg, #eef0ff);
  color: var(--brand, #5b6cf5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

#popover-install .install-popover-icon-badge.is-update {
  background: var(--success-bg, #d1fae5);
  color: var(--success-dark, #059669);
}

[data-theme="dark"] #popover-install .install-popover-icon-badge,
body.dark-mode #popover-install .install-popover-icon-badge {
  background: rgba(91, 108, 245, 0.16);
  color: #a5b0ff;
}

[data-theme="dark"] #popover-install .install-popover-icon-badge.is-update,
body.dark-mode #popover-install .install-popover-icon-badge.is-update {
  background: rgba(16, 185, 129, 0.16);
  color: #34d399;
}

#popover-install .install-popover-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#popover-install .install-popover-title {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--text, #1a1d2e);
  line-height: 1.3;
}

[data-theme="dark"] #popover-install .install-popover-title,
body.dark-mode #popover-install .install-popover-title {
  color: var(--text, #e8eaf6);
}

#popover-install .install-popover-status-pill {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-2, #4b5068);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

#popover-install .install-popover-close-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--surface-3, #eceef7);
  color: var(--text-2, #4b5068);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.18s ease;
}

#popover-install .install-popover-close-btn:hover {
  background: var(--brand-bg, #eef0ff);
  color: var(--brand, #5b6cf5);
  transform: scale(1.08);
}

[data-theme="dark"] #popover-install .install-popover-close-btn,
body.dark-mode #popover-install .install-popover-close-btn {
  background: var(--surface-3, #252840);
  color: var(--text-2, #9299be);
}

#popover-install .install-popover-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#popover-install .install-popover-desc {
  margin: 0;
  padding: 9px 11px;
  border-radius: 12px;
  background: var(--surface-2, #f7f8fc);
  border: 1px solid var(--border-solid, #e4e6f0);
  font-size: 0.77rem;
  font-weight: 600;
  color: var(--text-2, #4b5068);
  line-height: 1.5;
}

[data-theme="dark"] #popover-install .install-popover-desc,
body.dark-mode #popover-install .install-popover-desc {
  background: var(--surface-2, #1e2132);
  border-color: var(--border-solid, #2a2d42);
  color: var(--text-2, #9299be);
}

#popover-install .install-progress-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--surface-2, #f7f8fc);
  border: 1px solid var(--border-solid, #e4e6f0);
}

#popover-install .install-progress-box.hidden {
  display: none !important;
}

#popover-install .install-progress-track {
  background: var(--surface-3, #e2e8f0);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

#popover-install .install-progress-fill {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand, #5b6cf5), var(--brand-dark, #4354e8));
  transition: width 0.2s ease;
}

#popover-install .install-progress-label {
  font-size: 0.73rem;
  font-weight: 800;
  color: var(--text-2, #4b5068);
  text-align: center;
}

#popover-install .install-actions-row.hidden {
  display: none !important;
}

#popover-install .btn-install-primary {
  width: 100%;
  padding: 9px 14px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, var(--brand, #5b6cf5), var(--brand-dark, #4354e8));
  color: #ffffff;
  font-family: 'Cairo', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 8px 18px rgba(79, 70, 229, 0.2);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

#popover-install .btn-install-primary.is-update {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 8px 18px rgba(16, 185, 129, 0.24);
}

#popover-install .btn-install-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.26) inset, 0 12px 24px rgba(79, 70, 229, 0.28);
}

#popover-install .btn-install-primary:disabled {
  opacity: 0.7;
  cursor: wait;
}

#popover-install .btn-install-secondary {
  width: 100%;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-solid, #e4e6f0);
  background: var(--surface-2, #f7f8fc);
  color: var(--text, #1a1d2e);
  font-family: 'Cairo', sans-serif;
  font-size: 0.79rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.18s ease;
}

#popover-install .btn-install-secondary:hover {
  border-color: var(--brand, #5b6cf5);
  color: var(--brand, #5b6cf5);
  background: var(--brand-bg, #eef0ff);
}

#popover-install .install-ios-helper-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2, #f7f8fc);
  border: 1px solid var(--border-solid, #e4e6f0);
}

#popover-install .install-ios-helper-card.hidden {
  display: none !important;
}

#popover-install .install-ios-helper-title {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text, #1a1d2e);
  display: flex;
  align-items: center;
  gap: 6px;
}

#popover-install .install-ios-helper-step {
  font-size: 0.75rem;
  color: var(--text-2, #4b5068);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
#popover-install .install-ios-helper-step i {
  color: var(--brand, #5b6cf5);
}

/* Hide ghost-tab-pill so it never overlaps search bar clear/filter buttons */
.search-ghost-overlay .ghost-tab-pill {
  display: none !important;
}

/* ============================================================================
   2026 COMPREHENSIVE OVERHAUL:
   1. FLICKER-FREE CIRCULAR VIEW TRANSITION DARK MODE SWITCH
   2. BORDERLESS AESTHETIC (NO BRAND BORDER-COLOR ON HOVER / ACTIVE / NORMAL)
   3. STYLE DRAWER NON-OVERLAPPING DESKTOP LAYOUT & WORKSPACE CARD CLEANUP
   4. TEMPLATE VARIETIES, AUTO-ASSIGN SLOT & COLOR PICKER FIT-CONTENT
   5. COMPLETE UNCLE DASHBOARD DARK MODE (ZERO WHITE REMNANTS, NO HARSH GLOWS)
   6. FULLSCREEN UNIFORM FIT-TO-TEXT GRID & RECENT TARANIM DROPDOWN
   ============================================================================ */

/* --- 1. Circular View Transition for Dark Mode Switch (Zero Flicker & Silky 60fps) --- */
@keyframes vtThemeCircleIn {
  from {
    clip-path: circle(0px at var(--vt-x, 50%) var(--vt-y, 28px));
  }
  to {
    clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 50%) var(--vt-y, 28px));
  }
}

::view-transition-group(root) {
  animation-duration: 0.44s !important;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
}

::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal !important;
  display: block;
}

::view-transition-old(root) {
  animation: none !important;
  z-index: 1;
}

::view-transition-new(root) {
  z-index: 9999999;
  animation: vtThemeCircleIn 0.44s cubic-bezier(0.22, 1, 0.36, 1) both !important;
  will-change: clip-path;
}

html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition: none !important;
}

/* Ensure #btn-menu-install stays hidden whenever hidden or display:none is set */
#btn-menu-install.hidden,
.top-nav #btn-menu-install.hidden,
[data-theme="dark"] .top-nav #btn-menu-install.hidden,
body.dark-mode .top-nav #btn-menu-install.hidden,
#btn-menu-install[style*="display: none"],
#btn-menu-install[style*="display:none"],
.top-nav #btn-menu-install[style*="display: none"],
.top-nav #btn-menu-install[style*="display:none"],
[data-theme="dark"] .top-nav #btn-menu-install[style*="display: none"],
[data-theme="dark"] .top-nav #btn-menu-install[style*="display:none"] {
  display: none !important;
}

/* --- 2. Borderless Aesthetic: Remove Brand Borders on Hover / Active / Normal --- */
.workspace-item-row,
.workspace-item-row:hover,
.workspace-item-row.active,
.tmpl-dropdown-trigger-btn,
.tmpl-dropdown-trigger-btn:hover,
.tmpl-dropdown-trigger-btn.active,
.workspace-add-btn,
.workspace-add-btn:hover,
.canva-trans-card,
.canva-trans-card:hover,
.canva-trans-card.active,
#popover-style .template-preview-card,
#popover-style .template-preview-card:hover,
#popover-style .template-preview-card.active-template,
.auto-assign-trigger-btn,
.auto-assign-trigger-btn:hover,
.auto-assign-trigger-btn.is-open,
.auto-assign-option-item,
.auto-assign-option-item:hover,
.auto-assign-option-item.active,
.tmpl-explore-banner-card,
.tmpl-explore-banner-card:hover,
#btn-playlist-selector,
#btn-playlist-selector:hover,
#btn-playlist-selector.active,
.playlist-entry-row,
.playlist-entry-row:hover,
.playlist-entry-row.active,
.bible-book-card,
.bible-book-card:hover,
.bible-chapter-btn,
.bible-chapter-btn:hover,
.effect-preset-tile,
.effect-preset-tile:hover,
.effect-preset-tile.active,
#popover-install .btn-install-secondary:hover {
  border-color: transparent !important;
}

.workspace-item-row {
  border: none !important;
  background: transparent !important;
}

.workspace-item-row:hover {
  background: var(--surface-2, #f7f8fc) !important;
}

.workspace-item-row.active {
  background: var(--brand-bg, #eef0ff) !important;
  box-shadow: none !important;
}

.canva-trans-card {
  border: 1px solid var(--border-solid, #e4e6f0) !important;
  box-shadow: none !important;
}

.canva-trans-card:hover {
  background: var(--surface-3, #eceef7) !important;
  border-color: var(--border-solid, #e4e6f0) !important;
  transform: translateY(-1px);
}

.canva-trans-card.active {
  background: var(--brand-bg, #eef0ff) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

#popover-style .template-preview-card {
  border: 1px solid var(--border-solid, #e4e6f0) !important;
  box-shadow: none !important;
}

#popover-style .template-preview-card:hover {
  background: var(--surface-3, #eceef7) !important;
  border-color: var(--border-solid, #e4e6f0) !important;
}

#popover-style .template-preview-card.active-template {
  background: var(--brand-bg, #eef0ff) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.chroma-circle-swatch.active {
  border-color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important;
}

/* --- 3. Remove Arrows in .style-drawer-scroll-body .workspace-inline-card --- */
.style-drawer-scroll-body .workspace-inline-card .tmpl-cycle-btn,
#tab-workspace-switcher .tmpl-cycle-btn {
  display: none !important;
}

/* --- 4. Fix .template-varieties-wrap Styling --- */
.template-varieties-wrap,
#popover-style .template-varieties-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin-top: 6px !important;
  padding: 2px 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.template-varieties-label {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: var(--text-3, #8b90a8) !important;
}

.template-varieties-bar {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.template-variety-circle {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(255, 255, 255, 0.75) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18) !important;
  transition: transform 0.16s ease !important;
}

.template-variety-circle:hover {
  transform: scale(1.12) !important;
}

.template-variety-circle.active {
  transform: scale(1.14) !important;
  border: 2px solid var(--text, #1a1d2e) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24) !important;
}

/* --- 5. Keep .half-panel.style-drawer-panel Full-Height & Shift Search Slightly Left When Open --- */
@media (min-width: 1025px) {
  .app-container:has(#popover-style:not(.hidden):not(.is-closing)) .search-hero .centered-search-box,
  .app-container:has(#popover-style:not(.hidden):not(.is-closing)) .search-hero #search-suggestions-chips,
  .app-container.is-search-active:has(#popover-style:not(.hidden):not(.is-closing)) .search-hero #search-suggestions-chips,
  .app-container.is-search-active:has(#popover-style:not(.hidden):not(.is-closing)) .search-hero #search-suggestions-chips.hidden,
  .app-container.is-search-active:has(#popover-style:not(.hidden):not(.is-closing)) .search-hero #search-suggestions-chips:empty {
    width: min(720px, calc(100% - clamp(410px, 34vw, 490px) - 1rem)) !important;
    max-width: min(720px, calc(100% - clamp(410px, 34vw, 490px) - 1rem)) !important;
    margin-right: max(calc((100% - min(100%, 720px)) / 2), calc(clamp(410px, 34vw, 490px) + 0.85rem)) !important;
    margin-left: auto !important;
  }
}

/* True 16:9 Standby Preview Box & Empty Media Guide + Stinger Upload Preview */
.standby-live-preview-box,
#standby-live-preview-box {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  max-height: none !important;
}

.standby-preview-guide {
  position: relative;
  z-index: 4;
  padding: 10px 14px;
  text-align: center;
  font-family: 'Cairo', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(15, 17, 23, 0.62);
  border-radius: 10px;
  max-width: 86%;
  pointer-events: none;
}

.trans-stage-stinger {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 4px !important;
}

.trans-stinger-upload-icon {
  font-size: 0.92rem;
  color: var(--brand, #5b6cf5);
  transition: transform 0.22s ease;
}

.canva-trans-card:hover .trans-stinger-upload-icon {
  transform: translateY(-2px) scale(1.08);
}

.trans-stinger-upload-hint {
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--text-2, #4b5068);
  line-height: 1.1;
  text-align: center;
}

[data-theme="dark"] .trans-stinger-upload-hint {
  color: var(--text-2, #9299be) !important;
}

/* --- 6. Remove .auto-assign-slot Background Color and Border --- */
.auto-assign-slot {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 2px 0 !important;
  border-radius: 0 !important;
}

.auto-assign-trigger-btn {
  background: var(--surface-3, #eceef7) !important;
  border: none !important;
  box-shadow: none !important;
}

.auto-assign-trigger-btn:hover,
.auto-assign-trigger-btn.is-open {
  background: var(--brand-bg, #eef0ff) !important;
  color: var(--brand, #5b6cf5) !important;
  border: none !important;
  box-shadow: none !important;
}

/* --- 7. Make .color-picker-badge-wrap Fit to Content --- */
.color-picker-badge-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: fit-content !important;
  max-width: max-content !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
  padding: 5px 10px !important;
  border-radius: 12px !important;
  background: var(--surface-3, #eceef7) !important;
  border: none !important;
}

/* --- 8. Complete Uncle Dashboard Dark Mode Overhaul --- */
[data-theme="dark"],
body.dark-mode {
  --bg: #0f1117;
  --surface: #181b26;
  --surface-2: #1e2132;
  --surface-3: #252840;
  --border: rgba(91, 108, 245, 0.14);
  --border-solid: #2a2d42;
  --text: #e8eaf6;
  --text-2: #9299be;
  --text-3: #565c7a;
  --brand: #5b6cf5;
  --brand-dark: #4354e8;
  --brand-light: #a5b0ff;
  --brand-bg: rgba(91, 108, 245, 0.15);
  --brand-glow: rgba(91, 108, 245, 0.14);
  --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 20px 48px -8px rgba(0, 0, 0, 0.65);
  --shadow-xl: 0 32px 64px -12px rgba(0, 0, 0, 0.75);
}

/* 8.1 Search Bar, Intelligent Search & Filter Drawer in Dark Mode (Exact Pill Style, Never Boxy) */
[data-theme="dark"] .centered-search-box,
[data-theme="dark"] .centered-search-box:focus-within {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

[data-theme="dark"] #intelligent-search,
[data-theme="dark"] .centered-search-box > input#intelligent-search {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: none !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important;
  caret-color: var(--brand-light) !important;
}

[data-theme="dark"] .centered-search-box:has(#intelligent-search:focus) > input#intelligent-search,
[data-theme="dark"] .centered-search-box > input#intelligent-search:focus,
[data-theme="dark"] .app-container.is-search-active .centered-search-box > input#intelligent-search,
[data-theme="dark"] .centered-search-box:has(#search-results-dropdown:not(.hidden):not(.is-closing)) > input#intelligent-search {
  background: var(--surface) !important;
  border: none !important;
  box-shadow: 0 10px 26px -4px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .centered-search-box:has(#search-results-dropdown:not(.hidden):not(.is-closing)) > input#intelligent-search,
[data-theme="dark"] .centered-search-box.has-open-dropdown > input#intelligent-search {
  border-bottom: 1px solid var(--border-solid) !important;
}

[data-theme="dark"] #intelligent-search::placeholder {
  color: var(--text-3) !important;
}

[data-theme="dark"] .search-inside-toggle {
  background: transparent !important;
  color: var(--text-2) !important;
  border: none !important;
}

[data-theme="dark"] .search-inside-toggle:hover,
[data-theme="dark"] .search-inside-toggle.active,
[data-theme="dark"] .search-inside-toggle.is-open {
  background: var(--surface-3) !important;
  color: var(--brand-light) !important;
}

[data-theme="dark"] .centered-search-box .clear-btn {
  background: var(--surface-3) !important;
  color: var(--text-2) !important;
  border: none !important;
}

[data-theme="dark"] .centered-search-box .clear-btn:hover {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #f87171 !important;
}

[data-theme="dark"] #search-filter-drawer,
[data-theme="dark"] .search-filter-drawer {
  background: var(--surface) !important;
  border-top: 1px solid var(--border-solid) !important;
  color: var(--text) !important;
}

[data-theme="dark"] .search-filter-header {
  background: var(--surface-2) !important;
  border-bottom: 1px solid var(--border-solid) !important;
}

[data-theme="dark"] .search-filter-tab {
  background: transparent !important;
  color: var(--text-2) !important;
  border: none !important;
}

[data-theme="dark"] .search-filter-tab:hover {
  background: var(--surface-3) !important;
  color: var(--text) !important;
}

[data-theme="dark"] .search-filter-tab.active {
  background: var(--brand-bg) !important;
  color: var(--brand-light) !important;
}

[data-theme="dark"] .search-filter-mini-search,
[data-theme="dark"] #search-filter-subquery {
  background: var(--surface-3) !important;
  color: var(--text) !important;
  border-color: var(--border-solid) !important;
}

[data-theme="dark"] .search-filter-chip {
  background: var(--surface-2) !important;
  color: var(--text-2) !important;
  border: 1px solid var(--border-solid) !important;
}

[data-theme="dark"] .search-filter-chip:hover {
  background: var(--surface-3) !important;
  color: var(--text) !important;
}

[data-theme="dark"] .search-filter-chip.active {
  background: var(--brand-bg) !important;
  color: var(--brand-light) !important;
  border-color: transparent !important;
}

/* 8.2 Segmented Control Group & Color Picker Badge Wrap in Dark Mode */
[data-theme="dark"] .segmented-control-group {
  background: var(--surface-3) !important;
  border: 1px solid var(--border-solid) !important;
}

[data-theme="dark"] .segmented-btn {
  background: transparent !important;
  color: var(--text-2) !important;
  border: none !important;
}

[data-theme="dark"] .segmented-btn:hover {
  color: var(--text) !important;
}

[data-theme="dark"] .segmented-btn.active {
  background: var(--surface) !important;
  color: var(--brand-light) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .color-picker-badge-wrap {
  background: var(--surface-3) !important;
  border: 1px solid var(--border-solid) !important;
  color: var(--text) !important;
}

[data-theme="dark"] .color-val-hex {
  color: var(--text) !important;
}

/* 8.3 Design / Style Drawer Tabs & Controls in Dark Mode */
[data-theme="dark"] #popover-style,
[data-theme="dark"] .half-panel.style-drawer-panel {
  background: var(--surface) !important;
  border-color: var(--border-solid) !important;
  color: var(--text) !important;
}

[data-theme="dark"] .style-drawer-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border-solid) !important;
}

[data-theme="dark"] .style-nav-tabs {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border-solid) !important;
}

[data-theme="dark"] .style-tab-btn {
  background: var(--surface-2) !important;
  color: var(--text-2) !important;
  border: none !important;
}

[data-theme="dark"] .style-tab-btn:hover {
  background: var(--surface-3) !important;
  color: var(--text) !important;
}

[data-theme="dark"] .style-tab-btn.active {
  background: var(--brand-bg) !important;
  color: var(--brand-light) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .style-drawer-scroll-body {
  background: var(--surface) !important;
}

[data-theme="dark"] #popover-style .style-card {
  background: var(--surface-2) !important;
  border: 1px solid var(--border-solid) !important;
  box-shadow: none !important;
}

[data-theme="dark"] #popover-style .style-card-header,
[data-theme="dark"] #popover-style .control-field label,
[data-theme="dark"] #popover-style .toggle-switch-label span {
  color: var(--text) !important;
}

[data-theme="dark"] #popover-style .control-select,
[data-theme="dark"] #popover-style .control-input,
[data-theme="dark"] .custom-font-dropdown-btn,
[data-theme="dark"] .counter-text-chip,
[data-theme="dark"] .control-btn,
[data-theme="dark"] .safe-area-lock-btn,
[data-theme="dark"] .text-transform-reset-btn,
[data-theme="dark"] #popover-style .btn-secondary,
[data-theme="dark"] .template-shuffle-display-row {
  background: var(--surface-3) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-solid) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .custom-font-dropdown-menu {
  background: var(--surface-2) !important;
  border: 1px solid var(--border-solid) !important;
  box-shadow: var(--shadow-lg) !important;
}

[data-theme="dark"] .custom-font-option {
  color: var(--text) !important;
}

[data-theme="dark"] .custom-font-option:hover,
[data-theme="dark"] .custom-font-option.active {
  background: var(--brand-bg) !important;
  color: var(--brand-light) !important;
}

[data-theme="dark"] .effect-preset-tile {
  background: var(--surface-3) !important;
  border: 1px solid var(--border-solid) !important;
  color: var(--text-2) !important;
}

[data-theme="dark"] .effect-preset-tile:hover {
  background: rgba(91, 108, 245, 0.1) !important;
  color: var(--text) !important;
}

[data-theme="dark"] .effect-preset-tile.active {
  background: var(--brand-bg) !important;
  color: var(--brand-light) !important;
  border-color: transparent !important;
}

[data-theme="dark"] .circle-angle-dial {
  background: var(--surface-3) !important;
  border-color: var(--border-solid) !important;
}

[data-theme="dark"] .canva-trans-card {
  background: var(--surface-3) !important;
  border: 1px solid var(--border-solid) !important;
}

[data-theme="dark"] .canva-trans-card:hover {
  background: #2c304d !important;
}

[data-theme="dark"] .canva-trans-card.active {
  background: var(--brand-bg) !important;
  border-color: transparent !important;
}

[data-theme="dark"] .canva-trans-stage {
  background: var(--surface) !important;
  border-color: var(--border-solid) !important;
}

[data-theme="dark"] .canva-trans-name {
  color: var(--text) !important;
}

[data-theme="dark"] .tmpl-dropdown-trigger-btn {
  background: var(--surface-3) !important;
  color: var(--text) !important;
  border: none !important;
}

[data-theme="dark"] .tmpl-dropdown-trigger-btn:hover,
[data-theme="dark"] .tmpl-dropdown-trigger-btn.active {
  background: var(--brand-bg) !important;
  color: var(--brand-light) !important;
}

[data-theme="dark"] .workspace-popover-card,
[data-theme="dark"] .auto-assign-popover-menu {
  background: var(--surface-2) !important;
  border: 1px solid var(--border-solid) !important;
  box-shadow: var(--shadow-lg) !important;
}

[data-theme="dark"] .workspace-popover-header {
  border-bottom-color: var(--border-solid) !important;
}

[data-theme="dark"] .workspace-popover-title {
  color: var(--text-2) !important;
}

[data-theme="dark"] .workspace-item-row {
  color: var(--text) !important;
}

[data-theme="dark"] .workspace-item-row:hover {
  background: var(--surface-3) !important;
}

[data-theme="dark"] .workspace-item-row.active {
  background: var(--brand-bg) !important;
  color: var(--brand-light) !important;
}

[data-theme="dark"] .workspace-item-name {
  color: inherit !important;
}

[data-theme="dark"] .auto-assign-trigger-btn {
  background: var(--surface-3) !important;
  color: var(--text) !important;
}

[data-theme="dark"] .auto-assign-option-item {
  color: var(--text) !important;
}

[data-theme="dark"] .auto-assign-option-item:hover {
  background: var(--surface-3) !important;
}

[data-theme="dark"] .auto-assign-option-item.active {
  background: var(--brand-bg) !important;
  color: var(--brand-light) !important;
}

[data-theme="dark"] #popover-style .template-preview-card {
  background: var(--surface-3) !important;
  border: 1px solid var(--border-solid) !important;
}

[data-theme="dark"] #popover-style .template-preview-card.active-template {
  background: var(--brand-bg) !important;
  border-color: transparent !important;
}

[data-theme="dark"] #popover-style .template-card-title {
  color: var(--text) !important;
}

[data-theme="dark"] .tmpl-explore-banner-card {
  background: var(--surface-2) !important;
  border: 1px solid var(--border-solid) !important;
}

[data-theme="dark"] .tmpl-explore-banner-title {
  color: var(--text) !important;
}

[data-theme="dark"] .template-variety-circle.active {
  border-color: #ffffff !important;
}

/* 8.4 Keyboard Shortcuts Modal (اختصارات لوحة المفاتيح) in Dark Mode */
[data-theme="dark"] #modal-keyboard-shortcuts .shortcuts-sheet-card {
  background: var(--surface) !important;
  border: 1px solid var(--border-solid) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-xl) !important;
}

[data-theme="dark"] .shortcuts-sheet-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border-solid) !important;
}

[data-theme="dark"] .shortcuts-sheet-title {
  color: var(--text) !important;
}

[data-theme="dark"] .shortcuts-sheet-close {
  background: var(--surface-3) !important;
  color: var(--text-2) !important;
}

[data-theme="dark"] .shortcuts-sheet-close:hover {
  background: var(--brand-bg) !important;
  color: var(--brand-light) !important;
}

[data-theme="dark"] .shortcuts-sheet-body {
  background: var(--surface) !important;
}

[data-theme="dark"] .shortcut-row {
  background: var(--surface-2) !important;
  border: 1px solid var(--border-solid) !important;
}

[data-theme="dark"] .shortcut-label {
  color: var(--text) !important;
}

[data-theme="dark"] .shortcut-keys kbd,
[data-theme="dark"] kbd {
  background: var(--surface-3) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-solid) !important;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4) !important;
}

/* 8.5 Playlist Selector, Popover Header Stroke & Songs Count Subtext in Dark Mode */
[data-theme="dark"] #btn-playlist-selector {
  background: transparent !important;
  color: var(--text) !important;
  border: none !important;
  box-shadow: none !important;
}

[data-theme="dark"] #btn-playlist-selector:hover,
[data-theme="dark"] #btn-playlist-selector.active {
  background: var(--surface-3) !important;
  color: var(--brand-light) !important;
  border: none !important;
  box-shadow: none !important;
}

[data-theme="dark"] #popover-playlist {
  background: var(--surface-2) !important;
  border: 1px solid var(--border-solid) !important;
  box-shadow: var(--shadow-lg) !important;
}

[data-theme="dark"] .playlist-popover-header {
  background: transparent !important;
  border-bottom: 1px solid var(--border-solid) !important;
  color: var(--text) !important;
}

[data-theme="dark"] .playlist-popover-title {
  color: var(--text) !important;
}

[data-theme="dark"] .playlist-entry-row {
  background: var(--surface-3) !important;
  color: var(--text) !important;
  border: none !important;
}

[data-theme="dark"] .playlist-entry-row:hover {
  background: #2c304d !important;
}

[data-theme="dark"] .playlist-entry-row.active {
  background: var(--brand-bg) !important;
  color: var(--brand-light) !important;
}

[data-theme="dark"] .new-playlist-bar {
  border-top: 1px solid var(--border-solid) !important;
  background: transparent !important;
}

[data-theme="dark"] .btn-create-playlist-pill {
  background: var(--surface-3) !important;
  color: var(--text) !important;
  border: none !important;
}

[data-theme="dark"] .btn-create-playlist-pill:hover {
  background: var(--brand-bg) !important;
  color: var(--brand-light) !important;
}

[data-theme="dark"] .new-playlist-input {
  background: var(--surface-3) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-solid) !important;
}

[data-theme="dark"] .songs-count-subtext,
[data-theme="dark"] .app-bottom-bar .songs-count-subtext {
  background: var(--surface-2) !important;
  color: var(--text-2) !important;
  border-color: var(--border-solid) !important;
}

[data-theme="dark"] .songs-count-subtext span,
[data-theme="dark"] #total-songs-count {
  color: var(--brand-light) !important;
}

/* 8.6 All Checkboxes in Dark Mode */
[data-theme="dark"] input[type="checkbox"] {
  background-color: var(--surface-3) !important;
  border: 1.5px solid #3d4260 !important;
}

[data-theme="dark"] input[type="checkbox"]:hover {
  border-color: var(--brand-light) !important;
  background-color: #2c314f !important;
}

[data-theme="dark"] input[type="checkbox"]:checked {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}

/* 8.7 Bible Popover, Book Filter, Tabs & Book Names (Stroke-Free Segmented Style in Light & Dark Mode) */
.bible-popover-header {
  border-bottom: none !important;
  padding-bottom: 4px !important;
  margin-bottom: 6px !important;
}

.bible-back-btn,
.bible-close-btn {
  border: none !important;
  background: var(--surface-3, #eceef7) !important;
  color: var(--text-2, #4b5068) !important;
}

.bible-back-btn:hover,
.bible-close-btn:hover {
  background: var(--brand-bg, #eef0ff) !important;
  color: var(--brand, #5b6cf5) !important;
}

#bible-books-step .bible-search-input-box input,
#bible-book-filter,
.bible-search-box input {
  background: var(--surface-2, #f7f8fc) !important;
  border: none !important;
  border-radius: 12px !important;
  color: var(--text, #1a1d2e) !important;
  box-shadow: none !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  transition: background 0.16s ease !important;
}

#bible-books-step .bible-search-input-box input:focus,
#bible-book-filter:focus {
  background: var(--surface-3, #eceef7) !important;
  border: none !important;
  box-shadow: none !important;
}

.bible-testament-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px !important;
  border-radius: 12px !important;
  background: var(--surface-2, #f7f8fc) !important;
  border: none !important;
}

.bible-tab-btn {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  color: var(--text-2, #4b5068) !important;
  padding: 6px 10px !important;
  border-radius: 9px !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  box-shadow: none !important;
  transition: background 0.16s ease, color 0.16s ease !important;
}

.bible-tab-btn:hover {
  background: transparent !important;
  color: var(--text, #1a1d2e) !important;
  border: none !important;
}

.bible-tab-btn.active {
  background: var(--surface, #ffffff) !important;
  color: var(--brand, #5b6cf5) !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

.bible-book-card {
  background: var(--surface-2, #f7f8fc) !important;
  border: none !important;
  border-radius: 11px !important;
  box-shadow: none !important;
}

.bible-book-card:hover {
  background: var(--brand-bg, #eef0ff) !important;
  border: none !important;
  transform: translateY(-1px);
}

.bible-chapter-btn {
  background: var(--surface-2, #f7f8fc) !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.bible-chapter-btn:hover {
  background: var(--brand-bg, #eef0ff) !important;
  color: var(--brand, #5b6cf5) !important;
  border: none !important;
}

[data-theme="dark"] #popover-bible {
  background: var(--surface) !important;
  border: 1px solid var(--border-solid) !important;
  box-shadow: var(--shadow-xl) !important;
}

[data-theme="dark"] .bible-popover-header {
  background: var(--surface) !important;
  border-bottom: none !important;
}

[data-theme="dark"] .bible-back-btn,
[data-theme="dark"] .bible-close-btn {
  background: var(--surface-3) !important;
  color: var(--text-2) !important;
  border: none !important;
}

[data-theme="dark"] .bible-back-btn:hover,
[data-theme="dark"] .bible-close-btn:hover {
  background: var(--brand-bg) !important;
  color: var(--brand-light) !important;
}

[data-theme="dark"] #bible-books-step .bible-search-input-box input,
[data-theme="dark"] #bible-book-filter,
[data-theme="dark"] .bible-search-box input {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border: none !important;
  box-shadow: none !important;
}

[data-theme="dark"] #bible-books-step .bible-search-input-box input:focus,
[data-theme="dark"] #bible-book-filter:focus {
  background: var(--surface-3) !important;
  border: none !important;
  box-shadow: none !important;
}

[data-theme="dark"] #bible-book-filter::placeholder {
  color: var(--text-3) !important;
}

[data-theme="dark"] .bible-testament-tabs {
  background: var(--surface-2) !important;
  border: none !important;
}

[data-theme="dark"] .bible-tab-btn {
  background: transparent !important;
  color: var(--text-2) !important;
  border: none !important;
}

[data-theme="dark"] .bible-tab-btn:hover {
  background: transparent !important;
  color: var(--text) !important;
}

[data-theme="dark"] .bible-tab-btn.active {
  background: var(--surface-3) !important;
  color: var(--brand-light) !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .bible-book-card {
  background: var(--surface-2) !important;
  border: none !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .bible-book-card:hover {
  background: var(--surface-3) !important;
  border: none !important;
}

[data-theme="dark"] .bible-book-name {
  color: var(--text) !important;
}

[data-theme="dark"] .bible-selected-book-banner {
  background: var(--brand-bg) !important;
  color: var(--brand-light) !important;
  border: none !important;
}

[data-theme="dark"] .bible-chapter-btn {
  background: var(--surface-2) !important;
  border: none !important;
  color: var(--text) !important;
}

[data-theme="dark"] .bible-chapter-btn:hover {
  background: var(--brand-bg) !important;
  color: var(--brand-light) !important;
  border: none !important;
}

/* Remove any dividers / borders inside .song-info-modal-body in Dark Mode */
[data-theme="dark"] .song-info-modal-header,
body.dark-mode .song-info-modal-header,
[data-theme="dark"] .song-info-section,
body.dark-mode .song-info-section,
[data-theme="dark"] .song-info-modal-body > *,
body.dark-mode .song-info-modal-body > *,
[data-theme="dark"] .song-info-chord-pill,
body.dark-mode .song-info-chord-pill {
  border: none !important;
  border-bottom: none !important;
}

/* ============================================================================
   10. GLOBAL GLOW REMOVAL ACROSS LIGHT & DARK MODES
   ============================================================================ */
:root,
[data-theme="light"],
[data-theme="dark"],
body,
body.dark-mode {
  --brand-glow: transparent !important;
  --se-brand-glow: transparent !important;
  --shadow-glow: none !important;
}

/* Remove focus rings & glow shadows on inputs, selects, buttons, cards, and active elements */
input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible,
button:focus,
button:focus-visible,
.control-input:focus,
.control-select:focus,
.new-playlist-input:focus,
.tmpl-editor-input:focus,
.search-filter-mini-search:focus-within,
#search-filter-subquery:focus,
#bible-book-filter:focus,
.slide-jump-clean-input:focus,
.custom-font-dropdown-btn:focus,
.custom-font-dropdown-btn.open,
.tmpl-dropdown-trigger-btn:focus,
.tmpl-dropdown-trigger-btn.active,
.auto-assign-trigger-btn:focus,
.auto-assign-trigger-btn.is-open,
.top-nav .icon-menu-btn,
.top-nav .icon-menu-btn:hover,
.top-nav .icon-menu-btn.active,
.top-nav .icon-menu-btn.active-menu-btn,
.top-nav .icon-menu-btn.desktop-only-btn.active,
.top-nav .icon-menu-btn.desktop-only-btn.active-menu-btn,
.mode-group-btn,
.mode-group-btn:hover,
.mode-group-btn.active,
.btn,
.btn:hover,
.btn-primary,
.btn-primary:hover,
.btn-secondary,
.btn-secondary:hover,
.workspace-add-btn,
.workspace-add-btn:hover,
.tmpl-explore-banner-arrow,
.tmpl-explore-banner-card:hover .tmpl-explore-banner-arrow,
#popover-install .btn-install-primary,
#popover-install .btn-install-primary:hover,
#popover-install .btn-install-primary:hover:not(:disabled),
#modal-custom-song-editor .btn-primary,
#modal-custom-song-editor .btn-primary:hover,
#modal-custom-song-editor .btn-primary.btn-success,
#modal-screen-choice .screen-choice-option-btn.is-accent,
#modal-screen-choice .screen-choice-option-btn.is-accent:hover,
#btn-toggle-chords-preview.active,
#btn-toggle-standby.active,
#btn-toggle-blank.active-mode,
#btn-close-presentation-overlay:active,
#btn-toggle-overlay-highlight.active,
#osk-btn-reset-pos.active,
#slide-edit-bar .se-btn-save,
.tmpl-editor-btn-submit,
.tmpl-editor-btn-submit:hover,
.slide-jump-btn-go,
.slide-jump-btn-go:hover,
.line-item,
.line-item:hover,
.line-item.active,
.line-item.selected-highlight,
.recent-item,
.recent-item:hover,
.recent-item.active,
.style-nav-tabs,
#popover-style.style-drawer-panel .style-nav-tabs,
[data-theme="dark"] #popover-style.style-drawer-panel .style-nav-tabs,
.style-tab-btn,
.style-tab-btn:hover,
.style-tab-btn.active,
#popover-style.style-drawer-panel .style-tab-btn,
#popover-style.style-drawer-panel .style-tab-btn:hover,
#popover-style.style-drawer-panel .style-tab-btn.active,
[data-theme="dark"] #popover-style.style-drawer-panel .style-tab-btn,
[data-theme="dark"] #popover-style.style-drawer-panel .style-tab-btn:hover,
[data-theme="dark"] #popover-style.style-drawer-panel .style-tab-btn.active,
.segmented-control-group,
.segmented-btn,
.segmented-btn.active,
#popover-style.style-drawer-panel .segmented-btn,
#popover-style.style-drawer-panel .segmented-btn.active,
.canva-trans-card,
.canva-trans-card:hover,
.canva-trans-card.active,
#popover-style .template-preview-card,
#popover-style .template-preview-card:hover,
#popover-style .template-preview-card.active-template,
.chroma-circle-swatch,
.chroma-circle-swatch:hover,
.chroma-circle-swatch.active,
.template-variety-circle,
.template-variety-circle:hover,
.template-variety-circle.active,
.slider-input::-webkit-slider-thumb,
.slider-input::-moz-range-thumb,
.broadcast-chroma-key-dot,
.obs-live-pulse-dot,
.status-dot,
.animate-appear-glow {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Keep only clean neutral elevation (no colored glow) on the search input pill */
.centered-search-box > input#intelligent-search,
.centered-search-box input {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

.centered-search-box:has(#intelligent-search:focus) > input#intelligent-search,
.centered-search-box > input#intelligent-search:focus,
.app-container.is-search-active .centered-search-box > input#intelligent-search,
.centered-search-box:has(#search-results-dropdown:not(.hidden):not(.is-closing)) > input#intelligent-search {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="dark"] .centered-search-box > input#intelligent-search,
[data-theme="dark"] .centered-search-box input {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .centered-search-box:has(#intelligent-search:focus) > input#intelligent-search,
[data-theme="dark"] .centered-search-box > input#intelligent-search:focus,
[data-theme="dark"] .app-container.is-search-active .centered-search-box > input#intelligent-search,
[data-theme="dark"] .centered-search-box:has(#search-results-dropdown:not(.hidden):not(.is-closing)) > input#intelligent-search {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important;
}


/* 8.8 Presentation Modes Group (Borderless / Boxless in Dark Mode like Light Mode) */
[data-theme="dark"] .presentation-modes-group,
[data-theme="dark"] #presentation-modes-group {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 8.9 Remove Harsh Glows in Dark Mode */
[data-theme="dark"] .line-item.active,
[data-theme="dark"] .recent-item.active,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .mode-group-btn.active,
[data-theme="dark"] .icon-menu-btn.active {
  box-shadow: none !important;
}

/* --- 9. Fullscreen Grid Mode: Uniform Grid & Fit-to-Text Cards + Recent Taranim Dropdown --- */
.fs-recents-dropdown-wrap {
  display: none;
  position: relative;
  align-items: center;
}

.presentation-lines-panel.is-lines-panel-fullscreen .fs-recents-dropdown-wrap {
  display: inline-flex !important;
}

.fs-recents-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--surface-3, #eceef7);
  color: var(--text, #1a1d2e);
  border: none;
  font-family: 'Cairo', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  max-width: 240px;
  transition: background 0.16s ease, color 0.16s ease;
}

.fs-recents-trigger-btn:hover,
.fs-recents-trigger-btn.active {
  background: var(--brand-bg, #eef0ff);
  color: var(--brand, #5b6cf5);
}

.fs-recents-icon {
  font-size: 0.8rem;
  color: var(--brand, #5b6cf5);
  flex-shrink: 0;
}

.fs-recents-active-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 145px;
}

.fs-recents-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surface, #ffffff);
  color: var(--brand, #5b6cf5);
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
}

.fs-recents-chevron {
  font-size: 0.68rem;
  opacity: 0.7;
  transition: transform 0.18s ease;
  flex-shrink: 0;
}

.fs-recents-trigger-btn.active .fs-recents-chevron {
  transform: rotate(180deg);
}

.fs-recents-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 290px;
  max-width: calc(100vw - 24px);
  background: var(--surface, #ffffff);
  border: 1px solid var(--border-solid, #e4e6f0);
  border-radius: 16px;
  box-shadow: var(--shadow-xl);
  padding: 10px;
  z-index: 100020;
}

.fs-recents-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border-solid, #e4e6f0);
}

.fs-recents-popover-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text, #1a1d2e);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fs-recents-popover-title i {
  color: var(--brand, #5b6cf5);
}

.fs-recents-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
}

.fs-recent-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 11px;
  border: none;
  background: transparent;
  color: var(--text, #1a1d2e);
  font-family: 'Cairo', sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  text-align: right;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.fs-recent-item:hover {
  background: var(--surface-2, #f7f8fc);
}

.fs-recent-item.active {
  background: var(--brand-bg, #eef0ff);
  color: var(--brand, #5b6cf5);
  font-weight: 800;
}

.fs-recent-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--surface-3, #eceef7);
  color: var(--text-2, #4b5068);
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
}

.fs-recent-item.active .fs-recent-order {
  background: var(--brand, #5b6cf5);
  color: #ffffff;
}

.fs-recent-item-icon {
  font-size: 0.78rem;
  opacity: 0.7;
  flex-shrink: 0;
}

.fs-recent-item-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fs-recent-check {
  font-size: 0.76rem;
  color: var(--brand, #5b6cf5);
  flex-shrink: 0;
}

.fs-recents-empty {
  padding: 18px 10px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-3, #8b90a8);
}

[data-theme="dark"] .fs-recents-trigger-btn {
  background: var(--surface-3) !important;
  color: var(--text) !important;
}

[data-theme="dark"] .fs-recents-trigger-btn:hover,
[data-theme="dark"] .fs-recents-trigger-btn.active {
  background: var(--brand-bg) !important;
  color: var(--brand-light) !important;
}

[data-theme="dark"] .fs-recents-count-badge {
  background: var(--surface) !important;
  color: var(--brand-light) !important;
}

[data-theme="dark"] .fs-recents-popover {
  background: var(--surface-2) !important;
  border-color: var(--border-solid) !important;
}

[data-theme="dark"] .fs-recents-popover-header {
  border-bottom-color: var(--border-solid) !important;
}

[data-theme="dark"] .fs-recents-popover-title {
  color: var(--text) !important;
}

[data-theme="dark"] .fs-recent-item {
  color: var(--text) !important;
}

[data-theme="dark"] .fs-recent-item:hover {
  background: var(--surface-3) !important;
}

[data-theme="dark"] .fs-recent-item.active {
  background: var(--brand-bg) !important;
  color: var(--brand-light) !important;
}

/* Uniform Fullscreen Slides Grid with Fit-to-Text Cards */
.presentation-lines-panel.is-lines-panel-fullscreen #presentation-lines-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  grid-auto-rows: max-content !important;
  align-items: stretch !important;
  align-content: start !important;
  gap: 10px !important;
  padding: 14px !important;
}

.presentation-lines-panel.is-lines-panel-fullscreen #presentation-lines-container .line-item {
  margin-bottom: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0.72rem 0.95rem !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-radius: 14px !important;
}

.presentation-lines-panel.is-lines-panel-fullscreen #presentation-lines-container .line-item .line-content {
  font-size: 1rem !important;
  line-height: 1.48 !important;
  margin: 0 !important;
}

/* Dark Mode Range Sliders (#obs-line-height-range, .slider-input, input[type="range"]) */
[data-theme="dark"] .slider-input,
[data-theme="dark"] .strip-range,
[data-theme="dark"] input[type="range"],
body.dark-mode .slider-input,
body.dark-mode .strip-range,
body.dark-mode input[type="range"] {
  background: transparent !important;
}

[data-theme="dark"] .slider-input::-webkit-slider-runnable-track,
[data-theme="dark"] .strip-range::-webkit-slider-runnable-track,
[data-theme="dark"] input[type="range"]::-webkit-slider-runnable-track,
body.dark-mode .slider-input::-webkit-slider-runnable-track,
body.dark-mode .strip-range::-webkit-slider-runnable-track,
body.dark-mode input[type="range"]::-webkit-slider-runnable-track {
  background: var(--surface-3, #252840) !important;
  border: 1px solid var(--border-solid, #2a2d42) !important;
}

[data-theme="dark"] .slider-input:hover::-webkit-slider-runnable-track,
[data-theme="dark"] .strip-range:hover::-webkit-slider-runnable-track,
[data-theme="dark"] input[type="range"]:hover::-webkit-slider-runnable-track,
body.dark-mode .slider-input:hover::-webkit-slider-runnable-track,
body.dark-mode .strip-range:hover::-webkit-slider-runnable-track,
body.dark-mode input[type="range"]:hover::-webkit-slider-runnable-track {
  background: #2f3352 !important;
}

[data-theme="dark"] .slider-input::-moz-range-track,
[data-theme="dark"] .strip-range::-moz-range-track,
[data-theme="dark"] input[type="range"]::-moz-range-track,
body.dark-mode .slider-input::-moz-range-track,
body.dark-mode .strip-range::-moz-range-track,
body.dark-mode input[type="range"]::-moz-range-track {
  background: var(--surface-3, #252840) !important;
  border: 1px solid var(--border-solid, #2a2d42) !important;
}

[data-theme="dark"] .slider-input::-webkit-slider-thumb,
[data-theme="dark"] .strip-range::-webkit-slider-thumb,
[data-theme="dark"] input[type="range"]::-webkit-slider-thumb,
body.dark-mode .slider-input::-webkit-slider-thumb,
body.dark-mode .strip-range::-webkit-slider-thumb,
body.dark-mode input[type="range"]::-webkit-slider-thumb {
  background: var(--brand, #5b6cf5) !important;
  border: 2px solid var(--surface-2, #1e2132) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .slider-input::-moz-range-thumb,
[data-theme="dark"] .strip-range::-moz-range-thumb,
[data-theme="dark"] input[type="range"]::-moz-range-thumb,
body.dark-mode .slider-input::-moz-range-thumb,
body.dark-mode .strip-range::-moz-range-thumb,
body.dark-mode input[type="range"]::-moz-range-thumb {
  background: var(--brand, #5b6cf5) !important;
  border: 2px solid var(--surface-2, #1e2132) !important;
  box-shadow: none !important;
}

/* --- 10. iOS & Standalone Installed Web App: Top Safe-Area Header Gap, Actual Screen Fit & Top Blur Prevention --- */
@media all and (display-mode: standalone),
all and (display-mode: fullscreen),
all and (display-mode: minimal-ui) {
  @media (max-width: 768px) {
    .app-container {
      padding-top: max(0.5rem, env(safe-area-inset-top, 0px)) !important;
      box-sizing: border-box !important;
      height: 100dvh !important;
      max-height: 100dvh !important;
    }

    .top-nav {
      padding: 0.45rem 0.75rem 0.3rem !important;
    }
  }
}

html.is-standalone-webapp .app-container {
  padding-top: max(0.5rem, env(safe-area-inset-top, 0px)) !important;
  box-sizing: border-box !important;
}

html.is-standalone-webapp .top-nav {
  padding: 0.45rem 0.75rem 0.3rem !important;
}

/* iOS Installed Web App: Solid Top Safe-Area Shield + Dedicated Header Top Gap Fitted to Screen */
html.is-ios-webapp body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: max(env(safe-area-inset-top, 0px), 54px);
  background-color: var(--bg, #f3f4f9);
  z-index: 9990;
  pointer-events: none;
}

html.is-ios-webapp[data-theme="dark"] body::before,
html.is-ios-webapp body.dark-mode::before {
  background-color: var(--bg, #0f1117);
}

html.is-ios-webapp .app-container {
  padding-top: max(calc(env(safe-area-inset-top, 0px) + 12px), 58px) !important;
  box-sizing: border-box !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

html.is-ios-webapp .top-nav {
  padding: 0.45rem 0.75rem 0.3rem !important;
  margin-top: 0 !important;
  background-color: var(--bg, #f3f4f9) !important;
}

html.is-ios-webapp[data-theme="dark"] .top-nav,
html.is-ios-webapp body.dark-mode .top-nav {
  background-color: var(--bg, #0f1117) !important;
}

/* Sleek Scrollbar for Variety Strips (.template-varieties-bar) */
.template-varieties-bar,
#popover-style .template-varieties-bar {
  scrollbar-width: thin !important;
  scrollbar-color: var(--border-solid, #e4e6f0) transparent !important;
}

.template-varieties-bar::-webkit-scrollbar,
#popover-style .template-varieties-bar::-webkit-scrollbar {
  height: 4px !important;
}

.template-varieties-bar::-webkit-scrollbar-track,
#popover-style .template-varieties-bar::-webkit-scrollbar-track {
  background: var(--surface-3, #eceef7) !important;
  border-radius: 999px !important;
}

.template-varieties-bar::-webkit-scrollbar-thumb,
#popover-style .template-varieties-bar::-webkit-scrollbar-thumb {
  background: var(--text-3, #8b90a8) !important;
  border-radius: 999px !important;
}