body { -webkit-tap-highlight-color: transparent; transition: background-color 0.4s ease, color 0.4s ease; }
        .app-ambient {
            background:
                linear-gradient(145deg, rgba(255, 119, 86, 0.30) 0%, rgba(255, 214, 94, 0.18) 32%, rgba(255, 255, 255, 0.86) 58%, rgba(46, 196, 182, 0.20) 100%),
                linear-gradient(24deg, rgba(17, 24, 39, 0.08) 0%, transparent 38%, rgba(244, 63, 94, 0.10) 72%, rgba(249, 115, 22, 0.18) 100%);
        }
        .app-ambient::after {
            content: '';
            position: absolute;
            inset: 0;
            opacity: 0.14;
            background-image: linear-gradient(rgba(15, 23, 42, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, 0.12) 1px, transparent 1px);
            background-size: 42px 42px;
            mask-image: linear-gradient(to bottom, black 0%, transparent 80%);
        }
        .btn-press { transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1); }
        .btn-press:active { transform: scale(0.94); }
        body.stage-fullscreen {
            overflow: hidden !important;
            overscroll-behavior: none;
        }
        body.stage-fullscreen #root {
            position: fixed;
            inset: 0;
            width: 100vw;
            height: 100dvh;
            max-width: none;
            overflow: hidden;
            z-index: 1;
        }
        .scrollbar-hide::-webkit-scrollbar { display: none; }
        .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
        
        .cifra-text { font-family: 'JetBrains Mono', monospace; line-height: 1.5em; letter-spacing: 0; overflow-x: auto; max-width: 100%; padding-top: 0.25em; }
        .cifra-line { display: block; break-inside: avoid; margin-bottom: 0.8rem; max-width: none; width: max-content; min-width: 100%; white-space: pre; word-break: normal; overflow-wrap: normal; }
        .cifra-line.has-chords { line-height: 3.2em; margin-top: 1.2em; }
        .cifra-line.has-chords:first-child { margin-top: 1.6em; }
        
        .chord-anchor { position: relative; display: inline; }
        .chord-absolute {
            position: absolute; bottom: 100%; left: 0; color: var(--chord-color, #ea580c); font-weight: 800; cursor: pointer; white-space: pre; 
            transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 10; user-select: none; text-shadow: 0 0 10px var(--chord-glow, rgba(234, 88, 12, 0.2));
            padding: 2px 4px; margin-left: -4px; border-radius: 6px;
        }
        .chord-absolute:hover { transform: translateY(-2px); }
        .chord-absolute:active, .chord-absolute.playing { transform: scale(1.15) translateY(-4px); color: var(--chord-active, #c2410c) !important; background: rgba(249, 115, 22, 0.15); text-shadow: none; }
        .chord-absolute::before { content: ''; position: absolute; top: -15px; bottom: -10px; left: -15px; right: -15px; z-index: 11; }
        .inline-chord { color: var(--chord-color, #ea580c); font-weight: 800; cursor: pointer; padding: 1px 3px; margin: 0 -3px; border-radius: 5px; }
        .inline-chord:hover, .inline-chord.playing { color: var(--chord-active, #c2410c); background: rgba(249, 115, 22, 0.12); }
        .empty-line { min-height: 1.5em; display: inline-block; width: 100%; }

        body.hide-chords .chord-absolute { display: none !important; }
        body.hide-chords .cifra-line.has-chords { line-height: 1.5em !important; margin-top: 0 !important; }
        body.hide-chords .cifra-line.chord-text-line { display: none !important; }
        body.hide-tabs .tab-line { display: none !important; }
        body.hide-tabs .song-block-wrapper:has(.cifra-text > .tab-line):not(:has(.cifra-text > .cifra-line:not(.tab-line))) { display: none !important; }

        .glass { background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.62); }
        .input-shell {
            background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78));
            border: 1px solid rgba(255, 255, 255, 0.82);
            box-shadow: 0 24px 80px rgba(15, 23, 42, 0.12), 0 18px 50px rgba(249, 115, 22, 0.16);
        }
        .hero-mark {
            background: linear-gradient(135deg, #ff7a45 0%, #f43f5e 52%, #7c3aed 100%);
            box-shadow: 0 18px 42px rgba(244, 63, 94, 0.36);
        }
        .cta-primary {
            background: linear-gradient(135deg, #111827 0%, #f43f5e 54%, #f97316 100%);
            color: #ffffff;
            box-shadow: 0 16px 32px rgba(244, 63, 94, 0.28), 0 8px 18px rgba(249, 115, 22, 0.20);
        }
        .cta-primary:disabled {
            background: #ffffff;
            color: #475569;
            border: 1px solid rgba(148, 163, 184, 0.32);
            box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
            opacity: 1;
        }
        .history-card {
            background: linear-gradient(135deg, #ffffff 0%, #fff7ed 48%, #ecfeff 100%);
            border: 1px solid rgba(251, 146, 60, 0.16);
            box-shadow: 0 18px 42px rgba(244, 63, 94, 0.12), 0 8px 18px rgba(20, 184, 166, 0.10);
        }
        .history-section {
            background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.34));
            border: 1px solid rgba(255,255,255,0.64);
            border-radius: 22px;
            padding: 14px;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 18px 44px rgba(15, 23, 42, 0.06);
        }
        .history-cover {
            background:
                radial-gradient(circle at 35% 30%, rgba(255,255,255,0.94), rgba(255,255,255,0.18) 34%, transparent 35%),
                linear-gradient(135deg, #fb7185 0%, #f97316 45%, #14b8a6 100%);
            box-shadow: 0 12px 24px rgba(244, 63, 94, 0.22);
        }
        .scroll-panel {
            background:
                linear-gradient(135deg, rgba(255, 119, 86, 0.18), rgba(20, 184, 166, 0.14)),
                rgba(255,255,255,0.72);
            border: 1px solid rgba(255,255,255,0.56);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            box-shadow: 0 24px 70px rgba(15, 23, 42, 0.20), 0 12px 36px rgba(249, 115, 22, 0.16);
        }
        .theme-dark .app-ambient {
            background:
                linear-gradient(145deg, rgba(244, 63, 94, 0.20) 0%, rgba(124, 58, 237, 0.18) 34%, rgba(2, 6, 23, 0.94) 62%, rgba(20, 184, 166, 0.12) 100%),
                linear-gradient(24deg, rgba(248, 250, 252, 0.05) 0%, transparent 48%, rgba(249, 115, 22, 0.12) 100%);
        }
        .theme-dark .input-shell, .theme-dark .history-card, .theme-dark .history-section {
            background: rgba(15, 23, 42, 0.82);
            border-color: rgba(255, 255, 255, 0.10);
        }
        .theme-dark .scroll-panel {
            background: linear-gradient(135deg, rgba(244, 63, 94, 0.18), rgba(20, 184, 166, 0.12)), rgba(15, 23, 42, 0.78);
            border-color: rgba(255,255,255,0.10);
        }
        .song-card-active-drag {
            transform: scale(1.025);
            border-color: rgba(249, 115, 22, 0.46) !important;
            box-shadow: 0 24px 58px rgba(15, 23, 42, 0.26), 0 10px 24px rgba(249, 115, 22, 0.18) !important;
            z-index: 30;
        }
        
        body.theme-light { background-color: #f8fafc; color: #0f172a; --chord-color: #ea580c; --chord-glow: rgba(234,88,12,0.15); --chord-active: #c2410c; }
        body.theme-dark { background-color: #020617; color: #f8fafc; --chord-color: #fb923c; --chord-glow: rgba(251,146,60,0.25); --chord-active: #fdba74; }
        body.theme-dark .glass { background: rgba(15, 23, 42, 0.75); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
        
        body.theme-sepia { background-color: #fdf6e3; color: #5b4636; --chord-color: #d97706; --chord-glow: rgba(217,119,6,0.1); --chord-active: #b45309; }
        body.theme-sepia .glass { background: rgba(253, 246, 227, 0.85); border: 1px solid rgba(211, 198, 170, 0.5); }
        body.theme-sepia .bg-white { background-color: #fdf6e3 !important; }
        body.theme-sepia .bg-gray-50 { background-color: #eee8d5 !important; }
        body.theme-sepia .bg-gray-100 { background-color: #e0d5ba !important; }
        body.theme-sepia .bg-gray-800, body.theme-sepia .bg-gray-900 { background-color: #4a382a !important; }
        body.theme-sepia .text-white, body.theme-sepia .text-gray-900 { color: #4a382a !important; }
        body.theme-sepia .text-gray-500, body.theme-sepia .text-gray-400 { color: #93a1a1 !important; }
        body.theme-sepia .border-gray-100, body.theme-sepia .border-gray-200, body.theme-sepia .border-gray-800 { border-color: #d3c6aa !important; }

        .premium-slider { -webkit-appearance: none; width: 100%; background: transparent; }
        .premium-slider::-webkit-slider-thumb { 
            -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; background: #f97316; 
            cursor: pointer; margin-top: -7px; box-shadow: 0 0 10px rgba(249, 115, 22, 0.4); border: 2px solid white;
        }
        .theme-dark .premium-slider::-webkit-slider-thumb { border-color: #0f172a; }
        .premium-slider::-webkit-slider-runnable-track { width: 100%; height: 6px; cursor: pointer; background: #e2e8f0; border-radius: 99px; }
        .theme-dark .premium-slider::-webkit-slider-runnable-track { background: #334155; }
        .theme-sepia .premium-slider::-webkit-slider-runnable-track { background: #d3c6aa; }

        .sortable-fallback-element {
            opacity: 1 !important; transform: scale(1.02) rotate(1deg) !important;
            box-shadow: 0 30px 60px -12px rgba(0,0,0,0.3) !important; cursor: grabbing !important; z-index: 9999 !important;
        }
        .theme-dark .sortable-fallback-element { box-shadow: 0 30px 60px -12px rgba(0,0,0,0.8) !important; }
        .sortable-chosen {
            transform: scale(1.015);
            box-shadow: 0 22px 50px rgba(15, 23, 42, 0.22) !important;
            border-color: rgba(249, 115, 22, 0.35) !important;
        }
        .sortable-dragging {
            opacity: 0.98 !important;
            transform: scale(1.02) rotate(0.35deg) !important;
            box-shadow: 0 30px 70px rgba(15, 23, 42, 0.28) !important;
            z-index: 9999 !important;
        }
        .sortable-ghost { opacity: 0.18 !important; background-color: var(--ghost-bg, #f1f5f9) !important; border: 2px dashed rgba(249, 115, 22, 0.35) !important; transform: scale(0.98); }
        .theme-dark .sortable-ghost { background-color: #1e293b !important; border-color: #334155 !important; }
        .theme-sepia .sortable-ghost { background-color: #eee8d5 !important; border-color: #d3c6aa !important; }