.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only-focusable:focus {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  width: auto;
  height: auto;
  padding: 8px 16px;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: #ff6a00;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

@font-face {
  font-family: 'Poppins';
  src: url('./fonts/poppins-v24-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('./fonts/poppins-v24-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('./fonts/poppins-v24-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('./fonts/poppins-v24-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
*,
body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  margin: 0;
  font-family: Poppins, sans-serif;
}
body {
  background: var(--bg-primary);
  color: var(--gray-600);
}
html {
  overflow: hidden !important;
  color: var(--text-dark);
  background: var(--bg-primary);
  line-height: 1.5;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  position: relative;
  overscroll-behavior: none !important;
}
#colorPickerModal.scrolled-right::after {
  opacity: 0;
}
body {
  opacity: 0;
}
body.lang-ready {
  opacity: 1;
  transition: opacity 0.25s ease-in-out;
}
input,
textarea {
  -webkit-user-select: auto !important;
  user-select: auto !important;
}
#miniToolbar,
.bottom-nav,
.icon-btn,
.modal-content,
.pdf-bottom-toolbar,
.audio-widget-wrapper {
  box-shadow: var(--shadow-classic);
}
*, *::before, *::after { box-sizing: border-box; }
 
body.disable-card-transitions .score-card {
  transition: none !important;
}
.settings-screen-header {
  background: var(--bg-primary);
}
.score-info h3 {
  font-weight: 600;
  font-size: var(--text-md);
  margin-right: var(--space-xl);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.score-info h3,
.score-info p {
  text-overflow: ellipsis;
}
.view.active,
.body.splash-active {
  overflow: hidden !important;
}
:root {
  --danger: linear-gradient(135deg, #ff2818, #f44336);
  --orange: linear-gradient(135deg, #ff8000, #ff6b35);
  --orange-hover: linear-gradient(135deg, #e87400, #f0632f);
  --danger-hover: linear-gradient(135deg, #d32114, #d32f2f);
  --white: #ffffff;
  --white-transparency: rgb(255 255 255 / 70%);
  --black: #000000;
  --gray-50: #f9f9f9;
  --gray-100: #f0f0f0;
  --gray-200: #e0e0e0;
  --gray-300: #dddddd;
  --gray-400: #a5a5a5;
  --gray-500: #666666;
  --gray-600: #333333;
  --gray-700: #212121;
  --gray-800: #1e1e1e;
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #ebebeb;
  --text-dark: #222222;
  --text-muted: #666666;
  --black-rgb: 0, 0, 0;
  --white-rgb: 255, 255, 255;
  --gray: #e0e0e0;
  --text-xs:   10px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   20px;
  --text-xl:   28px;
  --text-2xl:  45px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-xs2: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --shadow-classic: rgba(24, 39, 75, 0.12) 0 8px 28px -6px, rgba(2, 2, 2, 0.18) 0 5px 100px -4px;
  --z-base:    1;
  --z-base-2:    2;
  --z-ui:  10;
  --z-toolbar:   100;
  --z-floating:  200;
  --z-overlay:  1000;
  --z-modal:   10000;
  --z-top:  100000;
  --z-max:  999999;
  --white-fixed: #ffffff; 
  --color-dark-surface: #1c1c1e;   
  --color-media-bg: #111; 
  --success: #34c759;
  --orange-solid: #ff6b35;
  --orange-deep: #e95d00;
  --overlay-60: rgba(0, 0, 0, 0.6);
  --overlay-50: rgba(0, 0, 0, 0.5);          
}
body[data-theme='dark'] {
  --white: #1e1e1e;
  --white-transparency: rgb(20 20 20 / 70%);
  --black: #ffffff;
  --gray-50: #1e1e1e;
  --gray-100: #252525;
  --gray-200: #2d2d2d;
  --gray-300: #3a3a3a;
  --gray-400: #5a5a5a;
  --gray-500: #888888;
  --gray-600: #b0b0b0;
  --gray-700: #d0d0d0;
  --gray-800: #e8e8e8;
  --bg-primary: rgb(20, 20, 20);
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #000000;
  --text-dark: #e8e8e8;
  --text-muted: #888888;
  --gray: #3a3a3a;
  --shadow-classic: none;
}
body,
body[data-theme='dark'],
html {
  color: var(--text-dark);
  background: var(--bg-primary);
}
.toolbar-btn.active img,
body[data-theme='dark'] #userSettingsScreen .settings-input-wrapper img,
body[data-theme='dark'] .back-btn-setlist,
body[data-theme='dark'] .eyedropper-btn,
body[data-theme='dark'] .nav-icon,
body[data-theme='dark'] .settings-icon-right,
body[data-theme='dark'] .toolbar-btn img,
body[data-theme='dark'] .scrubber-icon,
body[data-theme='dark'] .sp-outside-setlist-left,
body[data-theme='dark'] #shortcutPanelToggle,
body[data-theme='dark'] .info-preview-box img,
body[data-theme='dark'] #closeAdModalBtn img,
body[data-theme='dark'] .sheetmuse-dropdown-item img,
body[data-theme='dark'] .pro-btn img,
.audio-upload-circle svg,
.audio-upload-circle img,
#downloadExecuteBtn img,
body[data-theme='dark'] #downloadFileNameRow img[src*="pencil"],
body[data-theme='dark'] .edit-audio-name-btn img {
  filter: brightness(0) invert(1) opacity(1) !important;
  opacity: 1 !important;
}
body[data-theme='dark'] .filter-icon,
body[data-theme='dark'] .sp-tab img,
body[data-theme='dark'] .sp-select-circle-btn img,
body[data-theme='dark'] .sp-close-btn img,
body[data-theme='dark'] .icon-btn img,
body[data-theme='dark'] .pdf-tool-btn,
body[data-theme='dark'] .mini-toolbar-btn,
body[data-theme='dark'] .pdf-tool-btn img,
body[data-theme='dark'] .filter-icon {
  filter: brightness(0) invert(1) opacity(1);
}
body[data-theme='dark'] .sheetmuse-dropdown-item img[src*="trash"],
body[data-theme='dark'] .actions-popup-toolbar img[src*="trash"],
body[data-theme='dark'] .icon-btn img[src*="trash"] {
  filter: none !important;
}
* {
  padding: 0;
  -webkit-tap-highlight-color: transparent !important;
}
.splash-decoration-top,
.splash-desc p {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.splash-desc p {
  font-size: 14px;
  color: #fff;
  bottom: max(20px, env(safe-area-inset-bottom) + 10px);
  margin-top: 0;
}
.splash-decoration-top {
  top: max(20px, env(safe-area-inset-top) + 10px);
  z-index: 1000001;
  margin-bottom: 0;
}
.splash-decoration-top img,
.splash-decoration-top svg {
  width: 120px;
  height: auto;
  filter: drop-shadow(rgba(0, 0, 0, 0.15) 0px 2px 8px);
}
#splash-screen {
  background: #ff6200;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
  overflow: hidden;
  position: fixed !important;
  inset: 0px !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}
#splash-screen.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
body.splash-active {
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
}
.splash-logo {
  width: min(80vw, 600px);
  max-width: 600px;
  height: auto;
  margin-bottom: 40px;
  position: relative;
  z-index: 1000000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.splash-logo img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  transition: transform 0.3s;
}
#fabricCanvas,
#fullscreenPdfViewer,
.bottom-nav,
.canvas-container,
.lower-canvas,
.top-actions,
.top-actions > * {
  pointer-events: auto;
}
#colorPickerModal:not(.active) .eyedropper-btn,
.eyedropper-btn:not(#colorPickerModal.active *) {
  opacity: 0.5;
  pointer-events: none !important;
}
.score-card.select-mode * {
  pointer-events: auto !important;
}
.scrollable-color-container * {
  touch-action: auto;
}
.color-dot {
  border:none !important;
}
body[data-reduced-motion='true'] >:not(#pdfViewer):not(#fullscreenPdfViewer),
body[data-reduced-motion='true'] >:not(#pdfViewer):not(#fullscreenPdfViewer) *,
body[data-reduced-motion='true'] >:not(#pdfViewer):not(#fullscreenPdfViewer)::after,
body[data-reduced-motion='true'] >:not(#pdfViewer):not(#fullscreenPdfViewer)::before,
body[data-reduced-motion='true'] >:not(#pdfViewer):not(#fullscreenPdfViewer) *::after,
body[data-reduced-motion='true'] >:not(#pdfViewer):not(#fullscreenPdfViewer) *::before {
  animation-duration: 10ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 10ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}
body[data-reduced-motion='true'] >:not(#pdfViewer):not(#fullscreenPdfViewer),
body[data-reduced-motion='true'] >:not(#pdfViewer):not(#fullscreenPdfViewer) * {
  animation-name: none !important;
}
body[data-reduced-motion='true'] >.fade-in:not(#pdfViewer):not(#fullscreenPdfViewer),
body[data-reduced-motion='true'] >.fade-out:not(#pdfViewer):not(#fullscreenPdfViewer),
body[data-reduced-motion='true'] >:not(#pdfViewer):not(#fullscreenPdfViewer) .fade-in,
body[data-reduced-motion='true'] >:not(#pdfViewer):not(#fullscreenPdfViewer) .fade-out {
  transition: none !important;
}
body[data-reduced-motion='true'] >:not(#pdfViewer):not(#fullscreenPdfViewer) .spinner,
body[data-reduced-motion='true'] >.spinner:not(#pdfViewer):not(#fullscreenPdfViewer) {
  animation: 1.7s infinite mltShdSpin, 1.7s infinite spin !important;
}
body[data-reduced-motion='true'] >:not(#pdfViewer):not(#fullscreenPdfViewer) .loader-spinner,
body[data-reduced-motion='true'] >.loader-spinner:not(#pdfViewer):not(#fullscreenPdfViewer) {
  animation: 1s linear infinite spin !important;
}
body[data-reduced-motion='true'] >:not(#pdfViewer):not(#fullscreenPdfViewer) .storage-spinner,
body[data-reduced-motion='true'] >.storage-spinner:not(#pdfViewer):not(#fullscreenPdfViewer) {
  animation: storage-spin 0.7s linear infinite !important;
}
.theme-label {
  color: var(--gray-600);
}
#bgColorModal,
#colorPickerModal {
  box-shadow: var(--shadow-classic);
  position: fixed;
}
#fontSizeDisplay,
.drop-zone,
.file-name-label,
.modal-title {
  text-align: center;
}
#fabricCanvas {
  transform-origin: center top;
}
#simpleColorModal,
#splash-screen.hidden,
.hidden {
  display: none !important;
}
.icon-btn {
  font-size: var(--text-base);
  border: 2px solid var(--gray-300) !important;
}
.bottom-nav,
.header {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

@supports not (backdrop-filter: blur(1px)) {
  .bottom-nav,
  .header,
  .actions-popup-toolbar {
    background: var(--bg-primary) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .page-loader {
    background: rgba(0, 0, 0, 0.92) !important;
  }
}
.fade-out {
  opacity: 0;
  transition: opacity 1s;
}
#applyBgBtn,
#hexApplyBtn {
  border-radius: 30px;
  z-index: var(--z-modal);
  color: var(--white-fixed);
  border: none;
  background: var(--orange);
  height: 44px;
}
.color-option {
  touch-action: manipulation !important;
}
.file-upload {
  padding-top: calc(env(safe-area-inset-top) + 20px) !important;
  padding-left: var(--space-xs2);
  padding-bottom: var(--space-xs2);
  font-size: var(--text-xl);
  font-weight: 600;
  margin-top: 0 !important;
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.setlist-title {
  color: var(--text-dark);
  font-size: var(--text-xl);
  font-weight: 600;
  padding-top: calc(env(safe-area-inset-top) + 20px) !important;
  padding-bottom: var(--space-xs2);
  margin-top: 0 !important;
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  word-break: break-all;
}
#closeBgModal,
#hexCancelBtn {
  background-color: var(--gray-200);
  border-radius: 30px;
  border: none;
  color: var(--black);
  z-index: var(--z-ui);
  height: 44px;
}
#colorPickerModal {
  top: calc(env(safe-area-inset-top) + 165px) !important;
  width: 400px;
  max-width: 90vw;
  z-index: var(--z-floating);
  transform: translateX(-50%);
  border-radius: 15px;
  background-color: var(--bg-primary);
  animation: 0.3s ease-out modalSlideDown;
  display: none;
  left: 50% !important;
  border: 1px solid var(--gray-200);
  overflow: hidden;
}
#bgColorModal {
  max-width: 400px;
  width: 90vw !important;
  padding: var(--space-md) !important;
  top: calc(env(safe-area-inset-top) + 165px) !important;
  z-index: var(--z-floating);
  transform: translateX(-50%);
  border-radius: 15px;
  background-color: var(--bg-primary);
  animation: 0.3s ease-out modalSlideDown;
  display: none;
  left: 50% !important;
  border: 1px solid var(--gray-200);
}
#bgColorModal.active,
#colorPickerModal.active {
  z-index: var(--z-modal);
  transform: translateX(-50%) translateY(0);
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
#colorPickerModal:not(.active) .eyedropper-btn {
  opacity: 0;
  pointer-events: none !important;
  visibility: hidden !important;
}
#colorPickerModal .color-option,
.color-picker-modal .color-option {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--gray-300);
  cursor: pointer;
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
#colorPickerModal .color-option:hover,
.color-picker-modal .color-option:hover {
  scale:1.02;
  border-color: #f90 !important;
}
.color-option.selected {
  padding: 2px;
  background-clip: content-box !important;
  border-color: var(--orange-deep) !important;
  transform: scale(1.05) translateZ(0);
}
#fontSelector{
  align-items: center;
  height: 36px;
  background: 0 0;
}
#fabricCanvas {
  z-index: var(--z-base-2);
}
#fontSelector {
  border: 2px solid var(--gray-400);
  border-radius: 12px;
  color: var(--black);
  cursor: pointer;
  font-family: inherit;
  display: none;
  font-size: 14px;
  min-width: 120px;
  outline: 0;
  transition: 0.2s;
  padding: 6px;
}
#fontSizeContainer {
  align-items: center;
  height: 36px;
  background: 0 0;
  border: 2px solid var(--gray-400);
  border-radius: 12px;
  display: flex;
  overflow: hidden;
}
#fontSizeDisplay {
  background: 0 0;
  font-size: var(--text-base);
  font-weight: 600;
  min-width: 50px;
  user-select: none;
  color: var(--black);
}
#miniToolbar {
  align-items: center;
  border: 1px solid var(--gray-200);
  background: var(--bg-primary);
  border-radius: 30px;
  display: none;
  flex-direction: row;
  height: 48px;
  max-width: 200px;
  min-width: 120px;
  position: fixed;
  transition: transform 0.15s ease-out, opacity 0.2s;
  user-select: none;
}
#miniToolbar.layout-horizontal {
  flex-direction: row;
  min-width: 150px;
  padding: var(--space-sm) var(--space-xs2);
  width: auto;
}
#miniToolbar.layout-horizontal .mini-toolbar-btn {
  height: 48px;
  min-height: 36px;
  min-width: 36px;
  width: auto;
}
#miniToolbar.layout-vertical {
  flex-direction: column;
  height: auto;
  max-width: 48px;
  min-height: 150px;
  min-width: 48px;
  padding: var(--space-xs2) var(--space-sm);
  width: 48px;
  gap: var(--space-md) !important;
}
#pdfCanvas {
  display: block !important;  
  max-width: none !important;  
  max-height: none !important;
  touch-action: pan-x pan-y !important;
  transform-origin: center top;
  filter: drop-shadow(rgba(0, 0, 0, 0.063) 0px 1px 20px);
}
.bottom-nav,
.pdf-bottom-toolbar,
.audio-widget-wrapper {
  
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
#pdfSingleToolbar {
  box-shadow: var(--shadow-classic);
  position: fixed;
  background: var(--bg-primary);
  border: 1px solid var(--gray-300);
  border-radius: 50px;
  margin: 0 auto;
  top: calc(env(safe-area-inset-top) + 100px) !important;
  transition: 0.3s;
  z-index: var(--z-toolbar);
  padding: var(--space-sm) var(--space-xs2);
  transform: translateX(-50%);
  left: 50%;
}
#pdfSingleToolbar.text-mode {
  align-items: center;
  flex-flow: row;
  width: auto;
  min-width: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  justify-content: flex-start;
  overflow-x: auto;
  max-width: 100%;
}
#pdfSingleToolbar.text-mode .toolbar-btn.active {
  background: rgba(255, 156, 86, 0.72) !important;
}
#settingsView {
  background: var(--bg-primary);
  flex-direction: column;
  inset: 0px;
  overflow: hidden;
  position: fixed;
  z-index: var(--z-ui);
  display: none;
  height: 100%;
}
#simpleColorModal {
  border-radius: 30px;
  width: 42px;
}
#simpleColorModal.active {
  display: block !important;
}
#pinchZoomWrapper {
  position: relative;
  display: block;
  overflow: hidden;
  user-select: none;
  margin: 0 auto;
  overflow-anchor: none;
  overflow-x: hidden;
  touch-action: pan-x pan-y !important;
  z-index: var(--z-base);
}
.scroll-wrapper {
  overscroll-behavior-y: contain;
  box-sizing: border-box;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden auto !important;
  touch-action: pan-y !important;
  padding: 200px var(--space-md) 100px !important;
  transition: padding-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
#fabricCanvas,
.canvas-container,
.lower-canvas,
.pinch-zoom,
.pinch-zoom-parent {
  touch-action: pan-x pan-y !important;
}
.upper-canvas {
  pointer-events: auto;
  touch-action: pan-x pan-y;
  cursor: default;
  z-index: 3 !important;
}
.selection-controls {
  display: flex;
  gap: 2px;
  justify-content: flex-end;
  left: 10px;
  position: relative;
  z-index: var(--z-top) !important;
}
.option-group {
  justify-content: space-between;
}
.icon-btn {
  border-radius: 15px;
  padding: var(--space-sm);
  background: 0 0;
  transition: background-color 0.2s;
  width: 44px;
}
.apply-btn,
.back-btn,
.back-btn-arrow,
.bottom-tool-btn,
.btn {
  transition: 0.3s;
  cursor: pointer;
}
.icon-btn img {
  pointer-events: none !important;
}
button,
.icon-btn,
.select-btn,
#add-selected,
#delete-selected,
#share-selected-files,
#selection-controls button,
#selection-controls-setlist button,
#selection-controls-setlist-files button,
#selection-toggle,
#selection-toggle-setlist,
#selection-toggle-setlist-files,
#share-selected-setlist-files,
#toggle-select,
input[type='checkbox'] {
  cursor: pointer;
  touch-action: manipulation !important;
}
#selection-controls,
#selection-controls-setlist,
#selection-controls-setlist-files {
  position: relative;
  z-index: var(--z-top) !important;  
}
.form-checkbox label,
.score-card.select-mode {
  cursor: pointer;
}
.files-view {
  z-index: var(--z-base-2);
  display: none;
}
.top-actions {
  justify-content: space-between;
  touch-action: auto;
  display: flex;
  align-items: center;
  padding: var(--space-sm) var(--space-xs2);
  margin-top: var(--space-md);
}
.header-actions-row,
.header-search {
  display: block;
  width: 100%;
}
#addFilesToSetlistBtn,
#newSetlistBtn,
.add-button{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-xs2);
  border: none;
  font-weight: 200;
  font-size: var(--text-base);
  line-height: 1;
  height: 38px;
  box-sizing: border-box !important;
}
#addFilesToSetlistBtn,
#newSetlistBtn,
.add-button {
  background: var(--orange);
  color: var(--white-fixed);
  border-radius: 30px;
  width: 100px;
  min-height: 44px;
}
.select-btn {
  box-shadow: var(--shadow-classic);
  font-size: var(--text-base);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-xs2);
  border: 2px solid var(--gray-300);
  font-weight: 200;
  line-height: 1;
  height: 38px;
  box-sizing: border-box !important;
  background: 0 0;
  color: var(--black);
  max-width: 160px;
  border-radius: 30px;
  min-height: 44px;
}
.score-card input[type='checkbox'] {
  display: none;
  position: absolute;
  right: 24px;
  top: 22px;
  transform: scale(2.2);
}
.filter-dropdown.open,
.fullscreen-pdf-viewer.active,
.score-card.select-mode input[type='checkbox'],
.thickness-modal.active,
.transparency-modal.active {
  display: block;
}
.advanced-controls {
  padding: 0 var(--space-xs);
}
.apply-btn {
  background: var(--orange);
  border: none;
  border-radius: 30px;
  color: var(--white-fixed);
  padding: var(--space-xs2) var(--space-md);
  width: 100%;
  min-height: 44px;
  font-size: var(--text-base);
}
.apply-btn:active {
  opacity: 0.9;
  transform: scale(0.98);
}
.apply-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.back-btn {
  flex-shrink: 0;
  padding: var(--space-sm) 0;
  white-space: nowrap;
  font-size: var(--text-base);
}
.back-btn-arrow {
  align-items: center;
  background: 0 0;
  border: none;
  color: var(--text-dark);
  display: flex;
  font-size: var(--text-xl);
  font-weight: 400;
  height: 32px;
  justify-content: center;
  padding: 0;
  width: 32px;
}
.bottom-controls {
  display: flex;
  gap: var(--space-sm);
  width: 100%;
  flex-wrap: nowrap;
}
.bottom-nav {
  border:2px solid var(--gray-100);
  align-items: center;
  background: var(--white-transparency);
  border-radius: 40px;
  display: flex;
  justify-content: space-around;
  max-width: 90vw;
  padding: var(--space-md) 0;
  position: fixed;
  width: 500px;
  z-index: var(--z-ui);
}
.bottom-tool-btn {
  background: 0 0;
  border: none;
  border-radius: 15px;
  flex-shrink: 0;
  height: 60px;
  position: relative;
  width: 60px;
  z-index: inherit;
  pointer-events: all;
}
.btn {
  border: none;
  padding: var(--space-xs2) var(--space-md);
}
.bottom-tool-btn.active {
  filter: invert(50%) sepia(90%) saturate(2000%) brightness(100%) contrast(100%);
  opacity: 1;
}
.link-btn:active {
  opacity: 0.8;
}
.bottom-tool-icon {
  filter: brightness(0);
  height: 28px;
  width: 28px;
}
.btn {
  align-items: center;
  border-radius: 12px;
  display: flex;
  font-size: var(--text-base) !important;
  gap: var(--space-sm);
  justify-content: center;
  width: 100px !important;
  min-height: 44px !important;
}
#cancelSetlist {
  max-width: 100px !important;
}
.btn-danger {
  transition: 0.3s;
  cursor: pointer;
  border: none;
  padding: var(--space-xs2) var(--space-md);
  background: var(--danger);
  border-radius: 10px;
  font-weight: 500;
  color: var(--white-fixed);
  font-size: var(--text-base);
}
.btn-primary,
.btn-secondary {
  border: none;
  transition: 0.3s;
  cursor: pointer;
  font-size: var(--text-base);
}
.btn-primary {
  background: var(--orange);
  border-radius: 30px;
  color: var(--white-fixed);
  padding: var(--space-xs2) var(--space-md);
  min-height: 44px !important;
}
#importBackupBtn, #exportBackupBtn, #viewCloudAudioBtn, #trashModalBtn {
  min-width: 100px;
}
.form-actions {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  justify-content: center;
}
.auth-screen,
.control-row,
.filter-option,
.form-checkbox,
.header-actions,
.modal-header,
.pdf-back-btn,
.pdf-tool-btn,
.score-card {
  align-items: center;
  display: flex;
}
.btn-secondary {
  background: var(--bg-secondary);
  border-radius: 30px;
  color: var(--black);
  padding: var(--space-xs2) var(--space-md);
}
.btn-primary:hover,
#addFilesToSetlistBtn:hover,
#newSetlistBtn:hover,
.add-button:hover,
#purchaseNoAdsBtn:hover,
#rateAppBtn:hover,
#importBackupBtn:hover,
#exportBackupBtn:hover,
.link-btn:hover,
.apply-btn:hover,
.unlock-premium:hover.actions-menu-btn,
#hexApplyBtn:hover,
#applyBgBtn:hover {
  background: var(--orange-hover);
  color:#eeeeee;
}
.toolbar-btn:hover {
  background-color: var(--gray-50);
}
#restorePurchasesBtn:hover,
#reportBugBtn:hover,
#deleteAccountBtn:hover {
  background-color: var(--gray-300);
}
.danger-btn:hover,
.btn-danger:hover,
#logoutBtn:hover,
#confirmDeleteAllBtn:hover,
#sp-remove-btn:hover {
  background: var(--danger-hover);
  color:#eeeeee;
}
.icon-btn:hover, .select-btn:hover {
  background: var(--gray-50);
  color:var(--gray-700);
}
.btn-secondary:hover, #proModalClose:hover, #cancelDeleteAllBtn:hover, #closeBgModal:hover, #hexCancelBtn:hover, #cancelSetlist:hover {
  background: var(--gray-300);
}
#fsPagePickerCancel {
 background-color: #3a3a3a;
 color:var(--white-fixed);
}
#fsPagePickerCancel:hover {
 background-color: #2a2a2a;
 color: #eeeeee;
}
.color-canvas {
  background: linear-gradient(to right, var(--bg-primary), red);
  cursor: crosshair;
  height: 160px;
  overflow: visible !important;
  width: 100%;
  position: relative;
  border-radius: 8px;
}
.color-canvas::after {
  background: linear-gradient(transparent, #000);
  content: '';
  inset: 0px;
  pointer-events: none;
  position: absolute;
}
.score-card:hover {
  background-color: var(--gray-50);
}
.form-input:focus,
.option-select:focus,
.text-annotation-input:focus {
  border-color: var(--orange-deep);
}
.color-picker-trigger,
.color-preview {
  border-radius: 50%;
  box-sizing: border-box;
  background-clip: content-box;
  width: 28px;
  height: 28px;
  min-width: 28px;
  overflow: hidden;
}
.color-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1.5px solid var(--gray-600);
  padding: 2px;
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
  box-shadow: none;
  outline: none;
  margin-left: var(--space-xs);
  transition: transform 0.1s ease-out, border-color 0.2s;
}
.control-label {
  color: var(--black);
  flex-shrink: 0;
  font-size: var(--text-base);
  font-weight: 600;
  min-width: 70px;
  z-index: var(--z-ui);
}
.control-row {
  justify-content: space-between;
  width: 100%;
  gap: var(--space-sm);
}
.danger-btn {
  background: var(--danger);
  border: none;
  border-radius: 30px;
  color: var(--white-fixed);
  cursor: pointer;
  padding: var(--space-xs2) var(--space-md);
  transition: 0.3s;
  min-width: 100px;
  font-size: var(--text-base);
}
.drop-zone {
  background: rgba(255, 106, 0, 0.02);
  border-radius: 12px;
  color: var(--gray-500);
  margin: var(--space-sm) 0;
  padding: var(--space-xl) var(--space-md);
  transition: 0.3s;
}
.drop-zone.dragover {
  background: rgba(255, 107, 53, 0.41);
  color: var(--white-fixed);
  box-shadow: var(--shadow-classic);
}
.eyedropper-btn {
  align-items: center;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  height: 32px;
  justify-content: center;
  transition: 0.3s;
  width: 32px;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  min-width: 32px;
  min-height: 32px;
  user-select: none;
  isolation: isolate;
  touch-action: manipulation !important;
  z-index: 100 !important;
}
#bgColorModal .scrollable-color-grid {
  padding: var(--space-md) 0 !important;
}
.file-name-label {
  color: var(--gray-500);
  margin: 0;
  background: 0 0;
  font-size: var(--text-base);
  padding: 2px var(--space-md);
}
.hue-slider {
  -webkit-tap-highlight-color: transparent;
  touch-action: none !important;
}
.eyedropper-btn img,
.eyedropper-btn svg {
  user-select: none;
  pointer-events: none !important;
}
#colorPickerModal.active .eyedropper-btn {
  opacity: 1;
  pointer-events: auto !important;
  visibility: visible !important;
}
#forgotPasswordForm .form-input,
#signInScreen .form-input,
#signUpForm .form-input {
  background-color: var(--white-fixed);
  border: 2px solid #dddddd;
  color: black;
}
.form-input {
  border: 2px solid #a5a5a5;
  border-radius: 12px;
  color: var(--black);
  font-size: var(--text-base);
  outline: 0;
  padding: var(--space-sm) var(--space-xs2);
  transition: 0.3s;
  width: 100%;
  background-color: var(--bg-primary);
}
.form-label {
  color: var(--text-dark);
  display: block;
  font-weight: 400;
margin: var(--space-md) auto 8px;
  font-size: var(--text-base);
}
.header {
  background: var(--white-transparency);
  display: flex;
  font-size: var(--text-xl) !important;
  font-weight: 600;
  justify-content: space-between;
  flex-direction: column;
  position: fixed;
  align-items: stretch;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: var(--z-ui);
  padding: calc(env(safe-area-inset-top) + 8px) 20px 10px !important;
}
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-title {
  color: var(--text-dark);
  font-size: var(--text-base);
  font-weight: 600;
  margin-top: var(--space-xs);
}
#watchRewardedVideoBtn,
.hex-input,
.link-btn {
  font-size: var(--text-base);
}
.hex-input {
  background: 0 0;
  color: var(--black);
  border: none;
  flex: 1 1 0%;
  max-width: 70px;
  text-align: end;
}
.hex-input-area {
  align-items: center;
  display: flex;
}
.hue-cursor ,
.canvas-cursor {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid var(--white-fixed) !important;
  outline: 1px solid var(--gray-500);
  pointer-events: none !important;
  background: transparent;
    box-sizing: border-box;
}
.canvas-cursor {
  z-index: var(--z-ui);
  box-sizing: border-box;
}
.hue-cursor {
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 110;
  box-shadow: 0 0 4px rgba(0,0,0,0.4);
}
.hue-slider {
  background: linear-gradient(to right, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red 100%);
  border-radius: 12px;
  height: 24px;
  width: 100%;
  margin-top: var(--space-md);
  position: relative;
  overflow: visible;
  user-select: none;
}
.link-btn {
  border: none;
  transition: 0.3s;
  cursor: pointer;
  font-size: var(--text-base);
  background: var(--orange);
  border-radius: 8px;
  color: var(--white-fixed);
  margin-top: var(--space-sm);
  padding: var(--space-xs2) var(--space-md);
  width: 100px;
}
.loader-container {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.loader-text {
  color: var(--bg-primary);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.5px;
  margin: 0;
}
.loading {
  color: var(--gray-500);
  align-items: center;
  display: flex;
  font-size: var(--text-base);
  justify-content: center;
  padding: var(--space-xl);
}
.logo {
  background: var(--orange);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: var(--text-xl);
}
.lower-canvas {
  z-index: 2 !important;
}
.main {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: calc(env(safe-area-inset-top) + 140px) 20px 100px;
  min-height: 100vh;
}
.mini-toolbar-btn {
  border: none;
  background: 0 0;
}
.modal {
  align-items: center;
  background: var(--overlay-60);
  display: none;
  inset: 0px;
  justify-content: center;
  position: fixed;
  z-index: var(--z-modal);
}
.modal-actions {
  border-top: 1px solid var(--gray-50);
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-xs2) var(--space-md) 0;
  justify-content: center;
}
.modal-actions .btn {
  border: none;
  border-radius: 30px;
  cursor: pointer;
  flex: 1 1 0%;
  font-size: var(--text-base);
  font-weight: 400;
  padding: var(--space-xs2) var(--space-md);
  transition: 0.2s;
  max-width: 25vh;
}
.modal-actions .btn-primary {
  border-radius: 30px;
  color: var(--white-fixed);
  flex: 1;
  min-width: 120px;
  padding: var(--space-xs2) var(--space-md);
  white-space: nowrap;
  min-height: 44px;
}
.modal-buttons {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
  margin-top: var(--space-md);
}
.nav-icon,
.nav-item,
.pdf-tool-btn {
  transition: 0.3s;
}
.transparency-modal .sp-close-btn,
.thickness-modal .sp-close-btn {
  width: 30px;
  height: 30px;
}
.modal-header {
  justify-content: space-between;
  margin-bottom: var(--space-sm);
  padding-bottom: 0;
}
.modal-header h3 {
  color: var(--black);
  font-size: var(--text-md);
  font-weight: 600;
  margin: 0;
}
.modal-title {
  font-size: var(--text-lg);
  font-weight: 600;
}
.modern-slider[type='range'] {
  -webkit-tap-highlight-color: transparent;
  touch-action: none !important;
  appearance: none;
  background: #e5e7eb;
  border-radius: 8px;
  height: 8px;
  outline: 0;
  flex: 1 1 0%;
  width: 260px;
  user-select: none;
}
.modern-slider[type='range']::-webkit-slider-runnable-track {
  height: 8px;
  background: 0 0;
  border-radius: 8px;
}
.modern-slider[type='range']::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--orange);
  cursor: pointer;
  border: 3px solid var(--bg-primary);
  box-shadow: rgba(0, 0, 0, 0.2) 0 2px 4px;
  margin-top: -6px;
  transition: transform 0.1s, box-shadow 0.1s;
}
.modern-slider[type='range']:active::-webkit-slider-thumb {
  transform: scale(1.15);
  box-shadow: rgba(255, 128, 0, 0.04) 0 0 0 8px, rgba(255, 94, 0, 0.25) 0 0 0 4px,
  rgba(0, 0, 0, 0.2) 0 2px 4px;
}
.nav-icon {
  opacity: 0.8;
  filter: brightness(0);
  height: 40px;
  width: 40px;
}
.nav-item {
  align-items: center;
  border-radius: 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  padding: var(--space-xs2) var(--space-sm);
  position: relative;
}
.nav-item.active .nav-icon {
  opacity: 1;
  filter: invert(44%) sepia(86%) saturate(1050%) hue-rotate(2deg) brightness(100%) contrast(105%) !important;
}
.empty-state {
  text-align: center;
  padding: var(--space-2xl);
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
}
.option-group {
  display: flex;
  align-items: center;
  width: 100%;
}
.theme-label {
  font-size: var(--text-base);
  font-weight: 500;
}
.option-label {
  color: var(--text-dark);
  display: block;
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-sm);
}
.option-select,
.toolbar-select {
  border: 2px solid var(--gray-400);
  border-radius: 12px;
  color: var(--text-dark);
  cursor: pointer;
  font-size: var(--text-base);
  outline: 0;
  padding: var(--space-xs2) var(--space-md);
  transition: 0.3s;
  width: 20vh;
  margin-left: auto;
  background: var(--white) !important;
}
.page-loader {
  align-items: center;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(10px);
  background: rgba(0, 0, 0, 0.7);
  display: none;
  inset: 0px;
  justify-content: center;
  position: fixed;
  z-index: var(--z-modal);
}
#setlistContainer .score-info h3,
.pdf-file-title {
  font-weight: 600;
}
.pdf-bottom-toolbar {
  background: var(--bg-primary);
  border-radius: 40px;
  display: none;
  gap: 2vh;
  justify-content: center;
  max-width: 95vw;
  padding: var(--space-xs2) 0;
  pointer-events: auto;
  position: fixed;
  width: 480px;
  z-index: var(--z-floating);
}
.pdf-file-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--space-xs2) !important;
  background: var(--bg-primary) !important;
  color: var(--black);
  padding: var(--space-sm) var(--space-lg) !important;
  margin: 0 !important;
  position: relative !important;
  z-index: var(--z-ui) !important;
  pointer-events: auto !important;
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box;
  border-radius: 0 !important;
  box-shadow: var(--shadow-classic);
}
.mp-page-indicator {
  flex-shrink: 0;
  margin-left: auto;
  margin-right: 0;
  padding: 3px 10px;
  border-radius: 14px;
  border: 1px solid var(--gray-200);
  background: var(--white-transparency);
  color: var(--black);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  pointer-events: auto;
  width: 60px;
}
.mp-scrubber-label {
  display: inline-flex;
  align-items: center;
}
.pdf-title-text {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-weight: 600 !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 39;
  font-size: var(--text-md);
}
.score-card.is-dragging {
  box-shadow: var(--shadow-classic);
}
.pdf-tool-btn,
.pdf-back-btn {
  background: 0 0;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  justify-content: center;
}
.pdf-back-btn,
.pdf-tool-btn.active {
  opacity: 1;
  filter: invert(44%) sepia(86%) saturate(1050%) hue-rotate(2deg) brightness(100%) contrast(105%) !important;
}
.fs-metro-play-btn.playing,
.pdf-tool-btn.destructive {
  background: var(--danger);
}
.pdf-toolbar {
  align-items: center;
  background-color: transparent;
  border-radius: 12px;
  display: flex;
  gap: var(--space-lg);
  position: relative;
  z-index: var(--z-toolbar);
}
#annotationModeToggleBtn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: var(--z-toolbar);
}
.pdf-viewer-container {
  display: none;
  flex-direction: column;
  inset: 0px;
  position: fixed;
  z-index: var(--z-toolbar);
}
.pdf-viewer-content {
  background: var(--bg-tertiary);
  
  display: block;
  
  flex: 1 1 0%;
  padding: var(--space-md) 0;
  margin-right: 0 !important;
  margin-top: 0 !important;
  position: relative;
  height: 0;
  overflow-anchor: none;
  
  overflow-x: clip;
  overflow-y: auto;
  touch-action: pan-y;
}
#loadingIndicator {
  
  display: block;
  margin: 40vh auto 0;
}
.pinch-zoom {  position: relative;  transform-origin: 0% 0%;
}
#fabricCanvas {  
  display: block !important;  
  max-width: none !important;  
  max-height: none !important;
}
.pdf-viewer-header {
  align-items: center;
  background-color: var(--bg-primary);
  display: flex;
  justify-content: space-between;
  z-index: var(--z-toolbar) !important;   
  padding: calc(env(safe-area-inset-top) + 8px) 20px 10px !important;
  position: relative;
}
.score-card {  border: 1px solid transparent; 
  border-radius: 12px;
  cursor: grab;
  justify-content: space-between;
  overflow: hidden;
  padding: var(--space-md);
  position: relative;transition: transform 0.2s, box-shadow 0.2s, border-color 0.3s ease, background-color 0.3s ease;
  margin-top: var(--space-xs);
  background: var(--bg-primary);
  user-select: none;
}
.score-card.checked {
  background: #116fcd09;
  border: 1px solid #116fcd;
}
.score-card.is-dragging {
  border: 2px solid var(--gray-100) !important;
  transform: scale(1.02);
  z-index: var(--z-floating);
}
#colorPickerModal::after,
#colorPickerModal::before {
  bottom: 0;
  top: 0;
  transition: opacity 0.3s;
  opacity: 1;
  position: absolute;
  content: '';
  pointer-events: none !important;
  z-index: 1 !important;
  border-radius: 12px;
  width: 30px;
  background: linear-gradient(to right, var(--bg-primary), transparent);
  left: 0;
}
.score-card.drag-mode {
  -webkit-user-drag: none;
}
#downloadFileNameInput {
  max-width: 200px;
  border: 1px solid var(--gray-400);
  text-align: left;
}
#downloadFileNameInput {
  font-size: var(--text-md);
  margin-right: var(--space-xl);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  white-space: normal;
}
.score-info-sub,
.score-info p {
  color: var(--gray-500);
  font-size: var(--text-base);
  overflow: hidden;
  margin-right: var(--space-lg);
}
.scrollable-color-container {
  height: auto;
  min-height: 65px;
  width: 100%;
  border-radius: 30px !important;
  touch-action: pan-x !important;
  overflow: auto hidden !important;
  scroll-behavior: smooth !important;
}
#colorPickerModal::after {
  border-radius: 18px;
  width: 90px;
  background: linear-gradient(to left, var(--bg-primary), transparent);
  left: unset;
  right: 0;
}
.scrollable-color-container:active {
  cursor: grabbing !important;
}
.scrollable-color-grid {
  pointer-events: auto !important;
  display: flex;
  flex-direction: row;
  gap: var(--space-sm);
  height: 100%;
  min-width: max-content;
  padding: var(--space-md) var(--space-xl) var(--space-md) var(--space-md);
  position: relative;
  z-index: var(--z-base);
  align-items: center !important;
}
.setlist-details {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-xs);
}
.section-title {
  color: var(--text-dark);
  font-size: var(--text-md);
  font-weight: 600;
  margin: 0 var(--space-md);
}
.search-container {
  position: relative;
  width: 100%;
  margin-top: var(--space-md);
}
.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  opacity: 0.7;
}
.search-bar {
  width: 100%;
  padding: 8px var(--space-md) 8px 40px;
  border-radius: 25px;
  border: none;
  background: var(--gray-300);
  font-size: var(--text-base);
  top: 20px;
  color: var(--black);
}
.search-bar:focus {
  outline: 0;
}
.setlist-info-left {
  align-items: center;
  color: var(--gray-500);
  font-size: var(--text-base);
  display: flex;
  flex: 1;
  gap: var(--space-xs2);
  min-width: 0;
  overflow: hidden;
  text-align: left;
}
.setlist-item {
  align-items: center;
  display: flex;
  background: var(--bg-primary);
  border-radius: 12px;
  cursor: pointer;
  justify-content: space-between;
  margin-bottom: var(--space-xs2);
  padding: var(--space-md);
  transition: 0.3s;
}
.setlist-option {
  align-items: center;
  display: flex;
  width: 100%;
}
.setlist-name {
  flex: 1;
  display: block;
  width: 100%;
  font-size: var(--text-md);
  font-weight: 400;
  color: var(--black);
  text-align: left;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  overflow: visible;
}
.adfree-modal,
.auth-divider,
.auth-title,
.fs-metro-text,
.pro-modal-content,
.setlist-title,
.slider-value.side-value,
.tool-indicator,
.warning-text {
  text-align: center;
}
.setlist-option {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 1px solid var(--gray-50);
  border-radius: 0px;
  cursor: pointer;
  justify-content: space-between;
  gap: var(--space-xs2);
  overflow: hidden;
  margin-bottom: var(--space-sm); 
  padding: var(--space-md) var(--space-md);
  position: relative;
  transition: border-radius 0.3s ease-in-out, 
border-color 0.3s ease-in-out, 
background-color 0.3s ease-in-out;
}
.setlist-option.disabled {
  background: var(--bg-primary);
  cursor: not-allowed;
  opacity: 0.5;
}
.setlist-option.selected {
  border: 1px solid #f90;
  border-radius: 15px;
  background: #cdae1109;
}
.already-added-badge,
.status-dot {
  flex-shrink: 0;
  margin-left: var(--space-xs2);
  white-space: nowrap;
}
.already-added-badge {
  color: #ff6b00;
  background: var(--gray-200);
  border-radius: 12px;
  flex-shrink: 0;
  margin-left: auto;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: 700;
  padding: var(--space-xs) var(--space-sm);
}
.setlist-selector-list {
  flex: 1 1 0%;
  margin: var(--space-md) 0;
  max-height: 400px;
  overflow-y: auto;
}
.setlist-selector-modal {
  box-shadow: var(--shadow-classic);
  align-items: center;
  display: flex;
  width: 100%;
  background: var(--overlay-60);
  height: 100%;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  z-index: var(--z-modal);
}
.setlist-selector-modal .back-btn {
  align-items: center;
  background: 0 0;
  border: none;
  color: var(--gray-500);
  cursor: pointer;
  display: flex;
  font-size: var(--text-base);
  gap: var(--space-xs);
  margin-right: var(--space-sm);
  padding: var(--space-xs);
  transition: color 0.2s;
}
.modal-content {
  background: var(--bg-primary);
  border-radius: 12px;
  box-shadow: var(--shadow-classic);
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  max-width: 50vh;
  padding: var(--space-md);
  width: 90%;
  border:2px solid var(--gray);
}
.setlist-selector-modal .modal-header {
  align-items: center;
  display: flex;
  padding: var(--space-md);
  position: relative;
  border-bottom: 1px solid var(--gray-50);
  flex-direction: space-between;
}
.setlist-selector-modal .modal-title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0;
  max-width: 290px;
  text-align: left;
}
.setlist-view.active {
  display: block;
  z-index: var(--z-base-2);
}
.settings-content {
  flex: 1 1 0%;
}
.settings-content h3 {
  color: var(--black);
  font-size: var(--text-base);
  font-weight: 500;
  margin: 0 0 var(--space-xs);
}
.settings-header h2 {
  font-weight: 600;
  margin: 0;
  color: var(--text-dark);
}
.settings-screen-header h2 {
  font-weight: 600;
  margin: 0;
  color: var(--text-dark);
  flex: 1 1 0%;
  font-size: var(--text-lg);
}
.settings-content p {
  color: var(--gray-500);
  font-size: var(--text-sm);
  margin: 0;
}
.settings-header {
  position: sticky;
  top: 0;
  z-index: var(--z-ui);
  background-color: var(--white-transparency);
padding: calc(env(safe-area-inset-top) + 8px) 20px 10px !important;
}
.settings-header h2 {
  font-size: var(--text-xl);
}
.settings-icon-right {
  flex-shrink: 0;
  margin-left: var(--space-md);
}
[data-setting="user"].settings-item {
  border-top: none;
}
.settings-item {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  padding: var(--space-md) var(--space-md);
  transition: 0.2s;
  border-top: 1px solid var(--gray);
}
.settings-item-container {
  background: var(--white);
  border-radius: 12px;
  overflow: visible;
  margin: var(--space-sm);
  box-shadow: rgba(0, 0, 0, 0.21) 0 2px 20px;
  border: 1px solid var(--gray);
}
.settings-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px  calc(150px + env(safe-area-inset-bottom));
  gap: var(--space-md);
  flex: 1 1 0%;
  top: 40px;
}
.settings-options {
  padding: var(--space-md);
  flex: 1 1 0%;
  flex-direction: column;
}
.settings-item:active {
  background: rgba(255, 106, 0, 0.05);
}
.settings-screen {
  flex-direction: column;
  min-height: auto;
  overflow: auto;
  display: none;
}
.settings-screen-header {
  align-items: center;
  display: flex;
  gap: var(--space-xs2);
  position: sticky;
  top: 0;
  z-index: var(--z-ui);
  padding: calc(env(safe-area-inset-top) + 8px) 20px 10px !important;
}
.settings-section {
  padding: 16px 20px  calc(150px + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.simple-color-modal {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-top);
  padding: 0 !important;
  margin: 0 !important;
  background: transparent;
}
.simple-color-modal.active {
  display: block !important;
}
.simple-modal-content {
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: -20px;
  background: var(--bg-primary);
  border-radius: 16px;
  box-shadow: var(--shadow-classic);
  padding: var(--space-md) !important;
  width: 90vw !important;
  max-width: 400px !important;
  max-height: calc(100vh - 250px) !important;
  box-sizing: border-box;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: var(--z-top) !important;
  margin: 0 !important;
  border: 1px  solid var(--gray-200);
}
.slider-value.side-value {
  color: var(--text-dark);
  border: 2px solid #cbcbcb;
  border-radius: 14px;
  font-size: var(--text-base);
  font-weight: 500;
  padding: var(--space-xs);
  min-width: 70px;
  z-index: var(--z-ui);
}
#bgColorModal .slider-value{
  min-width: 60px;
}
.spinner {
  color: var(--orange-deep);
  font-size: var(--text-2xl);
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  transform: translateZ(0);
  animation: 1.7s infinite mltShdSpin, 1.7s infinite spin;
}
.text-annotation-content {
  background: var(--bg-primary);
  border-radius: 12px;
  max-width: 400px;
  padding: var(--space-xl);
  width: 90%;
}
.text-annotation-input {
  border: 2px solid var(--gray-200);
  border-radius: 12px;
  font-size: var(--text-base);
  min-height: 100px;
  outline: 0;
  padding: var(--space-md);
  resize: vertical;
  transition: border-color 0.3s;
  width: 100%;
}
.text-annotation-modal {
  align-items: center;
  background: var(--overlay-50);
  display: none;
  inset: 0px;
  justify-content: center;
  position: fixed;
  z-index: var(--z-floating);
}
.theme-option {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: var(--space-md) var(--space-md);
  border-top: 1px solid var(--gray);
}
.theme-option-wrapper {
  background: var(--white);
  border-radius: 16px;
  box-shadow: rgba(0, 0, 0, 0.21) 0 2px 20px;
  overflow: hidden;
  border: 1px solid var(--gray);
  margin: var(--space-sm);
}
.toggle-slider {
  background-color: var(--gray-200);
  border-radius: 30px;
  cursor: pointer;
  inset: 0px;
  position: absolute;
  transition: 0.3s;
}
.toggle-slider::before {
  background-color: #fff;
  border-radius: 50%;
  bottom: 2px;
  box-shadow: var(--shadow-classic);
  content: '';
  height: 27px;
  left: 2px;
  position: absolute;
  transition: 0.3s;
  width: 27px;
}
.toggle-switch {
  display: inline-block;
  height: 31px;
  position: relative;
  width: 51px;
}
.toggle-switch input {
  height: 0;
  opacity: 0;
  width: 0;
}
.toggle-switch input:checked + .toggle-slider {
  background-color: #f80;
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}
.tool-indicator {
  color: var(--black);
  font-size: var(--text-md);
  font-weight: 600;
}
.toolbar-btn {
  align-items: center;
  background: 0 0;
  border: none;
  border-radius: 15px;
  color: var(--black);
  cursor: pointer;
  display: flex;
  height: 44px;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 44px;
}
.warning-text {
  text-align: center;
  color: #f44336;
  font-size: var(--text-sm);
  margin-top: var(--space-sm);
}[data-borders-shadow='true'] #pdfViewer {
  border: 3px solid #000;
  border-radius: 0;
  box-shadow: none;
}
[data-borders-shadow='true'] canvas {
  filter: contrast(1.3) brightness(1.05);
}
canvas {
  image-rendering: -webkit-optimize-contrast;
}
#fontSizeDown,
#fontSizeUp {
  align-items: center;
  border: none;
  border-radius: 12px;
  color: var(--black);
  cursor: pointer;
  display: flex;
  font-size: var(--text-base);
  height: 24px;
  justify-content: center;
  transition: 0.2s;
  width: 24px;
}
#fontSizeDown:hover,
#fontSizeUp:hover {
  background: var(--gray-100);
}
#miniToolbar.active,
.mini-toolbar.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 300 !important;
}
#pdfSingleToolbar.highlight-mode,
#pdfSingleToolbar.pen-mode {
  min-width: 150px;
  justify-content: center;
  max-width: 25vh;
}
.back-btn-arrow:active,
.back-btn:active {
  opacity: 0.6;
}
.pdf-bottom-toolbar::-webkit-scrollbar,
.setlist-view {
  display: none;
}
.modal-actions .btn-secondary:hover {
  background: var(--gray-100);
}
.thickness-modal,
.transparency-modal {
  animation: 0.3s ease-out modalSlideDown;
  background: var(--bg-primary);
  border-radius: 12px;
  box-shadow: var(--shadow-classic);
  display: none;
  max-width: 350px;
  padding: var(--space-xs2) var(--space-md);
  position: fixed;
  width: 70vw;
  z-index: var(--z-modal) !important;
  right: auto;
  transform: translateX(-50%);
  left: 50% !important;
  top: calc(env(safe-area-inset-top) + 165px) !important;
  min-width: 250px;
  border: 2px solid var(--gray-200);
}
.slider-row {
  align-items: center;
  display: flex;
  gap: 40px;
  justify-content: center;
}
.actions-popup-toolbar,
.filter-dropdown,
.pro-modal-content {
  box-shadow: var(--shadow-classic);
}
#pdfSingleToolbar.highlight-mode .toolbar-icon,
#pdfSingleToolbar.pen-mode .toolbar-icon {
  gap: var(--space-md);
}
.toolbar-btn img,
.toolbar-btn svg {
  filter: opacity(0.8);
  transition: 0.3s;
}
.toolbar-icon {
  align-items: center;
  display: flex;
  gap: var(--space-xs2);
  justify-content: space-between;
}
#settingsView.active,
.settings-screen.active {
  display: flex !important;
}
#pdfSingleToolbar.text-mode #boldBtn,
#pdfSingleToolbar.text-mode #colorPickerTrigger,
#pdfSingleToolbar.text-mode #italicBtn,
#pdfSingleToolbar.text-mode #underlineBtn {
  display: flex;
  visibility: visible;
}
#pdfSingleToolbar.text-mode #fontSelector,
.modal.active,
.page-loader.active,
.pdf-viewer-container.active,
.pro-modal.active,
.text-annotation-modal.active {
  display: flex;
}
.info-modal.active {
  display: flex;
  z-index: var(--z-top) !important; 
}
#pdfSingleToolbar.eraser-mode,
#pdfSingleToolbar.highlight-mode #alignCycleBtn,
#pdfSingleToolbar.highlight-mode #bgColorTrigger,
#pdfSingleToolbar.highlight-mode #fontSizeContainer,
#pdfSingleToolbar.highlight-mode #strikeBtn,
#pdfSingleToolbar.pen-mode #alignCycleBtn,
#pdfSingleToolbar.pen-mode #bgColorTrigger,
#pdfSingleToolbar.pen-mode #fontSizeContainer,
#pdfSingleToolbar.pen-mode #strikeBtn,
#pdfSingleToolbar.text-mode #borderBtn,
.scrollable-color-container::-webkit-scrollbar {
  display: none !important;
}
#fullscreenPdfViewer.active {
  display: flex;
  pointer-events: auto;
}
.fullscreen-pdf-viewer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  z-index: var(--z-modal);
  display: none;
  overflow: hidden;
}a
.fullscreen-controls {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-ui);
}
.fullscreen-controls button {
  pointer-events: auto;
  transition: opacity 0.3s ease-in-out;
}
.fullscreen-close-btn {
  position: fixed !important;
  transform: none !important;
  top: calc(env(safe-area-inset-top) + 18px) !important;
  right: calc(env(safe-area-inset-right) + 20px) !important;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  background: var(--danger);
  color: var(--bg-primary);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: var(--text-xl);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-top);
  padding: 0;
  margin: 0;
}
#fullscreenPageInfo {
  color: var(--white-fixed);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: 0.5px;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
}
.fullscreen-nav-btn {
  align-items: center;
  cursor: pointer;
}
.fullscreen-close-btn,
.fullscreen-nav-btn {
  transition: opacity 0.3s ease-in-out, transform 0.2s ease-in-out;
}
.fullscreen-close-btn:hover {
  transform: translateX(-50%) scale(1.1);
}
.fullscreen-close-btn:active {
  transform: translateX(-50%) scale(0.9);
}
.fullscreen-nav-btn.right:hover{
  transform: translateY(-50%) scale(1.1);
}
.fullscreen-close-btn:focus {
  outline: rgba(255, 255, 255, 0.5) solid 2px;
  outline-offset: 2px;
}
.fullscreen-nav-btn {
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 64px;
  height: 64px;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 50%;
  justify-content: center;
  transition: 0.2s;
  z-index: var(--z-ui);
}
.fullscreen-nav-btn.left {
  left: 20px;
}
.fullscreen-nav-btn.right {
  right: 20px;
}
.fullscreen-nav-btn:hover {
  transform: translateY(-50%) scale(1.1);
  background: rgba(0, 0, 0, 0.9);
}
.fullscreen-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.fullscreen-nav-btn.right:active,
.fullscreen-nav-btn:active {
  transform: translateY(-50%) scale(0.95);
}
.fullscreen-page-indicator {
  position: absolute;
  bottom: 45px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-dark-surface);
  border: 2px solid #3a3a3c;
  padding: var(--space-xs2) var(--space-md);
  border-radius: 24px;
  z-index: var(--z-modal);
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(10px);
  transition: opacity 0.3s ease-in-out, transform 0.2s ease-in-out;
  opacity: 1;
}
.filter-toggle,
.filter-toggle svg {
  color: var(--gray-600);
}
#fullscreen-pdf-container {
  position: relative;
  z-index: var(--z-ui);
  border-radius: 4px;
  overflow: hidden;
}
.status-dot {
  flex-shrink: 0;
  margin-left: var(--space-xs2);
  white-space: nowrap;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background-color: silver;
  border: 2px solid var(--bg-primary);
}
.score-card.drag-over {
  border-top: 3px solid var(--orange);
  margin-top: var(--space-sm);
}
.drag-placeholder {
  background: rgba(255, 153, 0, 0.2);
  border: 2px dashed #f90;
  border-radius: 8px;
  transition: height 0.2s ease-in-out;
}
.drag-placeholder.active {
  background: rgba(255, 153, 0, 0.3);
}
.drop-zone:not(.drag-placeholder) {
  opacity: 1;
}
.filter-section {
  position: relative;
  margin: var(--space-sm) 0;
}
.filter-toggle {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-xs2);
  background: 0 0;
  border: none;
  border-radius: 8px;
  font-size: var(--text-base);
  width: 50vh;
  justify-content: flex-start;
  transition: 0.2s;
}
.filter-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--space-xs);
  width: 30vh;
  background: var(--bg-primary);
  border-radius: 8px;
  z-index: var(--z-top);
  overflow: hidden;
  display: none;
  border: 2px solid var(--gray-100) !important;
}
.filter-option {
  justify-content: space-between;
  padding: var(--space-xs2) var(--space-md);
  cursor: pointer;
  transition: background 0.2s;
}
.filter-option.active {
  background: #ff73213b;
  font-weight: 500;
  color: var(--orange-deep);
}
.filter-option:hover {
  background: #ff722125;
}
#filterLabelFiles,
#filterLabelSetlistFiles,
#filterLabelSetlists {
  font-weight: 500;
}
.header-actions {
  margin-left: auto;
  gap: var(--space-sm);
}
.pro-btn {
  align-items: center;
  cursor: pointer;
  background: 0 0;
  border: none;
  padding: var(--space-xs);
  border-radius: 999px;
  display: flex;
  justify-content: center;
  transition: background 0.2s, transform 0.1s;
}
.pro-modal,
.view {
  display: none;
}
.pro-btn img {
  color: var(--gray-500);
  display: block !important;
}
.info-modal,
.pro-modal {
  position: fixed;
  inset: 0px;
  background: var(--overlay-60);
  align-items: center;
  justify-content: center;
  z-index: var(--z-top);
  width: 100vw;
  height: 100vh;
}
.pro-modal-content {
  width: 350px;
  border-radius: 24px;
  background: var(--bg-primary);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  border: 2px solid var(--gray);
}
.pro-modal-title {
  color: var(--orange-deep);
  font-size: var(--text-lg);
  margin: 0 0 var(--space-sm);
  font-weight: 600;
}
.pro-modal-text {
  color: var(--gray-500);
  font-size: var(--text-base);
  line-height: 1.4;
  margin: 0 0 var(--space-md);
}
.pro-modal-btn {
  font-size: var(--text-base);
  background-color: var(--gray-200);
  color: var(--black);
  border: none;
  border-radius: 999px;
  padding: var(--space-xs2) var(--space-md);
  cursor: pointer;
  min-height: 44px;
}
.info-modal {
  display: none;
  position: fixed;
  inset: 0px;
  background: var(--overlay-60);
  align-items: center;
  justify-content: center;
  z-index: var(--z-top);
  width: 100vw;
  height: 100vh;
}
.view.active {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex !important;
  height: 100% !important;
}
#filesScrollContainer,
#setlistScrollContainer {
  overscroll-behavior-y: contain;
  box-sizing: border-box;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden auto !important;
  touch-action: pan-y !important;
}
#fileList,
#setlistContainer {
  display: block;
  flex-shrink: 0;
  overflow: visible !important;
  height: auto !important;
  min-height: auto !important;
  padding-bottom: 0 !important;
  width: 100%;
}
.file-upload,
.filter-section,
.setlist-header {
  flex-shrink: 0;
}
.actions-popup-toolbar {
  position: fixed;
  background: var(--white-transparency);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);  
  border-radius: 30px;
  display: flex;
  gap: var(--space-sm);
  z-index: var(--z-modal);
  margin-top: var(--space-xs);
  border: 2px solid var(--gray-100);
  min-height: 44px !important;
  padding: var(--space-xs);
}
.actions-popup-toolbar .icon-btn {
  padding: var(--space-sm);
  background: 0 0;
  border-radius: 20px;
  box-shadow: none !important;
  border: none !important;
}
#watchRewardedVideoBtn,
.auth-card,
.btn-auth {
  box-shadow: var(--shadow-classic);
}
#watchRewardedVideoBtn {
  color: var(--white-fixed);
  border: none;
  background: var(--orange);
  flex-shrink: 0;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: 0.3s;
  white-space: nowrap;
}
.auth-container {
  display: flex;
  align-items: center;
  position: fixed;
  inset: 0px;
  background: var(--orange);
  justify-content: center;
  z-index: var(--z-modal);
  overflow: hidden;
}
.auth-screen {
  position: absolute;
  width: 100%;
  height: 100%;
  justify-content: center;
  opacity: 0;
  transform: translateX(100%);
  transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.auth-screen.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: all;
}
.auth-card {
  background: var(--white-fixed);
  border-radius: 24px;
  padding: var(--space-xl);
  width: 90%;
  max-width: 400px;
  animation: 0.5s slideUp;
}
.auth-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: #333;
  margin: 0 0 var(--space-xl);
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.form-group,
.password-group {
  position: relative;
}
.form-input::placeholder {
  color: var(--gray-400);
}
.toggle-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: 0 0;
  border: none;
  font-size: var(--text-lg);
  cursor: pointer;
  padding: 4px var(--space-sm);
  transition: opacity 0.2s;
}
.toggle-password:hover {
  opacity: 0.7;
}
.password-strength-container {
  margin-top: var(--space-sm);
}
.password-strength-indicator {
  height: 6px;
  background: #e0e0e0;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.password-strength-indicator::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: #666;
  transition: 0.3s;
}
.password-strength-indicator.strength-0::after {
  width: 0%;
  background: #666;
}
.password-strength-indicator.strength-1::after {
  width: 20%;
  background: #f44;
}
.password-strength-indicator.strength-2::after {
  width: 40%;
  background: #f80;
}
.password-strength-indicator.strength-3::after {
  width: 60%;
  background: #fc0;
}
.password-strength-indicator.strength-4::after {
  width: 80%;
  background: #8c0;
}
.password-strength-indicator.strength-5::after {
  width: 100%;
  background: #0c4;
}
.password-strength-message {
  font-size: var(--text-sm);
  margin-top: var(--space-xs);
  font-weight: 600;
}
.password-strength-message.strength-0,
.password-strength-message.strength-1 {
  color: #f44;
}
.password-strength-message.strength-2 {
  color: #f80;
}
.password-strength-message.strength-3 {
  color: #fc0;
}
.password-strength-message.strength-4 {
  color: #8c0;
}
.password-strength-message.strength-5 {
  color: #0c4;
}
.form-checkbox {
  gap: var(--space-sm);
  font-size: var(--text-base);
  color: #666;
}
.form-checkbox input[type='checkbox'] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: rgb(255, 107, 53);
}
.auth-footer a,
.terms-link {
  color: var(--orange-solid);
  text-decoration: none;
  font-weight: 600;
}
.auth-footer a:hover,
.terms-link:hover {
  text-decoration: underline;
}
.btn-auth {
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  border: none;
  border-radius: 30px;
  font-size: var(--text-base);
  cursor: pointer;
  transition: 0.3s;
  color: var(--white-fixed);
  background: var(--orange);
}
.btn-social {
  background: var(--white-fixed);
  transition: 0.3s;
  cursor: pointer;
}
.auth-divider {
  display: flex;
  align-items: center;
  margin: var(--space-sm) 0;
  color: #999;
  font-size: var(--text-base);
}
.btn-social,
.language-option span {
  color: #333;
  font-weight: 600;
  font-size: var(--text-base);
}
.auth-divider::after,
.auth-divider::before {
  content: '';
  flex: 1 1 0%;
  border-bottom: 1px solid #ddd;
}
.auth-divider span {
  padding: 0 var(--space-xs2);
}
.social-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs2);
}
#reportBugBtn,
#restorePurchasesBtn {
  padding: var(--space-xs2) var(--space-md);
  border-radius: 30px;
  font-size: var(--text-base);
  background-color: var(--white);
  color: var(--text-dark);
  border: 1px solid var(--gray-400);
  min-width: 100px;
}
.btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs2);
  width: 100%;
  padding: var(--space-xs2) var(--space-md);
  border: 2px solid #ddd;
  border-radius: 12px;
}
.auth-footer {
  color: #666;
  font-size: var(--text-base);
  text-align: center;
}
.language-label {
  color: #666;
  font-size: var(--text-base);
  text-align: center;
  margin-bottom: var(--space-md);
}
.btn-social:hover,
.language-option:hover {
  border-color: var(--orange-solid);
  background: #fff5f2;
}
.social-icon {
  width: 20px;
  height: 20px;
}
.auth-footer {
  margin-top: var(--space-xs2);
}
#goToForgotPassword {
  color: var(--orange-solid);
}
.language-selection {
  margin: var(--space-lg) 0;
}
.language-option {
  background: var(--white-fixed);
  transition: 0.3s;
  cursor: pointer;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 2px solid #ddd;
  border-radius: 12px;
  min-width: 90px;
}
.language-option.selected {
  box-shadow: var(--shadow-classic);
  border-color: var(--orange-solid);
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0, rgba(255, 140, 66, 0.1) 100%);
}
.flag-icon {
  width: 48px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
}
.auth-loader {
  position: fixed;
  inset: 0px;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  z-index: var(--z-modal);
}
.loader-spinner {
  width: 48px;
  height: 48px;
  border-width: 4px;
  border-style: solid;
  border-color: var(--white-fixed) rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.2);
  border-image: initial;
  border-radius: 50%;
  animation: 1s linear infinite spin;
}
.auth-loader p {
  color: var(--white-fixed);
  font-size: var(--text-base);
  font-weight: 600;
}
#userSettingsScreen .settings-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
#userSettingsScreen .settings-input-wrapper img {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 24px;
  opacity: 0.6;
  bottom: 10px;
}
#userSettingsScreen .settings-input {
  width: 180px;
  padding: 10px var(--space-xs2) 10px 43px;
  border: 1px solid var(--gray-300);
  border-radius: 30px;
  font-size: var(--text-base);
  background: var(--white);
  color: var(--text-dark);
  margin-top: var(--space-sm);
}
#userSettingsScreen .settings-input:focus {
  outline: 0;
  border-color: var(--orange-deep);
}
#settingsEmailDisplay {
  margin: 0;
  padding: var(--space-sm) 0;
  font-size: var(--text-base);
  color: var(--text-muted);
  font-weight: 500;
  word-break: break-all;
  min-width: 0;
  text-align: right;
}
#noAdsOption.active {
  background: rgba(52, 199, 89, 0.1);
}
.adsbygoogle {
  display: block;
  width: 100%;
  min-height: 90px;
  background: #333;
  border-radius: 8px;
}
.adsbygoogle[data-adsbygoogle-status='unfilled'] {
  background: rgba(255, 255, 255, 0.05);
  position: relative;
}
.adsbygoogle[data-adsbygoogle-status='unfilled']::after {
  content: 'Caricamento annuncio...';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.05);
  font-size: var(--text-sm);
  font-weight: 500;
}
#fileList {
  padding-bottom: 80px;
}
.adfree-overlay {
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: var(--z-top);
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  position: fixed;
  left: 0;
  display: flex;
}
.adfree-modal {
  background: var(--bg-primary);
  padding: var(--space-lg) var(--space-md);
  border-radius: 16px;
  width: 85%;
  max-width: 350px;
  box-shadow: var(--shadow-classic);
  font-family: sans-serif;
  border: 1px solid #333;
}
.adfree-title {
  margin-top: 0;
  font-size: var(--text-lg);
  margin-bottom: var(--space-md);
}
.adfree-message {
  font-size: var(--text-md);
  line-height: 1.5;
  margin-bottom: var(--space-lg);
  color: var(--text-dark);
}
.adfree-button {
  color: var(--white-fixed);
  border: none;
  padding: var(--space-md) var(--space-lg);
  border-radius: 10px;
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}
.fs-metronome-bar {
  position: absolute;
  left: 20px;
  background-color: var(--color-dark-surface);
  border: 1px solid #3a3a3c;
  border-radius: 12px;
  padding: 8px var(--space-md);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-xs2);
  z-index: var(--z-ui);
  pointer-events: auto;
  user-select: auto;
  max-width: calc(-80px + 100vw);
  transition: 0.3s;
  overflow: hidden;
  animation: 0.3s ease-out slideUp; --slide-from: -30px;
  top: 20px;
}
.fs-metro-primary,
.fs-metro-secondary {
  display: flex;
  align-items: center;
  gap: var(--space-xs2);
}
.fs-metro-expand-btn {
  display: none;
  background: 0 0;
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
  margin-left: auto;
  transition: transform 0.3s;
}
.fs-metro-play-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.2s;
  background: linear-gradient(135deg, #34c759, #00a91a);
}
.fs-metro-circle-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #636366;
  background: 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.1s;
}
.fs-metro-circle-btn:active {
  background-color: #3a3a3c;
}
.fs-metro-text {
  color: var(--white-fixed);
  font-size: var(--text-lg);
  font-weight: 300;
  min-width: 95px;
  letter-spacing: 0.5px;
}
.fs-metro-slider {
  appearance: none;
  width: 120px;
  height: 6px;
  border-radius: 3px;
  background: var(--white-fixed);
  outline: 0;
  cursor: pointer;
}
.fs-metro-slider::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--success);
  cursor: pointer;
  border: 2px solid var(--color-dark-surface);
}
.fs-metro-dots {
  display: flex;
  gap: var(--space-sm);
  margin-left: var(--space-sm);
}
.fs-metro-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #48484a;
  transition: background-color 50ms, transform 50ms;
}
.fs-metro-dot.active {
  background-color: var(--success);
  transform: scale(1.1);
  box-shadow: rgba(52, 199, 89, 0.6) 0 0 8px;
}
.fs-metro-select {
  background: #2c2c2e;
  color: var(--white-fixed);
  border: 1px solid #636366;
  border-radius: 8px;
  padding: 4px var(--space-sm);
  font-size: var(--text-base);
  font-family: inherit;
  font-weight: 200;
  cursor: pointer;
  outline: 0;
  transition: 0.2s;
}
.fs-metro-select:hover {
  background: #3a3a3c;
}
.audio-widget-wrapper,
.bottom-nav,
.pdf-bottom-toolbar {
bottom: calc(env(safe-area-inset-bottom) + 10px) !important;
transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
#filesScrollContainer,
#setlistScrollContainer {
  padding: 200px var(--space-md) 100px !important;
  transition: padding-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body.hide-metronome-fs #fsMetronomeBar {
  display: none !important;
}
body.admob-banner-visible .bottom-nav,
body.admob-banner-visible .pdf-bottom-toolbar{
  transition: bottom 0.3s ease-out !important;
}
body.admob-banner-visible #filesScrollContainer,
body.admob-banner-visible #setlistScrollContainer,
body.admob-banner-visible .scroll-wrapper {
  transition: padding-bottom 0.3s ease-out !important;
  padding-bottom: calc(
  var(--ad-banner-height) + 100px + env(safe-area-inset-bottom, 15px)
  ) !important;
}
body.admob-banner-visible .bottom-nav,
body.admob-banner-visible .pdf-bottom-toolbar {
  bottom: calc(var(--ad-banner-height) + env(safe-area-inset-bottom, 15px)) !important;
}
body.admob-banner-visible .audio-widget-wrapper {
  transition: bottom 0.3s ease-out !important;
  bottom: calc(var(--ad-banner-height) + env(safe-area-inset-bottom, 15px)) !important;
}
body.admob-banner-visible #pdfThumbnailsPanel,
body.admob-banner-visible #shortcutPanel {
  transition: bottom 0.3s ease-out !important;
}
body.admob-banner-visible #pdfThumbnailsPanel,
body.admob-banner-visible #shortcutPanel {
  bottom: calc(var(--ad-banner-height, 60px) + 95px + env(safe-area-inset-bottom, 15px)) !important;
}
body.admob-banner-visible .mp-scrubber {
  transition: bottom 0.3s ease-out !important;
  bottom: calc(var(--ad-banner-height, 60px) + 95px + env(safe-area-inset-bottom, 15px)) !important;
}
@media (max-width: 599px) and (max-height: 1000px) {
  .theme-option:has(#applytwoPagesPreview) {
  display: none !important;
  }
}
@media (prefers-contrast: high) {
  .toolbar-btn {
  border-color: #000;
  border-width: 3px;
  }
  .toolbar-btn.active {
  background: #000;
  color: var(--bg-primary);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  ::after,
  ::before {
  animation-duration: 10ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 10ms !important;
  }
  #settingsView,
  .active,
  .modal,
  .settings-screen,
  .view,
  [class*='fade'],
  [class*='show'],
  [class*='slide'] {
  transition: opacity 10ms, transform 10ms, visibility 10ms, display 10ms !important;
  }
  #splash-screen {
    transition: opacity 0.3s ease-out;
  }
}
@media (max-width: 768px) {
  .header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  }
  .bottom-nav {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-sm);
}
  .main {
  padding-top: 180px !important;
  }
  .bottom-tool-btn {
  width: 48px !important;
  height: 48px !important;
  gap: 40px !important;
  }
  .bottom-tool-icon {
  width: 22px !important;
  height: 22px !important;
  }
  .fullscreen-page-indicator {
  padding: var(--space-xs2) var(--space-md) !important;
  font-size: var(--text-base) !important;
  z-index: var(--z-modal) !important;
  }
  .fullscreen-nav-btn {
  z-index: var(--z-modal) !important;
  }
  .fullscreen-nav-btn.left {
  left: 8px !important;
  }
  .fullscreen-nav-btn.right {
  right: 8px !important;
  }
  .fullscreen-close-btn {
    top: calc(env(safe-area-inset-top) + 15px) !important;
    right: calc(env(safe-area-inset-right) + 15px) !important;
}
  .fs-metronome-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    top: calc(env(safe-area-inset-top) + 15px) !important;
}
  .fs-metro-expand-btn {
  display: flex;
  }
  .fs-metro-secondary {
  flex-wrap: wrap;
  }
  .fs-metro-collapsed .fs-metro-secondary {
  display: none;
  }
  .fs-metro-collapsed .fs-metro-expand-btn {
  transform: rotate(0);
  }
  .fs-metronome-bar:not(.fs-metro-collapsed) {
  padding-bottom: var(--space-md);
  }
  .fs-metronome-bar:not(.fs-metro-collapsed) .fs-metro-expand-btn {
  transform: rotate(180deg);
  color: var(--success);
  }
  .fs-metronome-bar:not(.fs-metro-collapsed) .fs-metro-secondary {
  display: flex;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid #3a3a3c;
  }
  .fs-metro-slider {
  flex-grow: 1;
  min-width: 80px;
  }
  .fs-metro-dots {
  margin-left: auto;
  }
}
@media (max-width: 530px) {
  .splash-logo {
    width: min(85vw, 320px);
    max-width: 320px;
    margin-bottom: 30px;
  }
  .simple-color-modal .color-canvas {
  height: 140px !important;
  width: 100% !important;
  }
  .simple-color-modal .hue-slider {
  height: 28px !important;
  margin: var(--space-xs2) 0 !important;
  }
  .simple-color-modal .hex-input-area {
  min-width: 140px !important;
  }
  .simple-color-modal .hex-input {
  max-width: 10vh;
  font-size: var(--text-sm) !important;
  }
  #bgColorModal.active {
  width: 45vh;
  }
  #bgOpacitySlider {
  width: 23vh;
  }
  #bgColorModal .color-picker-modal {
  width: 90vw !important;
  max-width: 380px !important;
  padding: var(--space-md) !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  }
  #bgColorModal .tool-indicator {
  font-size: var(--text-md) !important;
  }
  #bgColorModal .scrollable-color-grid {
  gap: var(--space-sm) !important;
  }
  #bgColorModal .transparent-option svg {
  width: 18px !important;
  height: 18px !important;
  }
  #bgColorModal .control-label {
  font-size: var(--text-sm) !important;
  margin-bottom: var(--space-xs) !important;
  }
  #bgColorModal .slider-row {
  gap: var(--space-xs2) !important;
  }
  #bgColorModal .modern-slider {
  flex: 1 1 0% !important;
  }
  #bgColorModal .slider-value {
  font-size: var(--text-base) !important;
  padding: var(--space-xs) var(--space-sm) !important;
  min-width: 60px !important;
  }
  #bgColorModal .modal-buttons {
  margin-top: var(--space-md) !important;
  gap: var(--space-sm) !important;
  }
  .nav-icon {
  width: 36px !important;
  height: 36px !important;
  }
  .color-canvas {
  height: 95px;
  }
  .color-option {
  height: 26px;
  width: 26px;
  }
  .modal-content {
  padding: var(--space-md);
  }
  .modern-slider {
    height: 7px;
}
  .pdf-single-toolbar {
  flex-wrap: wrap;
  gap: var(--space-xs);
  height: auto;
  justify-content: center;
  min-height: 55px;
  }
  .pdf-back-btn,
  .pdf-tool-btn {
  height: 22px !important;
  width: 22px !important;
  }
