/* ═══════════════════════════════════════════
   FBX2GLB — WordPress Theme Overrides
   
   Adjustments for integrating the bundled
   fbx2glb app into the CucumberWorks theme:
   - Accent color: theme green
   - Header offset
   - Liquid glass styling (matching Booth)
   - Font harmonisation
   ═══════════════════════════════════════════ */

/* ── Accent color: override purple → theme green ── */
/* ── Backgrounds: neutralize purple tint ── */
.fbx2glb-app {
    --accent: #32CD32;
    --accent-glow: rgba(50, 205, 50, 0.3);
    --accent-hover: #3ddb3d;
    --bg: #0a0a0a;
    --bg-panel: rgba(14, 14, 14, 0.85);
    --bg-card: rgba(22, 22, 22, 0.7);
    --bg-hover: rgba(32, 32, 32, 0.8);
}

/* ── Header offset: push side panel below WP sticky header ── */
.fbx2glb-app .side-panel {
    top: 55px;
    height: calc(100vh - 55px);
}

.fbx2glb-app .toggle-panel {
    top: 71px;
    /* 55 header + 16 original offset */
}

/* ── Overlays & canvas: start below header ── */
.fbx2glb-app .upload-overlay,
.fbx2glb-app .loading-overlay {
    top: 55px;
    height: calc(100vh - 55px);
}

.fbx2glb-app #viewport {
    top: 55px;
    height: calc(100vh - 55px);
}

/* ── Font: use theme font instead of Inter ── */
.fbx2glb-app,
.fbx2glb-app * {
    font-family: Manrope, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Side panel: liquid glass effect ── */
.fbx2glb-app .side-panel {
    background: rgba(14, 14, 14, 0.6);
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Panel section titles ── */
.fbx2glb-app .panel-title {
    color: rgba(255, 255, 255, 0.55);
}

/* ── Buttons: liquid glass pill style (matching Booth back/zoom) ── */
.fbx2glb-app .btn-primary {
    background: rgba(50, 205, 50, 0.2);
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    border: 1px solid rgba(50, 205, 50, 0.3);
    border-radius: 100px;
    box-shadow: none;
    color: #fff;
}

.fbx2glb-app .btn-primary:hover:not(:disabled) {
    background: rgba(50, 205, 50, 0.35);
    border-color: rgba(50, 205, 50, 0.5);
    box-shadow: 0 0 24px rgba(50, 205, 50, 0.15);
    transform: none;
}

.fbx2glb-app .btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 100px;
    color: rgba(255, 255, 255, 0.9);
}

.fbx2glb-app .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* ── Toggle panel button: glass circle (like Booth theme btn) ── */
.fbx2glb-app .toggle-panel {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    color: rgba(255, 255, 255, 0.85);
}

.fbx2glb-app .toggle-panel:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* ── Preset buttons: glass cards ── */
.fbx2glb-app .preset-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.fbx2glb-app .preset-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.15);
    transform: none;
}

.fbx2glb-app .preset-btn .preset-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fbx2glb-app .preset-btn .preset-icon svg {
    vertical-align: middle;
}

/* ── Texture slots: glass cards ── */
.fbx2glb-app .texture-slot {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}

.fbx2glb-app .texture-slot:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

.fbx2glb-app .texture-slot.has-texture {
    border-color: rgba(50, 205, 50, 0.25);
}

/* ── Texture action mini-buttons: glass ── */
.fbx2glb-app .texture-upload-btn,
.fbx2glb-app .texture-remove-btn,
.fbx2glb-app .texture-invert-btn {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}

.fbx2glb-app .texture-upload-btn:hover {
    background: rgba(50, 205, 50, 0.2);
    border-color: rgba(50, 205, 50, 0.3);
    color: #fff;
}

/* ── Transform toolbar buttons: glass ── */
.fbx2glb-app .transform-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

.fbx2glb-app .transform-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.15);
}

.fbx2glb-app .transform-btn.active {
    background: rgba(50, 205, 50, 0.15);
    border-color: rgba(50, 205, 50, 0.3);
}

