:root {
    --ui-background-color: #f0f0f0;
    --accent-color: #007bff;
    --app-height: 100vh;
    --qr-modal-bottom-offset: 0px;
    --swatch-width: 85px;
    --swatch-height: 40px;
    --initial-font-weight: 700;
    --initial-font-size: 1em;
    --initial-color: #999;
    --swatch-initial-padding: 3px;
    --model-viewer-gradient-top: #e6e6e6;
    --model-viewer-gradient-bottom: #fff;
    
    --side-padding: 30px;
    --mobile-side-padding: calc(var(--side-padding) / 2);
    
    --drag-handle-height: 24px;
    --panel-top: calc(var(--side-padding) + (var(--drag-handle-height) / 2) + 3px); 
    --panel-top-modal: 105px;
    --panel-top-mobile: calc(var(--mobile-side-padding) + var(--drag-handle-height) + 1px);
    
    --panel-padding: 12px;
    --panel-gap: 8px;
    --panel-indent: 24px; 
    
    --footer-vertical-padding: 20px;
    --button-text-font-size: 1em;
    --button-text-font-weight: 400;
    --button-padding-vertical: 10px;
    --button-padding-horizontal: 20px;
    --label-default-color: #000;
    --label-default-font-weight: 400;
    --label-selected-font-weight: 700;
    --model-fade-duration: 0.8s;
    --model-fade-delay: 0.1s;
    --initial-elements-fade-duration: 0.4s;
    
    --buttons-fade-in-delay: 0.2s;
    --footer-fade-duration: 0.4s;
    --footer-fade-start-delay: 0s;
    --stagger-delay-per-swatch: 0.08s;
    --swatch-display-start-offset: 0.1s;
    
    --modal-fade-duration: 0.3s;
    --modal-scale-duration: 0.3s;
}
html, body {
    height: 100%; margin: 0; padding: 0; overflow: hidden; line-height: 1.2em;
}
body {
    font-family: 'Source Sans 3', sans-serif;
    background-color: #e8e8e8;
    display: flex; justify-content: center; align-items: center; position: relative;
}
body.is-dragging { cursor: grabbing !important; }

