/* =============================================================================
           VANILLA.HTML ANIMATIONS & UTILITIES
           ============================================================================= */

            body {
                user-select: none;
                -webkit-tap-highlight-color: transparent;
            }

            /* Glass Effects */
            .glass-panel {
                background: rgba(255, 255, 255, 0.8);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
            }

            .glass-dark {
                background: rgba(15, 23, 42, 0.8);
                backdrop-filter: blur(16px);
                -webkit-backdrop-filter: blur(16px);
            }

            /* Transitions */
            .fade-enter {
                opacity: 0;
            }

            .fade-enter-active {
                opacity: 1;
                transition: opacity 500ms ease;
            }

            .fade-exit {
                opacity: 1;
            }

            .fade-exit-active {
                opacity: 0;
                transition: opacity 500ms ease;
            }

            .slide-up {
                animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            }

            @keyframes slideUp {
                from {
                    transform: translateY(100%);
                    opacity: 0;
                }

                to {
                    transform: translateY(0);
                    opacity: 1;
                }
            }

            /* Range Input Styling */
            input[type="range"] {
                -webkit-appearance: none;
                background: transparent;
            }

            input[type="range"]::-webkit-slider-thumb {
                -webkit-appearance: none;
                height: 48px;
                width: 48px;
                background: transparent;
                cursor: pointer;
            }

            input[type="range"]::-moz-range-thumb {
                height: 48px;
                width: 48px;
                background: transparent;
                cursor: pointer;
                border: none;
            }

            /* =============================================================================
           UNITY WEBGL TEMPLATE - AR JEWELRY TRY-ON STYLES
           ============================================================================= */

            /* Base Variables */
            :root {
                --primary-color: #ff0000;
                --secondary-color: #9d1f2f;
                --accent-color: #e85566;
                --gold-accent: #d4af37;
                --silver-accent: #c0c0c0;
                --text-primary: #2c2c2c;
                --text-secondary: #666666;
                --text-muted: #999999;
                --bg-overlay-light: rgba(0, 0, 0, 0.8);
                --bg-overlay-heavy: rgba(0, 0, 0, 0.9);
                --border-light: rgba(255, 255, 255, 0.2);
                --border-medium: rgba(255, 255, 255, 0.3);
                --text-primary: white;
                --font-main: "Inter", sans-serif;
                --border-radius: 8px;
                --transition-fast: all 0.2s ease;
                --z-overlay: 1001;
            }

            /* Rotatable wrapper for canvas and video - smooth rotation animation */
            .rotatable-wrapper {
                transition: transform 0.5s ease-in-out;
                transform-origin: center center;
                width: 100%;
                height: 100%;
            }

            #rotatable-wrapper {
                position: relative;
            }

            #video-rotatable-wrapper {
                position: absolute;
                top: 0;
                left: 0;
                pointer-events: none;
            }

            #hud-vertical-slider {
                position: absolute;
                left: -55px;
                top: 50%;
                transform: translateY(-50%);
                z-index: var(--z-overlay);
                display: flex;
                align-items: center;
                justify-content: center;
                height: 50vh;
                pointer-events: auto;
            }

            /* Vertical slider container on the left center */
            .hud-left-slider {
                position: absolute;
                left: 4px;
                top: 50%;
                transform: translateY(-50%);
                z-index: var(--z-overlay);
                display: flex;
                align-items: center;
                justify-content: center;
                height: 50vh;
                pointer-events: auto;
            }

            /* Style the range input as a vertical slider */
            .hud-left-slider input[type="range"] {
                -webkit-appearance: none;
                appearance: none;
                width: 200px; /* width is used before rotation */
                height: 28px;
                background: transparent;
                transform: rotate(-90deg); /* make it vertical */
                cursor: pointer;
            }

            /* Track */
            .hud-left-slider input[type="range"]::-webkit-slider-runnable-track {
                height: 6px;
                background: var(--border-medium);
                border-radius: 6px;
            }
            .hud-left-slider input[type="range"]::-moz-range-track {
                height: 6px;
                background: var(--border-medium);
                border-radius: 6px;
            }

            /* Thumb */
            .hud-left-slider input[type="range"]::-webkit-slider-thumb {
                -webkit-appearance: none;
                appearance: none;
                width: 18px;
                height: 18px;
                border-radius: 50%;
                background: var(--primary-color);
                border: 2px solid var(--gold-accent);
                margin-top: -6px; /* align with track */
                transition: var(--transition-fast);
            }
            .hud-left-slider input[type="range"]::-webkit-slider-thumb:active {
                transform: scale(1.05);
            }
            .hud-left-slider input[type="range"]::-moz-range-thumb {
                width: 18px;
                height: 18px;
                border-radius: 50%;
                background: var(--primary-color);
                border: 2px solid var(--gold-accent);
                transition: var(--transition-fast);
            }

            /* ============================================================================
           CALIBRATION CONTROLS STYLING (từ vanilla.html)
           ============================================================================ */

            /* Utilities */
            .glass-panel {
                background: rgba(255, 255, 255, 0.8);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
            }

            .glass-dark {
                background: rgba(15, 23, 42, 0.8);
                backdrop-filter: blur(16px);
                -webkit-backdrop-filter: blur(16px);
            }

            /* Transitions */
            .fade-enter {
                opacity: 0;
            }

            .fade-enter-active {
                opacity: 1;
                transition: opacity 500ms ease;
            }

            .fade-exit {
                opacity: 1;
            }

            .fade-exit-active {
                opacity: 0;
                transition: opacity 500ms ease;
            }

            .slide-up {
                animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            }

            @keyframes slideUp {
                from {
                    transform: translateY(100%);
                    opacity: 0;
                }

                to {
                    transform: translateY(0);
                    opacity: 1;
                }
            }

            /* Tailwind-like utilities for calibration UI */
            .absolute {
                position: absolute !important;
            }

            .relative {
                position: relative !important;
            }

            .inset-0 {
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }

            .z-40 {
                z-index: 40;
            }

            .z-50 {
                z-index: 50;
            }

            .flex {
                display: flex !important;
            }

            .flex-col {
                flex-direction: column;
            }

            .items-center {
                align-items: center;
            }

            .justify-center {
                justify-content: center;
            }

            .gap-2 {
                gap: 0.5rem;
            }

            .gap-3 {
                gap: 0.75rem;
            }

            .gap-4 {
                gap: 1rem;
            }

            .gap-6 {
                gap: 1.5rem;
            }

            .rounded-full {
                border-radius: 9999px;
            }

            .rounded-lg {
                border-radius: 0.5rem;
            }

            .rounded-2xl {
                border-radius: 1rem;
            }

            .border {
                border-width: 1px;
            }

            .border-t {
                border-top-width: 1px;
            }

            .border-l {
                border-left-width: 1px;
            }

            .border-r {
                border-right-width: 1px;
            }

            .border-b {
                border-bottom-width: 1px;
            }

            .w-full {
                width: 100%;
            }

            .h-full {
                height: 100%;
            }

            .w-12 {
                width: 3rem;
            }

            .h-12 {
                height: 3rem;
            }

            .w-10 {
                width: 2.5rem;
            }

            .h-10 {
                height: 2.5rem;
            }

            .w-16 {
                width: 4rem;
            }

            .h-16 {
                height: 4rem;
            }

            .w-4 {
                width: 1rem;
            }

            .h-4 {
                height: 1rem;
            }

            .w-6 {
                width: 1.5rem;
            }

            .h-6 {
                height: 1.5rem;
            }

            .w-7 {
                width: 1.75rem;
            }

            .h-7 {
                height: 1.75rem;
            }

            .w-3 {
                width: 0.75rem;
            }

            .h-3 {
                height: 0.75rem;
            }

            .p-8 {
                padding: 2rem;
            }

            .px-8 {
                padding-left: 2rem;
                padding-right: 2rem;
            }

            .py-3 {
                padding-top: 0.75rem;
                padding-bottom: 0.75rem;
            }

            .px-10 {
                padding-left: 2.5rem;
                padding-right: 2.5rem;
            }

            .mb-1 {
                margin-bottom: 0.25rem;
            }

            .mb-4 {
                margin-bottom: 1rem;
            }

            .mb-6 {
                margin-bottom: 1.5rem;
            }

            .mb-10 {
                margin-bottom: 2.5rem;
            }

            .mt-6 {
                margin-top: 1.5rem;
            }

            .mt-8 {
                margin-top: 2rem;
            }

            .pt-16 {
                padding-top: 4rem;
            }

            .pb-12 {
                padding-bottom: 3rem;
            }

            .text-center {
                text-align: center;
            }

            .text-lg {
                font-size: 1.125rem;
                line-height: 1.75rem;
            }

            .text-xs {
                font-size: 0.75rem;
                line-height: 1rem;
            }

            .font-serif {
                font-family: "Inter", sans-serif;
            }

            .font-sans {
                font-family: "Inter", sans-serif;
            }

            .font-medium {
                font-weight: 500;
            }

            .font-semibold {
                font-weight: 600;
            }

            .uppercase {
                text-transform: uppercase;
            }

            .shadow-sm {
                box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
            }

            .shadow-lg {
                box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
            }

            .shadow-2xl {
                box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
            }

            .transition-all {
                transition-property: all;
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                transition-duration: 150ms;
            }

            .transition-colors {
                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                transition-duration: 150ms;
            }

            .duration-75 {
                transition-duration: 75ms;
            }

            .duration-300 {
                transition-duration: 300ms;
            }

            .duration-500 {
                transition-duration: 500ms;
            }

            .ease-out {
                transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
            }

            .border-white\/10 {
                border-color: rgba(255, 255, 255, 0.1);
            }

            .border-white\/20 {
                border-color: rgba(255, 255, 255, 0.2);
            }

            .border-white\/60 {
                border-color: rgba(255, 255, 255, 0.6);
            }

            .bg-white\/5 {
                background-color: rgba(255, 255, 255, 0.05);
            }

            .bg-white\/10 {
                background-color: rgba(255, 255, 255, 0.1);
            }

            .bg-white\/60 {
                background-color: rgba(255, 255, 255, 0.6);
            }

            .bg-white\/80 {
                background-color: rgba(255, 255, 255, 0.8);
            }

            .bg-white\/90 {
                background-color: rgba(255, 255, 255, 0.9);
            }

            .bg-white {
                background-color: rgb(255, 255, 255);
            }

            .backdrop-blur-md {
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
            }

            .backdrop-blur-xl {
                backdrop-filter: blur(24px);
                -webkit-backdrop-filter: blur(24px);
            }

            .text-brand-500 {
                color: var(--primary-color);
            }

            .text-brand-600 {
                color: var(--secondary-color);
            }

            .text-gray-300 {
                color: rgb(209, 213, 219);
            }

            .text-gray-400 {
                color: rgb(156, 163, 175);
            }

            .text-gray-600 {
                color: rgb(75, 85, 99);
            }

            .text-gray-700 {
                color: rgb(55, 65, 81);
            }

            .text-gray-800 {
                color: rgb(31, 41, 55);
            }

            .text-gray-900 {
                color: rgb(17, 24, 39);
            }

            .text-white {
                color: rgb(255, 255, 255);
            }

            .bg-brand-50 {
                background-color: #fee;
            }

            .bg-brand-100 {
                background-color: #fdd;
            }

            .bg-brand-400 {
                background-color: var(--primary-color);
            }

            .bg-brand-500 {
                background-color: var(--primary-color);
            }

            .bg-slate-900\/85 {
                background-color: rgba(15, 23, 42, 0.85);
            }

            .border-brand-100 {
                border-color: #fdd;
            }

            .border-brand-200 {
                border-color: #fcc;
            }

            .border-brand-300 {
                border-color: #fbb;
            }

            .border-brand-400 {
                border-color: var(--primary-color);
            }

            .border-gray-200 {
                border-color: rgb(229, 231, 235);
            }

            .hover\:bg-white:hover {
                background-color: rgb(255, 255, 255);
            }

            .hover\:bg-white\/10:hover {
                background-color: rgba(255, 255, 255, 0.1);
            }

            .hover\:text-white:hover {
                color: rgb(255, 255, 255);
            }

            .hover\:text-gray-900:hover {
                color: rgb(17, 24, 39);
            }

            .hover\:text-brand-600:hover {
                color: var(--secondary-color);
            }

            .hover\:shadow-lg:hover {
                box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
            }

            .hover\:shadow-md:hover {
                box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            }

            .hover\:border-brand-300:hover {
                border-color: #fbb;
            }

            .group:hover .group-hover\:text-brand-500 {
                color: var(--primary-color);
            }

            .group:hover .group-hover\:text-brand-600 {
                color: var(--secondary-color);
            }

            .group:hover .group-hover\:translate-x-1 {
                transform: translateX(0.25rem);
            }

            .hidden {
                display: none !important;
            }

            .opacity-0 {
                opacity: 0;
            }

            .opacity-100 {
                opacity: 1;
            }

            .-translate-y-4 {
                transform: translateY(-1rem);
            }

            .translate-y-0 {
                transform: translateY(0);
            }

            .pointer-events-none {
                pointer-events: none;
            }

            .origin-top-left {
                transform-origin: top left;
            }

            .items-start {
                align-items: flex-start;
            }

            .top-8 {
                top: 2rem;
            }

            .left-8 {
                left: 2rem;
            }

            .bottom-0 {
                bottom: 0;
            }

            .left-0 {
                left: 0;
            }

            .cursor-pointer {
                cursor: pointer;
            }

            .select-none {
                user-select: none;
            }

            .touch-none {
                touch-action: none;
            }

            .max-w-sm {
                max-width: 24rem;
            }

            .max-w-md {
                max-width: 28rem;
            }

            .max-w-\[260px\] {
                max-width: 260px;
            }

            .min-h-\[180px\] {
                min-height: 180px;
            }

            .tracking-\[0\.2em\] {
                letter-spacing: 0.2em;
            }

            .tracking-\[0\.25em\] {
                letter-spacing: 0.25em;
            }

            .tracking-\[0\.3em\] {
                letter-spacing: 0.3em;
            }

            .tracking-wider {
                letter-spacing: 0.05em;
            }

            .tracking-wide {
                letter-spacing: 0.025em;
            }

            .leading-relaxed {
                line-height: 1.625;
            }

            .drop-shadow-\[0_2px_10px_rgba\(0\,0\,0\,0\.5\)\] {
                filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
            }

            .drop-shadow-md {
                filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
            }

            .shadow-\[0_10px_40px_rgba\(0\,0\,0\,0\.1\)\] {
                box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
            }

            .shadow-\[0_0_8px_rgba\(255\,0\,0\,0\.6\)\] {
                box-shadow: 0 0 8px rgba(255, 0, 0, 0.6);
            }

            .shadow-\[0_0_10px_rgba\(255\,0\,0\,0\.8\)\] {
                box-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
            }

            .border-2 {
                border-width: 2px;
            }

            .transform {
                transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
                    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
            }

            .-translate-x-1\/2 {
                transform: translateX(-50%);
            }

            .rotate-45 {
                transform: rotate(45deg);
            }

            .flex-1 {
                flex: 1 1 0%;
            }

            .w-3\.5 {
                width: 0.875rem;
            }

            .h-3\.5 {
                height: 0.875rem;
            }

            .h-\[2px\] {
                height: 2px;
            }

            .w-8 {
                width: 2rem;
            }

            .h-0\.5 {
                height: 0.125rem;
            }

            .overflow-hidden {
                overflow: hidden;
            }

            .text-left {
                text-align: left;
            }

            .font-normal {
                font-weight: 400;
            }

            /* =============================================================================
           PHOTO BOOTH MODAL STYLES
           ============================================================================= */
            .photo-booth-modal {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                background: rgba(0, 0, 0, 0.9);
                z-index: 9999;
                display: flex;
                justify-content: center;
                align-items: center;
                animation: fadeIn 0.3s ease;
            }

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

            .photobooth-container {
                background: transparent;
                padding: 0;
                box-shadow: none;
                max-width: 90%;
                width: 90%;
                max-width: 320px;
                max-height: 90vh;
                overflow-y: visible;
                text-align: center;
                position: relative;
                animation: slideUp 0.4s ease;
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            /* Responsive sizing for different devices */
            @media (min-width: 480px) {
                .photobooth-container {
                    max-width: 400px;
                }
            }

            @media (min-width: 768px) {
                .photobooth-container {
                    max-width: 500px;
                }
            }

            @media (min-width: 1024px) {
                .photobooth-container {
                    max-width: 600px;
                }
            }

            @media (min-width: 1440px) {
                .photobooth-container {
                    max-width: 700px;
                }
            }

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

            .photobooth-frame {
                position: relative;
                background: #fff;
                padding: 16px;
                padding-bottom: 60px;
                box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
                transform: rotate(-2deg);
                transition: transform 0.3s ease;
                width: 100%;
                box-sizing: border-box;
            }

            /* Adjust padding for larger screens */
            @media (min-width: 768px) {
                .photobooth-frame {
                    padding: 24px;
                    padding-bottom: 70px;
                }
            }

            @media (min-width: 1024px) {
                .photobooth-frame {
                    padding: 32px;
                    padding-bottom: 80px;
                }
            }

            .photobooth-frame:hover {
                transform: rotate(0deg) scale(1.02);
                z-index: 10;
            }

            .screenshot-preview {
                width: 100%;
                height: auto;
                display: block;
                margin-top: 0;
                background: #f0f0f0;
                box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05);
                -webkit-touch-callout: default;
                max-width: 100%;
                object-fit: contain;
            }

            .result-actions {
                display: flex;
                justify-content: center;
                margin-top: 24px;
                width: 100%;
            }

            .btn-action {
                width: auto;
                min-width: 120px;
                padding: 10px 24px;
                border: none;
                background: #1877f2;
                color: white;
                font-family: "Inter", sans-serif;
                text-transform: uppercase;
                letter-spacing: 1px;
                font-size: 12px;
                font-weight: 700;
                cursor: pointer;
                transition: all 0.2s ease;
                border-radius: 50px;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
            }

            /* Larger button on desktop */
            @media (min-width: 768px) {
                .btn-action {
                    min-width: 150px;
                    padding: 12px 32px;
                    font-size: 14px;
                }
            }

            .btn-action svg {
                width: 16px;
                height: 16px;
                fill: currentColor;
            }

            .btn-action:active {
                transform: scale(0.95);
            }

            .save-hint {
                position: absolute;
                bottom: 15px;
                left: 0;
                width: 100%;
                text-align: center;
                font-size: 12px;
                color: #999;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 4px;
                margin-top: 0;
                text-shadow: none;
            }

            .save-hint svg {
                width: 14px;
                height: 14px;
                fill: #999;
                filter: none;
            }

            /* Larger hint text on desktop */
            @media (min-width: 768px) {
                .save-hint {
                    font-size: 14px;
                    bottom: 20px;
                }

                .save-hint svg {
                    width: 16px;
                    height: 16px;
                }
            }

            .close-btn {
                position: absolute;
                top: -10px;
                right: -10px;
                color: #333;
                font-size: 20px;
                line-height: 1;
                cursor: pointer;
                background: white;
                border: none;
                border-radius: 50%;
                width: 36px;
                height: 36px;
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 20;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
                transition: transform 0.2s;
            }

            /* Larger close button on desktop */
            @media (min-width: 768px) {
                .close-btn {
                    width: 44px;
                    height: 44px;
                    font-size: 24px;
                    top: -15px;
                    right: -15px;
                }
            }

            .close-btn:active {
                transform: scale(0.9);
            }

            /* Loading Notice Text */
            .loading-notice {
                font-size: 0.75rem;
                font-weight: 400;
                color: rgb(101 101 101 / 85%);
                margin-top: 1.5rem;
                line-height: 1.5;
                text-align: center;
                padding: 0 1rem;
                max-width: 600px;
                margin-left: auto;
                margin-right: auto;
                /* margin-top: auto; */
                position: fixed;
                bottom: 10px;
                font-style: italic;
            }

            @media (max-width: 768px) {
                .loading-notice {
                    font-size: 0.7rem;
                    padding: 0 0.75rem;
                    margin-top: 1rem;
                }
            }