/* ── Step buttons: glass ── */
.fbx2glb-app .step-btn {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
}

.fbx2glb-app .step-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
}

/* ── Select dropdowns: glass ── */
.fbx2glb-app .material-select {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.fbx2glb-app .material-select:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

/* ── Smart assign drop zone: glass ── */
.fbx2glb-app .smart-pool-drop {
    border: 1.5px dashed rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
}

.fbx2glb-app .smart-pool-drop.drag-over {
    border-color: var(--accent);
    background: rgba(50, 205, 50, 0.06);
}

/* ── Upload overlay: inherit glass feel ── */
.fbx2glb-app .upload-zone {
    background: rgba(14, 14, 14, 0.6);
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
}

.fbx2glb-app .upload-zone:hover,
.fbx2glb-app .upload-zone.drag-over {
    border-color: rgba(50, 205, 50, 0.35);
    background: rgba(14, 14, 14, 0.7);
}

.fbx2glb-app .upload-btn {
    background: rgba(50, 205, 50, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(50, 205, 50, 0.3);
    border-radius: 100px;
}

.fbx2glb-app .upload-btn:hover {
    background: rgba(50, 205, 50, 0.35);
    box-shadow: 0 0 24px rgba(50, 205, 50, 0.15);
    transform: none;
}

/* ── Remaining hardcoded purple overrides ── */
.fbx2glb-app .upload-zone h1 {
    background: linear-gradient(135deg, #e8e8f0, #32CD32);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.fbx2glb-app .loader-ring {
    border-color: rgba(50, 205, 50, 0.15);
    border-top-color: #32CD32;
}

.fbx2glb-app .strength-slider {
    background: rgba(255, 255, 255, 0.2);
}

.fbx2glb-app .strength-slider::-webkit-slider-thumb {
    background: #111;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ── Toggles & checkboxes: muted green ── */
.fbx2glb-app .mesh-toggle input:checked+.slider {
    background: rgba(50, 205, 50, 0.7);
}

.fbx2glb-app #culling-toggle,
.fbx2glb-app .color-toggle-input {
    accent-color: rgba(50, 205, 50, 0.55);
}

/* ── Smart assign results: increase readability ── */
.fbx2glb-app .smart-pool-result {
    color: rgba(255, 255, 255, 0.85);
}

.fbx2glb-app .smart-pool-result .pool-badge-matched {
    background: rgba(50, 205, 50, 0.2);
    color: #6fea6f;
}

.fbx2glb-app .smart-pool-result .pool-badge-unknown {
    background: rgba(251, 191, 36, 0.2);
    color: #fcd36a;
}

/* ── Smart assign results: light mode ── */
[data-theme="light"] .fbx2glb-app .smart-pool-result {
    color: #333;
}

[data-theme="light"] .fbx2glb-app .smart-pool-result .pool-badge-matched {
    background: rgba(50, 205, 50, 0.15);
    color: #1a7a1a;
}

[data-theme="light"] .fbx2glb-app .smart-pool-result .pool-badge-unknown {
    background: rgba(200, 150, 0, 0.15);
    color: #8a6a00;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .fbx2glb-app .smart-pool-result {
        color: #333;
    }

    :root:not([data-theme]) .fbx2glb-app .smart-pool-result .pool-badge-matched {
        background: rgba(50, 205, 50, 0.15);
        color: #1a7a1a;
    }

    :root:not([data-theme]) .fbx2glb-app .smart-pool-result .pool-badge-unknown {
        background: rgba(200, 150, 0, 0.15);
        color: #8a6a00;
    }
}

.fbx2glb-app .mesh-item.mesh-selected {
    background: rgba(50, 205, 50, 0.1);
    border-color: #32CD32;
}

.fbx2glb-app .texture-preview {
    background: rgba(28, 28, 28, 0.8);
}

.fbx2glb-app .upload-overlay {
    background: radial-gradient(ellipse at center, rgba(50, 205, 50, 0.06) 0%, #0a0a0a 70%);
}

/* ── File pool: glass ── */
.fbx2glb-app .file-pool {
    background: rgba(14, 14, 14, 0.7);
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
}

/* ── Toast: glass ── */
.fbx2glb-app .toast {
    background: rgba(14, 14, 14, 0.7);
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
}

/* ── Loading overlay: glass ── */
.fbx2glb-app .loading-overlay {
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ── Hide scrollbar glow on panel ── */
.fbx2glb-app .side-panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.06);
}

/* ── Mobile: full-width panel offset ── */
@media (max-width: 768px) {
    .fbx2glb-app .side-panel {
        top: 55px;
        height: calc(100vh - 55px);
    }
}

/* ═══════════════════════════════════════════
   LIGHT MODE
   ═══════════════════════════════════════════ */

/* Shared light-mode mixin applied via both selectors */
[data-theme="light"] .fbx2glb-app {
    --bg: #f0f0f0;
    --bg-panel: rgba(255, 255, 255, 0.85);
    --bg-card: rgba(0, 0, 0, 0.04);
    --bg-hover: rgba(0, 0, 0, 0.06);
    --border: rgba(0, 0, 0, 0.08);
    --border-hover: rgba(0, 0, 0, 0.15);
    --text: #1a1a1a;
    --text-dim: #666;
    --text-muted: #999;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .fbx2glb-app {
        --bg: #f0f0f0;
        --bg-panel: rgba(255, 255, 255, 0.85);
        --bg-card: rgba(0, 0, 0, 0.04);
        --bg-hover: rgba(0, 0, 0, 0.06);
        --border: rgba(0, 0, 0, 0.08);
        --border-hover: rgba(0, 0, 0, 0.15);
        --text: #1a1a1a;
        --text-dim: #666;
        --text-muted: #999;
    }
}

/* ── Body / canvas background ── */
[data-theme="light"] .fbx2glb-app~script,
[data-theme="light"] body {
    background: #f0f0f0;
    color: #1a1a1a;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) body {
        background: #f0f0f0;
        color: #1a1a1a;
    }
}

/* ── Side panel ── */
[data-theme="light"] .fbx2glb-app .side-panel {
    background: rgba(255, 255, 255, 0.8);
    border-left: 1px solid rgba(0, 0, 0, 0.08);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .fbx2glb-app .side-panel {
        background: rgba(255, 255, 255, 0.8);
        border-left: 1px solid rgba(0, 0, 0, 0.08);
    }
}

/* ── Panel titles ── */
[data-theme="light"] .fbx2glb-app .panel-title {
    color: rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .fbx2glb-app .panel-title {
        color: rgba(0, 0, 0, 0.5);
    }
}

/* ── Buttons ── */
[data-theme="light"] .fbx2glb-app .btn-primary {
    background: rgba(50, 205, 50, 0.15);
    border-color: rgba(50, 205, 50, 0.25);
    color: #1a6b1a;
}

[data-theme="light"] .fbx2glb-app .btn-primary:hover:not(:disabled) {
    background: rgba(50, 205, 50, 0.25);
    border-color: rgba(50, 205, 50, 0.4);
    color: #1a6b1a;
}

[data-theme="light"] .fbx2glb-app .btn-secondary {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #333;
}

[data-theme="light"] .fbx2glb-app .btn-secondary:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.15);
    color: #111;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .fbx2glb-app .btn-primary {
        background: rgba(50, 205, 50, 0.15);
        border-color: rgba(50, 205, 50, 0.25);
        color: #1a6b1a;
    }

    :root:not([data-theme]) .fbx2glb-app .btn-primary:hover:not(:disabled) {
        background: rgba(50, 205, 50, 0.25);
        border-color: rgba(50, 205, 50, 0.4);
        color: #1a6b1a;
    }

    :root:not([data-theme]) .fbx2glb-app .btn-secondary {
        background: rgba(0, 0, 0, 0.04);
        border: 1px solid rgba(0, 0, 0, 0.1);
        color: #333;
    }

    :root:not([data-theme]) .fbx2glb-app .btn-secondary:hover {
        background: rgba(0, 0, 0, 0.08);
        border-color: rgba(0, 0, 0, 0.15);
        color: #111;
    }
}

