#bgColorModal,
#colorPickerModal,
#pdfSingleToolbar {
  box-shadow:
    0 8px 28px -6px rgba(24, 39, 75, 0.12),
    0 18px 88px -4px rgb(2 2 2 / 18%);
  position: fixed;
}
#fontSizeDisplay,
.drop-zone,
.file-name-label,
.hex-input,
.modal-title,
.page-indicator {
  text-align: center;
}
:root,
body[data-theme='dark'] {
  --orange: #ff6b35;
  --success: #34c759;
}
.splash-decoration-top,
.splash-desc p {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
body,
body[data-theme='dark'],
html {
  color: var(--text-dark);
  background: var(--bg-primary);
}
#fabricCanvas,
#pdfCanvas {
  transform-origin: center top;
}
#simpleColorModal,
#splash-screen.hidden,
.hidden {
  display: none !important;
}
.icon-btn,
.select-btn {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.226);
}
#fabricCanvas,
#fullscreenPdfViewer,
.bottom-nav,
.canvas-container,
.lower-canvas,
.top-actions,
.top-actions-setlist > *,
.top-actions > *,
.upper-canvas {
  pointer-events: auto;
}
.bottom-nav,
.header {
  backdrop-filter: blur(25px);
}
.score-info h3,
.score-info p {
  text-overflow: ellipsis;
  white-space: nowrap;
}
*,
body {
  font-family: 'Poppins', sans-serif;
}
body,
html {
  line-height: 1.5;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  margin: 0;
  min-height: 100vh;
  position: relative;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  --orange-hover: #e95d00;
  --dot-blue: #2196f3;
  --dot-blue-hover: #1976d2;
  --danger: #f44336;
  --white: #ffffff;
  --white-transparency: rgba(255, 255, 255, 0.302);
  --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-light: #ffffff;
  --text-muted: #666666;
  --dot-gray: #999999;
  --dot-red: #f44336;
  --dot-yellow: #ffeb3b;
  --orange-rgb: 255, 106, 0;
  --black-rgb: 0, 0, 0;
  --white-rgb: 255, 255, 255;
  --gray: #e0e0e0;
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-xl: 20px;
  --border-radius-round: 50%;
  --gap-sm: 8px;
  --gap-md: 12px;
  --transition-fast: 0.2s;
  --transition-normal: 0.3s;
}
body[data-theme='dark'] {
  --orange-hover: #ff9147;
  --dot-blue: #4da6ff;
  --dot-blue-hover: #66b3ff;
  --danger: #ff5252;
  --white: #1e1e1e;
  --white-transparency: rgba(30, 30, 30, 0.302);
  --black: #ffffff;
  --gray-50: #1a1a1a;
  --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: #1e1e1e;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #0f0f0f;
  --text-dark: #e8e8e8;
  --text-light: #1a1a1a;
  --text-muted: #888888;
  --dot-gray: #888888;
  --dot-red: #ff6b6b;
  --dot-yellow: #ffd93d;
  --gray: #3a3a3a;
}
.splash-desc p {
  font-size: 14px;
  color: #fff;
  bottom: 20px;
  bottom: max(20px, env(safe-area-inset-bottom) + 10px);
  margin-top: 0;
}
.splash-decoration-top {
  top: 20px;
  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(0 2px 8px rgba(0, 0, 0, 0.15));
}
@media (max-width: 500px) {
  .splash-decoration-top img,
  .splash-decoration-top svg {
    width: 80px;
  }
  .theme-label {
    max-width: 28vh;
  }
}
#splash-screen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999 !important;
  background: #ff6200;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.5s ease-out,
    visibility 0.5s ease-out;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}
#splash-screen.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
body.splash-active {
  overflow: hidden !important;
  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;
}
@media (max-width: 1024px) and (min-width: 481px) {
  .splash-logo {
    width: min(70vw, 500px);
    margin-bottom: 35px;
  }
}
@media (max-width: 480px) {
  .splash-logo {
    width: min(85vw, 320px);
    max-width: 320px;
    margin-bottom: 30px;
  }
}
@media (max-width: 375px) {
  .splash-logo {
    width: min(90vw, 280px);
    max-width: 280px;
    margin-bottom: 25px;
  }
}
@supports (-webkit-touch-callout: none) {
  #splash-screen {
    min-height: -webkit-fill-available;
  }
  .splash-logo {
    -webkit-transform: translateZ(0);
    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 (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .splash-logo img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}
@media print {
  #splash-screen {
    display: none !important;
  }
}
.swipe-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 4px;
  transition: background 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swipe-btn.active {
  background: rgba(255, 107, 53, 0.72);
}

.swipe-btn.active img {
  filter: brightness(0) invert(1);
}

/* Tema scuro */
body[data-theme='dark'] .swipe-btn:not(.active) img {
  filter: brightness(0) invert(1) opacity(0.7);
}

body[data-theme='dark'] .swipe-btn.active img {
  filter: brightness(0) invert(1);
}

/* Hover effect */
.swipe-btn:hover {
  background: rgba(255, 107, 53, 0.2);
}

.swipe-btn.active:hover {
  background: rgba(255, 107, 53, 0.85) !important;
}
.swipe-btn.active {
  background: rgba(255, 107, 53, 0.85) !important;
}
body[data-theme='dark'] #toggleSwipeBtn:not(.active) svg {
  filter: brightness(0) invert(1) opacity(0.7);
}
.toolbar-btn.active img,
body[data-theme='dark'] .back-btn-setlist,
body[data-theme='dark'] .eyedropper-btn,
body[data-theme='dark'] .icon-btn img,
body[data-theme='dark'] .mini-toolbar-btn,
body[data-theme='dark'] .nav-icon,
body[data-theme='dark'] .pdf-tool-btn,
body[data-theme='dark'] .settings-icon-right,
body[data-theme='dark'] .toolbar-btn img,
body[data-theme='dark'].pdf-tool-btn img {
  filter: brightness(0) invert(1) opacity(1);
}

