body {
                margin: 0;
                background-color: #121212;
                color: #fff;
                font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
                display: flex;
                flex-direction: column;
                align-items: center;
                height: 100vh;
                overflow: hidden;
            }
            #nprogress .bar {
                background: #cd7a7b !important;
                height: 3px !important;
            }
            #nprogress .spinner-icon {
                border-top-color: #cd7a7b !important;
                border-left-color: #cd7a7b !important;
            }
            .controls {
                padding: 15px 20px;
                background: #1e1e1e;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 30px;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
                z-index: 10;
            }
            .control-group {
                display: flex;
                align-items: center;
                gap: 10px;
            }
            .custom-select {
                position: relative;
                width: 200px;
                user-select: none;
            }
            .select-trigger {
                background: #333;
                padding: 10px 15px;
                border-radius: 6px;
                cursor: pointer;
                border: 1px solid #444;
                display: flex;
                justify-content: space-between;
                align-items: center;
                transition: all 1s ease;
            }
            .select-trigger:hover {
                background: #444;
                border-color: #555;
            }
            .select-trigger::after {
                content: "▼";
                font-size: 10px;
                transition: transform 1.2s;
            }
            .custom-select.active .select-trigger::after {
                transform: rotate(180deg);
            }
            .options-menu {
                position: absolute;
                top: calc(100% + 8px);
                left: 0;
                width: 100%;
                background: #252525;
                border-radius: 6px;
                border: 1px solid #444;
                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
                overflow: hidden;
                opacity: 0;
                visibility: hidden;
                transform: translateY(-15px) scale(0.95);
                transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
                z-index: 999;
            }
            .custom-select.active .options-menu {
                opacity: 1;
                visibility: visible;
                transform: translateY(0) scale(1);
            }
            .option {
                padding: 10px 15px;
                cursor: pointer;
                transition: background 0.7s;
            }
            .option:hover {
                background: #3d3d3d;
                color: #cd7a7b;
            }
            #viewer-container {
                flex-grow: 1;
                width: 100%;
                cursor: grab;
                position: relative;
            }
            #viewer-container:active {
                cursor: grabbing;
            }
            .info {
                position: absolute;
                bottom: 20px;
                right: 20px;
                background: rgba(0, 0, 0, 0.7);
                padding: 8px 15px;
                border-radius: 20px;
                font-size: 13px;
                pointer-events: none;
            }
            .back-btn {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 8px 15px;
                background: #333;
                color: #fff;
                text-decoration: none;
                border-radius: 6px;
                font-size: 14px;
                transition: all 1s ease;
                border: 1px solid #444;
            }
            .back-btn:hover {
                background: #c0392b;
                border-color: #e74c3c;
                transform: translateX(-3px);
            }
            .material-spinner {
                position: fixed;
                top: 15px;
                right: 15px;
                z-index: 9999;
                opacity: 1;
                visibility: visible;
                pointer-events: none;
                transition:
                    opacity 0.9s ease,
                    visibility 0.9s ease;
            }
            #nprogress {
                transition: opacity 0.9s linear !important;
            }
            .material-spinner.hidden {
                opacity: 0;
                visibility: hidden;
            }
            .material-spinner svg {
                animation: rotate-svg 2s linear infinite;
                width: 30px;
                height: 30px;
            }
            .material-spinner .path {
                stroke: #00a2ff;
                stroke-linecap: round;
                animation: dash-svg 1.5s ease-in-out infinite;
            }
            @keyframes rotate-svg {
                100% {
                    transform: rotate(360deg);
                }
            }
            @keyframes dash-svg {
                0% {
                    stroke-dasharray: 1, 150;
                    stroke-dashoffset: 0;
                }
                50% {
                    stroke-dasharray: 90, 150;
                    stroke-dashoffset: -35;
                }
                100% {
                    stroke-dasharray: 90, 150;
                    stroke-dashoffset: -124;
                }
            }