/* ── Toggle panel button ── */
[data-theme="light"] .fbx2glb-app .toggle-panel {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.1);
    color: #333;
}

[data-theme="light"] .fbx2glb-app .toggle-panel:hover {
    background: rgba(0, 0, 0, 0.12);
    color: #111;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .fbx2glb-app .toggle-panel {
        background: rgba(0, 0, 0, 0.06);
        border-color: rgba(0, 0, 0, 0.1);
        color: #333;
    }

    :root:not([data-theme]) .fbx2glb-app .toggle-panel:hover {
        background: rgba(0, 0, 0, 0.12);
        color: #111;
    }
}

/* ── Preset / texture / transform / step / select: light glass ── */
[data-theme="light"] .fbx2glb-app .preset-btn,
[data-theme="light"] .fbx2glb-app .texture-slot,
[data-theme="light"] .fbx2glb-app .transform-btn,
[data-theme="light"] .fbx2glb-app .step-btn,
[data-theme="light"] .fbx2glb-app .texture-upload-btn,
[data-theme="light"] .fbx2glb-app .texture-remove-btn,
[data-theme="light"] .fbx2glb-app .texture-invert-btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .fbx2glb-app .preset-btn:hover,
[data-theme="light"] .fbx2glb-app .texture-slot:hover,
[data-theme="light"] .fbx2glb-app .transform-btn:hover,
[data-theme="light"] .fbx2glb-app .step-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .fbx2glb-app .material-select {
    background-color: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
    color: #333;
}