body[data-theme='dark'] .PRO-btn img,
body[data-theme='dark'] .filter-icon {
  color: #fff;
  filter: brightness(0) invert(1) opacity(1);
}
.fade-out {
  opacity: 0;
  transition: opacity 1s;
}
#applyBgBtn,
#hexApplyBtn {
  border-radius: 20px;
  z-index: 10001;
  color: #fff;
  border: none;
  padding: 10px;
  width: 140px;
  background-color: var(--orange);
}
.color-option,
.eyedropper-btn {
  touch-action: manipulation !important;
}
#clearCacheBtn,
#clearDataBtn,
#exportBackupBtn,
#importBackupBtn,
#showCacheSizeBtn,
#showCacheStatsBtn,
.link-btn {
  padding: 10px;
  border-radius: 10px;
  width: 73vh;
  font-weight: 600;
  font-size: 16px;
  max-width: 20vh;
}
.file-upload {
  padding: 6px 12px;
  font-size: 30px;
  margin-top: 30px;
}
#closeBgModal,
#hexCancelBtn {
  background-color: var(--gray-200);
  border-radius: 20px;
  border: none;
  color: var(--black);
  padding: 10px;
  width: 140px;
  z-index: 10;
}
#bgColorModal,
#colorPickerModal {
  left: 50% !important;
  transform: translateX(-50%);
  border-radius: 16px;
  background-color: var(--bg-primary);
  animation: 0.3s ease-out modalSlideDown;
  display: none;
}
#colorPickerModal {
  max-width: 50vh;
  min-width: 280px;
  padding: 0 !important;
  top: 150px !important;
  z-index: 1000;
}
#bgColorModal {
  top: 24vh !important;
  min-width: 300px;
  max-width: 55vh;
  z-index: 1000;
  padding: 12px 8px !important;
}
#bgColorModal.active,
#colorPickerModal.active {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 1000;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0);
}
[data-reduced-motion='true'] #bgColorModal,
[data-reduced-motion='true'] #colorPickerModal,
[data-reduced-motion='true'] .thickness-modal,
[data-reduced-motion='true'] .transparency-modal {
  animation: none !important;
}
#colorPickerModal:not(.active) .eyedropper-btn {
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0;
}
#colorPickerModal .color-option,
.color-picker-modal .color-option {
  align-items: center;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.15) 0 3px 8px;
  cursor: pointer !important;
  display: flex;
  height: 32px;
  justify-content: center;
  position: relative;
  transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  width: 32px;
}
#fontSelector,
#fontSizeContainer {
  align-items: center;
  height: 36px;
  background: 0 0;
}
#colorPickerModal .color-option[data-color='#ffffff'],
.color-picker-modal .color-option[data-color='#ffffff'] {
  border-color: var(--gray-300);
}
#colorPickerModal .color-option[data-color='#ffffff']:hover,
.color-picker-modal .color-option[data-color='#ffffff']:hover {
  border-color: var(--orange-hover);
}
#fabricCanvas {
  z-index: 2;
}
#fontSelector {
  border: 2px solid var(--gray-400);
  border-radius: 12px;
  color: var(--black);
  cursor: pointer;
  display: none;
  font-size: 14px;
  min-width: 120px;
  outline: 0;
  transition: 0.2s;
  padding: 6px;
}
#fontSizeContainer {
  border: 2px solid var(--gray-400);
  border-radius: 12px;
  display: flex;
  overflow: hidden;
  padding: 0 2px;
}
#fontSizeDisplay {
  background: 0 0;
  color: var(--black) !important;
  font-size: 14px;
  font-weight: 600;
  min-width: 50px;
  padding: 0 2px;
  user-select: none;
}
#miniToolbar {
  align-items: center;
  background: var(--white);
  border-radius: 20px;
  box-shadow: rgba(0, 0, 0, 0.153) 5px 8px 22px;
  display: none;
  flex-direction: row;
  height: 48px;
  max-width: 200px;
  min-width: 120px;
  padding: 8px 12px;
  position: fixed;
  transition:
    left 0.15s ease-out,
    top 0.15s ease-out,
    opacity 0.2s;
  user-select: none;
  z-index: 100000;
}
#miniToolbar.layout-horizontal {
  flex-direction: row;
  min-width: 150px;
  padding: 8px 12px;
  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: 12px 6px;
  width: 48px;
  gap: 16px !important;
}
#pdfCanvas {
  filter: drop-shadow(rgba(0, 0, 0, 0.063) 0px 1px 20px);
}
#pdfSingleToolbar,
.bottom-nav,
.pdf-bottom-toolbar,
.pdf-navigation {
  transform: translateX(-50%);
  left: 50%;
}
#pdfSingleToolbar {
  background: var(--white);
  border-radius: 50px;
  margin: 0 auto;
  top: 83px;
  transition: 0.3s;
  z-index: 500;
  padding: 6px 12px;
}
#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);
}
#setlistsView,
#settingsView {
  background: var(--bg-primary);
  flex-direction: column;
  inset: 20px 0px 0px;
  overflow: hidden;
  position: fixed;
  z-index: 100;
  display: none;
  height: 100%;
  margin-top: -75px;
}
#simpleColorModal {
  border-radius: 35px;
  width: 42px;
}
#simpleColorModal.active {
  display: block !important;
}
#pinchZoomWrapper,
.pinch-zoom-wrapper,
.sheetmuse-pinch-wrapper {
  position: relative;
  display: block;
  overflow: hidden;
  touch-action: pan-x pan-y !important;
  -webkit-user-select: none;
  user-select: none;
  margin: 0 auto;
}
#fabricCanvas,
#pdfCanvas,
#pinchZoomWrapper,
.canvas-container,
.lower-canvas,
.pinch-zoom,
.pinch-zoom-parent,
.upper-canvas {
  touch-action: pan-x pan-y !important;
}
.selection-controls {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.option-group,
.top-actions {
  justify-content: space-between;
}
.icon-btn {
  border: none;
  border-radius: 16px;
  padding: 6px 8px;
  font-size: 18px;
  background: 0 0;
  transition: background-color 0.2s;
}
.apply-btn,
.back-btn,
.back-btn-arrow,
.bottom-tool-btn,
.btn,
.btn-danger {
  transition: 0.3s;
  cursor: pointer;
}
.icon-btn img {
  color: var(--black);
  pointer-events: none !important;
}
.icon-btn,
.select-btn,
button,
input[type='checkbox'] {
  touch-action: manipulation !important;
  cursor: pointer;
}
#add-selected,
#delete-selected,
#selection-controls button,
#selection-controls-setlist button,
#selection-controls-setlist-files button,
#selection-toggle,
#selection-toggle-setlist,
#selection-toggle-setlist-files,
#toggle-select,
.icon-btn,
.select-btn {
  touch-action: manipulation !important;
  cursor: pointer;
  z-index: 10000;
  position: relative;
}
#selection-controls,
#selection-controls-setlist,
#selection-controls-setlist-files,
.selection-controls {
  z-index: 99999 !important;
  position: relative;
}
.icon-btn,
.select-btn,
button {
  touch-action: manipulation;
  cursor: pointer;
}
.score-card.select-mode {
  cursor: pointer;
}
#pinchZoomWrapper,
.pinch-zoom-wrapper {
  z-index: 1;
}
.files-view {
  z-index: 10;
  display: none;
}
.top-actions {
  touch-action: auto;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  margin-top: 16px;
}
.header-actions-row,
.header-search {
  display: block;
  width: 100%;
}
.selection-checkbox {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}
.selection-checkbox input[type='checkbox'] {
  width: 24px;
  height: 24px;
  transform: scale(1.2);
}
#addFilesToSetlistBtn,
#newSetlistBtn,
.add-button,
.select-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: none;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  height: 38px;
  box-sizing: border-box;
}
#newSetlistBtn,
.add-button {
  background: var(--orange);
  color: #fff;
  border-radius: 20px;
  max-width: 15vh !important;
}
.add-button:hover,
.add.btn.hover,
.btn-primary:hover {
  background: var(--orange-hover);
}
.select-btn {
  background: 0 0;
  color: var(--black);
  max-width: 160px;
  border-radius: 20px;
}
.score-card input[type='checkbox'] {
  display: none;
  position: absolute;
  right: 24px;
  top: 24px;
  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;
}
.score-card.checked {
  background-color: rgba(33, 150, 243, 0.35);
}
.advanced-controls {
  padding: 0 5px;
}
.already-added-badge {
  background: var(--gray-200);
  border-radius: 12px;
  color: var(--success);
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
}
.apply-btn,
.back-btn {
  font-size: 16px;
  font-weight: 600;
}
.apply-btn {
  background: var(--orange);
  border: none;
  border-radius: 20px;
  color: #fff;
  margin-top: 20px;
  padding: 14px 20px;
  width: 100%;
}
.back-btn,
.back-btn-arrow {
  background: 0 0;
  color: var(--text-dark);
  border: none;
}
.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: 8px 0;
  white-space: nowrap;
}
.back-btn-arrow {
  align-items: center;
  display: flex;
  font-size: 28px;
  font-weight: 400;
  height: 32px;
  justify-content: center;
  padding: 0;
  width: 32px;
}
.bottom-controls {
  display: flex;
  gap: 8px;
  width: 100%;
  flex-wrap: nowrap;
}
.bottom-nav {
  align-items: center;
  background: var(--white-transparency);
  border-radius: 40px;
  bottom: 10px;
  display: flex;
  box-shadow:
    0 8px 28px -6px rgba(24, 39, 75, 0.12),
    0 5px 100px -4px rgb(2 2 2 / 18%);
  justify-content: space-around;
  max-width: 90vw;
  padding: 15px 0;
  position: fixed;
  width: 500px;
  z-index: 110;
}
.canvas-cursor,
.hue-cursor {
  box-shadow:
    rgba(0, 0, 0, 0.4) 0 0 0 2px,
    rgba(var(--black-rgb), 0.3) 0 2px 8px;
}
.bottom-tool-btn {
  background: 0 0;
  border: none;
  border-radius: 16px;
  flex-shrink: 0;
  height: 60px;
  position: relative;
  width: 60px;
  z-index: inherit;
  pointer-events: all;
}
.btn-danger {
  background-color: var(--danger);
}
.btn,
.btn-danger {
  border: none;
  padding: 10px 20px;
}
.bottom-tool-btn.active {
  filter: invert(50%) sepia(90%) saturate(2000%) brightness(100%) contrast(100%);
  opacity: 1;
}
.link-btn:active,
.nav-icon {
  opacity: 0.8;
}
.bottom-tool-icon {
  filter: brightness(0);
  height: 28px;
  width: 28px;
}
.btn {
  align-items: center;
  border-radius: 12px;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
  justify-content: center;
  width: 100%;
}
#cancelSetlist {
  max-width: 15vh !important;
  background-color: var(--gray-100);
}
.btn-danger {
  border-radius: 10px;
  font-weight: 500;
  color: #fff;
}
.btn-primary,
.btn-secondary,
.icon-svg,
.link-btn {
  border: none;
  transition: 0.3s;
  cursor: pointer;
}
.btn-primary {
  background: var(--orange);
  border-radius: 20px;
  color: #fff;
  font-weight: 600;
  padding: 8px 16px;
  max-width: 15vh;
}
.form-actions {
  display: flex;
  gap: 20px;
  margin-top: 25px;
  justify-content: center;
}
.close-btn,
.control-row,
.filter-option,
.header-actions,
.modal-header,
.nav-btn,
.pdf-navigation,
.pdf-tool-btn,
.score-card,
.setlist-item {
  align-items: center;
  display: flex;
}
.btn-secondary {
  background: var(--bg-secondary);
  border-radius: 12px;
  color: var(--black);
  font-weight: 500;
  padding: 10px 20px;
}
.btn-secondary:hover {
  background: var(--gray-200);
}
.close-btn {
  background: var(--gray-600);
  border: none;
  border-radius: 50%;
  color: var(--gray-500);
  cursor: pointer;
  font-size: 24px;
  height: 40px;
  justify-content: center;
  transition: 0.2s;
  width: 40px;
}
.color-canvas {
  background: linear-gradient(to right, var(--white), red);
  cursor: crosshair;
  height: 160px;
  overflow: hidden;
  position: relative;
  border-radius: 8px;
}
.color-canvas::after {
  background: linear-gradient(transparent, #000);
  content: '';
  inset: 0px;
  pointer-events: none;
  position: absolute;
}
.color-option.selected {
  border: 3px solid var(--orange) !important;
  transform: scale(1.15);
}
.color-option.selected::after {
  color: var(--white) !important;
  content: '';
  font-size: 12px;
  font-weight: 700;
  left: 50%;
  position: absolute;
  text-shadow: rgba(0, 0, 0, 0.7) 0 1px 2px;
  top: 50%;
  transform: translate(-50%, -50%);
}
.color-option:hover {
  border-color: var(--gray-300);
  transform: scale(1.1);
}
.color-option[data-color='#ffffff'] {
  background: var(--white);
  border-color: var(--gray-300);
}
.color-picker-area {
  margin-bottom: 15px;
  position: relative;
}
.color-picker-trigger:hover {
  border-color: var(--orange);
  transform: scale(1.05);
}
.color-picker-trigger,
.color-preview {
  border: 3px solid var(--gray-300);
  border-radius: var(--border-radius-round);
  cursor: pointer;
  height: 36px;
  width: 36px;
}
.control-label {
  color: var(--black);
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  min-width: 70px;
  z-index: 10;
}
.control-row {
  gap: 10px;
  justify-content: space-between;
  width: 65%;
}
.danger-btn {
  background: var(--danger);
  border: none;
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 20px;
  transition: 0.3s;
}
.drop-zone {
  background: rgba(255, 106, 0, 0.02);
  border-radius: 12px;
  color: var(--gray-500);
  margin: 10px 0;
  padding: 30px 20px;
  transition: 0.3s;
}
.drop-zone.dragover {
  background: rgb(255 107 53 / 41%);
  color: #fff;
  box-shadow: rgba(0, 0, 0, 0.21) 0 2px 20px;
}
.eyedropper-btn {
  align-items: center;
  border: 2px solid var(--gray-300);
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  height: 32px;
  justify-content: center;
  margin: 0 0 0 12px;
  transition: 0.3s;
  width: 32px;
  touch-action: manipulation !important;
  position: relative;
  z-index: 100 !important;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  min-width: 32px;
  min-height: 32px;
  user-select: none;
  -webkit-user-select: none;
  isolation: isolate;
}
.file-name-label,
.info-item p {
  color: var(--gray-500);
  margin: 0;
}
.hue-slider,
.modern-slider[type='range'] {
  touch-action: none !important;
  -webkit-tap-highlight-color: transparent;
}
.eyedropper-btn img,
.eyedropper-btn svg {
  pointer-events: none !important;
  user-select: none;
  -webkit-user-select: none;
}
#colorPickerModal.active .eyedropper-btn {
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1;
}
#colorPickerModal:not(.active) .eyedropper-btn,
.eyedropper-btn:not(#colorPickerModal.active *) {
  pointer-events: none !important;
  opacity: 0.5;
}
.file-name-label {
  background: 0 0;
  font-size: 14px;
  padding: 2px 20px;
}
.form-input {
  border: 2px solid var(--gray-400);
  border-radius: 12px;
  color: var(--text-dark);
  font-size: 14px;
  outline: 0;
  padding: 10px 12px;
  transition: 0.3s;
  width: 100%;
  background-color: var(--bg-primary);
}
.form-input:focus {
  background-color: none;
  border-color: var(--orange);
}
.form-label {
  color: var(--text-dark);
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}
.header {
  align-items: center;
  background: var(--white-transparency);
  color: var(--orange);
  display: flex;
  font-size: 24px;
  font-weight: 700;
  justify-content: space-between;
  flex-direction: column;
  padding: 10px 20px;
  position: fixed;
  align-items: stretch;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
}
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-title {
  color: var(--text-dark);
  font-size: 16px;
  font-weight: 600;
  margin-top: 5px;
}
.hex-input,
.info-item p,
.link-btn {
  font-size: 14px;
}
.hex-input {
  background: 0 0;
  color: var(--black);
  border: 1px solid var(--gray-300);
  border-radius: 15px;
  flex: 1 1 0%;
  font-family: monospace;
  padding: 10px 30px;
  max-width: 50vh;
}
.hex-input-area {
  align-items: center;
  display: flex;
  gap: 12px;
}
.hex-input:focus {
  border-color: var(--orange);
  outline: 0;
}
.canvas-cursor {
  border: 3px solid var(--white);
  border-radius: 50%;
  cursor: pointer;
  display: block;
  height: 20px;
  pointer-events: none;
  position: absolute;
  width: 20px;
  z-index: 100;
}
.hue-slider {
  background: linear-gradient(
    to right,
    red 0,
    #ff0 17%,
    #0f0 33%,
    #0ff 50%,
    #00f 67%,
    #f0f 83%,
    red 100%
  );
  border-radius: 12px;
  cursor: pointer;
  height: 24px;
  margin-bottom: 16px;
  width: 100%;
  overflow: visible;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}