.pdf-toolbar {
  padding: var(--space-xs) var(--space-xs2) !important;
  }
  .header {
  font-size: var(--text-base) !important;
  position: fixed !important;
  top: 0 !important;
  }
  .main {
  padding: 60px var(--space-sm) 100px !important;
  }
  .fullscreen-nav-btn {
  width: 36px;
  height: 36px;
  }
  .fullscreen-nav-btn svg {
  width: 22px;
  height: 22px;
  }
}
@media (max-width: 500px) {
  .splash-decoration-top img,
  .splash-decoration-top svg {
    width: 80px;
  }
  .file-upload,
  .setlist-title {
  font-size: var(--text-xl);
  }
  svg canvas {
  width: 100% !important;
  }
  .annotationLayer,
  .textLayer {
  height: 100% !important;
  transform: none !important;
  width: 100% !important;
  }
  .fullscreen-page-indicator {
  padding: 8px var(--space-md) !important;
  font-size: var(--text-sm) !important;
  }
  .fullscreen-nav-btn.left {
  left: 8px !important;
  }
  .fullscreen-nav-btn.right {
  right: 8px !important;
  }
  .fullscreen-nav-btn {
  width: 40px !important;
  height: 40px !important;
  }
  .fullscreen-nav-btn svg {
  width: 32px;
  height: 32px;
  }
  .fullscreen-close-btn {
  min-width: 36px;
  min-height: 36px;
  }
  #colorPickerModal .color-option,
  .color-picker-modal .color-option,
  .fullscreen-close-btn {
    height: 32px !important;
    width: 32px !important;
  }
  .theme-label {
    max-width:200px;
  }
  .color-canvas {
  height: 120px;
  }
  .color-option {
  height: 28px;
  width: 28px;
  }
  .scrollable-color-container {
  top: auto;
  }
.modal-content {
  padding: var(--space-md);
  margin-bottom: 50px;
  }
  .modal-header {
  margin-bottom: var(--space-md);
  }
  .thickness-modal,
  .transparency-modal {
  padding: var(--space-md) var(--space-md);
  height: 130px;
  min-width: 350px;
  top: 160px;
  }
.toolbar-btn {
  border-radius: 8px;
  }
  #pdfSingleToolbar.text-mode,
  .pdf-single-toolbar.text-mode {
  scroll-behavior: smooth;
  scrollbar-width: none;
  max-width: 100%;
  min-width: 320px;
  overflow-y: hidden;
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
  justify-content: flex-start !important;
  overflow-x: auto !important;
  }
  #pdfSingleToolbar.text-mode::-webkit-scrollbar {
  display: none;
  }
  #pdfSingleToolbar,
  .bottom-nav {
  border-radius: 22px !important;
  }
  .pdf-back-btn,
  .pdf-tool-btn {
  height: 24px !important;
  width: 24px !important;
  }
  .pdf-bottom-toolbar {
  z-index: var(--z-ui);
  }
  .header {
    font-size: var(--text-xl) !important;
}
  .main {
  padding: 0 var(--space-xs2) !important;
  }
  .score-info h3 {
  font-size: var(--text-base);
  }
