/* ベーススタイル */
body { font-family: sans-serif; background: #1a1a1a; color: #eee; padding: 20px; }

.selection-group { margin-bottom: 15px; }

/* ローダーボタン */
.button-group { display: flex; gap: 8px; margin: 8px 0; }
.toggle-button {
    padding: 8px 16px; background: #333; border: 1px solid #555;
    color: #fff; cursor: pointer; border-radius: 4px; transition: 0.2s;
}
.toggle-button.active { background: #4CAF50; border-color: #81C784; }

/* 互換性エラー時のスタイル（ベン図の外） */
.incompatible {
    opacity: 0.3 !important;
    pointer-events: none; /* クリック不可にする */
    filter: grayscale(1);
}

option:disabled {
    color: #555;
    background: #222;
}

/* MODグリッドとアイテム */
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.mod-item {
    display: flex; align-items: center; gap: 8px;
    background: #2a2a2a; padding: 10px; border-radius: 4px;
    transition: opacity 0.3s ease;
}

/* カテゴリ表示 */
.category-group { border: 1px solid #444; margin-bottom: 10px; }
.category-header { background: #333; padding: 10px; cursor: pointer; }
.category-content { padding: 10px; display: none; }
.category-group.open .category-content { display: block; }

/* 結果表示 */
.results {
    position: sticky; bottom: 0; background: #000; padding: 15px;
    border-top: 3px solid #4CAF50; display: flex; justify-content: space-around;
}
.result-val { font-weight: bold; color: #4CAF50; font-size: 1.2em; }