.hue-cursor {
  border: 3px solid var(--white);
  border-radius: 50%;
  cursor: pointer;
  display: block;
  height: 20px;
  pointer-events: none !important;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  z-index: 100;
}
.icon-svg {
  height: 32px;
  width: 32px;
}
.icon-trash {
  filter: brightness(0) saturate(100%);
  height: 18px;
  margin-bottom: 3px;
  width: 18px;
}
.info-item {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 16px;
}
.info-item strong {
  color: var(--text-dark);
  display: block;
  font-size: 15px;
  margin-bottom: 8px;
}
.link-btn {
  background: var(--orange);
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
  margin-top: 8px;
  padding: 10px 16px;
  width: 20vh;
}
.loader-container {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.loader-text {
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin: 0;
}
.loading {
  align-items: center;
  color: var(--gray-500);
  display: flex;
  font-size: 16px;
  justify-content: center;
  padding: 40px;
}
.logo {
  font-size: 28px;
  font-weight: 800;
}
.lower-canvas {
  z-index: 2 !important;
}
.main {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 180px 20px 100px;
  min-height: 100vh;
}
.mini-toolbar-btn {
  border: none;
  background: 0 0;
}
.modal {
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  inset: 0px;
  justify-content: center;
  position: fixed;
  z-index: 10000;
}
.modal-actions {
  display: flex;
  gap: 10px;
  padding: 15px 20px;
  justify-content: center;
}
.modal-actions .btn {
  border: none;
  border-radius: 20px;
  cursor: pointer;
  flex: 1 1 0%;
  font-size: 16px;
  font-weight: 500;
  padding: 12px 20px;
  transition: 0.2s;
}
.modal-actions .btn-primary {
  background: var(--success);
  border-radius: 20px;
  color: #fff;
  max-width: 25vh !important;
}
.modal-actions .btn-primary:hover:not(:disabled) {
  background: #47ff50;
}
.modal-actions .btn-secondary {
  background: var(--gray-100);
  color: var(--gray-500);
  max-width: 25vh;
}
.modal-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}
.modal-close {
  align-items: center;
  background: 0 0;
  border: none;
  border-radius: 50%;
  color: var(--gray-500);
  cursor: pointer;
  display: flex;
  font-size: 24px;
  height: 32px;
  justify-content: center;
  padding: 5px;
  transition: 0.2s;
  width: 32px;
}
.nav-btn,
.nav-icon,
.nav-item,
.option-item,
.pdf-tool-btn {
  transition: 0.3s;
}
.modal-content {
  background: var(--white);
  border-radius: 12px;
  box-shadow: rgba(var(--black-rgb), 0.3) 0 20px 60px;
  margin: 10px;
  max-width: 400px;
  overflow-y: auto;
  padding: 25px;
  width: 95%;
}
.modal-header {
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 0;
}
.modal-header h3 {
  color: var(--black);
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}
.modal-title {
  font-size: 18px;
  font-weight: 700;
}
.modern-slider[type='range'] {
  appearance: none;
  background: #e5e7eb;
  border-radius: 8px;
  height: 8px;
  outline: 0;
  flex: 1 1 0%;
  width: 26vh;
  user-select: none;
  -webkit-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(--white);
  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 {
  box-shadow: rgba(255, 0, 0, 0.3) 0 4px 8px;
  transform: scale(1.15);
  box-shadow:
    0 0 0 8px rgba(255, 128, 0, 0.038),
    0 0 0 4px rgba(255, 94, 0, 0.25),
    rgba(0, 0, 0, 0.2) 0 2px 4px;
}
.modern-slider[type='range']::-moz-range-track {
  height: 8px;
  background: #e5e7eb;
  border-radius: 8px;
}
.modern-slider[type='range']:active::-moz-range-thumb {
  transform: scale(1.15);
  box-shadow:
    0 0 0 8px rgba(255, 153, 0, 0.15),
    0 0 0 4px rgba(255, 153, 0, 0.25),
    rgba(0, 0, 0, 0.2) 0 2px 4px;
}
.modern-slider[type='range']:active::-ms-thumb {
  transform: scale(1.15);
  box-shadow:
    0 0 0 8px rgba(255, 153, 0, 0.15),
    0 0 0 4px rgba(255, 153, 0, 0.25),
    rgba(0, 0, 0, 0.2) 0 2px 4px;
}
.modern-slider[type='range']::-ms-track {
  height: 8px;
  background: 0 0;
  border-color: transparent;
  color: transparent;
}
.modern-slider[type='range']::-ms-fill-lower {
  background: var(--orange);
  border-radius: 8px;
}
.modern-slider[type='range']::-ms-fill-upper {
  background: #e5e7eb;
  border-radius: 8px;
}
.modern-slider[type='range']::-ms-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--orange);
  cursor: pointer;
  border: 3px solid var(--white);
  box-shadow: rgba(0, 0, 0, 0.2) 0 2px 4px;
}
.modern-slider[type='range']:focus {
  outline: 0;
}
.nav-btn {
  background: 0 0;
  border: none;
  border-radius: 50%;
  color: var(--orange);
  font-size: 18px;
  height: 28px;
  justify-content: center;
  padding: 0;
  position: relative;
  width: 28px;
  z-index: inherit;
  cursor: pointer !important;
  pointer-events: all !important;
}
.empty-state,
.no-setlists {
  color: var(--gray-300);
  text-align: center;
}
.nav-btn:disabled {
  color: var(--gray-600);
  cursor: not-allowed;
}
.nav-icon {
  filter: brightness(0);
  height: 40px;
  width: 40px;
}
.nav-item {
  align-items: center;
  border-radius: 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  padding: 12px 8px;
  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 {
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.empty-state .no-setlists {
  font-size: 16px;
  line-height: 1.4;
}
.no-setlists {
  line-height: 1.6;
  padding: 20px;
}
.option-group {
  display: flex;
  align-items: center;
  width: 100%;
}
.option-item {
  background: var(--bg-secondary);
  border-radius: 12px;
  cursor: pointer;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px;
}
.option-item select {
  border: 2px solid var(--gray-500);
  border-radius: 8px;
  cursor: pointer;
  flex: 1 1 0%;
  font-size: 14px;
  outline: 0;
  padding: 10px;
}
.option-item span,
.theme-label {
  font-size: 16px;
  font-weight: 500;
}
.option-label {
  color: var(--text-dark);
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}
.option-select,
.toolbar-select {
  background: var(--white) !important;
  border: 2px solid var(--gray-400);
  border-radius: 12px;
  color: var(--text-dark);
  cursor: pointer;
  font-size: 16px;
  outline: 0;
  padding: 12px 16px;
  transition: 0.3s;
  width: 20vh;
  margin-left: auto;
}
.page-indicator,
.pdf-back-btn {
  color: var(--orange);
  font-size: 16px;
}
.page-indicator {
  font-weight: 600;
  min-width: 60px;
}
.page-loader {
  align-items: center;
  backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, 0.7);
  display: none;
  inset: 0px;
  justify-content: center;
  position: fixed;
  z-index: 10000;
}
.pdf-back-btn {
  align-items: center;
  background: 0 0;
  border: none;
  cursor: pointer;
  display: flex;
  font-weight: 500;
  gap: 8px;
  padding: 8px 0;
}
#setlistContainer .score-info h3,
.pdf-file-title,
.score-info h3 {
  font-weight: 600;
}
.pdf-bottom-toolbar {
  background: var(--white);
  border-radius: 40px;
  bottom: 10px;
  box-shadow:
    0 8px 28px -6px rgba(24, 39, 75, 0.12),
    0 18px 88px -4px rgb(2 2 2 / 42%);
  display: flex;
  gap: 2vh;
  justify-content: center;
  max-width: 95vw;
  padding: 12px 0;
  pointer-events: auto;
  position: fixed;
  width: 480px;
  z-index: 999;
}
.score-card.select-mode *,
.scrollable-color-grid,
.upper-canvas {
  pointer-events: auto !important;
}
.pdf-container {
  box-sizing: border-box;
}
.pdf-file-title {
  background: var(--white);
  color: var(--black);
  font-size: 18px;
  padding: 5px 20px;
  text-align: start;
  z-index: 20;
  box-shadow: rgba(0, 0, 0, 0.35) 0 -5px 20px;
}
.pdf-navigation {
  bottom: 100px;
  background: var(--white);
  border-radius: 20px;
  box-shadow:
    0 8px 28px -6px rgba(24, 39, 75, 0.12),
    0 18px 88px -4px rgb(2 2 2 / 18%);
  padding: 8px 8px;
  position: fixed;
  z-index: 1000;
}
.pdf-tool-btn {
  background: 0 0;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  justify-content: center;
}
.pdf-tool-btn.active {
  background: var(--orange);
  color: var(--white);
}
.pdf-tool-btn.destructive {
  background: var(--danger);
}
.pdf-tool-icon {
  filter: brightness(0);
  height: 32px;
  width: 32px;
}
.pdf-toolbar {
  align-items: center;
  background-color: transparent;
  border-radius: 12px;
  display: flex;
  gap: 24px;
}
.pdf-viewer-container {
  display: none;
  flex-direction: column;
  inset: 0px;
  position: fixed;
  z-index: 200;
}
.pdf-viewer-content {
  align-items: center;
  background: var(--bg-tertiary);
  display: flex;
  flex: 1 1 0%;
  justify-content: center;
  min-height: calc(-120px + 100vh);
  margin-right: 0 !important;
  margin-top: 0 !important;
}
#pdfViewerContent,
.pdf-viewer-content {
  position: relative;
  height: auto;
  overflow: hidden;
  box-sizing: border-box;
}
.pinch-zoom {
  position: relative;
  transform-origin: 0% 0%;
}
.pinch-zoom-container {
  overflow: hidden;
  position: relative;
}
#fabricCanvas,
#pdfCanvas {
  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;
  padding: 5px 20px;
  z-index: 40;
}
.score-card {
  border-radius: 12px;
  cursor: grab;
  justify-content: space-between;
  overflow: hidden;
  padding: 16px;
  position: relative;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  margin-top: 12px;
  background: var(--white);
  -webkit-user-select: none;
  user-select: none;
}
.score-card.is-dragging {
  opacity: 0.9;
  transform: scale(1.02);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}
