/* Touch zones */
        :root {
            --touch-zone-opacity: 0;
            --sidebar-width: 280px;
        }
        
        body.is-fullscreen #viewer-container::before {
            content: '';
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            width: 20%;
            background: rgba(59, 130, 246, 0.2);
            border-right: 1px dashed rgba(59, 130, 246, 0.5);
            pointer-events: none;
            z-index: 40;
            opacity: var(--touch-zone-opacity);
            transition: opacity 0.2s;
        }

        body.is-fullscreen #viewer-container::after {
            content: '';
            position: fixed;
            top: 0;
            bottom: 0;
            right: 0;
            width: 20%;
            background: rgba(59, 130, 246, 0.2);
            border-left: 1px dashed rgba(59, 130, 246, 0.5);
            pointer-events: none;
            z-index: 40;
            opacity: var(--touch-zone-opacity);
            transition: opacity 0.2s;
        }

        /* Base configuration and utilities */

        /* Mobile-friendly viewport height */
        body {
            height: 100dvh;
            width: 100vw;
            overflow: hidden;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            touch-action: none;
            /* Prevent default browser pinch-zoom to allow custom canvas zooming */
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

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

        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        /* Viewer & Canvas */
        #viewer-container {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 10;
            overflow: auto;
            display: block;
            box-sizing: border-box;
            overflow-anchor: none;
            -webkit-overflow-scrolling: touch;
            background-color: transparent;
        }

        #canvas-wrapper {
            position: relative;
            display: block;
            min-width: 100%;
            min-height: 100%;
        }

        #pdf-canvas {
            box-shadow: 0 4px 25px rgba(0, 0, 0, 0.15);
            background-color: white;
            transform-origin: top left;
            position: absolute;
            margin: 0;
            padding: 0;
            max-width: none !important;
            max-height: none !important;
            transition: none;
        }

        /* Tool Button Active State */
        .tool-btn {
            transition: all 0.2s;
        }

        .tool-btn.active {
            background-color: #eff6ff;
            color: #2563eb;
            border-color: #bfdbfe;
        }

        .tool-btn.active-ocr {
            background-color: #ecfdf5;
            color: #10b981;
            border-color: #a7f3d0;
        }

        /* Text Editor Overlay */
        #text-editor {
            position: absolute;
            background: transparent;
            border: 2px dashed #2563eb;
            font-family: sans-serif;
            padding: 2px;
            resize: none;
            overflow: hidden;
            z-index: 10;
            line-height: 1.2;
            outline: none;
        }

        /* Sidebar styles & Text Selection Prevention for iPad */
        #pdf-list li {
            -webkit-user-select: none;
            user-select: none;
            -webkit-touch-callout: none;
        }

        #pdf-list li.sortable-ghost {
            opacity: 0.4;
            background: #e2e8f0;
        }

        #pdf-list li.sortable-drag {
            cursor: grabbing !important;
        }

        /* Hide native file inputs */
        .file-input-wrapper input[type="file"] {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }

        /* Mobile & Tablet Layout Handling */
        #menu-toggle {
            display: none;
        }

        #sidebar {
            width: var(--sidebar-width);
            transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
        }

        #sidebar-overlay {
            display: none;
        }

        @media (max-width: 1024px) {
            body.has-pdfs #sidebar {
                position: fixed;
                top: 0;
                left: 0;
                height: 100dvh;
                z-index: 50;
                transform: translateX(-100%);
                box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);
                visibility: hidden;
                width: 320px;
                max-width: 85vw;
            }

            body.has-pdfs.sidebar-open #sidebar {
                transform: translateX(0);
                visibility: visible;
            }

            body.has-pdfs.sidebar-open #sidebar-overlay {
                display: block;
            }

            body:not(.has-pdfs) #sidebar {
                width: 100%;
                max-width: 420px;
                margin: 0 auto;
                border-left: 1px solid #e2e8f0;
                box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
            }

            body:not(.has-pdfs) #main-content {
                display: none !important;
            }

            body.has-pdfs #menu-toggle {
                display: block;
            }

            .desktop-only {
                display: none !important;
            }
        }

        /* Fullscreen Mode Styles */
        body.is-fullscreen #sidebar,
        body.is-fullscreen #menu-toggle {
            display: none !important;
        }

        body.is-fullscreen header {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 45;
            transform: translateY(-100%);
            transition: transform 0.3s ease-in-out;
        }

        body.is-fullscreen.show-tools header {
            transform: translateY(0);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        body.is-fullscreen.show-tools #tuner-panel,
        body.is-fullscreen.show-tools #floating-clock,
        body.is-fullscreen.show-tools #hidden-page-warning,
        body.is-fullscreen.show-tools #visual-metronome {
            margin-top: 115px;
        }

        #tuner-panel,
        #floating-clock,
        #hidden-page-warning {
            transition: margin-top 0.3s ease-in-out;
        }

        body.is-fullscreen #canvas-wrapper {
            padding: 10px;
        }

        /* Interface Themes */
        body.theme-dark {
            color: #f1f5f9 !important;
        }

        body.theme-dark,
        body.theme-dark .bg-white,
        body.theme-dark .bg-slate-50,
        body.theme-dark .bg-slate-100,
        body.theme-dark .bg-slate-200 {
            background-color: #1e293b !important;
            border-color: #334155 !important;
        }

        body.theme-dark #main-content {
            background-color: #0f172a !important;
        }

        body.theme-dark .text-slate-800,
        body.theme-dark .text-slate-700,
        body.theme-dark .text-slate-600 {
            color: #f1f5f9 !important;
        }

        body.theme-dark .text-slate-500,
        body.theme-dark .text-slate-400 {
            color: #94a3b8 !important;
        }

        body.theme-dark #pdf-canvas {
            filter: invert(1) hue-rotate(180deg) brightness(85%);
        }

        body.theme-dark .hover\:bg-slate-100:hover,
        body.theme-dark .hover\:bg-slate-50:hover,
        body.theme-dark .hover\:bg-white:hover,
        body.theme-dark .hover\:bg-slate-200:hover {
            background-color: #334155 !important;
        }

        body.theme-dark input:not([type="color"]):not([type="range"]):not([type="checkbox"]),
        body.theme-dark select,
        body.theme-dark textarea {
            background-color: #0f172a !important;
            color: #f1f5f9 !important;
            border-color: #475569 !important;
        }

        body.theme-dark .border-slate-200,
        body.theme-dark .border-slate-300,
        body.theme-dark .border-slate-100 {
            border-color: #334155 !important;
        }

        body.theme-dark .tool-btn.active {
            background-color: #1e3a8a !important;
            color: #bfdbfe !important;
            border-color: #3b82f6 !important;
        }

        body.theme-dark .tool-btn.active-ocr {
            background-color: #064e3b !important;
            color: #a7f3d0 !important;
            border-color: #10b981 !important;
        }

        body.theme-sepia {
            color: #433422 !important;
        }

        body.theme-sepia,
        body.theme-sepia .bg-white,
        body.theme-sepia .bg-slate-50,
        body.theme-sepia .bg-slate-100,
        body.theme-sepia .bg-slate-200 {
            background-color: #fbf6ec !important;
            border-color: #e4d8c0 !important;
        }

        body.theme-sepia #main-content {
            background-color: #f4ecd8 !important;
        }

        body.theme-sepia .text-slate-800,
        body.theme-sepia .text-slate-700,
        body.theme-sepia .text-slate-600 {
            color: #433422 !important;
        }

        body.theme-sepia .text-slate-500,
        body.theme-sepia .text-slate-400 {
            color: #786854 !important;
        }

        body.theme-sepia #pdf-canvas {
            filter: sepia(0.35) contrast(0.95) brightness(0.95);
        }

        body.theme-sepia .hover\:bg-slate-100:hover,
        body.theme-sepia .hover\:bg-slate-50:hover,
        body.theme-sepia .hover\:bg-white:hover,
        body.theme-sepia .hover\:bg-slate-200:hover {
            background-color: #e4d8c0 !important;
        }

        body.theme-sepia input:not([type="color"]):not([type="range"]):not([type="checkbox"]),
        body.theme-sepia select,
        body.theme-sepia textarea {
            background-color: #f4ecd8 !important;
            color: #433422 !important;
            border-color: #d1c0a5 !important;
        }

        body.theme-sepia .border-slate-200,
        body.theme-sepia .border-slate-300,
        body.theme-sepia .border-slate-100 {
            border-color: #e4d8c0 !important;
        }

        /* Dark mode specific button background fixes */
        body.theme-dark .bg-indigo-50,
        body.theme-dark .bg-red-50,
        body.theme-dark .bg-blue-50,
        body.theme-dark .bg-purple-50,
        body.theme-dark .bg-emerald-50,
        body.theme-dark .bg-amber-50 {
            background-color: #1e293b !important;
            border-color: #334155 !important;
        }

        body.theme-dark .hover\:bg-indigo-100:hover,
        body.theme-dark .hover\:bg-red-100:hover,
        body.theme-dark .hover\:bg-blue-100:hover,
        body.theme-dark .hover\:bg-purple-100:hover,
        body.theme-dark .hover\:bg-emerald-100:hover,
        body.theme-dark .hover\:bg-amber-100:hover {
            background-color: #334155 !important;
        }

        body.theme-dark .text-indigo-600,
        body.theme-dark .text-indigo-800 {
            color: #818cf8 !important;
        }

        body.theme-dark .text-red-500,
        body.theme-dark .text-red-700 {
            color: #f87171 !important;
        }

        body.theme-dark .text-blue-600,
        body.theme-dark .text-blue-800 {
            color: #60a5fa !important;
        }

        body.theme-dark .text-purple-600,
        body.theme-dark .text-purple-700 {
            color: #c084fc !important;
        }

        body.theme-dark .text-emerald-600,
        body.theme-dark .text-emerald-700 {
            color: #34d399 !important;
        }

        body.theme-dark .text-amber-600,
        body.theme-dark .text-amber-700 {
            color: #fbbf24 !important;
        }

        body.theme-sepia .bg-indigo-50,
        body.theme-sepia .bg-red-50,
        body.theme-sepia .bg-blue-50,
        body.theme-sepia .bg-purple-50,
        body.theme-sepia .bg-emerald-50,
        body.theme-sepia .bg-amber-50 {
            background-color: #fbf6ec !important;
            border-color: #e4d8c0 !important;
        }

        body.theme-sepia .hover\:bg-indigo-100:hover,
        body.theme-sepia .hover\:bg-red-100:hover,
        body.theme-sepia .hover\:bg-blue-100:hover,
        body.theme-sepia .hover\:bg-purple-100:hover,
        body.theme-sepia .hover\:bg-emerald-100:hover,
        body.theme-sepia .hover\:bg-amber-100:hover {
            background-color: #e4d8c0 !important;
        }

        /* Theme overrides for Toggle Switches */
        body.theme-dark input[type="checkbox"].peer:not(:checked)+div {
            background-color: #475569 !important;
        }

        body.theme-dark input[type="checkbox"].peer:checked+div {
            background-color: #3b82f6 !important;
        }

        body.theme-dark input[type="checkbox"].peer+div::after {
            background-color: #94a3b8 !important;
            border-color: #94a3b8 !important;
        }

        body.theme-dark input[type="checkbox"].peer:checked+div::after {
            background-color: #ffffff !important;
            border-color: #ffffff !important;
        }

        body.theme-sepia input[type="checkbox"].peer:not(:checked)+div {
            background-color: #d1c0a5 !important;
        }

        body.theme-sepia input[type="checkbox"].peer:checked+div {
            background-color: #3b82f6 !important;
        }

        body.theme-sepia input[type="checkbox"].peer+div::after {
            background-color: #fbf6ec !important;
            border-color: #d1c0a5 !important;
        }

        body.theme-sepia input[type="checkbox"].peer:checked+div::after {
            background-color: #ffffff !important;
            border-color: #ffffff !important;
        }

        /* --- ChordPro Syntax Highlighting Styles --- */
        .chordpro-sync {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-size: 0.875rem;
            line-height: 1.5;
            padding: 0.75rem;
            margin: 0;
            border: none;
            white-space: pre-wrap;
            word-wrap: break-word;
            tab-size: 4;
        }

        #chordProHighlight {
            color: #1e293b;
            -ms-overflow-style: none;
            scrollbar-width: none;
            overflow: hidden;
        }

        #chordProHighlight::-webkit-scrollbar {
            display: none;
        }

        #chordProTextarea {
            color: transparent !important;
            background: transparent !important;
            caret-color: #0f172a;
            overflow-y: auto;
        }

        .cp-directive {
            color: #059669;
            font-weight: bold;
        }

        .cp-chord {
            color: #2563eb;
            font-weight: bold;
        }

        body.theme-dark #chordProHighlight {
            color: #f1f5f9 !important;
        }

        body.theme-dark #chordProTextarea {
            caret-color: #f1f5f9;
        }

        body.theme-dark .cp-directive {
            color: #34d399;
        }

        body.theme-dark .cp-chord {
            color: #60a5fa;
        }

        body.theme-sepia #chordProHighlight {
            color: #433422 !important;
        }

        body.theme-sepia #chordProTextarea {
            caret-color: #433422;
        }

        /* Neon Glow logo animation */
        @keyframes neon-glow {

            0%,
            100% {
                filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.4)) hue-rotate(0deg);
            }

            33% {
                filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.8)) hue-rotate(25deg);
            }

            66% {
                filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.6)) hue-rotate(-20deg);
            }
        }

        .animate-neon-glow {
            animation: neon-glow 4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
            will-change: filter;
            display: inline-block;
        }