@media (prefers-color-scheme: light) {

    :root:not([data-theme]) .fbx2glb-app .preset-btn,
    :root:not([data-theme]) .fbx2glb-app .texture-slot,
    :root:not([data-theme]) .fbx2glb-app .transform-btn,
    :root:not([data-theme]) .fbx2glb-app .step-btn,
    :root:not([data-theme]) .fbx2glb-app .texture-upload-btn,
    :root:not([data-theme]) .fbx2glb-app .texture-remove-btn,
    :root:not([data-theme]) .fbx2glb-app .texture-invert-btn {
        background: rgba(0, 0, 0, 0.03);
        border-color: rgba(0, 0, 0, 0.08);
    }

    :root:not([data-theme]) .fbx2glb-app .preset-btn:hover,
    :root:not([data-theme]) .fbx2glb-app .texture-slot:hover,
    :root:not([data-theme]) .fbx2glb-app .transform-btn:hover,
    :root:not([data-theme]) .fbx2glb-app .step-btn:hover {
        background: rgba(0, 0, 0, 0.06);
        border-color: rgba(0, 0, 0, 0.12);
    }

    :root:not([data-theme]) .fbx2glb-app .material-select {
        background-color: rgba(0, 0, 0, 0.03);
        border-color: rgba(0, 0, 0, 0.08);
        color: #333;
    }
}

/* ── Smart assign drop zone ── */
[data-theme="light"] .fbx2glb-app .smart-pool-drop {
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.02);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .fbx2glb-app .smart-pool-drop {
        border-color: rgba(0, 0, 0, 0.1);
        background: rgba(0, 0, 0, 0.02);
    }
}

/* ── Upload overlay ── */
[data-theme="light"] .fbx2glb-app .upload-overlay {
    background: #f0f0f0;
}