.score-card:active {
  cursor: grabbing;
}
.scrollable-color-container::after,
.scrollable-color-container::before {
  bottom: 0;
  pointer-events: none;
  top: 0;
  transition: opacity 0.3s;
  opacity: 1;
  position: absolute;
  content: '';
  pointer-events: none !important;
  z-index: 1 !important;
}
.score-card.drag-mode {
  -webkit-user-drag: none;
}
.score-card.dragging-mobile {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  scale: 1.02;
}
.score-info h3 {
  font-size: 16px;
  margin-bottom: 4px;
  overflow: hidden;
}
.score-info p {
  color: var(--gray-500);
  font-size: 14px;
  overflow: hidden;
}
.scrollable-color-container {
  border-radius: 20px !important;
  height: auto;
  touch-action: pan-x !important;
  min-height: 65px;
  overflow: auto hidden !important;
  scroll-behavior: smooth !important;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}
.scrollable-color-container.scrolled-right::after {
  opacity: 0;
}
.scrollable-color-container * {
  touch-action: auto;
}
.scrollable-color-container::after {
  border-radius: 18px;
  width: 90px;
  background: linear-gradient(to left, var(--bg-primary), transparent);
  right: 0;
}
.scrollable-color-container::before {
  border-radius: 12px;
  width: 30px;
  background: linear-gradient(to right, var(--bg-primary), transparent);
  left: 0;
}
.scrollable-color-container:active {
  cursor: grabbing !important;
}
.scrollable-color-grid {
  margin-top: 12px;
  align-items: center !important;
  display: flex;
  flex-direction: row;
  gap: 10px;
  height: 100%;
  min-width: max-content;
  padding: 5px 10px;
  position: relative;
  z-index: 1;
}
.scrollable-color-grid .color-option.selected::after {
  color: var(--white);
  content: '';
  font-size: 14px;
  font-weight: 700;
  left: 50%;
  position: absolute;
  text-shadow: rgba(0, 0, 0, 0.7) 0 1px 2px;
  top: 50%;
  transform: translate(-50%, -50%);
}
.scrollable-color-grid .color-option:hover {
  border-color: var(--gray-300);
  box-shadow: rgba(0, 0, 0, 0.2) 0 4px 12px;
  transform: scale(1.1);
}
.section-title {
  color: var(--text-dark);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 20px;
}
.setlist-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.search-container {
  position: relative;
  width: 100%;
  margin-top: 20px;
}
.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  opacity: 0.7;
}
.search-bar {
  width: 100%;
  padding: 10px 15px 10px 40px;
  border-radius: 25px;
  border: none;
  background: var(--gray-300);
  font-size: 16px;
  top: 20px;
}
.setlist-info-left {
  display: flex;
  flex: 1 1 0%;
  gap: 12px;
  text-align: left;
  color: var(--gray-500);
}
.setlist-item {
  background: var(--white);
  border-radius: 12px;
  cursor: pointer;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 16px;
  transition: 0.3s;
}
.setlist-option,
.setlist-selector-modal {
  align-items: center;
  display: flex;
  width: 100%;
}
.setlist-item.dragging {
  opacity: 0.5;
  transform: rotate(5deg);
}
.setlist-name {
  color: var(--black);
  font-size: 16px;
  font-weight: 700;
}
.setlist-option {
  background: 0 0;
  border: 2px solid transparent;
  border-radius: 15px;
  cursor: pointer;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 15px;
  position: relative;
  transition: 0.2s;
}
.setlist-option.disabled {
  background: var(--white);
  cursor: not-allowed;
  opacity: 0.5;
}
.setlist-option.selected {
  background: var(--white);
  box-shadow: rgba(0, 0, 0, 0.192) 0 4px 20px;
}
.setlist-selector-list {
  flex: 1 1 0%;
  margin: 20px 0;
  max-height: 400px;
  overflow-y: auto;
  padding: 15px;
}
.setlist-selector-modal {
  background: rgba(0, 0, 0, 0.7);
  box-shadow: rgba(var(--black-rgb), 0.3) 0 4px 20px;
  height: 100%;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  z-index: 10000;
}
.setlist-selector-modal .back-btn {
  align-items: center;
  background: 0 0;
  border: none;
  color: var(--gray-500);
  cursor: pointer;
  display: flex;
  font-size: 14px;
  gap: 5px;
  margin-right: 10px;
  padding: 5px;
  transition: color 0.2s;
}
.setlist-selector-modal .modal-content {
  background: var(--white);
  border-radius: 12px;
  box-shadow: rgba(var(--black-rgb), 0.3) 0 10px 40px;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  max-width: 75vh;
  padding: 0;
  width: 90%;
}
.setlist-selector-modal .modal-header {
  align-items: center;
  display: flex;
  padding: 20px;
  position: relative;
}
.setlist-selector-modal .modal-title {
  color: var(gray-200);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}
