:root{
      /* Light theme (default) */
      --panel-w: 400px;
      --inspector-transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      --bg-page: #f5f7fc;
      --bg-panel: #ffffff;
      --text: #0b1220;
      --muted: #5b667a;
      --accent: #2563eb;
      --danger: #ef4444;
      --ok: #10b981;
      --border: #d9deea;
      --chip-bg:#fff;
      --chip-bd:#e6ebf7;
      --chip-tx:#344054;
      --toast-bg:#111827; --toast-bd:#1f2937; --toast-tx:#e5edff;
      --button-hover:#f6f8fe;
      --button-checked:#f3f7ff;
      --tree-sel-bg:#eef3ff; --tree-sel-bd:#c8d5ff;
      --progress-bg:#fff; --progress-bd:#e6ebf7; --meter-bg:#eef2fb; --meter-bd:#e1e7fb;
      --grid-c1:#8892a6; --grid-c2:#cbd5e1;
      --canvas-default:#ffffff; /* canvas scene background default (white) */
    }
    body.theme-dark{
      /* Dark theme overrides */
      --bg-page:#0b0d12;
      --bg-panel:#121520;
      --text:#e9eef5;
      --muted:#a9b3c7;
      --accent:#4da3ff;
      --danger:#ff5e7a;
      --ok:#4cd480;
      --border:#222736;
      --chip-bg:#0f1322; --chip-bd:#1b213d; --chip-tx:#b7c5e6;
      --toast-bg:#0f1528; --toast-bd:#1b2240; --toast-tx:#cfe0ff;
      --button-hover:#161a28;
      --button-checked:#0d1420;
      --tree-sel-bg:#1a2542; --tree-sel-bd:#2c3e6a;
      --progress-bg:#0f1322; --progress-bd:#1c2340; --meter-bg:#0b1020; --meter-bd:#1b2446;
      --grid-c1:#293347; --grid-c2:#1b2233;
      --canvas-default:#0b0d12;
    }

    html, body{ margin:0; padding:0; height:100%; background: var(--bg-page); color: var(--text);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji","Segoe UI Emoji";
    }
    /* avoid flicker: hide left panel until sections are initialized */
    body.preload .left-col{ visibility:hidden }

    .viewer-wrap{ position:fixed; inset:0; overflow:hidden; }
    canvas.viewer-canvas{ position:absolute; inset:0; display:block; outline: none; }

    .left-col{
      position: fixed; top: 0; left: 0; bottom: 0; width: var(--panel-w); max-width: 92vw;
      background: var(--bg-panel);
      border-right: 1px solid var(--border);
      padding: 12px 12px 16px;
      display:flex; flex-direction:column; gap:12px; z-index: 30;
      box-shadow: 0 0 30px rgba(0,0,0,.06);
      overflow-y: auto; /* Add scrollbar */
    }
    .left-col header{ display:flex; align-items:center; gap:10px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
    .logo-dot{ width:10px; height:10px; border-radius:50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
    .left-col h1{ font-size: 16px; margin:0; font-weight: 700; letter-spacing: .2px; }
    .toolbar{ display:flex; gap:8px; flex-wrap:wrap; }
    .btn, .toggle{
      appearance:none; border:1px solid var(--border); background: var(--bg-panel); color: var(--text);
      padding: 8px 10px; border-radius: 10px; cursor: pointer; transition: .15s transform, .15s background, .15s border-color;
      font-size: 13px; line-height: 1; display:inline-flex; gap:8px; align-items:center;
      box-sizing: border-box; /* Ensure consistent sizing including padding and border */
    }
    .btn:hover, .toggle:hover{ background:var(--button-hover); border-color:color-mix(in srgb, var(--border) 60%, transparent); transform: translateY(-1px) }
    .btn.secondary{ background: color-mix(in srgb, var(--bg-panel) 90%, white); }
    .btn.danger{ border-color: color-mix(in srgb, var(--danger) 25%, var(--border)); background: color-mix(in srgb, var(--danger) 8%, var(--bg-panel)); color:color-mix(in srgb, var(--danger) 60%, black); }
    .btn.ok{ border-color:color-mix(in srgb, var(--ok) 25%, var(--border)); background:color-mix(in srgb, var(--ok) 8%, var(--bg-panel)); color:color-mix(in srgb, var(--ok) 65%, black); }
    .toggle input{ display:none; }
    .toggle:has(input:checked){ border-color:color-mix(in srgb, var(--accent) 30%, var(--border)); background:var(--button-checked); }
    .btn-primary{ background: var(--accent); color: white; border-color: var(--accent); }
    .btn-primary:hover{ background: color-mix(in srgb, var(--accent) 80%, black); border-color: color-mix(in srgb, var(--accent) 80%, black); }
    .row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
    .row label{ font-size:12px; color: var(--muted) }
    .row .range { flex-grow: 1; } /* Allow sliders to take up remaining space */
    .field{ background:var(--bg-panel); border:1px solid var(--border); border-radius: 8px; padding:6px 6px; color:var(--text) }
    .split{ height:1px; background:var(--border); opacity:.5; margin: 4px 0 }
    .group{ display:flex; flex-direction:column; gap:8px }
    .scroll{ overflow:auto; }
    .small{ font-size:12px; color: var(--muted) }
    .row span.small[id$="-val"] { width: 26px; text-align: right; flex-shrink: 0; } /* Fixed width for value displays */
    .kbd{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; background:var(--chip-bg); border:1px solid var(--chip-bd); border-radius:6px; padding:1px 6px; font-size:11px; color:var(--chip-tx) }

    /* Inspector */
    .inspector {
      position: fixed;
      top: 0;
      right: calc(-1 * var(--panel-w)); /* Скрыт по умолчанию */
      bottom: 0;
      width: var(--panel-w);
      background: var(--bg-panel);
      border-left: 1px solid var(--border);
      transition: var(--inspector-transition);
      z-index: 40;
      display: flex;
      flex-direction: column;
      box-shadow: 0 0 30px rgba(0,0,0,.06);
    }

    .inspector.right-0 {
      right: 0 !important;
    }
    .inspector header{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; gap:8px; border-bottom:1px solid var(--border) }
    .inspector .tree{ flex:1; overflow:auto; padding: 10px 8px; }
    .tag{ font-size:11px; padding: 2px 6px; border-radius: 999px; background:var(--chip-bg); border:1px solid var(--chip-bd); color:var(--chip-tx) }
    .tree ul{ list-style:none; padding-left: 14px; margin: 0 }
    .tree li{ margin: 2px 0 }
    .tree button{ background: none; border:1px solid transparent; color: var(--text); cursor: pointer; padding: 2px 6px; border-radius: 6px }
    .tree button:hover{ background:var(--button-hover); border-color:color-mix(in srgb, var(--border) 60%, transparent) }
    .tree .selected{ background:var(--tree-sel-bg); border-color:var(--tree-sel-bd) }
    
    /* Minimalist icon toggles used in inspector (monochrome) */
    .toggle-icon {
      font-size: 14px;
      color: var(--muted);
      width: 18px;
      height: 18px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor: pointer;
      transition: color .12s ease, opacity .12s ease, transform .12s ease;
      opacity: 0.95;
    }
    .toggle-icon.inactive { opacity: 0.45; }
    .toggle-icon:hover { color: var(--text); transform: translateY(-1px); }
    .category-eye { margin-right: 6px; }
    .chev { margin-right: 6px; transition: transform .18s ease; color: var(--muted); }
    .chev.fa-rotate-180 { transform: rotate(180deg); }
    .tree .object-row { display:flex; gap:8px; align-items:center; }
    .tree .object-row .btn { padding:4px 8px; border-radius:6px; font-size:13px; }

    .overlay{ position:fixed; inset:0; display:none; place-items:center; background: rgba(0,0,0,.6); z-index: 50; }
    .overlay.show{ display:grid }
    .progress{
      min-width: 280px; max-width: 60vw; background:var(--progress-bg); border:1px solid var(--progress-bd); border-radius: 12px; padding:16px;
      box-shadow: 0 10px 30px rgba(0,0,0,.15);
    }
    .progress h3{ margin:0 0 8px 0; font-size:14px }
    .meter{ height: 8px; background: var(--meter-bg); border:1px solid var(--meter-bd); border-radius: 999px; overflow:hidden }
    .meter > i{ display:block; height:100%; width:0%; background: linear-gradient(90deg, #60a5fa, #93c5fd); transition: width .15s }
    .indeterminate{ position:relative; overflow:hidden }
    .indeterminate > i{ position:absolute; width:40%; left:-40%; animation: roll 1.2s infinite linear }
    @keyframes roll { to { left: 100% } }

    .toast{
      position:fixed; left: 12px; bottom: 12px; z-index: 60; padding: 10px 12px;
      background:var(--toast-bg); border:1px solid var(--toast-bd); color:var(--toast-tx); border-radius: 10px; box-shadow: 0 10px 20px rgba(0,0,0,.25);
      display:none;
    }
    .toast.show{ display:block }
    .debug{
      position:fixed; bottom: 10px; right: calc(var(--panel-w) + 10px); z-index: 1000;
      display:flex; gap:8px; align-items:center; flex-wrap:wrap; pointer-events:none;
      padding: 5px 10px;
      border-radius: 5px;
      color: var(--text);
      background-color: var(--bg-panel);
      border: 1px solid var(--border);
    }
    .chip{ pointer-events:auto; background:var(--chip-bg); border:1px solid var(--chip-bd); border-radius: 999px; padding: 6px 10px; font-size:12px; color:var(--chip-tx) }
    .chip b{ color:var(--text) }
    .chip #render-icon{ font-size:14px; transition: color 0.2s ease; }
    .open-inspector-tab {
      position: fixed;
      top: 50%;
      right: 0; /* Start position when closed */
      transform: translateY(-50%);
      z-index: 45;
      padding: 8px 10px;
      border-radius: 10px 0 0 10px;
      background: var(--bg-panel);
      border: 1px solid var(--border);
      border-right: none;
      cursor: pointer;
      transition: var(--inspector-transition), transform 0.2s ease;
    }

    /* Position when inspector is open */
    .inspector.right-0 ~ .open-inspector-tab {
	right: calc(var(--panel-w) - -1px);
    }

    .open-inspector-tab[data-state="closed"] {
      border-color: var(--accent);
      background: color-mix(in srgb, var(--accent) 10%, var(--bg-panel));
    }

    .open-inspector-tab[data-state="open"] {
      border-color: var(--danger);
      background: color-mix(in srgb, var(--danger) 10%, var(--bg-panel));
    }

    .range{ width: auto; } /* Allow sliders to take up remaining space */
    .lang-select{ margin-left:auto }
    .theme-switch{
      margin-left:4px;
      display:inline-flex; align-items:center; justify-content: center; gap:6px;
      border:1px solid var(--border); background:var(--bg-panel); padding:6px 8px; border-radius:10px; cursor:pointer;
    }
    .theme-switch .icon{ display:inline-block; vertical-align: middle; }

    .theme-dark .theme-switch .icon { color: white; }

    /* Accordion (native details) */
    details.section{ border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--bg-panel); }
    details.section + details.section{ margin-top:8px; }
    details.section > summary{
      list-style:none; cursor:pointer; padding:10px 12px; font-weight:700; font-size:12px;
      display:flex; align-items:center; justify-content:space-between; letter-spacing:.2px;
      border-bottom:1px solid var(--border); color: var(--text);
      text-transform: uppercase;
    }
    details.section > summary::-webkit-details-marker{ display:none }
    details.section[open] > summary{ background:var(--button-checked); }
    .summary-title{ display:flex; align-items:center; gap:8px }
    .chev{ opacity:.7; transition: transform .15s ease; }
    details.section[open] .chev{ transform: rotate(180deg) }
    .section-body{ padding:10px 12px; display:flex; flex-direction:column; gap:8px }
/* Integrated styles from user task */
.inspector-header {
        padding: 8px;
        border-bottom: 1px solid var(--border);
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .inspector-toolbar {
        display: flex;
        gap: 6px;
        align-items: center;
    }
    .btn.small-btn {
        padding: 4px 8px;
        font-size: 12px;
    }
    .btn.icon-btn {
        padding: 6px;
        line-height: 1;
        width: 28px;
        height: 28px;
        justify-content: center; /* Center icon horizontally */
    }
    .btn.active {
        background: var(--button-checked);
        border-color: var(--accent);
        color: var(--accent);
    }
    #isolate-btn {
        margin-left: auto;
        border-color: var(--danger);
        color: var(--danger);
    }
    #isolate-btn.active {
        background: color-mix(in srgb, var(--danger) 15%, transparent);
    }

    .system-toggle {
        font-size: 12px;
        padding: 4px 8px;
        color: var(--muted);
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .tree-list-container {
        flex: 1;
        overflow: auto;
        padding: 8px;
    }
    .tree-list {
        list-style: none;
        padding-left: 0;
        margin: 0;
    }
    .tree-list.nested {
        padding-left: 18px;
        display: none; /* Collapsed by default */
    }

    .category-header {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        padding: 4px;
        font-size: 13px;
    }
    
    .tree-node.selected > .tree-row {
        background: var(--tree-sel-bg);
        border-radius: 4px;
    }

    .tree-row {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 4px;
        cursor: pointer;
        border-radius: 4px;
    }
    .tree-row:hover {
        background: var(--button-hover);
    }
    .node-chev {
        width: 12px;
        text-align: center;
        transition: transform 0.15s ease;
    }
    .node-chev.fa-rotate-180 { transform: rotate(90deg); }
    .type-icon {
        width: 16px;
        text-align: center;
        color: var(--muted);
    }
    .node-label {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
    }
    .vis-icon {
        color: var(--muted);
        opacity: 0.7;
    }
    .vis-icon:hover {
        opacity: 1;
    }
    .fa-eye-slash {
        opacity: 0.4;
    }

    #inspector-context-menu {
        display: none;
        position: fixed;
        z-index: 1000;
        background: var(--bg-panel);
        border: 1px solid var(--border);
        border-radius: 8px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        padding: 6px;
        flex-direction: column;
        gap: 4px;
    }
    #inspector-context-menu button {
        background: none;
        border: none;
        color: var(--text);
        text-align: left;
        padding: 8px 12px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 13px;
        display: block;
        width: 100%;
    }
    #inspector-context-menu button:hover {
        background: var(--button-hover);
    }
    #inspector-context-menu hr {
        border: none;
        border-top: 1px solid var(--border);
        margin: 4px 0;
    }

    #tree {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .tree-list-container {
      flex-grow: 1;
      overflow-y: auto;
    }
    .properties-panel {
      padding: 12px;
      border-top: 1px solid var(--border);
      background-color: var(--bg-color-dark);
      color: var(--text-color);
      font-size: 13px;
    }
    .properties-header {
      font-weight: 700;
      margin-bottom: 8px;
      font-size: 14px;
      border-bottom: 1px solid var(--border-color-light);
      padding-bottom: 6px;
    }
    .properties-content div {
      margin-bottom: 5px;
    }
    .properties-content strong {
      color: var(--text-color-light);
      width: 80px;
      display: inline-block;
    }
    .properties-divider {
      height: 1px;
      background-color: var(--border);
      margin: 8px 0;
    }
    .uuid-text {
      font-family: monospace;
      font-size: 11px;
      color: var(--muted);
    }

    /* Animation section specific styles */
    .anim-controls {
      display: flex;
      flex-wrap: wrap; /* Allow wrapping if needed */
      gap: 8px;
      align-items: center;
    }

    #anim-select {
      flex-grow: 1; /* Allow select to take available space */
      flex-shrink: 1; /* Allow it to shrink if needed */
      min-width: 100px; /* Ensure it doesn't get too small */
      max-width: 200px; /* Set max-width to approximately half the block */
      height: 28px; /* Match button height */
      padding: 0 8px; /* Adjust padding for vertical alignment */
    }


    .anim-speed-control {
      display: flex; /* Ensure label and input are flex items */
      align-items: center;
      gap: 4px; /* Small gap between label and input */
      white-space: nowrap; /* Prevent "Speed 0.25 x" from wrapping */
      flex-shrink: 0; /* Prevent from shrinking */
    }

    /* Visually hide content while keeping it accessible for screen readers */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border-width: 0;
    }

    /* Ensure loop toggle looks like an icon button */
    label.toggle.icon-btn {
      padding: 6px;
      line-height: 1;
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    /* Ensure .btn.icon-btn also centers its content */
    .btn.icon-btn {
      justify-content: center;
    }

    .anim-speed-control input {
      width: 54px; /* Adjust width for speed input */
      text-align: center;
      font-size: 12px;
    }

    /* For the slider row */
    .section-body > .row:nth-of-type(2) { /* Target the slider row (second row) */
      display: flex;
      align-items: center;
      gap: 8px;
    }

    #anim-progress {
      flex: 1 1 auto; /* Allow slider to grow and shrink */
      min-width: 40px; /* Prevent slider from disappearing */
    }

    #anim-time {
      white-space: nowrap; /* Prevent time display from wrapping */
      flex-shrink: 0; /* Prevent from shrinking */
    }