[data-theme="light"] .fbx2glb-app .upload-zone {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .fbx2glb-app .upload-zone:hover,
[data-theme="light"] .fbx2glb-app .upload-zone.drag-over {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(50, 205, 50, 0.35);
}

[data-theme="light"] .fbx2glb-app .upload-zone h1 {
    background: linear-gradient(135deg, #222, #1a8a1a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="light"] .fbx2glb-app .upload-btn {
    background: rgba(50, 205, 50, 0.12);
    border-color: rgba(50, 205, 50, 0.25);
    color: #1a6b1a;
}

[data-theme="light"] .fbx2glb-app .upload-btn:hover {
    background: rgba(50, 205, 50, 0.2);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .fbx2glb-app .upload-overlay {
        background: #f0f0f0;
    }

    :root:not([data-theme]) .fbx2glb-app .upload-zone {
        background: rgba(255, 255, 255, 0.8);
        border-color: rgba(0, 0, 0, 0.1);
    }

    :root:not([data-theme]) .fbx2glb-app .upload-zone:hover,
    :root:not([data-theme]) .fbx2glb-app .upload-zone.drag-over {
        background: rgba(255, 255, 255, 0.9);
        border-color: rgba(50, 205, 50, 0.35);
    }

    :root:not([data-theme]) .fbx2glb-app .upload-zone h1 {
        background: linear-gradient(135deg, #222, #1a8a1a);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    :root:not([data-theme]) .fbx2glb-app .upload-btn {
        background: rgba(50, 205, 50, 0.12);
        border-color: rgba(50, 205, 50, 0.25);
        color: #1a6b1a;
    }

    :root:not([data-theme]) .fbx2glb-app .upload-btn:hover {
        background: rgba(50, 205, 50, 0.2);
    }
}

/* ── File pool / toast / loading ── */
[data-theme="light"] .fbx2glb-app .file-pool {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .fbx2glb-app .toast {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.1);
    color: #333;
}

[data-theme="light"] .fbx2glb-app .loading-overlay {
    background: rgba(240, 240, 240, 0.9);
}

[data-theme="light"] .fbx2glb-app .loading-overlay p {
    color: #666;
}

[data-theme="light"] .fbx2glb-app .loader-ring {
    border-color: rgba(50, 205, 50, 0.2);
    border-top-color: #32CD32;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .fbx2glb-app .file-pool {
        background: rgba(255, 255, 255, 0.85);
        border-color: rgba(0, 0, 0, 0.08);
    }

    :root:not([data-theme]) .fbx2glb-app .toast {
        background: rgba(255, 255, 255, 0.9);
        border-color: rgba(0, 0, 0, 0.1);
        color: #333;
    }

    :root:not([data-theme]) .fbx2glb-app .loading-overlay {
        background: rgba(240, 240, 240, 0.9);
    }

    :root:not([data-theme]) .fbx2glb-app .loading-overlay p {
        color: #666;
    }

    :root:not([data-theme]) .fbx2glb-app .loader-ring {
        border-color: rgba(50, 205, 50, 0.2);
        border-top-color: #32CD32;
    }
}

/* ── Scrollbar ── */
[data-theme="light"] .fbx2glb-app .side-panel::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.08);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .fbx2glb-app .side-panel::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.08);
    }
}

/* ── Texture preview box ── */
[data-theme="light"] .fbx2glb-app .texture-preview {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .fbx2glb-app .texture-preview {
        background: rgba(0, 0, 0, 0.04);
        border-color: rgba(0, 0, 0, 0.08);
    }
}