.setlist-title {
  color: var(--text-dark);
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  margin-top: 10px;
}
.setlist-view.active {
  display: block;
  z-index: 30;
}
.settings-content {
  flex: 1 1 0%;
}
.settings-content h3 {
  color: var(--black);
  font-size: 16px;
  font-weight: 600 !important;
  margin: 0 0 4px;
}
.settings-header h2,
.settings-screen-header h2 {
  font-weight: 700;
  margin: 0;
  color: var(--text-dark);
}
.settings-content p {
  color: var(--gray-500);
  font-size: 13px;
  margin: 0;
}
.settings-header {
  padding: 80px 20px 0 25px;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--white-transparency);
}
.settings-header h2 {
  font-size: 30px;
}
.settings-icon-right {
  flex-shrink: 0;
  font-size: 24px;
  margin-left: 16px;
}
.settings-item {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  padding: 20px;
  transition: 0.2s;
}
.settings-item-container {
  background: var(--white);
  border-radius: 12px;
  overflow: visible;
  margin: 10px;
  box-shadow: rgba(0, 0, 0, 0.21) 0 2px 20px;
}
.settings-screen-header,
body {
  background: var(--bg-primary);
}
.settings-list,
.settings-options {
  display: flex;
  overflow-y: auto;
  padding: 20px;
  gap: 16px;
}
.settings-item:active {
  background: rgba(255, 106, 0, 0.05);
}
.settings-list {
  flex: 1 1 0%;
  flex-direction: column;
  top: 40px;
  margin-top: 10px;
}
.settings-options {
  flex: 1 1 0%;
  flex-direction: column;
}
.settings-screen {
  flex-direction: column;
  min-height: auto;
  overflow: auto;
  display: none;
}
.settings-screen-header {
  align-items: center;
  display: flex;
  gap: 12px;
  padding: 75px 20px 0 10px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.settings-screen-header h2 {
  flex: 1 1 0%;
  font-size: 20px;
}
.settings-section {
  padding: 20px;
}
.simple-color-modal {
  align-items: center;
  display: none;
  height: 100%;
  justify-content: center;
  left: 50% !important;
  opacity: 0;
  position: fixed;
  top: 0;
  transition: 0.3s;
  width: 100%;
  z-index: 15000;
  margin-top: -15px;
  margin-bottom: 21px !important;
}
.simple-color-modal.active {
  display: flex;
  opacity: 1;
}
.simple-modal-content {
  background: var(--white);
  border-radius: 16px;
  box-shadow:
    0 8px 28px -6px rgba(24, 39, 75, 0.12),
    0 18px 88px -4px rgb(2 2 2 / 18%);
  padding: 20px;
  position: fixed;
  top: 24vh;
  margin-top: 0;
  left: 50% !important;
  transform: translate(-50%, -50%);
  width: 54vh;
  z-index: 10001;
  justify-content: center;
  min-width: 50px !important;
}
.slider-row {
  align-items: center;
  display: flex;
  gap: 9vh;
  justify-content: center;
}
.slider-value.side-value {
  color: var(--text-dark);
  border: 2px solid #cbcbcb;
  border-radius: 14px;
  font-size: 20px;
  font-weight: 400;
  padding: 4px;
  text-align: center;
  z-index: 10;
}
.spinner {
  color: var(--orange);
  font-size: 45px;
  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 round;
}
.theme-label,
body {
  color: var(--text-dark);
}
@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;
  }
}
@keyframes round {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.text-annotation-content {
  background: var(--white);
  border-radius: 12px;
  max-width: 400px;
  padding: 30px;
  width: 90%;
}
.text-annotation-input {
  border: 2px solid var(--gray-200);
  border-radius: 12px;
  font-size: 16px;
  min-height: 100px;
  outline: 0;
  padding: 15px;
  resize: vertical;
  transition: border-color 0.3s;
  width: 100%;
}
.text-annotation-modal {
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  inset: 0px;
  justify-content: center;
  position: fixed;
  z-index: 1000;
}
.theme-option {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 18px 20px;
}
.theme-option-wrapper {
  background: var(--white);
  border-radius: 16px;
  box-shadow: rgba(0, 0, 0, 0.21) 0 2px 20px;
  overflow: hidden;
}
.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: rgba(0, 0, 0, 0.2) 0 2px 4px;
  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: #34c759;
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}
.tool-indicator {
  color: var(--black);
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}
.toolbar-btn {
  align-items: center;
  background: 0 0;
  border: none;
  border-radius: 12px;
  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;
}
.upper-canvas {
  cursor: default;
  z-index: 3 !important;
}
.warning-text {
  color: var(--danger);
  font-size: 13px;
  text-align: center;
  margin-top: 10px;
}
.zoom-lock,
.zoom-status,
.zoom-status button,
.zoom-toggle {
  color: var(--dot-blue);
}
.zoom-lock img,
.zoom-toggle img {
  filter: brightness(0) saturate(100%) invert(28%) sepia(98%) saturate(3544%) hue-rotate(215deg)
    brightness(102%) contrast(103%);
}
.zoom-status {
  align-items: center;
  background: 0 0;
  border-radius: 20px;
  display: none;
  filter: drop-shadow(rgba(0, 0, 0, 0.25) 20px 20px 0px 30px);
  font-family: Arial, sans-serif;
  font-size: 16px;
  gap: 10px;
  background-color: var(--bg-primary);
  position: fixed;
  right: 16px;
  top: 45px;
  user-select: none;
  z-index: 20000;
  box-shadow: -10px 2px 20px 0 rgb(0 0 0 / 17%);
  padding: 4px 9px;
}
.zoom-status button {
  align-items: center;
  background-color: transparent;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  font-size: 18px;
  height: 30px;
  justify-content: center;
  width: 30px;
}
.zoom-status button.locked {
  background-color: #a7c1ff;
}
.zoom-status button:hover {
  background: #a7c1ff;
  padding: 0;
}