.score-info p {
  font-size: var(--text-sm);
  }
  #fullscreenPageInfo,
  .color-option.selected::after {
  font-size: var(--text-sm);
  }
  .bottom-tool-btn {
  height: 44px !important;
  width: 44px !important;
  }
  .bottom-tool-icon {
  width: 20px !important;
  height: 20px !important;
  }
  #fontSizeDown,
  #fontSizeUp {
  font-size: var(--text-base);
  height: 28px;
  width: 28px;
  }
  #miniToolbar.layout-horizontal {
  gap: var(--space-sm) !important;
  height: 44px !important;
  min-width: 120px !important;
  padding: var(--space-xs) var(--space-sm) !important;
  }
  #miniToolbar.layout-vertical {
  gap: var(--space-sm) !important;
  min-height: 120px !important;
  padding: var(--space-sm) var(--space-xs) !important;
  width: 44px !important;
  }
  .mini-toolbar {
  gap: var(--space-sm);
  padding: var(--space-xs);
  }
  .mini-toolbar-btn {
  height: 32px !important;
  min-height: 32px !important;
  min-width: 32px !important;
  padding: var(--space-xs) !important;
  width: 32px !important;
  }
  .mini-toolbar-btn svg {
  height: 18px !important;
  width: 18px !important;
  }
  .auth-card {
  padding: var(--space-xl) var(--space-lg);
  width: 95%;
  }
  .auth-title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-lg);
  }
  .language-options {
  gap: var(--space-xs2);
  }
  .language-option {
  min-width: 80px;
  padding: var(--space-xs2);
  }
  .flag-icon {
  width: 40px;
  height: 28px;
  }
  #watchRewardedVideoBtn {
  width: 100%;
  max-width: 260px;
  padding: var(--space-xs2) var(--space-md);
  font-size: var(--text-base);
  margin-top: var(--space-xs);
  }
  .fs-metronome-bar {
    padding: var(--space-xs) var(--space-xs2);
}
  .fs-metro-primary,
  .fs-metro-secondary {
  gap: var(--space-sm);
  }
  .fs-metro-play-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  }
  .fs-metro-play-btn svg {
  width: 18px;
  height: 18px;
  }
  .fs-metro-circle-btn {
  width: 28px;
  height: 28px;
  }
  .fs-metro-circle-btn svg {
  width: 14px;
  height: 14px;
  }
  .fs-metro-text {
  font-size: var(--text-lg);
  min-width: 90px;
  }
  .fs-metro-expand-btn svg {
  width: 20px;
  height: 20px;
  }
  .fs-metro-slider {
  height: 4px;
  }
  .fs-metro-slider::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  }
  .fs-metro-select {
  font-size: var(--text-base);
  padding: 2px var(--space-xs);
  }
  .fs-metro-dots {
  gap: var(--space-xs);
  margin-left: var(--space-xs);
  }
  .fs-metro-dot {
  width: 10px;
  height: 10px;
  }
  #add-selected,
  #delete-selected,
  #edit-selected-file,
  #edit-selected-setlist,
  #delete-selected-setlist,
  #fullscreen-selected-setlist-file,
  #download-selected-setlist-files,
  #delete-selected-setlist-files,
  #share-selected-files,
  #share-selected-setlist-files,
  #info-selected-files,
  #info-selected-setlists,
  #info-selected-setlist-files {
  display: none !important;
  }
  .actions-menu-btn {
  display: flex !important;
  }
}
@media screen and (orientation: landscape) and (min-width: 500px) and (max-height: 500px) {
  .splash-logo {
    width: min(40vh, 300px);
    margin-bottom: 20px;
  }
  .bottom-nav {
  padding: var(--space-xs) 0;
  }
  .header {
  font-size: var(--text-base);
  left: 0;
  min-height: 40px;
  padding: var(--space-xs) var(--space-md);
  position: fixed;
  right: 0;
  top: 0;
  z-index: var(--z-ui);
  }
  .main {
  margin-top: 50px;
  padding-bottom: 50px;
  }
  .bottom-tool-btn {
  height: 30px;
  width: 30px;
  }
  .bottom-tool-icon{
  height: 12px;
  width: 12px;
  }
  .nav-icon {
  height: 18px;
  width: 18px;
  }
  .nav-item {
  padding: 3px;
  }
  .color-option{
  height: 22px;
  width: 22px;
  }
  .color-picker-modal {
  bottom: 40px;
  height: fit-content;
  min-width: 220px;
  padding: var(--space-sm);
  }
  .modal-content {
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--space-md);
  }
  .pdf-bottom-toolbar {
  gap: var(--space-xs);
  padding: 3px;
  max-width: 300px;
  }
  .pdf-file-title {
  font-size: var(--text-xs);
  }
  .pdf-back-btn,
  .pdf-tool-btn {
  height: 24px;
  width: 24px;
  }
  .pdf-toolbar {
  gap: 3px;
  padding: 3px;
  }
  .pdf-viewer-header {
  min-height: 35px;
  padding: var(--space-xs) var(--space-sm);
  }
  body.admob-banner-visible #filesScrollContainer,
  body.admob-banner-visible #setlistScrollContainer,
  body.admob-banner-visible .scroll-wrapper {
  padding-bottom: calc(
    var(--ad-banner-height) + 60px + env(safe-area-inset-bottom, 0px)
  ) !important;
  }
  body.admob-banner-visible .bottom-nav,
  body.admob-banner-visible .pdf-bottom-toolbar,
  body.admob-banner-visible .audio-widget-wrapper {
  bottom: calc(var(--ad-banner-height) + env(safe-area-inset-bottom, 0px)) !important;
  }
  #authContainer,
  #fullscreenPdfViewer,
  #pdfViewer,
  .bottom-nav,
  .header,
  .main {
  display: none !important;
  }
}
@keyframes modalSlideDown {
  0% {
  opacity: 0;
  transform: translateX(-50%) translateY(-20px) scale(0.95);
  }
  100% {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  }
}
@keyframes shimmer {
  0% {
  transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
  transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}
@keyframes mltShdSpin {
  0%,
  100%,
  5%,
  95% {
  box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em,
    0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
  box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em,
    -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
  box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em,
    -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
  box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em,
    -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
}
@supports not (aspect-ratio: 1) {
  .actions-popup-toolbar > :not(:first-child),
  .bottom-controls > :not(:first-child),
  .control-row > :not(:first-child),
  .fs-metro-primary > :not(:first-child),
  .language-options > :not(:first-child),
  .modal-actions > :not(:first-child),
  .modal-buttons > :not(:first-child),
  .pdf-bottom-toolbar > :not(:first-child),
  .pdf-toolbar > :not(:first-child),
  .slider-row > :not(:first-child),
  .social-buttons > :not(:first-child),
  .top-actions > :not(:first-child) {
  margin-left: var(--space-xs2) !important;
  }
  .auth-form > :not(:first-child),
  .loader-container > :not(:first-child),
  .setlist-details > :not(:first-child),
  .settings-list > :not(:first-child) {
  margin-top: var(--space-md) !important;
  }
}
@media (max-width: 380px) {
  .pdf-bottom-toolbar,
  .pdf-tool-btn {
  gap: var(--space-xs) !important;
  }
  #bgColorModal,
  .simple-modal-content {
  width: 380px !important;
  padding: var(--space-xs2) !important;
  }
  .simple-modal-content .hex-input-area {
  gap: var(--space-xs) !important;
  }
  .simple-modal-content .hex-input {
  width: 40px;
  font-size: var(--text-sm) !important;
  }
  .simple-modal-content {
  top: 30px !important;
  }
  .control-row,
  .simple-modal-content .bottom-controls {
  gap: var(--space-xs);
  }
  .hex-apply-btn,
  .hex-cancel-btn {
  min-width: unset;
  padding: var(--space-sm) 5px;
  font-size: var(--text-sm);
  }
  #bgColorModal .slider-value {
  min-width: 55px !important;
  font-size: var(--text-sm) !important;
  }
  .bottom-controls {
  gap: 2px;
  }
  #bgColorModal .slider-row {
  gap: var(--space-sm) !important;
  }
  #bgOpacitySlider {
  width: 14vh;
  }
}
.simple-modal-content .bottom-controls {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-xs);
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: var(--space-md);
  box-sizing: border-box;
}
.simple-modal-content .hex-input-area {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0;
  border: 1px solid var(--gray-300);
  border-radius: 30px;
  padding: var(--space-xs);
  max-width: 140px !important;
  height: 44px;
}
.simple-modal-content .hex-input {
  flex: 1;
}
.hex-apply-btn{
  flex: 1;
  min-width: 80px;
  padding: var(--space-sm);
  border-radius: 30px;
  font-size: var(--text-base);
  border: none;
  transition: 0.2s;
  white-space: nowrap;
  cursor: pointer;
  width: 100px;
}
.hex-cancel-btn {
  flex: 1;
  min-width: 80px;
  padding: var(--space-sm);
  border-radius: 30px;
  font-size: var(--text-base);
  border: none;
  transition: 0.2s;
  white-space: nowrap;
  cursor: pointer;
  width: 100px;
  background-color: var(--gray-200);
  color: var(--black);
}
.hex-apply-btn {
  background-color: var(--orange-deep);
  color: var(--bg-primary);
}
#bgColorModal .advanced-controls {
  width: 100%;
  box-sizing: border-box;
  margin-top: var(--space-md);
}
#bgColorModal .slider-row {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-md) !important;
  justify-content: flex-end;
  min-width: 0;
}
#bgColorModal .modern-slider {
  flex: 1;
  min-width: 50px;
  width: 100%;
}
#bgColorModal .modal-buttons {
  display: flex;
  width: 100%;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  flex-wrap: nowrap;
}
#bgColorModal .modal-buttons button {
  flex: 1;
  width: auto;
}
body.is-premium #watchRewardedVideoBtn {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.unlock-premium {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  background: var(--orange);
  border: 2px solid #ffffff48;
  color: var(--white-fixed);
  border-radius: 50px;
  padding: var(--space-sm) var(--space-xl);
  font-size: var(--text-base);
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.23);
  transition: transform 0.2s, box-shadow 0.2s;
  margin: 0 auto;
}
.unlock-premium:active {
  transform: scale(0.95);
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.4);
}
.unlock-premium svg {
  margin-bottom: 2px;
}

