body { margin: 0; overflow: hidden; background-color: #333; /* 暗いグレーを基調に */ display: flex; flex-direction: column; align-items: center; font-family: sans-serif; color: #eee; /* テキスト色を明るく */ }
        #controls { margin: 10px; display: flex; gap: 10px; align-items: center; background-color: #444; /* 暗いグレー */ padding: 10px; border-radius: 8px; }
        #controls button { padding: 8px 15px; cursor: pointer; border: none; border-radius: 5px; font-size: 14px; color: white; transition: background-color 0.3s ease;background-color: #888; }
        #controls button:hover { opacity: 0.9; }
        #controls input[type="file"] { display: none; }
        #controls label { padding: 8px 15px; cursor: pointer; border: none; border-radius: 5px; background-color: #2196F3; color: white; font-size: 14px; transition: background-color 0.3s ease; }
        #controls label:hover { background-color: #0b7dda; }

        /* モデル編集ボタンのスタイル */
        #editModeButton { 
             padding: 8px 15px;
             cursor: pointer;
             border: none;
             border-radius: 5px;
             font-size: 14px;
             color: white;
             transition: background-color 0.3s ease;
             /* 色はJSで制御 */
         }
         #editModeButton:hover {
             opacity: 0.9;
         }


        /* 環境編集ボタンのスタイル */
         #environmentEditButton {
             padding: 8px 15px;
             cursor: pointer;
             border: none;
             border-radius: 5px;
             color: white;
             font-size: 14px;
             transition: background-color 0.3s ease;
         }
         #environmentEditButton:hover {
             background-color: #f44336; /* 少し濃いオレンジ */
         }


         /* モード切り替えボタンのスタイル */
         #modeToggle {
             padding: 8px 15px;
             cursor: pointer;
             border: none;
             border-radius: 5px;
             background-color: #ff9800; /* オレンジ */
             color: white;
             font-size: 14px;
             transition: background-color 0.3s ease;
         }
         #modeToggle:hover {
             background-color: #f57c00; /* 少し濃いオレンジ */
         }

        canvas { display: block; width: 100vw; height: calc(100vh - 80px); /* コントロールの高さを考慮して調整 */ }

        /* 親ウィンドウ用のチルトコントロールスタイル (画面左下に移動) */
        #parentTiltControls {
            position: absolute; /* Canvasにオーバーラップさせる */
            bottom: 20px; /* 画面下からの距離 */
            left: 20px; /* 画面左からの距離 */
            display: flex;
            flex-direction: column; /* 縦に並べる */
            gap: 10px;
            background-color: rgba(68, 68, 68, 0.8); /* 暗いグレーの半透明背景 */
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* 影を濃く */
            z-index: 100; /* Canvasより手前に表示 */
            color: #eee; /* テキスト色を明るく */
        }
         #parentTiltControls .control-group {
            display: flex;
            flex-direction: column;
            align-items: flex-start; /* 左寄せ */
            width: 150px; /* コントロールグループの幅を固定 */
        }
         #parentTiltControls .control-group label {
            margin-bottom: 5px;
            font-size: 12px;
            color: #ccc; /* ラベル色を明るく */
         }
         #parentTiltControls .control-group input[type="range"] {
            width: 100%; /* 親要素の幅に合わせる */
         }
         #parentTiltControls .control-group span {
            margin-top: 3px;
            font-size: 10px;
            text-align: right; /* 値を右寄せ */
            width: 100%; /* 親要素の幅に合わせる */
            color: #bbb; /* 値表示色を明るく */
         }


        /* 編集画面のスタイル (モデル編集と環境編集で共通化) */
        .edit-panel {
            position: absolute;
            top: 80px; /* 例: 適切な高さに調整してください */
            right: 10px;
            background-color: rgba(68, 68, 68, 0.9);
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
            display: none;
            flex-direction: column;
            gap: 10px;
            z-index: 100;
            width: 280px;
            color: #eee;
            max-height: calc(100vh - 110px);
            overflow-y: auto;
        }

        .edit-panel h3 {
            margin: 0 0 10px 0;
            font-size: 16px;
            text-align: center;
            color: #eee; /* 見出し色を明るく */
        }

        /* タブコンテナのスタイル */
        .edit-panel .edit-tabs {
            display: flex;
            border-bottom: 1px solid #555; /* 暗い境界線 */
            margin-bottom: 10px;
        }

        .edit-panel .tab-button {
            padding: 8px 15px;
            cursor: pointer;
            border: none;
            background-color: transparent;
            font-size: 14px;
            outline: none;
            transition: background-color 0.3s ease;
            flex-grow: 1; /* タブを均等に配置 */
            text-align: center;
            color: #ccc; /* タブボタン色を明るく */
        }

        .edit-panel .tab-button.active {
            background-color: #555; /* アクティブなタブの背景色 */
            border-bottom: 2px solid #007bff; /* アクティブなタブの下線色 */
            color: #eee; /* アクティブなタブの色を明るく */
        }

        .edit-panel .tab-button:hover:not(.active) {
            background-color: #666; /* ホバー時の背景色 */
        }

        /* タブコンテンツのスタイル */
        .edit-panel .tab-content {
            display: none; /* Initially hidden */
            flex-direction: column;
            gap: 10px;
        }

        .edit-panel .tab-content.active {
            display: flex; /* Active tab content is displayed */
        }


        .edit-panel .control-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

         .edit-panel .control-row {
            display: flex;
            align-items: center;
            gap: 10px; /* 要素間のスペース */
         }


        .edit-panel .control-group label,
        .edit-panel .control-row label {
            font-size: 12px;
            color: #ccc; /* ラベル色を明るく */
            min-width: 60px; /* ラベルの最小幅を確保 */
        }

        .edit-panel .control-group input[type="range"],
        .edit-panel .control-row input[type="range"] {
            flex-grow: 1; /* スライダーが利用可能なスペースを埋める */
        }

        .edit-panel .control-group span,
        .edit-panel .control-row span {
             font-size: 10px;
             color: #bbb; /* 値表示色を明るく */
             text-align: right;
             min-width: 30px; /* 値表示の最小幅 */
        }

         .edit-panel .control-row input[type="color"] {
             padding: 0;
             border: none;
             background: none;
             cursor: pointer;
             width: 30px; /* カラーピッカーの幅 */
             height: 30px; /* カラーピッカーの高さ */
             flex-shrink: 0; /* 縮小させない */
         }


        .edit-panel .transform-section {
            border-bottom: 1px solid #555; /* 暗い境界線 */
            padding-bottom: 10px;
            margin-bottom: 10px;
        }

         .edit-panel .transform-section:last-child {
            border-bottom: none;
            padding-bottom: 0;
            margin-bottom: 0;
         }

        /* モデル削除ボタンのスタイル (編集画面内に移動) */
         #deleteModelButton {
             padding: 8px 15px;
             cursor: pointer;
             border: none;
             border-radius: 5px;
             font-size: 14px;
             background-color: #dc3545; /* 赤 */
             color: white;
             opacity: 0.5; /* 最初は無効 */
             cursor: not-allowed;
             margin-top: 10px; /* スライダーとの間にスペース */
             align-self: center; /* 中央寄せ */
             transition: background-color 0.3s ease, opacity 0.3s ease;
         }
         #deleteModelButton:hover:not(:disabled) {
             background-color: #c82333;
         }
         #deleteModelButton:disabled {
             opacity: 0.5;
             cursor: not-allowed;
         }

         /* 表示タブ内のコントロールのスタイル */
         #displayControls .control-group {
             flex-direction: row; /* チェックボックスとラベルを横並びに */
             justify-content: space-between; /* 要素間にスペース */
             align-items: center; /* 垂直方向中央揃え */
         }

         #displayControls .control-row { /* control-rowも追加 */
             justify-content: space-between;
             align-items: center;
         }


         #displayControls .control-group label,
         #displayControls .control-row label { /* control-row labelも追加 */
             margin-bottom: 0; /* マージンをリセット */
         }


         /* 環境編集パネルのスタイル */
         #environmentEditControls {
             /* .edit-panel クラスで共通スタイルを定義 */
         }

         /* 環境編集パネル内のタブコンテンツスタイル */
         #backgroundTabContent .control-row {
             justify-content: space-between;
             align-items: center;
         }
          #backgroundTabContent input[type="file"] { /* 背景画像ファイル入力 */
               display: none;
          }
           #backgroundTabContent label { /* 背景画像ファイル入力ラベル */
               padding: 8px 15px;
               cursor: pointer;
               border: none;
               border-radius: 5px;
               background-color: #2196F3; /* 青 */
               color: white;
               font-size: 12px; /* ラベルに合わせて小さく */
               transition: background-color 0.3s ease;
           }
           #backgroundTabContent label:hover {
               background-color: #0b7dda;
           }


          #lightingTabContent .control-group {
              margin-bottom: 10px; /* 光源グループ間のスペース */
              padding-bottom: 10px;
              border-bottom: 1px dashed #555; /* 暗い区切り線 */
          }
           #lightingTabContent .control-group:last-child {
               border-bottom: none;
               padding-bottom: 0;
               margin-bottom: 0;
           }

          #lightingTabContent h4 {
              margin: 0 0 8px 0;
              font-size: 14px;
              color: #ccc; /* 見出し色を明るく */
          }

          #lightingTabContent .control-row {
              justify-content: space-between;
              align-items: center;
          }

          #meshDisplayTabContent .control-group {
             flex-direction: row; /* チェックボックスとラベルを横並びに */
             justify-content: space-between; /* 要素間にスペース */
             align-items: center; /* 垂直方向中央揃え */
         }


 /* ヘルプオーバーレイのスタイル */
 #helpOverlay {
     position: fixed; /* 画面全体を覆うように固定 */
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.7); /* 半透明の黒背景 */
     display: none; /* 初期状態では非表示 */
     justify-content: center; /* コンテンツを水平方向に中央揃え */
     align-items: center;   /* コンテンツを垂直方向に中央揃え */
     z-index: 1000; /* 他の要素より前面に表示 */
     color: white; /* テキスト色 */
 }

 /* ヘルプ内容を表示するボックスのスタイル */
 #helpContent {
            background-color: #444; /* 暗いグレーの背景 */
            color: #eee; /* 明るいテキスト色 */
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
            max-width: 70%; /* 最大幅 */
            max-height: 80%; /* 最大高さ */
            overflow-y: auto; /* コンテンツが多すぎる場合はスクロール */
            position: relative; /* 閉じるボタンの位置指定のため */
 }

        #helpContent h3 {
            margin-top: 0;
            color: #eee;
            border-bottom:solid 1px #ddd;
        }

        #helpContent h4 {
             margin: 15px 0 5px 0;
             color: #ccc;
        }

         #helpContent ul {
             margin-top: 0;
             padding-left: 20px;
         }

         #helpContent li {
             margin-bottom: 5px;
         }

        #helpContent .copyright{
            font-size: 0.9em;
            text-align:center;
            margin-top:20px;
        }


        #helpContent .copyright a{
            color: #ddd;
        }

        #helpContent p a{
            color: #ddd;
        }

 /* ヘルプ内容ボックス内の閉じるボタンのスタイル */
 #closeHelpButton {
     position: absolute; /* 絶対配置 */
     top: 10px; /* 上端からの距離を調整 */
     right: 10px; /* 右端からの距離を調整 */
     font-size: 24px; /* '×' のサイズを調整 */
     font-weight: bold; /* '×' を太くする */
     color: #ccc; /* '×' の色 */
     background: none; /* 背景をなくす */
     border: none; /* ボーダーをなくす */
     cursor: pointer;
     padding: 5px; /* クリックしやすくするためのパディング */
     line-height: 1; /* 行の高さを調整 */
     transition: color 0.3s ease; /* 色のトランジション */
 }

 #closeHelpButton:hover {
     color: #fff; /* ホバー時の色を明るく */
 }