.zoom-status button.active {
  background: #a7c1ff;
  padding: 0;
}
[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);
}
body {
  margin: 0;
}
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: 18px;
  height: 28px;
  justify-content: center;
  transition: 0.2s;
  width: 28px;
}
#fontSizeDown:active,
#fontSizeUp:active {
  background: rgba(0, 0, 0, 0.15);
  transform: scale(0.95);
}
#fontSizeDown:hover,
#fontSizeUp:hover {
  background: rgba(0, 0, 0, 0.1);
}
#miniToolbar.active,
.mini-toolbar.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 999 !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;
}
.close-btn:hover,
.modal-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(gray-200);
}
.option-item input[type='checkbox'],
.option-item input[type='radio'] {
  accent-color: var(--orange);
  cursor: pointer;
  flex-shrink: 0;
  height: 18px;
  width: 18px;
}
.pdf-bottom-toolbar::-webkit-scrollbar,
.setlist-view {
  display: none;
}
.pdf-tool-btn.active .pdf-tool-icon,
.pdf-tool-btn.destructive .pdf-tool-icon {
  filter: brightness(0) invert(1);
}
.modal-actions .btn-secondary:hover,
.search-bar:focus {
  background: var(--gray-200);
  outline: 0;
}
.thickness-modal,
.transparency-modal {
  animation: 0.3s ease-out modalSlideDown;
  background: var(--white);
  border-radius: 12px;
  box-shadow:
    0 8px 28px -6px rgba(24, 39, 75, 0.12),
    0 18px 88px -4px rgb(2 2 2 / 18%);
  display: none;
  max-width: 50vh;
  padding: 10px 20px;
  position: fixed;
  width: 80vw;
  z-index: 1000;
  left: 50% !important;
  right: auto;
  top: 145px !important;
  transform: translateX(-50%);
}
#pdfSingleToolbar.highlight-mode .toolbar-icon,
#pdfSingleToolbar.pen-mode .toolbar-icon {
  gap: 16px;
}
.toolbar-btn img,
.toolbar-btn svg {
  filter: opacity(0.8);
  transition: 0.3s;
}
.toolbar-icon {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}
#settingsView.active,
.settings-screen.active {
  display: flex !important;
}
.option-item select:focus,
.option-select:focus,
.text-annotation-input:focus {
  border-color: var(--orange);
}
#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,
.stroke-width-selector.active,
.text-annotation-modal.active {
  display: flex;
}
#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: 10000;
  display: none;
  overflow: hidden;
}
.fullscreen-controls {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.fullscreen-controls button {
  pointer-events: auto;
  transition: opacity 0.3s ease-in-out;
}
.fullscreen-close-btn {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  background-color: #1e1e1e;
  color: var(--white);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
}
#fullscreenPageInfo,
.fullscreen-page-indicator {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.filter-toggle,
.fullscreen-nav-btn {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.fullscreen-close-btn,
.fullscreen-nav-btn,
.fullscreen-page-indicator {
  transition:
    opacity 0.3s ease-in-out,
    transform 0.2s ease-in-out;
}
.fullscreen-close-btn:hover {
  background-color: var(--gray-800);
  transform: translateX(-50%) scale(1.1);
  box-shadow: rgba(var(--black-rgb), 0.3) 0 4px 12px;
}
.fullscreen-close-btn:active {
  transform: translateX(-50%) scale(0.9);
  box-shadow: rgba(var(--black-rgb), 0.3) 0 2px 8px;
}
.fullscreen-nav-btn.right:hover,
.fullscreen-nav-btn: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 {
  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: 10;
}
.fullscreen-nav-btn.left {
  left: 20px;
}
.fullscreen-nav-btn.right {
  right: 20px;
}
.fullscreen-nav-btn:hover {
  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: rgba(0, 0, 0, 0.85);
  padding: 12px 24px;
  border-radius: 24px;
  z-index: 10001;
  pointer-events: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
}
.filter-toggle,
.filter-toggle svg {
  color: var(--gray-600);
}
#fullscreen-pdf-container {
  position: relative;
  z-index: 5;
  box-shadow: rgba(0, 0, 0, 0.5) 0 0 30px;
  border-radius: 4px;
  overflow: hidden;
}
.status-dot {
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background-color: silver;
  border: 2px solid var(--white);
}
.status-dot.active {
  background-color: var(--success);
  box-shadow: rgba(0, 0, 0, 0.192) 0 4px 20px;
}
.score-card.drag-over {
  border-top: 3px solid var(--orange);
  margin-top: 10px;
}
.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-top: 0;
}
.filter-toggle {
  gap: 8px;
  padding: 6px 12px;
  background: 0 0;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  width: 50vh;
  justify-content: flex-start;
  transition: 0.2s;
}
.filter-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  width: 30vh;
  background: var(--white);
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
  z-index: 100001;
  overflow: hidden;
  display: none;
}
.filter-option {
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s;
}
.filter-option:hover {
  background: #c0d3ff !important;
}
.filter-option.active {
  background: #a7c1ff;
  font-weight: 500;
  color: #1976d2;
}
#filterLabelFiles,
#filterLabelSetlistFiles,
#filterLabelSetlists {
  font-weight: 700;
}
.header-actions {
  margin-left: auto;
  gap: 8px;
}
.pro-btn {
  background: 0 0;
  border: none;
  padding: 6px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s,
    transform 0.1s;
}
.pro-btn img {
  display: block !important;
  color: var(--gray-500);
}
.pro-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10010;
}
.pro-modal-content {
  width: 500px;
  border-radius: 24px;
  background: var(--bg-primary);
  padding: 24px 20px 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  text-align: center;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
}
.pro-modal-image {
  background: #000;
  color: #fff;
  border-radius: 20px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  font-size: 20px;
  font-weight: 500;
}
.pro-modal-title {
  color: var(--orange);
  font-size: 20px;
  margin: 0 0 10px;
}
.pro-modal-text {
  color: var(--gray-500);
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 18px;
}
.pro-modal-btn {
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
@media (max-width: 360px) {
  .pdf-bottom-toolbar,
  .pdf-tool-btn {
    gap: 5px !important;
  }
}
@media (max-width: 768px) {
  .fullscreen-page-indicator {
    bottom: 75px;
    padding: 10px 20px !important;
    font-size: 14px !important;
    z-index: 10001 !important;
  }
  .fullscreen-close-btn {
    top: 15px !important;
    z-index: 10002 !important;
  }
  .fullscreen-nav-btn {
    z-index: 10001 !important;
  }
}
@media (max-width: 480px) {
  .pdf-canvas-wrapper,
  svg canvas {
    width: 100% !important;
  }
  .fullscreen-page-indicator {
    bottom: 15px !important;
    padding: 8px 16px !important;
    font-size: 12px !important;
  }
  .fullscreen-nav-btn.left {
    left: 8px !important;
  }
  .fullscreen-nav-btn.right {
    right: 8px !important;
  }
  .pdf-canvas-wrapper,
  canvas[width][height],
  svg canvas {
    height: auto !important;
    max-width: 100% !important;
  }
  .pdf-canvas-wrapper {
    align-items: center !important;
    display: flex !important;
    justify-content: center !important;
    overflow: hidden !important;
  }
  .annotationLayer,
  .textLayer {
    height: 100% !important;
    transform: none !important;
    width: 100% !important;
  }
  #colorPickerModal .color-option,
  .color-picker-modal .color-option,
  .fullscreen-close-btn {
    height: 32px !important;
    width: 32px !important;
  }
  .fullscreen-close-btn {
    top: 10px !important;
  }
  .fullscreen-nav-btn {
    width: 40px !important;
    height: 40px !important;
  }
  .color-canvas {
    height: 120px;
  }
  .color-option {
    height: 28px;
    width: 28px;
  }
  .color-picker-horizontal {
    flex-wrap: wrap;
  }
  .scrollable-color-container {
    top: auto;
  }
  #colorPickerModal {
    max-width: 42vh !important;
  }
  .modal-content {
    padding: 20px;
  }
  .modal-header h3 {
    font-size: 16px;
  }
  .thickness-modal,
  .transparency-modal {
    padding: 16px 20px;
    height: 130px;
    min-width: 350px;
    top: 160px;
    width: 50vh;
  }
  #pdfSingleToolbar.text-mode #colorPickerTrigger,
  .toolbar-btn {
    width: 36px;
    height: 36px;
  }
  .modal-header {
    margin-bottom: 20px;
  }
  .modern-slider {
    height: 8px;
  }
  #pdfSingleToolbar.text-mode,
  .pdf-single-toolbar.text-mode {
    border-radius: none !important;
    scroll-behavior: smooth;
    scrollbar-width: none;
    max-width: 100%;
    min-width: 320px;
    overflow-y: hidden;
    padding-left: 8px;
    padding-right: 8px;
    justify-content: flex-start !important;
    overflow-x: auto !important;
  }
  #pdfSingleToolbar.text-mode::-webkit-scrollbar {
    display: none;
  }
  #pdfSingleToolbar.text-mode .toolbar-btn {
    height: 36px;
    min-width: 36px;
  }
  .toolbar-btn {
    border-radius: 8px;
  }
  .pdf-viewer-header {
    min-height: 40px !important;
    padding: 6px 8px !important;
  }
  .pdf-navigation {
    bottom: 100px !important;
    padding: 4px 0 !important;
  }
  .pdf-tool-btn {
    height: 24px !important;
    width: 24px !important;
  }
  .pdf-tool-icon {
    height: 12px !important;
    width: 12px !important;
  }
  .header {
    font-size: 16px !important;
    padding: 10px 12px !important;
  }
  .main {
    padding: 0 12px !important;
  }
  .score-card {
    padding: 10px !important;
  }
  .score-info h3 {
    font-size: 15px;
  }
  .score-info p {
    font-size: 13px;
  }
  #fullscreenPageInfo,
  .color-option.selected::after {
    font-size: 12px;
  }
  #pdfSingleToolbar,
  .bottom-nav {
    padding: 8px !important;
    border-radius: 22px !important;
  }
  .bottom-tool-btn {
    height: 55px;
    width: 55px;
  }
  .bottom-tool-icon {
    width: 20px !important;
    height: 20px !important;
  }
  #fontSizeDown,
  #fontSizeUp {
    font-size: 14px;
    height: 28px;
    width: 28px;
  }
  #miniToolbar.layout-horizontal {
    gap: 6px !important;
    height: 44px !important;
    min-width: 120px !important;
    padding: 6px 10px !important;
  }
  #miniToolbar.layout-vertical {
    gap: 6px !important;
    min-height: 120px !important;
    padding: 10px 4px !important;
    width: 44px !important;
  }
  .mini-toolbar {
    gap: 6px;
    padding: 6px;
  }
  .mini-toolbar-btn {
    height: 32px !important;
    min-height: 32px !important;
    min-width: 32px !important;
    padding: 6px !important;
    width: 32px !important;
  }
  .mini-toolbar-btn svg {
    height: 18px !important;
    width: 18px !important;
  }
  .color-palette {
    gap: 10px;
    grid-template-columns: repeat(6, 1fr);
  }
  .pdf-bottom-toolbar {
    z-index: 50;
  }
  .fullscreen-close-btn {
    min-width: 36px;
    min-height: 36px;
    font-size: 20px;
  }
  .fullscreen-nav-btn svg {
    width: 32px;
    height: 32px;
  }
}
@media (max-width: 530px) {
  .simple-color-modal .simple-modal-content {
    margin-top: -2vh !important;
  }
  .simple-color-modal .color-canvas {
    height: 140px !important;
    width: 100% !important;
  }
  .simple-color-modal .hue-slider {
    height: 28px !important;
    margin: 12px 0 !important;
  }
  .simple-color-modal .hex-input-area {
    min-width: 140px !important;
  }
  .simple-color-modal .hex-input {
    font-size: 14px !important;
    padding: 8px 0 !important;
    max-width: 10vh;
  }
  .simple-color-modal .hex-apply-btn,
  .simple-color-modal .hex-cancel-btn {
    padding: 8px 16px !important;
    font-size: 13px !important;
  }
  #bgColorModal.active {
    width: 45vh;
  }
  #bgOpacitySlider {
    width: 23vh;
  }
  #bgColorModal .color-picker-modal {
    width: 90vw !important;
    max-width: 380px !important;
    padding: 16px !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
  #bgColorModal .tool-indicator {
    font-size: 16px !important;
  }
  #bgColorModal .scrollable-color-grid {
    gap: 10px !important;
    padding: 0 4px !important;
  }
  #bgColorModal .transparent-option svg {
    width: 18px !important;
    height: 18px !important;
  }
  #bgColorModal .control-label {
    font-size: 13px !important;
    margin-bottom: 6px !important;
  }
  #bgColorModal .slider-row {
    gap: 13px !important;
  }
  #bgColorModal .modern-slider {
    flex: 1 !important;
  }
  #bgColorModal .slider-value {
    font-size: 14px !important;
    padding: 6px 10px !important;
    min-width: 50px !important;
  }
  #bgColorModal .modal-buttons {
    margin-top: 16px !important;
    gap: 10px !important;
  }
  .nav-icon {
    width: 36px !important;
    height: 36px !important;
  }
  .color-canvas {
    height: 110px;
  }
  .color-option {
    height: 26px;
    width: 26px;
  }
  .color-picker-horizontal {
    flex-wrap: wrap;
  }
  .modal-content {
    padding: 16px;
  }
  .modal-header h3 {
    font-size: 15px;
  }
  .thickness-modal,
  .transparency-modal {
    width: 70vw;
  }
  .modern-slider {
    height: 7px;
  }
  .pdf-single-toolbar {
    flex-wrap: wrap;
    gap: 5px;
    height: auto;
    justify-content: center;
    min-height: 55px;
  }
  .pdf-viewer-header {
    min-height: 36px !important;
    padding: 5px 7px !important;
  }
  .pdf-navigation {
    padding: 6px 0 !important;
  }
  .pdf-tool-btn {
    height: 22px !important;
    width: 22px !important;
  }
  .pdf-tool-icon {
    height: 11px !important;
    width: 11px !important;
  }
  .pdf-toolbar {
    padding: 6px 12px !important;
  }
  .header {
    font-size: 15px !important;
    padding: 8px 10px !important;
    position: fixed !important;
    top: 0 !important;
  }
  .main {
    padding: 60px 10px 100px !important;
  }
  .fullscreen-nav-btn {
    width: 36px;
    height: 36px;
  }
  .fullscreen-nav-btn svg {
    width: 22px;
    height: 22px;
  }
}
@media (max-width: 768px) {
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  .bottom-nav {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
  .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-close-btn {
    top: 15px !important;
  }
  .fullscreen-nav-btn.left {
    left: 8px !important;
  }
  .fullscreen-nav-btn.right {
    right: 8px !important;
  }
}
@media (max-height: 1366px) and (orientation: landscape) {
  #bgColorModal,
  .simple-modal-content {
    top: 16vh;
  }
}
@media (max-height: 820px) and (orientation: landscape) {
  .simple-modal-content {
    top: 20vh;
  }
  #bgColorModal {
    top: 18vh !important;
  }
}
@media (prefers-contrast: high) {
  .toolbar-btn {
    border-color: #000;
    border-width: 3px;
  }
  .toolbar-btn.active {
    background: #000;
    color: var(--white);
  }
}
@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-logo {
    animation: none;
  }
  #splash-screen {
    transition: opacity 0.3s ease-out;
  }
}
@media (max-width: 599) and (max-height: 1000px) {
  .theme-option:has(#applytwoPagesPreview) {
    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 fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.view {
  display: none;
}
.view.active {
  display: flex !important;
  flex-direction: column !important;
  height: 100dvh !important;
  width: 100%;
  overflow: hidden !important;
  position: fixed;
  top: 0;
  left: 0;
}
.top-actions-setlist {
  flex-shrink: 0;
  touch-action: auto;
  pointer-events: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  margin-top: 16px;
  background-color: var(--background);
  z-index: 10;
}
#filesScrollContainer,
#setlistScrollContainer,
.scroll-wrapper {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding-top: 180px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 120px !important;
  box-sizing: border-box;
}
#fileList,
#setlistContainer {
  overflow: visible !important;
  height: auto !important;
  min-height: auto !important;
  padding-bottom: 0 !important;
  display: block;
  flex-shrink: 0;
}
.file-upload,
.filter-section,
.setlist-header {
  flex-shrink: 0;
}
.actions-popup-toolbar {
  position: fixed;
  background: var(--white-transparency);
  backdrop-filter: blur(20px);
  border-radius: 37px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.226);
  padding: 0 12px;
  display: flex;
  gap: 12px;
  z-index: 10000;
  margin-top: 5px;
}
.actions-popup-toolbar .icon-btn {
  padding: 10px;
  background: 0 0;
  border-radius: 8px;
  box-shadow: none !important;
}
@media (max-width: 450px) {
  #selection-controls #add-selected,
  #selection-controls #delete-selected,
  #selection-controls-setlist #delete-selected-setlist,
  #selection-controls-setlist #edit-selected-setlist,
  #selection-controls-setlist-files #delete-selected-setlist-files,
  #selection-controls-setlist-files #download-selected-setlist-files {
    display: none !important;
  }
  .actions-menu-btn {
    display: flex !important;
  }
  .simple-modal-content {
    max-width: 45vh;
  }
  @media (min-width: 451px) {
    .actions-menu-btn {
      display: none !important;
    }
  }
}
@media (max-width: 350px) {
  .simple-modal-content {
    max-width: 40vh;
  }
  .bottom-controls {
    gap: 2px;
  }
  .control-row {
    gap: 5px;
  }
  #bgColorModal .slider-row {
    gap: 10px !important;
  }
  #bgColorModal.active,
  .thickness-modal,
  .transparency-modal {
    width: 30vh;
  }
  #bgOpacitySlider {
    width: 23vh;
  }
}
[data-reduced-motion='true'] *,
[data-reduced-motion='true'] ::after,
[data-reduced-motion='true'] ::before {
  animation-duration: 10ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 10ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}