@media screen and (orientation: landscape) and (min-width: 500px) and (max-height: 500px) {
  .splash-logo {
    width: min(40vh, 300px);
    margin-bottom: 20px;
  }
  @supports (-webkit-touch-callout: none) {
  #splash-screen {
    min-height: -webkit-fill-available;
  }
  .splash-logo {
    transform: translateZ(0);
  }
}
}
@supports (padding: max(0px)) {
  #splash-screen {
    padding-top: max(0px, env(safe-area-inset-top));
    padding-bottom: max(0px, env(safe-area-inset-bottom));
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
}
@media print {
  #splash-screen {
    display: none !important;
  }
}
@media screen and (max-width: 380px) and (-webkit-min-device-pixel-ratio: 2),
  screen and (max-width: 380px) and (min-resolution: 192dpi) {
  body,
  html {
    zoom: 0.9 !important;
  }
  .bottom-nav,
  .pdf-bottom-toolbar {
    width: 100vw !important;
    max-width: 100vw !important;
  }
  #fullscreenPdfViewer,
  #splash-screen,
  .fullscreen-pdf-viewer {
    zoom: 100% !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
  }
  .actions-popup-toolbar {
    position: fixed !important;
    margin-top: 40px !important;
  }
}
body.multipage-active .mp-scrubber,
body.singlepage-active .mp-scrubber {
  display: flex !important;
  background: transparent !important;
}
#pdfViewer:not(.active) ~ #multiPageScrubber {
  display: none !important;
}
.mp-scrubber-handle {
  display: none;
}
.thumbnails-panel {
  position: fixed !important;
  top: calc(env(safe-area-inset-top) + 110px) !important;
  bottom: calc(env(safe-area-inset-bottom) + 150px);
  height: auto !important;
  max-height: none !important;
  transition: bottom 0.3s ease-out;
}
.mp-scrubber {
  position: fixed !important;
  top: calc(env(safe-area-inset-top) + 175px) !important;
  bottom: calc(env(safe-area-inset-bottom) + 150px);
  height: auto !important;
  max-height: none !important;
  left: 30px;
  right: auto !important;
  width: 60px !important;
  display: none;
  transition: left 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
     bottom 0.3s ease-out ;
  pointer-events: none !important;
  touch-action: none !important;
}
body.audio-widget-open .mp-scrubber {
  bottom: calc(env(safe-area-inset-bottom) + 210px);
}
body.panels-collapsed .mp-scrubber {
  bottom: calc(env(safe-area-inset-bottom) + 70px);
}
body.thumbnails-open .mp-scrubber {
  left: 190px !important;
}
.mp-scrubber-handle.active {
  transform: translateX(-50%) scale(1.1);
  background: #ff8000 !important;
  color: var(--white-fixed) !important;
}
.scrubber-icon {
  pointer-events: none;
  transition: filter 0.2s ease;
}
.mp-scrubber-handle.active .scrubber-icon {
  filter: brightness(0) invert(1);
}
.thumbnails-panel {
  left: 2%;
  width: 160px;
  background: var(--white-transparency);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  border: 2px solid var(--gray-200);
  box-shadow: var(--shadow-classic);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-10px) translateZ(0);
}
.thumbnails-panel.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) translateZ(0);
}
.thumbnails-grid {
  flex: 1;
  overflow-y: auto !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs2);
  padding: var(--space-md) var(--space-sm);
  pointer-events: none;
  scrollbar-width: none;
}
.thumbnails-panel.active .thumbnails-grid,
.thumbnails-panel.active .thumbnail-item {
  pointer-events: auto;
}
.thumbnail-item {
  width: 75%;
  flex-shrink: 0;
  max-width: 180px;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--white-fixed);
  cursor: pointer;
  pointer-events: none;
  touch-action: manipulation !important;
  user-select: none;
  border: 2px solid var(--gray-200);
  transition: transform 0.2s ease;
}
.thumbnail-item:hover {
  scale: 1.01;
}
.thumbnail-item canvas {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}
.thumbnail-item.current {
  border-color: #ff8000;
  transform: scale(1.02);
}
.thumbnails-grid::-webkit-scrollbar,
.sp-scroll-list::-webkit-scrollbar,
.sp-coda-scroll::-webkit-scrollbar {
  display: none;
}
.thumbnail-item span {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: var(--overlay-60);
  color: white;
  padding: 2px var(--space-sm);
  border-radius: 10px;
  font-size: var(--text-xs);
  font-weight: 600;
}
.thumbnail-item img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  animation: fadeIn 0.3s ease-in;
}
@keyframes slideUp {
  0% { opacity: 0; transform: translateY(var(--slide-from, 30px)); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from {
  opacity: 0;
  }
  to {
  opacity: 1;
  }
}
.thumb-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1.4;
  background: rgba(255, 255, 255, 0.05);
}
.sp-toggle-btn {
  flex: 0 0 auto !important;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs) var(--space-xs);
  border-radius: 8px;
  color: var(--black);
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  min-width: 32px;
  min-height: 32px;
  margin: 0;
  position: relative !important;
  z-index: 100 !important;
  pointer-events: auto !important;
  margin-right: var(--space-xs);
  flex-shrink: 0;
  transform: rotate(0deg) !important;
}
.sp-toggle-btn img,
.sp-toggle-btn svg {
  pointer-events: none !important;
  display: block;
  transition: transform 0.25s ease;
}
.shortcut-panel {
  width: 300px;
  max-height: calc(100% - 175px);
  display: flex;
  flex-direction: column;
  z-index: var(--z-modal);
}
.sp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-xs2);
  flex-shrink: 0;
}
.sp-tabs {
  display: flex;
  gap: var(--space-xs);
  background-color: var(--white-transparency);
  box-shadow: var(--shadow-classic);
  border-radius: 15px;
}
.sp-tab {
  background: none;
  border: none;
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  border-radius: 15px;
  transition: opacity 0.2s, background 0.2s;
  display: flex;
  align-items: center;
}
.sp-tab.active {
  opacity: 1;
  background: rgba(0, 0, 0, 0.07);
}
.sp-tab.active img {
  filter: invert(50%) sepia(90%) saturate(2000%) brightness(100%) contrast(100%) !important;
  opacity: 1;
}
.sp-tab img {
  display: block;
  pointer-events: none;
}
#closeAdModalBtn,
.sp-close-btn {
  cursor: pointer;
  padding: var(--space-sm);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  justify-content: center;
  display: flex;
  align-items: center;
  color: var(--gray-200) !important;
  transition: background 0.2s;
  box-shadow: var(--shadow-classic) !important;
  background-color: var(--white-transparency);
  border: none;
}
.sp-item:hover,
.sp-select-btn:hover,
.sp-setlist-row:hover,
.sp-close-btn:hover,
.sp-tab:hover,
.sp-queue-item:hover,
.transparency-modal .sp-close-btn:hover,
.thickness-modal .sp-close-btn:hover,
#closeAdModalBtn:hover,
#infoBtnClose:hover,
.sp-select-circle-btn:hover,
.sp-outside-setlist-row:hover  {
  background: rgba(0, 0, 0, 0.07);
}
.sp-content {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.sp-content.active {
  display: flex;
}
.sp-section-label {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--black);
  margin: var(--space-xs2) var(--space-md) var(--space-xs);
  flex-shrink: 0;
  text-align: center;
}
.sp-scroll-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 4px var(--space-sm) var(--space-sm);
  min-height: 0;
}
.sp-item {
  padding: 8px var(--space-md);
  border-radius: 20px;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: background 0.15s;
  font-size: var(--text-base);
}
.sp-setlist-row {
  display: flex;
  align-items: center;
  padding: var(--space-sm) var(--space-sm);
  border-radius: 10px;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
}
.sp-chevron {
  flex-shrink: 0;
  opacity: 0.5;
  transition: transform 0.2s;
}
.sp-chevron.rotated {
  transform: rotate(90deg);
}
.sp-coda-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xs) var(--space-md);
  margin-bottom: var(--space-xs);
}
.sp-coda-top-row .sp-section-label {
  margin: 0;
}
.sp-select-circle-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--white-transparency);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  box-shadow: var(--shadow-classic);
}
.sp-select-circle-btn.active {
  background: var(--orange, #ff6a00);
  box-shadow: 0 2px 8px rgba(255, 106, 0, 0.3);
}
.sp-select-circle-btn.active img {
  filter: brightness(0) invert(1);
}
.sp-select-circle-btn img {
  display: block;
  transition: filter 0.2s;
}
.sp-select-btn {
  background: none;
  border: 1px solid var(--gray-200, #ddd);
  border-radius: 12px;
  padding: 3px var(--space-sm);
  font-size: var(--text-xs);
  cursor: pointer;
  color: var(--black);
  transition: background 0.15s;
}
.sp-coda-scroll {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 var(--space-sm) var(--space-sm);
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
.sp-group-header,
.sp-outside-setlist-name {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--space-xs2) 2px;
  font-size: var(--text-base);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
  color: var(--black);
  flex-direction: row-reverse;
  font-weight: 500;
}
.sp-group-header .sp-arrow {
  transition: transform 0.2s;
  margin-left: var(--space-xs);
  filter: invert(50%) sepia(90%) saturate(2000%) brightness(100%) contrast(100%);
  opacity: 1;
}
.sp-group-header {
  color: var(--orange-solid);
}
.sp-group-body {
  padding-bottom: var(--space-xs);
}
.sp-queue-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.sp-queue-item.sp-item-current {
  cursor: default;
}
.sp-queue-item.dragging {
  opacity: 0.35;
}
.sp-queue-item.drag-over {
  background: rgba(255, 106, 0, 0.1);
  outline: 1.5px dashed var(--orange, #ff6a00);
  border-radius: 10px;
}
.sp-drag-handle {
  color: var(--gray-800);
  font-size: var(--text-base);
  cursor: grab;
  flex-shrink: 0;
  user-select: none;
  line-height: 1;
}
.sp-item-name {
  font-size: var(--text-base);
  overflow: hidden;
  text-overflow: ellipsis;flex: 1;
  color: var(--black);
  padding: 8px var(--space-md);
  border-radius: 20px;
}
.sp-scroll-list .sp-item.sp-item-active,
.sp-item.sp-item-active,
.sp-item-name.sp-item-active {
  color: var(--white-fixed);
  background: var(--orange);
}
.sp-select-dot {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2px solid var(--gray-300, #ccc);
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  background: transparent;
}
.sp-select-dot.selected {
  background: var(--orange, #ff6a00);
  border-color: var(--gray-300);
  box-shadow: var(--shadow-classic);
}
.sp-outside-setlist-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s;
  gap: var(--space-xs);
}
.sp-outside-right {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.sp-setlist-files,
.sp-outside-files {
  overflow: hidden;
}
.sp-setlist-files.hidden,
.sp-group-body.hidden,
.sp-outside-files.hidden {
  display: none;
}
.sp-arrow.rotated {
  transform: rotate(180deg);
}
#sp-setlist-list .sp-arrow.rotated {
  transform: rotate(90deg);
}
#sp-outside-list .sp-arrow.rotated {
  transform: rotate(180deg);
}
#sp-outside-list .sp-arrow {
  transform: rotate(0deg);
}
.sp-outside-file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px var(--space-md);
  font-size: var(--text-base);
  color: var(--black);
  gap: var(--space-md);
}
.sp-outside-file-row > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.sp-add-btn {
  background: none;
  border: none;
  font-size: var(--text-lg);
  font-weight: 300;
  color: var(--black);
  cursor: pointer;
  padding: 0 var(--space-xs);
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.15s;
}
.sp-remove-bar {
  padding: var(--space-sm) var(--space-sm) var(--space-sm);
  flex-shrink: 0;
  border-top: 1px solid var(--gray-200, #eee);
}
.sp-remove-btn {
  width: 100%;
  padding: var(--space-xs2);
  background: #e53935;
  color: var(--white-fixed);
  border: none;
  border-radius: 14px;
  font-weight: 700;
  font-size: var(--text-base);
  cursor: pointer;
  transition: opacity 0.2s;
}
.sp-remove-btn:hover {
  opacity: 0.85;
}
.sp-empty {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--gray-500);
  padding: var(--space-md) 0;
}
#sp-remove-btn {
  width: 100%;
  background: var(--danger);
  border: none;
  color: var(--white-fixed);
  font-size: var(--text-base);
  padding: var(--space-sm);
  border-radius: 30px;
}
body.loading-pdf:not(.switching-pdf) #pdfViewer {
  display: none !important;
  opacity: 0 !important;
}
@keyframes spin {
  to {
  transform: rotate(360deg);
  }
}
.sp-outside-setlist-left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;
  overflow: hidden;
}
.sp-setlist-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.7;
  display: block;
}
.fs-queue-toast {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 80px) !important;
  right: calc(env(safe-area-inset-right) + 20px) !important;
  display: flex;
  align-items: center;
  background: var(--bg-primary);
  border: 2px solid var(--gray-400);
  border-radius: 999px;
  padding: var(--space-md) var(--space-md) var(--space-md) var(--space-md);
  cursor: pointer;
  pointer-events: auto;
  color: var(--black);  
  box-shadow: var(--shadow-classic);
   z-index: var(--z-modal);
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.35s ease, transform 0.35s ease, padding 0.42s ease;
}
.fs-queue-toast--hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(24px);
}
.fs-queue-toast__label {
  font-weight: 500;
  font-size: var(--text-base);
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: max-width 0.42s ease, opacity 0.32s ease;
}
.fs-queue-toast--collapsed .fs-queue-toast__label {
  max-width: 0;
  opacity: 0;
}
.fs-queue-toast--collapsed {
  padding: var(--space-sm) var(--space-xs2);
}
.fs-queue-toast__icon {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.fs-queue-toast:not(.fs-queue-toast--hidden):hover .fs-queue-toast__icon {
  transform: translateX(3px);
}
.fs-queue-toast:active {
  transform: scale(0.93) !important;
}
.fs-page-picker-modal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-top);
  pointer-events: auto;
  transition: opacity 0.22s ease;
}
.fs-page-picker-modal--hidden {
  opacity: 0;
  pointer-events: none;
}
.fs-page-picker-inner {
  background: rgba(18, 18, 18, 0.93);
  border-radius: 22px;
  padding: var(--space-xl) var(--space-lg);
  min-width: 300px;
  max-width: 86vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 40px var(--overlay-60);
  
  position: relative;
  transform: translateZ(0);
}
.fs-page-picker-title {
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--white-fixed);
  line-height: 1;
}
.fs-dual-range-wrapper {
  position: relative;
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  touch-action: none;
}
.fs-dual-range-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  pointer-events: none;
}
.fs-dual-range-fill {
  position: absolute;
  height: 100%;
  background: var(--orange, #ff6b00);
  border-radius: 2px;
  left: 0%;
  right: 0%;
  pointer-events: none;
}
.fs-dual-range-input {
  position: absolute;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
  height: 44px;
  outline: none;
  margin: 0;
  padding: 0;
}
.fs-dual-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--white-fixed);
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 8px var(--overlay-50);
  position: relative;
  z-index: var(--z-base-2);
  -webkit-tap-highlight-color: transparent;
}
.fs-dual-range-input::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--white-fixed);
  cursor: pointer;
  pointer-events: auto;
  border: none;
  box-shadow: 0 2px 8px var(--overlay-50);
}
.fs-dual-range-input:focus::-webkit-slider-thumb {
  outline: 2px solid var(--orange, #ff6b00);
  outline-offset: 2px;
}
.fs-dual-range-input.is-overlapping-from {
  z-index: var(--z-ui);
  pointer-events: none;
}
.fs-dual-range-input.is-overlapping-from::-webkit-slider-thumb {
  pointer-events: auto;
  z-index: var(--z-ui);
}
.fs-page-picker-actions {
  display: flex;
  gap: var(--space-xs2);
  width: 100%;
}
.fs-page-picker-actions .btn-secondary,
.fs-page-picker-actions .btn-primary {
  flex: 1;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.12s ease;
}
.fs-page-picker-actions button:active {
  transform: scale(0.95);
  opacity: 0.85;
}
.fs-metro-trigger-btn {
  position: absolute;
  bottom: 45px;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: var(--color-dark-surface);
  border: 2px solid #3a3a3c;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  cursor: pointer;
  transition: transform 0.2s ease;
  left: 20px;
}
.fs-metro-trigger-btn:active {
  transform: scale(0.9);
}
.fs-metro-hidden {
  display: none !important;
}
#fsMetronomeBar {
  z-index: var(--z-modal);
}
#pdfViewer[data-media-mode="text"] #bgColorTrigger {
  display:none  !important
}
.fs-metro-trigger-btn.is-playing {
  border: none;
  background: #1dba3d;
  box-shadow: 0 0 15px rgb(26 255 0 / 50%);
}
#pdfThumbnailsPanel,
#shortcutPanel {
  z-index: var(--z-modal) !important;
}
.mp-scrubber {
  z-index: var(--z-toolbar);   
}
.info-modal-content {
  background: var(--bg-primary);
  width: 340px;
  min-height: 440px;
  border-radius: 16px;
  padding: var(--space-xl) var(--space-md) var(--space-md) var(--space-md);
  position: relative;
  color: var(--black);
  box-shadow: var(--shadow-classic);
  display: flex;
  flex-direction: column;
}
#infoBody {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.info-preview-box {
  width: 130px;
  height: 175px;
  background: white;
  border-radius: 8px;
  margin: 0 auto var(--space-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-classic);
}
.info-preview-box canvas {
  width: 100% !important;
  height: 100% !important;
  transition: opacity 0.3s ease;
}
.info-title {
  text-align: center;
  font-size: var(--text-lg);
  font-weight: 500;
  margin-bottom: var(--space-lg);
  overflow: hidden;
  color: var(--black);
}
.info-details-card {
  background: var(--bg-primary);
  border-radius: 12px;
  padding: 0 var(--space-md);
  margin-bottom: auto;
}
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--gray);
  font-size: var(--text-base);
}
.info-row.no-border { border-bottom: none; }
.info-label {
  color: var(--gray-500);
  font-weight: 400;
}
.info-value {
  color: var(--text-dark);
  font-weight: 500;
  max-width: 60%; 
  white-space: normal;      
  text-overflow: clip;      
  overflow: visible;        
    word-wrap: break-word;    
  text-align: right;
  line-height: 1.2;         
}
.info-row {
  align-items: flex-start;  
  padding: var(--space-md) 0;
}
.info-nav-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--gray);
}
.nav-arrow {
  background: none;
  border: none;
  color: var(--text-dark);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
#infoPrev, #infoNext {
  position: absolute;
  top: 105px;
  z-index: var(--z-ui);
}
#infoPrev {
  left: 20px;
}
#infoNext {
  right: 20px;
}
.nav-arrow:disabled {
  opacity: 0.2;
  cursor: default;
}
.info-counter {
  font-size: var(--text-base);
  color: var(--gray-500);
  font-weight: 400;
  justify-content: center;
}
.multipage-active #pdfViewerContent {
  touch-action: pan-y;
  overscroll-behavior: contain;
}
.multipage-active.zoomed #pdfViewerContent {
  touch-action: pan-x pan-y;
}
.pdf-page-wrapper {
  background: var(--bg-secondary, #ececef);
  border-radius: 2px;
}
.pdf-page-wrapper.is-loaded {
  background: transparent;
}
body.multipage-active .pdf-page-wrapper,
body.multipage-active .pdf-page-wrapper :is(canvas, .canvas-container, .upper-canvas, .lower-canvas) {
  touch-action: pan-y !important;
}
body.multipage-active.zoomed .pdf-page-wrapper,
body.multipage-active.zoomed .pdf-page-wrapper :is(canvas, .canvas-container, .upper-canvas, .lower-canvas) {
  touch-action: pan-x pan-y !important; 
}
body.pinching,
body.pinching #pdfViewerContent,
body.pinching #pdfViewerContent * {
  touch-action: none !important;
}
#pdfPagesInner {
  transform-origin: 0 0 !important;
  backface-visibility: hidden;
}
body.pinching #pdfPagesInner {
  will-change: transform;
}
body.fullscreen-active #pdfThumbnailsPanel,
body.fullscr.setlist-selector-modaleen-active #shortcutPanel {
  display: none !important;
  pointer-events: none !important;
}
.hex-input:focus,
.modern-slider[type='range']:focus {
  outline: 0;
}
#shortcutPanelToggle.active,
#shortcutPanelToggle.active i,
#shortcutPanelToggle.active svg {
  transform: rotate(180deg) !important;
}
#themeSettingsScreen .theme-option{
  border-top:none;
}
.file-input-hidden,
.audio-file-input-hidden {
  position: fixed;
  left:   -9999px;
  top:    -9999px;
  width:  1px;
  height:   1px;
  opacity:  0;
  overflow: hidden;
}
.audio-widget-wrapper {
  position: fixed;
  bottom: 90px;
  transition: bottom 0.3s ease,
transform 0.28s cubic-bezier(0.22, 0.78, 0.48, 1),
opacity   0.28s ease;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  width: 95%;z-index: var(--z-top);
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-sm);
  opacity: 0;
}
.audio-widget-wrapper.active {
  display:   flex;
  transform: translateX(-50%) translateY(0);
  opacity:   1;
}
.audio-widget-wrapper.panel-dragover .sheetmuse-audio-panel {
  border-color: rgba(255,255,255,0.5);
}
#audioMiniPlayer {
  display: none !important;
}
.audio-widget-wrapper.collapsed #audioActionBar,
.audio-widget-wrapper.collapsed #sheetmuseAudioPanel {
  display: none !important;
}
.audio-widget-wrapper:not(.active) .audio-action-bar {
  display: none !important;
}
.audio-widget-wrapper.collapsed #audioMiniPlayer {
  display: flex !important;
}
.audio-widget-wrapper.active:not(.collapsed) .audio-action-bar,
.audio-widget-wrapper.active:not(.collapsed) #sheetmuseAudioPanel {
  display: flex !important;
}
.audio-action-bar {
  align-self: flex-end;
  padding: 2px;
  bottom: 140px;
}
.audio-action-bar .icon-btn {
  background: none;
  transition: background 0.15s, transform 0.1s;
}
.audio-action-bar .icon-btn:active { transform: scale(0.90); }
.sheetmuse-audio-panel {
  background: var(--orange);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 18px;
  box-shadow: var(--shadow-classic);
  padding: var(--space-md);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs2);
}
.audio-row-main {
  display:  flex;
  align-items:   center;
  justify-content: space-between;
  gap:    var(--space-sm);
}
.audio-filename {
  flex:   1;
  color:  var(--white-fixed);
  font-size:   var(--text-base);
  font-weight:   500;
  white-space:   nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
  opacity:  0.92;
}
.audio-playback-cluster {
  display:   flex;
  align-items: center;
  gap:  var(--space-xs);
  flex-shrink: 0;
}
.audio-ctrl-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--white-fixed);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.1s;
  flex-shrink: 0;
}
.audio-ctrl-btn:active   { transform: scale(0.90); }
.audio-ctrl-btn.is-playing {
  background: none;
}
.audio-upload-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.45);
  background: none;
  color: var(--white-fixed);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  align-self: flex-start;
  box-shadow: red;
}
.audio-upload-circle:active { transform: scale(0.90); }
#audioUploadBtn[hidden],
#audioWaveformContainer[hidden] { display: none !important; }
.waveform-container {
  position:    relative;
  width:  100%;
  height:    46px;
  background:  rgba(0,0,0,0.25);
  border-radius: 8px;
  overflow:    visible;
  cursor:    pointer;
}
.waveform-canvas {
  width:  100%;
  height:    100%;
  display:  block;
  border-radius: 8px;
}
.trim-slider-overlay {
  position:  absolute;
  inset:   0;
  display:    none;
  background:   transparent;
  border:  1px solid rgba(255,255,255,0.4);
  border-radius:  8px;
  pointer-events: none;
  overflow:  visible;
}
.trim-slider-overlay.active {
  display:    block;
  pointer-events: all;
}
.trim-input {
  -webkit-appearance: none;
  appearance: none;
  position:  absolute;
  left:    0;
  top:  0;
  width:  100%;
  height:    100%;
  background:  transparent;
  margin:    0;
  padding:   0;
  outline:   none;
  cursor:    ew-resize;
}
.trim-input::-webkit-slider-runnable-track {
  background:  transparent;
  height:    100%;
}
.trim-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width:  12px;
  height:    38px;
  border-radius: 6px;
  background:  rgba(255,255,255,0.92);
  cursor:    ew-resize;
  box-shadow:   var(--shadow-classic);
}
#trimStartInput { z-index: 3; }
#trimEndInput   { z-index: var(--z-base-2); }
.trim-time-tooltip {
  position:  absolute;
  top:   -28px;
  background:   rgba(0,0,0,0.75);
  color:   var(--white-fixed);
  font-size:    var(--text-xs);
  font-weight:  600;
  padding:    3px 7px;
  border-radius:  5px;
  pointer-events: none;
  white-space:  nowrap;
  transform:    translateX(-50%);
  opacity:    0;
  transition:   opacity 0.15s;
  z-index:    10;
}
.trim-time-tooltip.visible { opacity: 1; }
.trim-row {
  display:   flex;
  align-items: center;
  gap: var(--space-sm);
  position:  relative;
}
.audio-mini-player {
  align-items: center;
  gap: var(--space-xs2);
  background: var(--orange);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 18px;
  padding: var(--space-xs2) var(--space-md);
  box-shadow: var(--shadow-classic);
  cursor: pointer;
}
.audio-mini-player:hover { filter: brightness(1.08); }
.amp-art {
  width:    56px;
  height:   56px;
  border-radius:   10px;
  background:    rgba(255,255,255,0.15);
  display:  flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
  overflow:    hidden;
}
#audioMiniArt .audio-icon {
  width: 28px;
  height: 28px;
  display: block;filter: invert(1);opacity: 0.55;
}
.amp-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
  position: relative;
  z-index: var(--z-base);
}
.amp-progress-row {
  display:  flex;
  align-items:   center;
  gap:    var(--space-xs);
}
.amp-time-label {
  color:  rgba(255,255,255,0.75);
  font-size:   var(--text-xs);
  font-weight: 600;
  flex-shrink: 0;
  min-width:   32px;
}
.amp-time-remaining {
  text-align: right;
}
.amp-progress-bar {
  flex:   1;
  height:    4px;
  background:  rgba(255,255,255,0.25);
  border-radius: 3px;
  overflow:    visible;
  cursor:    pointer;
  position:    relative;
  transition:  height 0.15s ease;
}
.amp-progress-bar:hover { height: 6px; }
.amp-progress-bar.dragging { height: 8px; }
.amp-progress-fill {
  height:    100%;
  background:  rgba(255,255,255,0.85);
  border-radius: 3px;
  width:  0%;
  transition:  width 0.1s linear;
  pointer-events: none;
}
.amp-play-btn {
  width:    40px;
  height:   40px;
  border-radius:   50%;
  border:   none;
  background:    rgba(255,255,255,0.18);
  display:  flex;
  align-items:   center;
  justify-content: center;
  cursor:   pointer;
  flex-shrink:   0;
  transition:    background 0.15s, transform 0.1s;
}
.amp-play-btn:hover  { background: rgba(255,255,255,0.28); }
.amp-play-btn:active { transform: scale(0.90); }
.sheetmuse-more-dropdown {
  position: fixed;
  top: 100px !important;
  right: 15px !important;
  background: var(--white-transparency);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: 10px;
  box-shadow: var(--shadow-classic);
  padding: 0;
  z-index: var(--z-modal) !important;
  display: none;
  width: 311px;
  border: 2px solid var(--gray-200);
}
.sheetmuse-more-dropdown.active { display: block; }
#autoscrollPanel.active {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 120px);
  overflow: hidden;
}
#autoscrollPanel .download-settings-panel.open {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.sheetmuse-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs2) var(--space-md);
    color: var(--text-dark);
    font-size: var(--text-base);
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--gray-300);
}
.sheetmuse-dropdown-item--danger {
    border-top: 1px solid var(--gray-300);
    border-bottom: none;
}
.sheetmuse-dropdown-item--danger span { color: #ff453a; }
.sheetmuse-dropdown-item img   { opacity: 0.85; }
.pdf-viewer-container:not(.active) #audioWidgetWrapper {
  display: none !important;
}
.fs-audio-trigger-btn {
  position: fixed;
  bottom: 45px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: var(--color-dark-surface);
  border: 2px solid #3a3a3c;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: var(--z-modal);
  box-shadow: var(--shadow-classic);
  transition: transform 0.2s, background 0.2s;
}
.fs-audio-trigger-btn:active { transform: scale(0.92); }
.fs-audio-trigger-btn.is-playing {
  border:none;
  background: rgba(255, 140, 0, 0.95);
  box-shadow:0 0 15px rgba(255, 183, 0, 0.5);
}
.fs-audio-mini-player {
  position: fixed;
  bottom: 100px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-dark-surface);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: var(--space-sm);
  box-shadow: var(--shadow-classic);
  z-index: var(--z-modal);
  transition: opacity 0.25s, transform 0.25s;
  width: 340px;
}
.fs-audio-mini-player.fs-audio-hidden {
  opacity:  0;
  transform:  translateY(10px);
  pointer-events: none;
}
.fs-amp-art {
  width:  42px;
  height:    42px;
  border-radius: 6px;
  background:  rgba(255,255,255,0.15);
  display:   flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow:  hidden;
}
.fs-amp-content {
  flex:   1;
  display:  flex;
  flex-direction:  column;
  gap: var(--space-xs);
  min-width:  0;
  overflow:    hidden;
}
.amp-title-wrapper,
.fs-amp-title-wrapper {
  overflow:  hidden;
  position:  relative;
  width:   100%;
  min-width: 0;
}
.amp-title-wrapper {
  isolation: auto;
  z-index: var(--z-ui);
}
.amp-title {
  color: var(--white-fixed);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
  display: inline-block;
  margin-left: 2px;
}
.fs-amp-title {
  color: var(--white-fixed);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.25;
  white-space: nowrap;
  display: inline-block;
}
.amp-title-wrapper.scrolling,
.fs-amp-title-wrapper.scrolling {
  -webkit-mask-image: linear-gradient(
to right,
transparent 0px,
#000 1px,
#000 calc(100% - 1px),
transparent 100%
);
  mask-image: linear-gradient(
to right,
transparent 0px,
var(--white-fixed) 5px,
#000 calc(100% - 12px),
transparent 100%
);
}
.amp-title-wrapper.scrolling .amp-title,
.fs-amp-title-wrapper.scrolling .fs-amp-title {
  position:  relative;
  z-index:   1;
  animation:   amp-marquee var(--marquee-duration, 10s) linear infinite;
  will-change: transform;
}
.fs-amp-title-wrapper.scrolling .fs-amp-title {
  text-overflow: clip;
  overflow: visible;
  animation: amp-marquee 20 ease-in-out infinite;
  will-change: transform;
  padding-left: 2px;
  padding-right: var(--space-xl);
}
@keyframes amp-marquee {
  0%,  8%  { transform: translateX(var(--marquee-start, 0px)); }
  42%, 58% { transform: translateX(var(--marquee-offset, -80px)); }
  92%,100% { transform: translateX(var(--marquee-start, 0px)); }
}
.fs-amp-progress-row {
  display:  flex;
  align-items:   center;
  gap: var(--space-xs);
  padding:  3px 0;
  margin:   -3px 0;
}
.fs-amp-time-label {
  color:  rgba(255,255,255,0.75);
  font-size:   var(--text-xs);
  font-weight: 600;
  flex-shrink: 0;
  min-width:   26px;
}
.fs-amp-time-remaining {
  text-align: right;
}
.fs-amp-progress-bar {
  flex:   1;
  height:    4px;
  background:  rgba(255,255,255,0.25);
  border-radius: 2px;
  overflow:    visible;
  cursor:    pointer;
  position:    relative;
  transition:  height 0.15s ease;
}
.fs-amp-progress-bar:hover  { height: 5px; }
.fs-amp-progress-bar.dragging { height: 6px; }
.fs-amp-progress-fill {
  height:    100%;
  background:  rgba(255,255,255,0.85);
  border-radius: 2px;
  width:  0%;
  transition:  width 0.1s linear;
  pointer-events: none;
}
.fs-amp-play-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--color-dark-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.1s;
}
.fs-amp-play-btn:hover  { background: rgba(255,255,255,0.28); }
.fs-amp-play-btn:active { transform: scale(0.90); }
#trashPurgeBtn,
#deleteSelectedAudioBtn {
  background: #ef4444;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