.container {
    width: 100%; height: var(--app-height);
    max-width: 1920px; max-height: 1080px;
    display: flex; flex-direction: column;
    background-color: var(--ui-background-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    position: absolute; top: 0; left: 0;
}
.help-button-wrapper {
    position: absolute; top: var(--side-padding); left: var(--side-padding);
    z-index: 30; opacity: 0; pointer-events: none;
    transition: opacity var(--initial-elements-fade-duration) ease-out;
}
.help-icon {
    background-color: #cccccc; border-radius: 50%;
    width: 40px; height: 40px; display: flex; justify-content: center; align-items: center;
    font-size: 24px; font-weight: 600; color: #555555;
    cursor: pointer; user-select: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.model-viewer-area {
    flex-grow: 1; display: flex; justify-content: center; align-items: center;
    width: 100%;
    background: linear-gradient(to bottom, var(--model-viewer-gradient-top) 0%, var(--model-viewer-gradient-bottom) 100%);
    position: relative; overflow: hidden; z-index: 5;
}
.piano-viewer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%; 
    opacity: 0;
}
.send-to-mobile-wrapper {
    position: absolute; bottom: var(--side-padding); right: var(--side-padding);
    z-index: 30; opacity: 0; pointer-events: none;
    transition: opacity var(--initial-elements-fade-duration) ease-out; display: none;
}
.container.ui-loaded .help-button-wrapper,
.container.ui-loaded .send-to-mobile-wrapper {
    opacity: 1;
    pointer-events: auto;
    transition-delay: var(--buttons-fade-in-delay);
}
.model-options-panel {
    position: absolute; top: var(--panel-top); right: var(--side-padding);
    z-index: 30; background-color: rgba(255, 255, 255, 0.9);
    padding: var(--panel-padding); border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); width: max-content;
    font-size: 0.95em; color: #333; opacity: 0; pointer-events: none;
    will-change: transform;
    transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease, box-shadow 0.3s ease, opacity var(--initial-elements-fade-duration) ease-out;
}
.model-options-panel.panel-content-fade {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease-out !important;
}
.container.ui-loaded .model-options-panel {
    opacity: 1; pointer-events: auto; transition-delay: var(--buttons-fade-in-delay);
}
.model-options-panel .option-item { display: flex; flex-direction: column; } 
.model-options-panel .option-control { display: flex; align-items: center; gap: var(--panel-gap); white-space: normal; cursor: pointer; user-select: none; }
.model-options-panel input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; margin: 0; }
.model-options-panel .option-group,
.dim-unit-wrapper { 
    display: grid; grid-template-rows: 0fr; opacity: 0; margin-left: var(--panel-indent); 
    transition: grid-template-rows 0.3s ease, opacity 0.3s ease; 
}
.model-options-panel .option-group.is-visible,
.dim-unit-wrapper.is-visible { grid-template-rows: 1fr; opacity: 1; }
.model-options-panel .option-group-inner,
.dim-unit-inner { overflow: hidden; display: flex; padding-top: var(--panel-gap); } 
.model-options-panel .option-group-inner { flex-direction: column; gap: var(--panel-gap); }
.dim-unit-inner { flex-direction: row; gap: 15px; }
.model-options-panel .option-item.disabled { opacity: 0.5; pointer-events: none; }
.anim-section { margin-bottom: 0; }
.anim-group-title { font-weight: 600; color: #555; margin-bottom: var(--panel-gap); }
.anim-radio-group { display: flex; flex-direction: column; gap: var(--panel-gap); }
.anim-radio-label { display: flex; align-items: center; cursor: pointer; user-select: none; }
.anim-radio-label input[type="radio"],
.dim-radio-label input[type="radio"] {
    width: 16px; height: 16px; margin: 0 var(--panel-gap) 0 0; cursor: pointer; flex-shrink: 0; accent-color: var(--accent-color);
}
.drag-handle {
    position: absolute; top: calc(var(--drag-handle-height) * -1); left: 0;
    width: 100%; height: var(--drag-handle-height); background-color: rgba(255, 255, 255, 0.9);
    border-radius: 8px 8px 0 0; cursor: grab; display: flex; align-items: center;
    color: #888; font-size: 16px; touch-action: none; user-select: none; -webkit-user-select: none;
    transition: border-radius 0.3s ease, box-shadow 0.3s ease;
}
body.is-dragging .drag-handle { cursor: grabbing; }
.panel-content-wrapper {
    display: grid; grid-template-rows: 1fr; opacity: 1;
    transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease-in 0.1s;
}
.panel-content-inner {
    overflow: hidden; display: flex; flex-direction: column; gap: var(--panel-gap);
}
.model-options-panel.is-minimized .panel-content-wrapper {
    grid-template-rows: 0fr; opacity: 0;
    transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.1s ease-out 0s;
}
.model-options-panel.is-minimized {
    padding-top: 0; padding-bottom: 0; background-color: transparent; box-shadow: none; min-width: fit-content;
}
.model-options-panel.is-minimized .drag-handle { border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
.drag-handle-dots { flex-grow: 1; text-align: center; padding-left: 24px; white-space: nowrap; }
.minimize-toggle {
    width: 24px; height: 24px; display: flex; justify-content: center; align-items: center;
    cursor: pointer; font-weight: bold; font-family: monospace; color: #888;
    border-radius: 0 8px 0 0; transition: color 0.2s;
}
@media (hover: hover) { .minimize-toggle:hover { color: #333; } }
body.in-modal .model-options-panel { top: var(--panel-top-modal); }
.footer {
    width: 100%; height: auto; background-color: var(--ui-background-color);
    box-shadow: 0px 7px 10px 10px rgba(0, 0, 0, 0.2);
    position: relative; z-index: 101; flex-shrink: 0; opacity: 0;
    transition: opacity var(--footer-fade-duration) ease-in;
}
.container.ui-loaded .footer { opacity: 1; transition-delay: var(--footer-fade-start-delay); }
.footer-content-wrapper { width: 100%; padding: var(--footer-vertical-padding) 0; box-sizing: border-box; }
.color-swatches-container {
    display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;
    padding: 0 var(--side-padding); box-sizing: border-box; width: 100%;
}
.color-option {
    display: flex; flex-direction: column; align-items: center; cursor: pointer;
    opacity: 0; pointer-events: none; transition: opacity 0.4s ease-out; min-width: calc(var(--swatch-width) + 10px);
}
.container.ui-loaded .color-option { 
    opacity: 1; pointer-events: auto;
    transition-delay: calc(var(--footer-fade-start-delay) + var(--footer-fade-duration) + var(--swatch-display-start-offset) + var(--stagger-index, 0) * var(--stagger-delay-per-swatch)); 
}

/* ========================================= */
/* SWATCH STYLING (SATIN vs POLISHED)        */
/* ========================================= */
.color-box {
    width: var(--swatch-width); height: var(--swatch-height);
    border-radius: 5px; margin-bottom: 8px;
    display: flex; justify-content: flex-end; align-items: flex-end;
    padding: var(--swatch-initial-padding); box-sizing: border-box;
    transition: transform 0.1s ease-out; 
}
.color-option.selected .color-box { outline: 1.5px solid #aaa; outline-offset: 4px; }
.color-option:active .color-box { transform: translateY(2px); }

.shade {
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.15) 100%);
    background-blend-mode: overlay;
}
.swatch-flat {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 -2px 3px rgba(0, 0, 0, 0.3);
}
.swatch-wrap {
    position: relative; overflow: hidden; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); 
}
.swatch-bg { position: absolute; inset: 0; background: linear-gradient(135deg, #c2c2c2 0%, #8a8a8a 45%, #4d4d4d 100%); }
.swatch-bg-light { position: absolute; inset: 0; background: linear-gradient(135deg, #ffffff 0%, #eaeae7 45%, #d3d3cf 100%); }
.swatch-polish {
    position: absolute; inset: 0; border-top-left-radius: 55% 80%; 
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 -2px 3px rgba(0, 0, 0, 0.3);
}
.color-label {
    font-size: 14px; color: var(--label-default-color); text-align: center; font-weight: var(--label-default-font-weight); transition: font-weight 0.2s ease-in-out;
}
.color-option.selected .color-label { font-weight: var(--label-selected-font-weight); }
.color-initial {
    font-size: var(--initial-font-size); font-weight: var(--initial-font-weight);
    color: var(--initial-color); position: relative; z-index: 10;
}

.send-to-mobile-btn {
    background-color: #007bff; color: white; border: none; border-radius: 5px;
    font-size: var(--button-text-font-size); font-weight: var(--button-text-font-weight);
    font-family: inherit; cursor: pointer;
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); white-space: nowrap;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='white' xmlns:v='https://vecta.io/nano'%3e%3cpath d='M13.29 23v-2.46h2.46V23h-2.46zm-2.46-2.46v-6.08h2.46v6.08h-2.46zm9.71-4.12V12H23v4.42h-2.46zM18.08 12V9.54h2.46V12h-2.46zM3.46 14.46V12h2.46v2.46H3.46zM1 12V9.54h2.46V12H1zm11-8.54V1h2.46v2.46H12zM2.54 6.84h4.3v-4.3h-4.3v4.3zM1 8.37V1h7.37v7.37H1zm1.54 13.09h4.4v-4.3h-4.4v4.3zM1 23v-7.37h7.47V23H1zM17.16 6.84h4.3v-4.3h-4.3v4.3zm-1.53 1.53V1H23v7.37h-7.37zM18.08 23v-4.12h-2.46v-2.46h4.92v4.12H23V23h-4.92zm-4.79-8.54V12h4.79v2.46h-4.79zm-4.92 0V12H5.91V9.54h7.37V12h-2.46v2.46H8.36zm1.17-6.09V3.46H12v2.46h2.46v2.46H9.54zM3.79 5.58V3.79h1.79v1.79H3.79zm.09 14.54v-1.79h1.79v1.79H3.88zM18.42 5.58V3.79h1.79v1.79h-1.79z'/%3e%3c/svg%3e");
    background-repeat: no-repeat; background-size: 20px 20px; background-position: 12px 50%;
    padding: var(--button-padding-vertical) 20px var(--button-padding-vertical) 42px;
}
.send-to-mobile-btn:hover { background-color: #0056b3; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
.ar-button {
    position: absolute; bottom: var(--side-padding); right: var(--side-padding); z-index: 30;
    background-color: #007bff; color: white; border: none; border-radius: 5px;
    font-size: var(--button-text-font-size); font-weight: var(--button-text-font-weight); font-family: inherit; cursor: pointer;
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); white-space: nowrap;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='white' xmlns:v='https://vecta.io/nano'%3e%3cpath d='M3 4c0-.55.45-1 1-1h2V1H4a3.01 3.01 0 0 0-3 3v2h2V4zm17-1c.55 0 1 .45 1 1v2h2V4a3.01 3.01 0 0 0-3-3h-2v2h2zM4 21c-.55 0-1-.45-1-1v-2H1v2a3.01 3.01 0 0 0 3 3h2v-2H4zm16 0c.55 0 1-.45 1-1v-2h2v2a3.01 3.01 0 0 1-3 3h-2v-2h2zM18.25 7.6l-5.5-3.18a1.49 1.49 0 0 0-1.5 0L5.75 7.6c-.46.27-.75.76-.75 1.3v6.35c0 .54.29 1.03.75 1.3l5.5 3.18a1.49 1.49 0 0 0 1.5 0l5.5-3.18c.46-.27.75-.76.75-1.3V8.9c0-.54-.29-1.03-.75-1.3zM7 14.96v-4.62l4 2.32v4.61l-4-2.31zm5-4.03L8 8.61l4-2.31 4 2.31-4 2.32zm1 6.34v-4.61l4-2.32v4.62l-4 2.31z'/%3e%3c/svg%3e");
    background-repeat: no-repeat; background-size: 20px 20px; background-position: 12px 50%;
    padding: var(--button-padding-vertical) 20px var(--button-padding-vertical) 42px;
}
.ar-button:hover { background-color: #0056b3; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }

.dim-dot { display: none; }
.dim-label {
    background: #fff; border-radius: 4px; border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); color: #333;
    display: block; font-family: 'Source Sans 3', sans-serif; font-size: 13px; font-weight: 700;
    padding: 4px 8px; position: absolute; width: max-content;
    transform: translate3d(-50%, -50%, 0); pointer-events: none; transition: opacity 0.3s ease-in-out; opacity: 1; will-change: opacity;
}
.dimensionLineContainer { 
    pointer-events: none; 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0;
    transition: opacity 0.3s ease-in-out; 
    opacity: 1; 
    will-change: opacity;
}
.dimensionLine { stroke: #16a5e6; stroke-width: 2; stroke-dasharray: 4; }
.dim-faded-out { opacity: 0 !important; }
.dim-hide { display: none !important; }
:not(:defined) > * { display: none; }
.dim-unit-inner { overflow: hidden; display: flex; gap: 15px; }
.dim-checkbox-label { display: flex; align-items: center; cursor: pointer; }
.dim-checkbox-label input[type="checkbox"] { margin: 0 8px 0 0; width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; accent-color: var(--accent-color); }
.dim-section { margin-top: calc(var(--panel-gap) / 2); border-top: 1px solid #ddd; padding-top: var(--panel-gap); }
.dim-radio-label { display: flex; align-items: center; cursor: pointer; font-size: 0.9em; }

@media (max-width: 768px) {
    .container { max-width: 100vw; }
    .help-button-wrapper { top: var(--mobile-side-padding); left: var(--mobile-side-padding); }
    .send-to-mobile-wrapper, .ar-button { bottom: var(--mobile-side-padding); right: var(--mobile-side-padding); }
    .footer-content-wrapper { padding: var(--mobile-side-padding) 0; }
    .color-swatches-container { gap: var(--mobile-side-padding); padding: 0 var(--mobile-side-padding); }
    .model-options-panel { top: var(--panel-top-mobile); right: var(--mobile-side-padding); padding: 12px; max-width: calc(100vw - 80px); }
    .model-options-panel .anim-section { margin-bottom: 0; }
    body.in-modal .model-options-panel { right: auto; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 130px); top: var(--panel-top-mobile); }
}
@media (min-width: 769px) and (max-width: 1200px) { .color-swatches-container { padding: 0 var(--side-padding); } }

.modal-overlay {
    position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.8);
    display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease-out;
}
.modal-overlay.visible { opacity: 1; pointer-events: auto; }
.modal-popup {
    background-color: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    max-width: 500px; width: 90%; position: relative; font-family: 'Source Sans 3', sans-serif; color: #333; opacity: 0; transform: scale(0.9); transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.modal-overlay.visible .modal-popup { opacity: 1; transform: scale(1); }
.modal-title { font-size: 1.8em; font-weight: 700; color: #2b2b2b; margin: 0 0 25px 0; text-align: center; }
.modal-content ul { list-style: none; padding: 0; margin: 0 0 20px 0; }
.modal-content li { margin-bottom: 10px; line-height: 1.5; font-size: 1em; font-weight: 400; }
.modal-content .highlight { font-weight: 700; color: #000; }
.modal-close-btn {
    position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 2em; color: #999; cursor: pointer; line-height: 1; padding: 5px; transition: color 0.2s ease-in-out; font-family: 'Source Sans 3', sans-serif;
}
.modal-close-btn:hover { color: #555; }
.help-modal { z-index: 1000; top: 0; bottom: 0; height: 100%; }
.help-modal .desktop-help { display: none; }
.help-modal .mobile-help { display: block; }
@media (min-width: 769px) { .help-modal .desktop-help { display: block; } .help-modal .mobile-help { display: none; } }
.qr-modal { z-index: 50; top: 0; left: 0; right: 0; bottom: var(--qr-modal-bottom-offset); height: auto; }
@media (max-width: 991px) { .qr-modal { display: none; } }
@media (min-width: 992px) { .qr-modal { display: flex; } }
.qr-modal .qr-prompt { text-align: center; margin-bottom: 20px; font-size: 1.1em; color: #555; }
.qr-modal .qr-code-container {
    display: flex; justify-content: center; align-items: center; width: 250px; height: 250px; margin: 0 auto; border: 1px solid #eee; padding: 10px; background-color: #fff; box-sizing: border-box;
}
.qr-modal .qr-code-container canvas, .qr-modal .qr-code-container img, .qr-modal .qr-code-container table { width: 100% !important; height: 100% !important; }


/* ========================================= */
/* CAROUSEL & FADE ANIMATIONS                */
/* ========================================= */
.smooth-fade {
    transition: opacity 1s ease-in-out;
}

.viewer-active {
    z-index: 5;
    pointer-events: auto;
    transform: none !important; /* Force no movement */
}

/* CRITICAL FIX: We only force opacity to 1 AFTER the UI finishes its initial loading phase. 
   This restores the elegant fade-in and prevents the "flash of unconfigured meshes" on page load! */
.container.ui-loaded .viewer-active {
    opacity: 1 !important; 
}

/* We combine the left/right standby canvases into a single inactive state */
.viewer-off-left, 
.viewer-off-right,
.viewer-inactive {
    opacity: 0 !important;       
    z-index: 1;
    pointer-events: none;
    transform: none !important; /* Force no movement */
}

/* Navigation Arrows */
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 40;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    font-size: 20px;
    color: #555;
    transition: background-color 0.2s, transform 0.2s, opacity 0.3s;
    opacity: 0;
    pointer-events: none;
}

.container.ui-loaded .nav-arrow.is-visible {
    opacity: 1;
    pointer-events: auto;
}

@media (hover: hover) {
    .nav-arrow:hover {
        background-color: #fff;
        color: #000;
        transform: translateY(-50%) scale(1.1);
    }
}

.nav-arrow:active {
    transform: translateY(-50%) scale(0.95);
}

.nav-arrow-left { left: var(--side-padding); }
.nav-arrow-right { right: var(--side-padding); }

@media (max-width: 768px) {
    .nav-arrow-left { left: var(--mobile-side-padding); }
    .nav-arrow-right { right: var(--mobile-side-padding); }
    /* Make arrows slightly smaller on mobile so they don't block the piano */
    .nav-arrow { width: 40px; height: 40px; font-size: 16px; }
}

/* ========================================= */
/* MODEL NAME OVERLAY (WATERMARK)            */
/* ========================================= */
.model-name-overlay {
    position: absolute;
    bottom: var(--side-padding);
    left: var(--side-padding);
    font-family: 'Cinzel', serif;
    font-weight: 500;
    font-size: clamp(2.5rem, 4vw, 6rem);
    color: rgba(140, 140, 140, 0.35); /* Subtle, elegant gray */
    pointer-events: none; /* Let mouse clicks pass through to the 3D model */
    z-index: 10;
    user-select: none;
    opacity: 0;
    letter-spacing: 0.05em;
    white-space: nowrap;
    line-height: 0.6; 
}

.container.ui-loaded .model-name-overlay {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    transition-delay: var(--buttons-fade-in-delay);
}

.model-name-overlay.fade-out {
    opacity: 0 !important;
    /* Make the fade-out fast and force the delay to 0 seconds */
    transition: opacity 0.3s ease-out !important; 
    transition-delay: 0s !important; 
}

@media (max-width: 768px) {
    .model-name-overlay {
        bottom: var(--mobile-side-padding);
        left: var(--mobile-side-padding);
    }
}

@media (min-width: 1200px) {
    .model-name-overlay {
        font-size: 3.5rem;
    }
}