[data-reduced-motion='true'] * {
  animation-name: none !important;
}
[data-reduced-motion='true'] .fade-in,
[data-reduced-motion='true'] .fade-out,
[data-reduced-motion='true'] .modalSlideDown {
  animation: none !important;
  transition: none !important;
}
@media (orientation: portrait) {
  .simple-modal-content {
    top: 140px !important;
  }
  #bgColorModal {
    top: 150px !important;
  }
}
@media (orientation: landscape) {
  #bgColorModal,
  .simple-modal-content {
    top: 30vh !important;
  }
}
@media (max-height: 1024px) and (orientation: landscape) {
  .simple-modal-content {
    top: 13vh !important;
  }
  #bgColorModal {
    top: 15vh !important;
  }
}
@media (max-height: 912px) and (orientation: landscape) {
  .simple-modal-content {
    top: 15vh !important;
  }
  #bgColorModal {
    top: 16vh !important;
  }
}
@media (max-height: 820px) and (orientation: landscape) {
  .simple-modal-content {
    top: 17vh !important;
  }
  #bgColorModal {
    top: 18vh !important;
  }
}
@media (max-height: 768px) and (orientation: landscape) {
  .simple-modal-content {
    top: 18vh !important;
  }
  #bgColorModal {
    top: 20vh !important;
  }
}
@media (max-height: 600px) and (orientation: landscape) {
  .simple-modal-content {
    top: 35vh !important;
  }
  #bgColorModal {
    top: 36vh !important;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  .bottom-nav {
    padding: 6px 0;
  }
  .splash-logo {
    width: min(40vh, 300px);
    margin-bottom: 20px;
  }
  .bottom-tool-btn {
    height: 30px;
    width: 30px;
  }
  .bottom-tool-icon,
  .pdf-tool-icon {
    height: 12px;
    width: 12px;
  }
  .color-palette {
    gap: 6px;
    grid-template-columns: repeat(8, 1fr);
  }
  .color-picker-modal {
    bottom: 40px;
    height: fit-content;
    min-width: 220px;
    padding: 8px;
  }
  .color-picker-title {
    font-size: 10px;
    margin-bottom: 6px;
  }
  .header {
    font-size: 14px;
    left: 0;
    min-height: 40px;
    padding: 6px 15px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100;
  }
  .main {
    margin-top: 50px;
    padding-bottom: 50px;
  }
  .modal-content {
    max-height: 70vh;
    overflow-y: auto;
    padding: 15px;
  }
  .nav-icon {
    height: 18px;
    width: 18px;
  }
  .nav-item {
    padding: 3px;
  }
  .page-indicator {
    font-size: 9px;
    min-width: 25px;
  }
  .pdf-back-btn {
    font-size: 12px;
    padding: 4px 0;
  }
  .pdf-bottom-toolbar {
    gap: 4px;
    padding: 3px;
    max-width: 300px;
  }
  .pdf-file-title {
    font-size: 9px;
    padding: 2px 10px;
  }
  .pdf-navigation {
    bottom: 40px;
    padding: 4px 8px;
  }
  .pdf-tool-btn {
    height: 24px;
    width: 24px;
  }
  .pdf-toolbar {
    gap: 3px;
    padding: 3px;
  }
  .pdf-viewer-header {
    min-height: 35px;
    padding: 4px 10px;
  }
  .stroke-width-selector {
    bottom: 35px;
    padding: 4px;
  }
  .color-option,
  .nav-btn {
    height: 22px;
    width: 22px;
  }
  .simple-modal-content {
    top: 38vh !important;
  }
  #bgColorModal {
    top: 39vh !important;
  }
}
@media (max-height: 400px) and (orientation: landscape) {
  .simple-modal-content {
    top: 40vh !important;
  }
  #bgColorModal {
    top: 41vh !important;
  }
}
.ad-banner-header {
  margin: 16px 0;
  padding: 12px;
  background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 255, 136, 0.2);
  position: relative;
  overflow: hidden;
}

.ad-banner-header::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: rotate(45deg);
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}
.ad-banner-top {
  margin: 0 0 20px 0;
  width: 100%;
  position: relative;
}

.ad-banner-top .ad-inline-content {
  border-radius: 12px;
  padding: 16px;
  position: relative;
  overflow: hidden;
  min-height: 120px;
  display: flex;
  flex-direction: column;
}

.ad-banner-top .ad-inline-header {
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}

.ad-banner-top .ad-inline-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.ad-banner-header ins {
  display: block;
  min-height: 90px;
  background: var(--gray-100);
  border-radius: 8px;
}

.ad-banner-inline {
  margin: 20px 0;
  width: 100%;
  position: relative;
}