#deleteSelectedAudioBtn:hover:not(:disabled) {
  background: #dc2626;
}
#trashPurgeBtn:disabled,
#deleteSelectedAudioBtn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
#trashList .status-dot.selected,
#cloudAudioModal .status-dot.selected {
  background: var(--orange);
  box-shadow: var(--shadow-classic);
}
#audioMiniPlayer,
#audioWidgetWrapper .audio-mini-player {
  position: relative;
}
.amp-title-wrapper::before,
.amp-title-wrapper::after,
.fs-amp-title-wrapper::before,
.fs-amp-title-wrapper::after {
  content:    '';
  position:  absolute;
  top:   0;
  bottom:  0;
  z-index:    2;
  pointer-events: none;
  opacity:    0;
  transition:   opacity 0.3s;
}
.amp-title-wrapper::before,
.fs-amp-title-wrapper::before {
  left:  0;
  width:    24px;
  background: linear-gradient(to right, var(--orange), transparent);
}
#audioMiniPlayer::after,
#audioWidgetWrapper .audio-mini-player::after {
  content:    '';
  position:  absolute;
  top:   0;
  bottom:  0;
  right:   48px;
  width:   24px;
  background:   linear-gradient(to left, var(--orange), transparent);
  z-index:    2;
  pointer-events: none;
  opacity:    0;
  transition:   opacity 0.3s;
}
#audioMiniPlayer.scrolling-title::before,
#audioMiniPlayer.scrolling-title::after,
#audioWidgetWrapper .audio-mini-player.scrolling-title::before,
#audioWidgetWrapper .audio-mini-player.scrolling-title::after {
  opacity: 1;
}
.sheetmuse-dropdown-item--expandable {
  justify-content: space-between;
  border-bottom:none;
}
.dropdown-chevron {
  margin-left: auto;
  transition: transform 0.25s ease;
  opacity: 0.5;
}
.dropdown-chevron.open { transform: rotate(180deg); }
.download-settings-panel {
  display: none;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md) var(--space-xs2);
}
.download-settings-panel.open { display: flex; }
.download-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin: var(--space-xs2) var(--space-xs);
}
.download-settings-col { flex-direction: column; align-items: stretch; }
.download-settings-row-inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.download-settings-label {
  font-size: var(--text-sm);
  color: var(--gray-600);
  overflow: hidden;
  word-break: break-word;
  white-space: normal;
  text-overflow:ellipsis;
  max-width: 120px;
}
.download-page-range-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-dark);
  padding: var(--space-xs) var(--space-xs2);
  border: 2px solid var(--gray-400);
  border-radius: var(--space-sm);
  outline: none;
  max-width: 100px;
  text-align: center;
  background: none;
}
.download-page-range-wrap {
  display: flex;
  align-items: center;
  border: 2px solid var(--gray-400);
  border-radius: var(--space-sm);
}
.download-page-input {
  width: 44px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--black);
  padding: var(--space-xs) 6px;
  border: none;
  background: transparent;
  text-align: center;
  outline: none;
}
.download-page-input:first-child { border-radius: var(--space-sm) 0 0 var(--space-sm); }
.download-page-input[readonly]   { color: var(--text-muted); }
.download-page-sep {
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.download-page-extra {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-left: 2px;
}
.download-format-selector,
.autoscroll-speed-selector {
  display: flex;
  gap: 4px;
}
.download-format-btn,
.autoscroll-speed-btn {
  background: none;
  border: 1.5px solid var(--gray-300);
  border-radius: 20px;
  color: var(--text-dark);
  cursor: pointer;
  font-size: var(--text-sm);
  padding: 5px 10px;
}
.download-format-btn.active {
  background: var(--orange);
  border: none;
  color: var(--white-fixed);
  font-weight: 500;
}
#downloadExecuteBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  cursor: pointer;
  font-weight: 500;
  margin-top: var(--space-xs2);
  width: 100%;
}
#downloadExecuteBtn:active { opacity: 0.85; }
.storage-usage-option {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}
.storage-widget-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.storage-title {
  text-align: center;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--gray-600);
  padding: 14px 16px 10px;
}
.storage-divider {
  height: 1px;
  background: var(--border-color, rgba(128,128,128,.15));
  margin: 0;
}
.storage-top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  flex-wrap: wrap;
}
.storage-donut-wrap { flex: 0 0 auto; }
.storage-donut-seg  { cursor: default; }
.storage-donut-label {
  color: var(--black);
  font-weight: 400;
  font-size: 14px;
}
.storage-donut-sub {
  fill: var(--gray-500);
  font-size: 9px;
  transform: rotate(90deg);
  transform-origin: center;
  transform-box: fill-box;
}
.storage-legend {
  flex: 1 1 130px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0; 
}
.storage-legend-size {
  font-size: 12px;
  color: var(--gray-500);
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 8ch;
}
.storage-legend-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  min-height: 22px;
}
.storage-legend-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.storage-legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.storage-legend-val  { color: var(--gray-500); }
.storage-legend-pct {
  color: var(--gray-500);
  min-width: 6ch;  
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.storage-bar-wrap {
  padding: 12px 16px 14px;
}
.storage-bar-track {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--border-color, rgba(128,128,128,.15));
}
.storage-bar-seg { height: 100%; }
.storage-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-500);
  font-size: 12px;
  padding: 16px;
}
@keyframes storage-spin { to { transform: rotate(360deg); } }
.storage-spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--border-color, rgba(128,128,128,.3));
  border-top-color: var(--primary-color, #f97316);
  border-radius: 50%;
  animation: storage-spin .7s linear infinite;
  flex-shrink: 0;
}
.storage-donut-seg.seg-animate {
  animation: seg-draw .9s cubic-bezier(.4,0,.2,1) forwards;
}
.storage-donut-svg {
  display: block;
  transform: rotate(-90deg);
}
.storage-donut-seg {
  transition: opacity .15s;
}
.storage-donut-label {
  transform: rotate(90deg);
  transform-origin: center;
  transform-box: fill-box;
}
@media (max-height: 500px) {
  #autoscrollPanel {
    top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);
  }
  #autoscrollPanel.active {
    overflow-y: auto;
    overflow-x: hidden;
  }
}
@media (max-width: 360px) {
  #autoscrollPanel {
    right: 8px !important;
    width: calc(100vw - 16px);
  }
}
@media (max-width: 450px) {
  .storage-top {
  flex-direction: column;
  align-items: center;
  }
  .storage-legend { width: 100%; }
}
@keyframes seg-draw {
  to { stroke-dashoffset: 0; }
}
div[contenteditable],
div[contenteditable] * {
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}
body.media-text-mode,
body.media-text-mode .pdf-viewer-container {
  background: var(--color-media-bg) !important;
}
#pdfViewer[data-media-mode="text"],
#pdfViewer[data-media-mode="text"] #pdfViewerContent,
#pdfViewer[data-media-mode="text"] #textViewerPaper,
#pdfViewer[data-media-mode="text"] #textViewerEditor,
#pdfViewer[data-media-mode="text"] #textViewerEditor * {
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}
#pdfViewer[data-media-mode="text"] #pdfViewerContent {
  flex: 1 !important;
  min-height: 0 !important;
  height: auto !important;
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overflow-anchor: none;
  touch-action: pan-y !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--color-media-bg) !important;
  padding: 0 !important;
  position: relative;
}
#pdfViewer[data-media-mode="text"] #textViewerPaper {
  min-height: auto !important;
  flex-shrink: 0;
  touch-action: auto !important;
}
#pdfViewer[data-media-mode="text"] #textViewerPaper * {
  touch-action: auto !important;
}
#pdfViewer[data-media-mode="text"] #textViewerEditor {
  touch-action: auto !important;
  cursor: text;
}
#pdfViewer[data-media-mode="text"] #miniToolbar,
#pdfViewer[data-media-mode="text"] .pdf-bottom-toolbar,
#pdfViewer[data-media-mode="text"] #fontSelector,
#pdfViewer[data-media-mode="text"] #multiPageScrubber,
#pdfViewer[data-media-mode="text"] #pdfThumbnailsPanel,
#pdfViewer[data-media-mode="text"] #mpPageIndicator,
#pdfViewer[data-media-mode="image"] #mpPageIndicator {
  display: none !important;
}
#pdfViewer[data-media-mode="text"] #bgColorTrigger {
  display: none !important;
}
#pdfViewer[data-media-mode="text"] #scrollPlayerOverlay {
  display: none;
}
.tv-grad {
  position: sticky;
  left: 0;
  right: 0;
  width: 100%;
  height: 48px;
  pointer-events: none;
  z-index: 10;
  flex-shrink: 0;
}
.tv-grad-top {
  top: 0;
  margin-bottom: -48px;
  background: linear-gradient(to bottom, var(--color-media-bg) 0%, transparent 100%);
}
.tv-grad-bottom {
  bottom: 0;
  margin-top: -48px;
  background: linear-gradient(to top, var(--color-media-bg) 0%, transparent 100%);
}
#syncPointsSection {
  border-top: 1px solid var(--gray-300);
  margin-top:10px;
  padding-top:15px;
  padding-bottom:15px;
}
#syncPointsList input[type="text"] {
  -webkit-user-select: text !important;
  user-select: text !important;
}
input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }
#textViewerEditor .mp-scrubber-handle {
  display: none !important;
}
#colorPickerTrigger .color-dot {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  border: none !important;
  padding: 0 !important;
  box-sizing: border-box;
}
.autoscroll-speed-value {
  padding: 4px;
}
.text-scroll-wrap {
  position: relative;
  overflow: hidden; 
}
.text-scroll-wrap::before,
.text-scroll-wrap::after {
  content: '';
  display: block;
  position: sticky;
  width: 100%;
  height: 48px;
  pointer-events: none;
  z-index: 10;
  flex-shrink: 0;
}
.text-scroll-wrap::before {
  top: 0;
  margin-bottom: -48px;
  background: linear-gradient(to bottom, var(--color-media-bg) 0%, transparent 100%);
}
.text-scroll-wrap::after {
  bottom: 0;
  margin-top: -48px;
  background: linear-gradient(to top, var(--color-media-bg) 0%, transparent 100%);
}
html.media-text-lock {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: var(--color-media-bg) !important;
}
body.media-text-mode {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  background: var(--color-media-bg) !important;
}
#pdfViewer[data-media-mode="text"] #pdfSingleToolbar .toolbar-btn,
#pdfViewer[data-media-mode="text"] #pdfSingleToolbar .toolbar-btn.active {
  transition: none !important;
}
.trash-days-urgent { color: var(--danger, #FF3B30) !important; font-weight: 600; }
.trash-days-warning { color: var(--warning, #FF9F0A) !important; font-weight: 600; }
.trash-days-safe { color: var(--gray-500) !important; font-weight: 600; }

.language-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  max-width: 420px;
  margin: 0 auto;
}
.language-option {
  aspect-ratio: 1;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs2);
  padding: var(--space-xs2);
}
.language-option span {
  font-size: var(--text-sm, 13px);
  text-align: center;
  line-height: 1.1;
}
.flag-icon {
  width: 44px;
  height: 30px;      
  object-fit: cover;
  border-radius: 4px;
}
@media (max-width: 360px) {
  .language-options { gap: var(--space-xs2); }
  .flag-icon { width: 36px; height: 24px; }
}