/* ── Light mode: high-contrast sliders ── */
[data-theme="light"] .fbx2glb-app .strength-slider {
    background: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .fbx2glb-app .strength-slider::-webkit-slider-thumb {
    background: #fff;
    border: 2px solid #333;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .fbx2glb-app .strength-slider {
        background: rgba(0, 0, 0, 0.2);
    }

    :root:not([data-theme]) .fbx2glb-app .strength-slider::-webkit-slider-thumb {
        background: #fff;
        border: 2px solid #333;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }
}

/* ── Light mode: increase text contrast ── */
[data-theme="light"] .fbx2glb-app .texture-label,
[data-theme="light"] .fbx2glb-app .mesh-name,
[data-theme="light"] .fbx2glb-app .info-value,
[data-theme="light"] .fbx2glb-app .preset-btn span {
    color: #1a1a1a;
}

[data-theme="light"] .fbx2glb-app .texture-desc,
[data-theme="light"] .fbx2glb-app .info-label,
[data-theme="light"] .fbx2glb-app .setting-label,
[data-theme="light"] .fbx2glb-app .strength-value,
[data-theme="light"] .fbx2glb-app .texture-placeholder {
    color: #555;
}

[data-theme="light"] .fbx2glb-app .upload-zone p,
[data-theme="light"] .fbx2glb-app .upload-divider {
    color: #666;
}

[data-theme="light"] .fbx2glb-app .upload-hint {
    color: #888 !important;
}

[data-theme="light"] .fbx2glb-app .upload-icon {
    color: #1a8a1a;
}

[data-theme="light"] .fbx2glb-app .step-btn,
[data-theme="light"] .fbx2glb-app .transform-btn {
    color: #444;
}

[data-theme="light"] .fbx2glb-app .panel-section {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .fbx2glb-app .mesh-toggle .slider {
    background: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .fbx2glb-app #culling-toggle {
    accent-color: #32CD32;
}

@media (prefers-color-scheme: light) {

    :root:not([data-theme]) .fbx2glb-app .texture-label,
    :root:not([data-theme]) .fbx2glb-app .mesh-name,
    :root:not([data-theme]) .fbx2glb-app .info-value,
    :root:not([data-theme]) .fbx2glb-app .preset-btn span {
        color: #1a1a1a;
    }

    :root:not([data-theme]) .fbx2glb-app .texture-desc,
    :root:not([data-theme]) .fbx2glb-app .info-label,
    :root:not([data-theme]) .fbx2glb-app .setting-label,
    :root:not([data-theme]) .fbx2glb-app .strength-value,
    :root:not([data-theme]) .fbx2glb-app .texture-placeholder {
        color: #555;
    }

    :root:not([data-theme]) .fbx2glb-app .upload-zone p,
    :root:not([data-theme]) .fbx2glb-app .upload-divider {
        color: #666;
    }

    :root:not([data-theme]) .fbx2glb-app .upload-hint {
        color: #888 !important;
    }

    :root:not([data-theme]) .fbx2glb-app .upload-icon {
        color: #1a8a1a;
    }

    :root:not([data-theme]) .fbx2glb-app .step-btn,
    :root:not([data-theme]) .fbx2glb-app .transform-btn {
        color: #444;
    }

    :root:not([data-theme]) .fbx2glb-app .panel-section {
        border-bottom-color: rgba(0, 0, 0, 0.08);
    }

    :root:not([data-theme]) .fbx2glb-app .mesh-toggle .slider {
        background: rgba(0, 0, 0, 0.15);
    }

    :root:not([data-theme]) .fbx2glb-app #culling-toggle {
        accent-color: #32CD32;
    }
}

/* ═══════════════════════════════════════════
   SCENE MODEL LIST
   ═══════════════════════════════════════════ */

.fbx2glb-app .scene-model-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: default;
    transition: background 0.15s, border-color 0.15s;
}

.fbx2glb-app .scene-model-item:hover {
    background: var(--bg-hover, rgba(255, 255, 255, 0.06));
}

