* { margin: 0; padding: 0; box-sizing: border-box; }


    #canvas-container { width: 100%; height: 600px; background: #000; }

    #panel {
      width: 100%; height: auto;
      background: rgba(10,10,20,0.88);
      border: 1px solid #2a2a4a;
      display: flex; flex-direction: column;
      overflow-y: auto; padding: 12px; gap: 10px;
      border-radius: 6px;
    }
    #panel h1 { font-size: 14px; color: #8899ff; border-bottom: 1px solid #2a2a4a; padding-bottom: 8px; }
    #panel h3 { font-size: 12px; color: #aabbff; margin-bottom: 4px; }
    .section { background: rgba(255,255,255,0.04); border-radius: 6px; padding: 10px; }

    label {  color: #bbb; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
    input[type=range] { flex: 1; accent-color: #6677ff; }
    input[type=number] { width: 52px; background: #1a1a2e; border: 1px solid #333; color: #eee;
                         border-radius: 3px; padding: 2px 4px;  }
    input[type=color] { width: 36px; height: 22px; border: none; cursor: pointer; background: none; }
    input[type=file] {  color: #aaa; width: 100%; }
    select { flex: 1; background: #1a1a2e; border: 1px solid #333; color: #eee;
              border-radius: 3px; padding: 2px 4px; }

    button {
      background: #2a2a6a; border: 1px solid #4455cc; color: #cce;
      padding: 4px 10px; border-radius: 4px; cursor: pointer; 
      transition: background 0.15s;
    }
    button:hover { background: #3a3a8a; }
    button.danger { background: #5a1a1a; border-color: #cc3333; color: #fcc; }
    button.danger:hover { background: #7a1a1a; }

    #status {  color: #77aaff; min-height: 16px; }

    #model-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
    #model-list li {
      display: flex; align-items: center; gap: 4px;
      padding: 4px 6px; border-radius: 4px; background: rgba(255,255,255,0.05);
      
    }
    #model-list li.selected { background: rgba(100,120,255,0.25); outline: 1px solid #6677ff; }
    #model-list li .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #model-list li button { padding: 1px 5px; font-size: 10px; }

    .val { width: 32px; text-align: right; font-size: 10px; color: #88aaff; }
    .hint {  color: #555; }
    #behavior-body { display: none; }
    #transform-body input:disabled, #color-body input:disabled { opacity: 0.3; cursor: not-allowed; }

    fieldset { border: 1px solid #2a2a4a; border-radius: 4px; padding: 6px 8px; margin-top: 4px; }
    legend { font-size: 10px; color: #6677ff; padding: 0 4px; }