/* Drag and Drop feedback */
.viewer-wrap.drag-over {
  border: 2px dashed #fff;
  background-color: rgba(255, 255, 255, 0.1);
}

/* Debug section styling */
details.section[data-sec="debug"] .toggle {
  width: 100%; /* Make the toggle take full width */
  justify-content: flex-start; /* Align content to the start */
}

@media (max-width: 768px) {
  :root {
    --panel-w: 90vw;
  }
  
  .open-inspector-tab {
    right: calc(-90vw - 1px);
  }
  
  .inspector.right-0 ~ .open-inspector-tab {
    right: calc(90vw - 1px);
  }
}

/* FBX Metadata Inspector Styles */
.fbx-metadata {
  margin-top: 8px;
}

.metadata-section {
  margin-bottom: 12px;
  padding: 8px;
  background-color: rgba(255, 255, 255, 0.02);
  border-radius: 4px;
  border-left: 3px solid var(--ok);
}

.metadata-title {
  font-weight: bold;
  color: var(--ok);
  margin-bottom: 6px;
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.metadata-section div:not(.metadata-title) {
  margin: 3px 0;
  font-size: 0.85em;
  line-height: 1.4;
}

.metadata-section strong {
  color: var(--text);
  min-width: 120px;
  display: inline-block;
}

/* Dark theme adjustments for metadata */
body.theme-dark .metadata-section {
  background-color: rgba(255, 255, 255, 0.05);
  border-left-color: var(--ok);
}

body.theme-dark .metadata-title {
  color: var(--ok);
}

/* Light theme adjustments for metadata */
body:not(.theme-dark) .metadata-section {
  background-color: rgba(0, 0, 0, 0.02);
  border-left-color: var(--ok);
}

body:not(.theme-dark) .metadata-title {
  color: var(--ok);
}

body:not(.theme-dark) .metadata-section strong {
  color: var(--text);
}

/* Properties panel enhancements */
.properties-content {
  max-height: 400px;
  overflow-y: auto;
}

.properties-content::-webkit-scrollbar {
  width: 6px;
}

.properties-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.properties-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.properties-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Responsive metadata display */
@media (max-width: 768px) {
  .metadata-section {
    padding: 6px;
    margin-bottom: 8px;
  }
  
  .metadata-section strong {
    min-width: 100px;
    font-size: 0.8em;
  }
  
  .metadata-section div:not(.metadata-title) {
    font-size: 0.8em;
  }
}

/* Animation for metadata sections */
.metadata-section {
  transition: all 0.2s ease-in-out;
}

.metadata-section:hover {
  background-color: rgba(255, 255, 255, 0.08);
  transform: translateX(2px);
}

body:not(.theme-dark) .metadata-section:hover {
  background-color: rgba(0, 0, 0, 0.05);
}