.fbx2glb-app .scene-model-item.active {
    border-color: var(--accent, #32CD32);
    background: rgba(50, 205, 50, 0.08);
}

.fbx2glb-app .scene-model-name {
    flex: 1;
    font-size: 12px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.85;
}

.fbx2glb-app .scene-model-item.active .scene-model-name {
    opacity: 1;
    color: var(--accent, #32CD32);
}

.fbx2glb-app .scene-model-delete {
    background: none;
    border: none;
    color: var(--text-muted, #888);
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}

.fbx2glb-app .scene-model-item:hover .scene-model-delete {
    opacity: 0.6;
}

.fbx2glb-app .scene-model-delete:hover {
    opacity: 1 !important;
    color: #ff4444;
}

.fbx2glb-app .btn-add-model {
    margin-left: auto;
    background: none;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    color: var(--accent, #32CD32);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: background 0.15s, border-color 0.15s;
}

.fbx2glb-app .btn-add-model:hover {
    background: rgba(50, 205, 50, 0.1);
    border-color: var(--accent, #32CD32);
}

/* Keep the Scene panel's + button clear of the fixed toggle-panel button */
.fbx2glb-app #scene-panel .panel-title {
    padding-right: 36px;
}

/* ═══════════════════════════════════════════
   TRANSFORM SCOPE TOGGLE
   ═══════════════════════════════════════════ */
.fbx2glb-app .transform-scope {
    display: flex;
    gap: 2px;
    margin-bottom: 6px;
    padding: 2px;
    background: var(--bg-card, rgba(255, 255, 255, 0.04));
    border-radius: 6px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.06));
}

.fbx2glb-app .scope-btn {
    flex: 1;
    padding: 3px 8px;
    font-size: 0.7rem;
    font-family: inherit;
    font-weight: 500;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted, #888);
    cursor: pointer;
    transition: all 0.15s;
}

.fbx2glb-app .scope-btn:hover {
    color: var(--text, #eee);
}

.fbx2glb-app .scope-btn.active {
    background: var(--accent, #32CD32);
    color: #fff;
    box-shadow: 0 1px 4px rgba(50, 205, 50, 0.2);
}

/* ═══════════════════════════════════════════
   NUMERIC TRANSFORM PROPERTIES
   ═══════════════════════════════════════════ */
.fbx2glb-app .transform-props {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 6px;
    padding: 6px;
    background: var(--bg-card, rgba(255, 255, 255, 0.04));
    border-radius: 6px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.06));
}

.fbx2glb-app .prop-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fbx2glb-app .prop-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #888);
    width: 24px;
    flex-shrink: 0;
}

.fbx2glb-app .prop-axis {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted, #888);
}

.fbx2glb-app .prop-axis.x {
    color: #ff6b6b;
}

.fbx2glb-app .prop-axis.y {
    color: #51cf66;
}

.fbx2glb-app .prop-axis.z {
    color: #339af0;
}

.fbx2glb-app .prop-axis input {
    width: 100%;
    min-width: 0;
    padding: 2px 4px;
    font-size: 0.7rem;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.06));
    border-radius: 3px;
    color: var(--text, #eee);
    outline: none;
    transition: border-color 0.15s;
    -moz-appearance: textfield;
    appearance: textfield;
}

.fbx2glb-app .prop-axis input::-webkit-outer-spin-button,
.fbx2glb-app .prop-axis input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.fbx2glb-app .prop-axis input:focus {
    border-color: var(--accent, #32CD32);
}

.fbx2glb-app .prop-toggle {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted, #888);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
}

.fbx2glb-app .prop-toggle:hover {
    border-color: var(--accent, #32CD32);
    color: var(--accent, #32CD32);
}

.fbx2glb-app .prop-toggle.active {
    background: var(--accent, #32CD32);
    border-color: var(--accent, #32CD32);
    color: #fff;
}

/* ═══════════════════════════════════════════
   RANGE SLIDER
   ═══════════════════════════════════════════ */
.fbx2glb-app input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--border, rgba(255, 255, 255, 0.1));
    border-radius: 2px;
    outline: none;
}

.fbx2glb-app input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent, #32CD32);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.fbx2glb-app input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent, #32CD32);
    border: none;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Small toggle variant */
.fbx2glb-app .small-toggle {
    width: 32px;
    height: 18px;
}

.fbx2glb-app .small-toggle .slider::before {
    width: 12px;
    height: 12px;
    left: 3px;
    bottom: 3px;
}

.fbx2glb-app .small-toggle input:checked+.slider::before {
    transform: translateX(14px);
}

/* Color picker (small) */
.fbx2glb-app .color-picker-sm {
    width: 32px;
    height: 24px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    border-radius: 4px;
    padding: 1px;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.fbx2glb-app .color-picker-sm::-webkit-color-swatch-wrapper {
    padding: 0;
}

.fbx2glb-app .color-picker-sm::-webkit-color-swatch {
    border: none;
    border-radius: 3px;
}