        <div v-if="showSkillsModal" class="modal-overlay" @click.self="closeSkillsModal">
            <div class="modal modal-wide skills-modal" role="dialog" aria-modal="true" aria-labelledby="skills-modal-title">
                <div class="modal-header skills-modal-header">
                    <div>
                        <div class="modal-title" id="skills-modal-title">{{ t('modal.skills.title') }}</div>
                        <div class="skills-modal-subtitle">{{ t('modal.skills.subtitle') }}</div>
                    </div>
                    <div class="modal-header-actions skills-modal-actions">
                        <div class="market-target-switch market-target-switch-compact" role="group" :aria-label="t('modal.skills.target.aria')">
                            <button
                                type="button"
                                :class="['market-target-chip', { active: skillsTargetApp === 'codex' }]"
                                :aria-pressed="skillsTargetApp === 'codex'"
                                :disabled="loading || !!initError || skillsMarketBusy"
                                @click="setSkillsTargetApp('codex', { silent: false })">
                                Codex
                            </button>
                            <button
                                type="button"
                                :class="['market-target-chip', { active: skillsTargetApp === 'claude' }]"
                                :aria-pressed="skillsTargetApp === 'claude'"
                                :disabled="loading || !!initError || skillsMarketBusy"
                                @click="setSkillsTargetApp('claude', { silent: false })">
                                Claude Code
                            </button>
                        </div>
                        <button class="btn-mini" @click="refreshSkillsList({ silent: false })" :disabled="skillsLoading || skillsDeleting || skillsScanningImports || skillsImporting || skillsZipImporting || skillsExporting">
                            {{ skillsLoading ? t('common.refreshing') : t('common.refresh') }}
                        </button>
                    </div>
                </div>

                <div class="form-group skills-root-group">
                    <label class="form-label">{{ t('modal.skills.rootDir', { label: skillsTargetLabel }) }}</label>
                    <div class="skills-root-box">{{ skillsRootPath || skillsDefaultRootPath }}</div>
                </div>

                <div class="skills-summary-strip">
                    <div class="skills-summary-item">
                        <span class="skills-summary-label">{{ t('modal.skills.summary.target') }}</span>
                        <strong class="skills-summary-value">{{ skillsTargetLabel }}</strong>
                    </div>
                    <div class="skills-summary-item">
                        <span class="skills-summary-label">{{ t('modal.skills.summary.total') }}</span>
                        <strong class="skills-summary-value">{{ skillsList.length }}</strong>
                    </div>
                    <div class="skills-summary-item">
                        <span class="skills-summary-label">{{ t('modal.skills.summary.withSkill') }}</span>
                        <strong class="skills-summary-value">{{ skillsConfiguredCount }}</strong>
                    </div>
                    <div class="skills-summary-item">
                        <span class="skills-summary-label">{{ t('modal.skills.summary.missingSkill') }}</span>
                        <strong class="skills-summary-value">{{ skillsMissingSkillFileCount }}</strong>
                    </div>
                    <div class="skills-summary-item">
                        <span class="skills-summary-label">{{ t('modal.skills.summary.importable') }}</span>
                        <strong class="skills-summary-value">{{ skillsImportList.length }}</strong>
                    </div>
                </div>

                <div class="skills-manager-grid" :aria-label="t('modal.skills.panel.aria')">
                    <div class="skills-manager-col skills-manager-left">
                        <div class="skills-panel">
                            <div class="skills-panel-header">
                                <div class="skills-panel-title-wrap">
                                    <div class="skills-panel-title">{{ t('modal.skills.local.title') }}</div>
                                    <div class="skills-panel-note">{{ t('modal.skills.local.note') }}</div>
                                </div>
                                <button
                                    class="btn-mini"
                                    @click="resetSkillsFilters"
                                    :disabled="skillsLoading || skillsDeleting || !skillsFilterDirty">
                                    {{ t('common.resetFilters') }}
                                </button>
                            </div>

                            <div class="skills-filter-row">
                                <input
                                    class="form-input"
                                    type="text"
                                    v-model.trim="skillsKeyword"
                                    :aria-label="t('modal.skills.filter.keywordAria')"
                                    :placeholder="t('modal.skills.filter.keywordPlaceholder')">
                                <select class="form-select skills-status-select" v-model="skillsStatusFilter" :aria-label="t('modal.skills.filter.statusAria')">
                                    <option value="all">{{ t('modal.skills.filter.status.all') }}</option>
                                    <option value="with-skill-file">{{ t('modal.skills.filter.status.withSkill') }}</option>
                                    <option value="missing-skill-file">{{ t('modal.skills.filter.status.missingSkill') }}</option>
                                </select>
                            </div>

                            <div class="skill-toolbar">
                                <label class="skill-select-all">
                                    <input type="checkbox" :checked="skillsAllSelected" @change="toggleAllSkillsSelection" :disabled="skillsLoading || skillsDeleting || skillsSelectableNames.length === 0">
                                    <span>{{ skillsAllSelected ? t('common.unselectAll') : t('common.selectAll') }}</span>
                                </label>
                                <span class="skill-toolbar-count">{{ t('modal.skills.selection.stats', { selected: skillsSelectedCount, filtered: filteredSkillsList.length, total: skillsList.length, visibleSelected: skillsVisibleSelectedCount }) }}</span>
                            </div>

                            <div v-if="skillsList.length === 0" class="skills-empty-state">{{ t('modal.skills.empty.local') }}</div>
                            <div v-else-if="filteredSkillsList.length === 0" class="skills-empty-state">{{ t('modal.skills.empty.filtered') }}</div>
                            <div v-else class="skill-list">
                                <label
                                    class="skill-item"
                                    :class="{ selected: skillsSelectedNames.includes(skill.name) }"
                                    v-for="skill in filteredSkillsList"
                                    :key="'skill-' + skill.name">
                                    <input type="checkbox" v-model="skillsSelectedNames" :value="skill.name" :disabled="skillsDeleting">
                                    <div class="skill-item-main">
                                        <div class="skill-item-title">{{ skill.displayName || skill.name }}</div>
                                        <div v-if="skill.description" class="skill-item-description">{{ skill.description }}</div>
                                        <div class="skill-item-meta">
                                            <span class="skill-item-path" :title="skill.path">{{ skill.path }}</span>
                                            <span :class="['pill', skill.hasSkillFile ? 'configured' : 'empty']">
                                                {{ skill.hasSkillFile ? t('modal.skills.pill.hasSkillFile') : t('modal.skills.pill.missingSkillFile') }}
                                            </span>
                                            <span class="pill source">{{ skill.sourceType === 'symlink' ? t('modal.skills.pill.symlink') : t('modal.skills.pill.dir') }}</span>
                                        </div>
                                    </div>
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="skills-manager-col skills-manager-right">
                        <div class="skills-panel skills-import-block">
                            <div class="skills-panel-header">
                                <div class="skills-panel-title-wrap">
                                    <div class="skills-import-title">{{ t('modal.skills.import.title') }}</div>
                                    <div class="skills-panel-note">{{ t('modal.skills.import.note', { label: skillsTargetLabel }) }}</div>
                                </div>
                                <button class="btn-mini" @click="scanImportableSkills" :disabled="skillsLoading || skillsDeleting || skillsScanningImports || skillsImporting || skillsZipImporting || skillsExporting">
                                    {{ skillsScanningImports ? t('common.scanning') : t('modal.skills.import.scan') }}
                                </button>
                            </div>
                            <div class="skill-toolbar">
                                <label class="skill-select-all">
                                    <input type="checkbox" :checked="skillsImportAllSelected" @change="toggleAllSkillsImportSelection" :disabled="skillsScanningImports || skillsImporting || skillsImportSelectableKeys.length === 0">
                                    <span>{{ skillsImportAllSelected ? t('common.unselectAll') : t('common.selectAll') }}</span>
                                </label>
                                <span class="skill-toolbar-count">{{ t('modal.skills.import.stats', { selected: skillsImportSelectedCount, total: skillsImportSelectableKeys.length, configured: skillsImportConfiguredCount, missing: skillsImportMissingSkillFileCount }) }}</span>
                            </div>
                            <div v-if="skillsImportList.length === 0" class="skills-empty-state skills-import-empty">{{ t('modal.skills.import.emptyHint') }}</div>
                            <div v-else class="skill-list skills-import-list">
                                <label
                                    class="skill-item"
                                    :class="{ selected: skillsImportSelectedKeys.includes(buildSkillImportKey(skill)) }"
                                    v-for="skill in skillsImportList"
                                    :key="'import-skill-' + buildSkillImportKey(skill)">
                                    <input type="checkbox" v-model="skillsImportSelectedKeys" :value="buildSkillImportKey(skill)" :disabled="skillsImporting">
                                    <div class="skill-item-main">
                                        <div class="skill-item-title">{{ skill.displayName || skill.name }}</div>
                                        <div v-if="skill.description" class="skill-item-description">{{ skill.description }}</div>
                                        <div class="skill-item-meta">
                                            <span class="skill-item-path" :title="skill.sourcePath">{{ skill.sourcePath }}</span>
                                            <span class="pill source">{{ skill.sourceLabel }}</span>
                                            <span :class="['pill', skill.hasSkillFile ? 'configured' : 'empty']">
                                                {{ skill.hasSkillFile ? t('modal.skills.pill.hasSkillFile') : t('modal.skills.pill.missingSkillFile') }}
                                            </span>
                                        </div>
                                    </div>
                                </label>
                            </div>
                        </div>

                        <div class="skills-panel skills-actions-panel">
                            <div class="skills-panel-header">
                                <div class="skills-panel-title-wrap">
                                    <div class="skills-panel-title">{{ t('modal.skills.bulk.title') }}</div>
                                    <div class="skills-panel-note">{{ t('modal.skills.bulk.note') }}</div>
                                </div>
                            </div>
                            <div class="skills-actions-grid">
                                <button class="btn btn-cancel" @click="triggerSkillsZipImport" :disabled="skillsZipImporting || skillsDeleting || skillsImporting || skillsScanningImports || skillsExporting">
                                    {{ skillsZipImporting ? t('modal.skills.actions.zipImporting') : t('modal.skills.actions.zipImport') }}
                                </button>
                                <button class="btn btn-confirm" @click="exportSelectedSkills" :disabled="skillsExporting || skillsSelectedCount === 0 || skillsDeleting || skillsImporting || skillsScanningImports || skillsZipImporting">
                                    {{ skillsExporting ? t('modal.skills.actions.exporting') : t('modal.skills.actions.exportSelected') }}
                                </button>
                                <button class="btn btn-confirm secondary" @click="importSelectedSkills" :disabled="skillsImporting || skillsScanningImports || skillsImportSelectedCount === 0 || skillsZipImporting || skillsExporting || skillsDeleting">
                                    {{ skillsImporting ? t('modal.skills.actions.importing') : t('modal.skills.actions.importSelected') }}
                                </button>
                                <button class="btn btn-confirm btn-danger" @click="deleteSelectedSkills" :disabled="skillsDeleting || skillsSelectedCount === 0 || skillsImporting || skillsZipImporting || skillsExporting">
                                    {{ skillsDeleting ? t('modal.skills.actions.deleting') : t('modal.skills.actions.deleteSelected') }}
                                </button>
                                <button class="btn btn-cancel skills-close-btn" @click="closeSkillsModal" :disabled="skillsLoading || skillsDeleting || skillsImporting || skillsScanningImports || skillsZipImporting || skillsExporting">
                                    {{ t('common.close') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <input
            ref="skillsZipImportInput"
            type="file"
            accept=".zip,application/zip"
            style="display:none"
            @change="handleSkillsZipImportChange">