.ad-banner-inline .ad-inline-content {
  border-radius: 12px;
  padding: 16px;
  background-color: transparent;
  position: relative;
  overflow: hidden;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.ad-banner-inline .ad-inline-header {
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}

.ad-banner-inline .ad-inline-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.ad-banner-inline ins {
  display: block;
  min-height: 100px;
  background: var(--gray-500);
  border-radius: 8px;
}

.ad-interstitial {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

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

.ad-interstitial-content .adsbygoogle {
  min-height: 300px !important;
}

.ad-interstitial-content {
  background: #000000;
  border-radius: 16px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  position: relative;
  animation: slideUp 0.4s ease;
}

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

.ad-interstitial-header {
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ad-close-btn {
  padding: 8px 20px;
  background: rgba(255, 255, 255, 0.2);
  color: #666;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: not-allowed;
  transition: all 0.3s ease;
}

.ad-close-btn.enabled {
  background: var(--orange);
  color: white;
  border: none;
  cursor: pointer;
}

.ad-close-btn.enabled:active {
  transform: scale(0.98);
}

.ad-interstitial-body {
  padding: 20px;
  min-height: 300px;
  max-height: calc(90vh - 80px);
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .ad-banner-header,
  .ad-banner-top .ad-inline-content,
  .ad-banner-inline .ad-inline-content {
    border-radius: 8px;
    padding: 12px;
  }

  .ad-banner-top,
  .ad-banner-inline {
    margin: 16px 0;
  }

  .ad-interstitial-content {
    border-radius: 12px;
    max-height: 85vh;
  }

  .ad-interstitial-body {
    padding: 16px;
    min-height: 250px;
  }
}

@media (max-width: 480px) {
  .ad-banner-header,
  .ad-banner-top .ad-inline-content,
  .ad-banner-inline .ad-inline-content {
    padding: 10px;
    min-height: 100px;
  }

  .ad-interstitial {
    padding: 12px;
  }

  .ad-close-btn {
    padding: 6px 16px;
    font-size: 13px;
  }
}

/* ========== DARK MODE ========== */
body[data-theme='dark'] .ad-banner-header,
body[data-theme='dark'] .ad-banner-inline {
  background: var(--gray-700);
  border-color: var(--gray-600);
}

body[data-theme='dark'] .ad-banner-header ins,
body[data-theme='dark'] .ad-banner-inline ins,
body[data-theme='dark'] .ad-interstitial-body {
  background: var(--gray-800);
}

.no-ads-section {
  margin: 10px auto;
  padding: 16px;
  max-width: 600px;
  background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
  border-radius: var(--border-radius-md);
  text-align: center;
}

.no-ads-section h3 {
  color: white;
  font-size: 18px;
  margin-bottom: 8px;
}

.no-ads-section p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  margin-bottom: 16px;
}

.btn-no-ads {
  padding: 12px 24px;
  background: white;
  color: var(--orange);
  border: none;
  border-radius: var(--border-radius-sm);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-no-ads:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.btn-no-ads:active {
  transform: translateY(0);
}

/* ========== STATUS NO-ADS ATTIVO ========== */
.no-ads-active {
  background: linear-gradient(135deg, #34c759 0%, #30d158 100%);
}

.no-ads-active h3 {
  color: white;
}

.no-ads-active p {
  color: rgba(255, 255, 255, 0.95);
}

.no-ads-active .btn-no-ads {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  cursor: default;
  pointer-events: none;
}

.auth-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  overflow: hidden;
}

/* ========== SCHERMATE AUTH ========== */
.auth-screen {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.auth-screen.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: all;
}

/* ========== CARD AUTH ========== */
.auth-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 24px;
  padding: 40px 32px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.5s ease;
}

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

/* ========== TITOLO ========== */
.auth-title {
  font-size: 32px;
  font-weight: 700;
  color: #333;
  text-align: center;
  margin: 0 0 32px 0;
}

/* ========== FORM ========== */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  position: relative;
}

.form-input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid rgba(255, 107, 53, 0.2);
  border-radius: 12px;
  font-size: 16px;
  background: white;
  color: #333;
  transition: all 0.3s ease;
}

.form-input:focus {
  outline: none;
  border-color: #ff6b35;
  box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.1);
}

.form-input::placeholder {
  color: rgba(51, 51, 51, 0.5);
}

/* ========== PASSWORD FIELD ========== */
.password-group {
  position: relative;
}

.toggle-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  transition: opacity 0.2s;
}

.toggle-password:hover {
  opacity: 0.7;
}

/* ========== PASSWORD STRENGTH ========== */
.password-strength-container {
  margin-top: 8px;
}

.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: #ccc;
  transition: all 0.3s ease;
}

.password-strength-indicator.strength-0::after {
  width: 0%;
  background: #ccc;
}
.password-strength-indicator.strength-1::after {
  width: 20%;
  background: #ff4444;
}
.password-strength-indicator.strength-2::after {
  width: 40%;
  background: #ff8800;
}
.password-strength-indicator.strength-3::after {
  width: 60%;
  background: #ffcc00;
}
.password-strength-indicator.strength-4::after {
  width: 80%;
  background: #88cc00;
}
.password-strength-indicator.strength-5::after {
  width: 100%;
  background: #00cc44;
}

.password-strength-message {
  font-size: 12px;
  margin-top: 4px;
  font-weight: 600;
}

.password-strength-message.strength-0,
.password-strength-message.strength-1 {
  color: #ff4444;
}
.password-strength-message.strength-2 {
  color: #ff8800;
}
.password-strength-message.strength-3 {
  color: #ffcc00;
}
.password-strength-message.strength-4 {
  color: #88cc00;
}
.password-strength-message.strength-5 {
  color: #00cc44;
}

/* ========== PASSWORD REQUIREMENTS ========== */
.password-requirements {
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
  font-size: 12px;
  color: #666;
}

.password-requirements li {
  padding: 4px 0;
  transition: all 0.3s ease;
}

.password-requirements li.met {
  color: #00cc44;
  font-weight: 600;
}

/* ========== CHECKBOX ========== */
.form-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #666;
}

.form-checkbox input[type='checkbox'] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #ff6b35;
}

.form-checkbox label {
  cursor: pointer;
}

.terms-link {
  color: #ff6b35;
  text-decoration: none;
  font-weight: 600;
}

.terms-link:hover {
  text-decoration: underline;
}

.btn-auth {
  width: 100%;
  padding: 14px 24px;
  border: none;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 16px rgb(9 9 9 / 40%);
  background-color: white;
  max-width: 45vh;
  color: black;
}

.btn-primary:active {
  transform: translateY(0);
}

.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 24px 0 16px;
  color: #999;
  font-size: 14px;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #ddd;
}

.auth-divider span {
  padding: 0 12px;
}

.social-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 12px 24px;
  border: 2px solid #ddd;
  border-radius: 12px;
  background: white;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-social:hover {
  border-color: #ff6b35;
  background: #fff5f2;
}

.social-icon {
  width: 20px;
  height: 20px;
}

/* ========== FOOTER LINK ========== */
.auth-footer {
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
  color: #666;
}

.auth-footer a {
  color: #ff6b35;
  text-decoration: none;
  font-weight: 600;
}

.auth-footer a:hover {
  text-decoration: underline;
}

/* ========== SELEZIONE LINGUA ========== */
.language-selection {
  margin: 24px 0;
}

.language-label {
  font-size: 14px;
  color: #666;
  text-align: center;
  margin-bottom: 16px;
}

.language-options {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.language-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border: 2px solid #ddd;
  border-radius: 12px;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 90px;
}

.language-option:hover {
  border-color: #ff6b35;
  background: #fff5f2;
}

.language-option.selected {
  border-color: #ff6b35;
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(255, 140, 66, 0.1) 100%);
  box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.1);
}

.flag-icon {
  width: 48px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
}

.language-option span {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

/* ========== LOADER ========== */
.auth-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 10001;
}

.loader-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.auth-loader p {
  color: white;
  font-size: 16px;
  font-weight: 600;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 480px) {
  .auth-card {
    padding: 32px 24px;
    width: 95%;
  }

  .auth-title {
    font-size: 28px;
    margin-bottom: 24px;
  }

  .language-options {
    gap: 12px;
  }

  .language-option {
    min-width: 80px;
    padding: 12px;
  }

  .flag-icon {
    width: 40px;
    height: 28px;
  }
}

#userSettingsScreen .settings-input {
  width: 20vh;
  padding: 10px 12px;
  border: 1px solid var(--gray-300);
  border-radius: 20px;
  font-size: 14px;
  background: var(--bg-primary);
  color: var(--text-dark);
  margin-top: 8px;
}

#userSettingsScreen .settings-input:focus {
  outline: none;
  border-color: var(--orange);
}

/* Email display (non modificabile) */
#userEmailDisplay {
  margin: 0;
  padding: 8px 0;
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}

/* NO-ADS option quando è attivo */
#noAdsOption.active {
  background: rgba(52, 199, 89, 0.1);
}

#noAdsOption.active #noAdsLabel {
  color: var(--success);
}

#noAdsOption.active #noAdsDesc {
  color: var(--success);
}

#noAdsOption.active #upgradeNoAdsBtn {
  background: var(--success);
  color: #ffffff;
  cursor: default;
  pointer-events: none;
}

.adsbygoogle {
  display: block;
  width: 100%;
  min-height: 90px;
  background: rgb(51, 51, 51);
  border-radius: 8px;
}

/* Loading state per ads */
.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: 12px;
  font-weight: 500;
}