/* ================================================================
   Iteration 8 — Labels/Milestones, Webhooks, Enterprise, Search,
   Releases, Wiki, Commit Compare, Email Preferences
   ================================================================ */

/* ===== Labels & Milestones ===== */
.labels-mgr { max-width: 900px; margin: 0 auto; padding: 16px; }
.labels-tab-bar { display: flex; gap: 2px; margin-bottom: 16px; border-bottom: 2px solid var(--border-light, #e5e7eb); }
.labels-tab { padding: 8px 20px; border: none; background: none; cursor: pointer; font-size: 14px; color: var(--text-light, #6b7280); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .2s; }
.labels-tab.active { color: var(--primary, #4f46e5); border-bottom-color: var(--primary, #4f46e5); font-weight: 600; }
.labels-actions { margin-bottom: 12px; }
.label-create-btn { padding: 6px 16px; background: var(--primary, #4f46e5); color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; }
.label-create-btn:hover { opacity: .9; }
.labels-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.label-card { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--card-bg, #fff); border-radius: 8px; border: 1px solid var(--border-light, #e5e7eb); min-width: 280px; flex: 1; }
.label-badge { padding: 2px 10px; border-radius: 12px; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
.label-desc { flex: 1; font-size: 13px; color: var(--text-light, #6b7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.label-card-actions { display: flex; gap: 4px; }
.label-card-actions button { border: none; background: none; cursor: pointer; font-size: 14px; padding: 2px 4px; border-radius: 4px; }
.label-card-actions button:hover { background: var(--hover-bg, #f3f4f6); }
.label-del-btn:hover { color: #ef4444; }

.label-modal { width: 480px; max-width: 90vw; }
.label-modal label { display: block; margin-bottom: 12px; font-size: 13px; color: var(--text-light, #6b7280); }
.label-modal input[type="text"] { width: 100%; padding: 8px 12px; border: 1px solid var(--border-light, #e5e7eb); border-radius: 6px; font-size: 14px; margin-top: 4px; box-sizing: border-box; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.btn-cancel { padding: 8px 16px; background: var(--border-light, #e5e7eb); border: none; border-radius: 6px; cursor: pointer; font-size: 13px; }
.btn-save { padding: 8px 16px; background: var(--primary, #4f46e5); color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; }

/* Milestones */
.milestones-list { display: flex; flex-direction: column; gap: 12px; }
.milestone-card { padding: 14px; background: var(--card-bg, #fff); border-radius: 10px; border: 1px solid var(--border-light, #e5e7eb); }
.ms-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ms-title { margin: 0; font-size: 15px; }
.ms-state { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: #dbeafe; color: #2563eb; }
.ms-state.done { background: #d1fae5; color: #059669; }
.ms-desc { font-size: 13px; color: var(--text-light, #6b7280); margin: 4px 0 8px; }
.ms-meta { display: flex; gap: 16px; font-size: 12px; color: var(--text-light, #6b7280); margin-bottom: 8px; }
.ms-progress-bar { height: 6px; background: var(--border-light, #e5e7eb); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.ms-progress-fill { height: 100%; background: var(--primary, #4f46e5); border-radius: 3px; transition: width .3s; }
.ms-actions { display: flex; gap: 4px; }
.ms-actions button { border: none; background: none; cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 4px; }
.ms-actions button:hover { background: var(--hover-bg, #f3f4f6); }

/* ===== Webhooks ===== */
.webhooks-mgr { max-width: 900px; margin: 0 auto; padding: 16px; }
.webhooks-header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.webhooks-header h3 { margin: 0; flex: 1; }
.webhooks-desc { width: 100%; font-size: 13px; color: var(--text-light, #6b7280); margin: 0; }
.webhook-create-btn { padding: 8px 16px; background: var(--primary, #4f46e5); color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; }
.webhooks-list { display: flex; flex-direction: column; gap: 10px; }
.webhook-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--card-bg, #fff); border-radius: 8px; border: 1px solid var(--border-light, #e5e7eb); }
.wh-info { flex: 1; min-width: 0; }
.wh-url { font-family: monospace; font-size: 13px; word-break: break-all; margin-bottom: 4px; }
.wh-meta { display: flex; gap: 12px; font-size: 12px; color: var(--text-light, #6b7280); }
.wh-status { font-weight: 600; }
.wh-status.active { color: #059669; }
.wh-status.inactive { color: #9ca3af; }
.wh-events { font-size: 12px; color: var(--text-light, #6b7280); margin-top: 4px; }
.wh-actions { display: flex; gap: 4px; }
.wh-actions button { border: none; background: none; cursor: pointer; font-size: 16px; padding: 4px 6px; border-radius: 4px; }
.wh-actions button:hover { background: var(--hover-bg, #f3f4f6); }
.webhook-modal { width: 500px; max-width: 90vw; }
.webhook-modal label { display: block; margin-bottom: 12px; font-size: 13px; color: var(--text-light, #6b7280); }
.webhook-modal input[type="text"] { width: 100%; padding: 8px 12px; border: 1px solid var(--border-light, #e5e7eb); border-radius: 6px; font-size: 14px; margin-top: 4px; box-sizing: border-box; }
.wh-events-picker { margin-bottom: 12px; }
.wh-events-picker strong { font-size: 13px; display: block; margin-bottom: 6px; }
.wh-event-check { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 4px; cursor: pointer; }

/* ===== Enterprise ===== */
.enterprise-mgr { max-width: 900px; margin: 0 auto; padding: 16px; }
.ent-header { margin-bottom: 16px; }
.ent-header h3 { margin: 0 0 4px; }
.ent-desc { font-size: 13px; color: var(--text-light, #6b7280); margin: 0; }
.ent-grid { display: flex; flex-direction: column; gap: 10px; }
.ent-card { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--card-bg, #fff); border-radius: 10px; border: 1px solid var(--border-light, #e5e7eb); cursor: pointer; transition: all .2s; }
.ent-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); border-color: var(--primary, #4f46e5); }
.ent-card.selected { border-color: var(--primary, #4f46e5); background: #eef2ff; }
.ent-avatar img { border-radius: 8px; }
.ent-avatar { font-size: 32px; text-align: center; width: 48px; }
.ent-info { flex: 1; }
.ent-info h4 { margin: 0 0 4px; font-size: 15px; }
.ent-info p { margin: 0 0 4px; font-size: 13px; color: var(--text-light, #6b7280); }
.ent-meta { font-size: 12px; color: var(--text-light, #6b7280); }
.ent-arrow { font-size: 14px; color: var(--text-light, #6b7280); }
.ent-detail-panel { margin-top: 16px; }
.ent-detail-content { padding: 16px; background: var(--card-bg, #fff); border-radius: 10px; border: 1px solid var(--border-light, #e5e7eb); }
.ent-back-btn { padding: 6px 14px; background: var(--border-light, #e5e7eb); border: none; border-radius: 6px; cursor: pointer; font-size: 13px; margin-bottom: 16px; }
.ent-back-btn:hover { opacity: .8; }
.ent-profile h3 { margin: 0 0 6px; }
.ent-profile p { font-size: 13px; color: var(--text-light, #6b7280); margin: 0 0 12px; }
.ent-stats { display: flex; gap: 20px; margin-bottom: 16px; }
.ent-stat strong { display: block; font-size: 20px; color: var(--primary, #4f46e5); }
.ent-stat span { font-size: 12px; color: var(--text-light, #6b7280); }
.ent-section { margin-bottom: 20px; }
.ent-section h4 { margin: 0 0 10px; font-size: 14px; border-bottom: 1px solid var(--border-light, #e5e7eb); padding-bottom: 6px; }
.ent-members-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.ent-member-card { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--hover-bg, #f3f4f6); border-radius: 8px; font-size: 13px; }
.ent-member-card img { border-radius: 50%; }
.ent-member-card small { color: var(--text-light, #6b7280); }
.ent-reports-list { display: flex; flex-direction: column; gap: 6px; }
.ent-report-item { display: flex; gap: 12px; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--border-light, #e5e7eb); }
.ent-report-item:last-child { border-bottom: none; }

/* ===== Global Search ===== */
.gsearch-mgr { max-width: 900px; margin: 0 auto; padding: 16px; }
.gsearch-mgr h3 { margin: 0 0 4px; }
.gsearch-desc { font-size: 13px; color: var(--text-light, #6b7280); margin: 0 0 16px; }
.gsearch-bar { display: flex; gap: 8px; margin-bottom: 16px; }
.gsearch-bar input { flex: 1; padding: 10px 16px; border: 1px solid var(--border-light, #e5e7eb); border-radius: 8px; font-size: 14px; }
.gsearch-bar input:focus { outline: none; border-color: var(--primary, #4f46e5); box-shadow: 0 0 0 3px rgba(79,70,229,.1); }
.gsearch-bar button { padding: 10px 24px; background: var(--primary, #4f46e5); color: #fff; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; }
.gsearch-bar button:hover { opacity: .9; }
.gsearch-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 2px solid var(--border-light, #e5e7eb); }
.gsearch-tab { padding: 8px 18px; border: none; background: none; cursor: pointer; font-size: 13px; color: var(--text-light, #6b7280); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .2s; }
.gsearch-tab.active { color: var(--primary, #4f46e5); border-bottom-color: var(--primary, #4f46e5); font-weight: 600; }
.gsearch-options { display: flex; gap: 8px; margin-bottom: 12px; }
.gsearch-options select { padding: 6px 10px; border: 1px solid var(--border-light, #e5e7eb); border-radius: 6px; font-size: 13px; }
.gsearch-summary { font-size: 13px; color: var(--text-light, #6b7280); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-light, #e5e7eb); }
.gsearch-item { padding: 12px 0; border-bottom: 1px solid var(--border-light, #e5e7eb); }
.gsearch-item:last-child { border-bottom: none; }
.gsearch-item.user-item { display: flex; align-items: center; }
.gs-item-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.gs-icon { font-size: 16px; }
.gs-title { font-weight: 600; font-size: 14px; color: var(--primary, #4f46e5); text-decoration: none; }
.gs-title:hover { text-decoration: underline; }
.gs-stars { font-size: 12px; color: var(--text-light, #6b7280); margin-left: auto; }
.gs-desc { font-size: 13px; color: var(--text-light, #6b7280); margin: 4px 0; }
.gs-meta { display: flex; gap: 12px; font-size: 12px; color: var(--text-light, #6b7280); }
.gs-lang { padding: 1px 6px; background: var(--hover-bg, #f3f4f6); border-radius: 4px; }
.gsearch-pagination { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 16px 0; }
.gsearch-pagination button { padding: 6px 14px; border: 1px solid var(--border-light, #e5e7eb); background: #fff; border-radius: 6px; cursor: pointer; font-size: 13px; }
.gsearch-pagination button:hover { background: var(--hover-bg, #f3f4f6); }
.gsearch-pagination span { font-size: 13px; color: var(--text-light, #6b7280); }

/* ===== Releases ===== */
.releases-mgr { max-width: 900px; margin: 0 auto; padding: 16px; }
.releases-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.releases-header h3 { margin: 0; flex: 1; }
.release-create-btn { padding: 8px 16px; background: var(--primary, #4f46e5); color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; }
.releases-list { display: flex; flex-direction: column; gap: 14px; }
.release-card { padding: 16px; background: var(--card-bg, #fff); border-radius: 10px; border: 1px solid var(--border-light, #e5e7eb); }
.rel-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rel-title { margin: 0; font-size: 16px; }
.rel-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.rel-tag { padding: 2px 8px; background: var(--hover-bg, #f3f4f6); border-radius: 4px; font-size: 12px; }
.rel-tag.pre { background: #fef3c7; color: #92400e; }
.rel-tag.draft { background: #f3f4f6; color: #6b7280; }
.rel-body { font-size: 14px; margin-bottom: 10px; color: var(--text-secondary, #4b5563); }
.rel-meta { display: flex; gap: 16px; font-size: 12px; color: var(--text-light, #6b7280); }
.rel-assets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-light, #e5e7eb); }
.rel-asset-link { font-size: 13px; color: var(--primary, #4f46e5); text-decoration: none; }
.rel-asset-link:hover { text-decoration: underline; }
.release-modal { width: 500px; max-width: 90vw; }
.release-modal label { display: block; margin-bottom: 10px; font-size: 13px; color: var(--text-light, #6b7280); }
.release-modal input[type="text"], .release-modal textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--border-light, #e5e7eb); border-radius: 6px; font-size: 14px; margin-top: 4px; box-sizing: border-box; }
.rel-check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.rel-check input { margin: 0; }

/* ===== Wiki ===== */
.wiki-mgr { max-width: 900px; margin: 0 auto; padding: 16px; }
.wiki-header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.wiki-header h3 { margin: 0; flex: 1; }
.wiki-desc { width: 100%; font-size: 13px; color: var(--text-light, #6b7280); margin: 0; }
.wiki-create-btn { padding: 8px 16px; background: var(--primary, #4f46e5); color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; }
.wiki-cat-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.wiki-cat { padding: 5px 14px; border: 1px solid var(--border-light, #e5e7eb); background: var(--card-bg, #fff); border-radius: 16px; cursor: pointer; font-size: 13px; transition: all .2s; }
.wiki-cat:hover { border-color: var(--primary, #4f46e5); }
.wiki-cat.active { background: var(--primary, #4f46e5); color: #fff; border-color: var(--primary, #4f46e5); }
.wiki-pages { display: flex; flex-direction: column; gap: 10px; }
.wiki-card { padding: 14px; background: var(--card-bg, #fff); border-radius: 10px; border: 1px solid var(--border-light, #e5e7eb); cursor: pointer; transition: all .2s; }
.wiki-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); border-color: var(--primary, #4f46e5); }
.wiki-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.wiki-card-header h4 { margin: 0; font-size: 15px; flex: 1; }
.wiki-cat-tag { padding: 2px 8px; background: var(--hover-bg, #f3f4f6); border-radius: 4px; font-size: 12px; color: var(--text-light, #6b7280); }
.wiki-excerpt { font-size: 13px; color: var(--text-light, #6b7280); margin: 0 0 8px; }
.wiki-meta { display: flex; gap: 14px; font-size: 12px; color: var(--text-light, #6b7280); }
.wiki-pager { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 16px 0; }
.wiki-pager button { padding: 6px 14px; border: 1px solid var(--border-light, #e5e7eb); background: #fff; border-radius: 6px; cursor: pointer; font-size: 13px; }
.wiki-pager button:hover { background: var(--hover-bg, #f3f4f6); }
.wiki-pager span { font-size: 13px; color: var(--text-light, #6b7280); }

.wiki-page-view { max-width: 900px; margin: 0 auto; padding: 16px; }
.wiki-back-btn { padding: 6px 14px; background: var(--border-light, #e5e7eb); border: none; border-radius: 6px; cursor: pointer; font-size: 13px; margin-bottom: 16px; }
.wiki-page-view h2 { margin: 0 0 10px; }
.wiki-page-meta { display: flex; gap: 14px; font-size: 13px; color: var(--text-light, #6b7280); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border-light, #e5e7eb); }
.wiki-page-content { font-size: 15px; line-height: 1.7; color: var(--text-primary, #1f2937); }
.wiki-page-content h2, .wiki-page-content h3, .wiki-page-content h4 { margin-top: 1.2em; }
.wiki-page-content code { background: var(--hover-bg, #f3f4f6); padding: 1px 5px; border-radius: 3px; font-size: .9em; }
.wiki-page-actions { display: flex; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-light, #e5e7eb); }
.wiki-page-actions button { padding: 8px 18px; border: 1px solid var(--border-light, #e5e7eb); background: var(--card-bg, #fff); border-radius: 6px; cursor: pointer; font-size: 13px; }
.wiki-page-actions button:hover { background: var(--hover-bg, #f3f4f6); }
.wiki-editor-modal { width: 600px; max-width: 90vw; }
.wiki-editor-modal label { display: block; margin-bottom: 10px; font-size: 13px; color: var(--text-light, #6b7280); }
.wiki-editor-modal input[type="text"], .wiki-editor-modal textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--border-light, #e5e7eb); border-radius: 6px; font-size: 14px; margin-top: 4px; box-sizing: border-box; font-family: inherit; }

/* ===== Commit Compare ===== */
.compare-mgr { max-width: 900px; margin: 0 auto; padding: 16px; }
.compare-mgr h3 { margin: 0 0 4px; }
.compare-desc { font-size: 13px; color: var(--text-light, #6b7280); margin: 0 0 16px; }
.compare-form { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.compare-field { flex: 1; min-width: 200px; }
.compare-field label { display: block; font-size: 13px; color: var(--text-light, #6b7280); margin-bottom: 4px; font-weight: 500; }
.compare-field select { width: 100%; padding: 8px 12px; border: 1px solid var(--border-light, #e5e7eb); border-radius: 6px; font-size: 14px; background: var(--card-bg, #fff); }
.compare-arrow { font-size: 20px; color: var(--text-light, #6b7280); padding-bottom: 10px; }
.compare-btn { padding: 10px 20px; background: var(--primary, #4f46e5); color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500; }
.compare-btn:hover { opacity: .9; }

.cmp-summary { display: flex; gap: 16px; margin-bottom: 16px; }
.cmp-stat { padding: 12px 16px; background: var(--card-bg, #fff); border-radius: 8px; border: 1px solid var(--border-light, #e5e7eb); text-align: center; min-width: 80px; }
.cmp-stat strong, .cmp-stat { font-size: 20px; color: var(--text-primary, #1f2937); font-weight: 700; }
.cmp-stat span { display: block; font-size: 12px; color: var(--text-light, #6b7280); font-weight: 400; }
.cmp-stat.ahead { color: #059669; }
.cmp-stat.behind { color: #dc2626; }
.cmp-stat.files { color: var(--primary, #4f46e5); }
.cmp-section { margin-bottom: 20px; }
.cmp-section h4 { margin: 0 0 10px; font-size: 14px; }
.cmp-commits-list { display: flex; flex-direction: column; gap: 4px; }
.cmp-commit-item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--card-bg, #fff); border-radius: 6px; font-size: 13px; border: 1px solid var(--border-light, #e5e7eb); }
.cmp-sha { font-family: monospace; font-size: 12px; background: var(--hover-bg, #f3f4f6); padding: 2px 6px; border-radius: 4px; color: var(--primary, #4f46e5); }
.cmp-msg { flex: 1; }
.cmp-author { font-size: 12px; color: var(--text-light, #6b7280); }
.cmp-more { font-size: 12px; color: var(--text-light, #6b7280); text-align: center; padding: 8px; }
.cmp-files-list { display: flex; flex-direction: column; gap: 2px; }
.cmp-file-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; font-size: 13px; border-bottom: 1px solid var(--border-light, #e5e7eb); flex-wrap: wrap; }
.cmp-file-item:last-child { border-bottom: none; }
.cmp-file-status { font-weight: 700; width: 16px; }
.cmp-file-item.added .cmp-file-status { color: #059669; }
.cmp-file-item.removed .cmp-file-status { color: #dc2626; }
.cmp-file-item.modified .cmp-file-status { color: #d97706; }
.cmp-file-name { flex: 1; font-family: monospace; font-size: 12px; cursor: pointer; color: var(--primary, #4f46e5); }
.cmp-file-name:hover { text-decoration: underline; }
.cmp-file-changes { display: flex; gap: 4px; font-size: 12px; }
.cmp-add { color: #059669; }
.cmp-del { color: #dc2626; }
.cmp-patch { width: 100%; margin-top: 6px; padding: 10px; background: #1e1e1e; color: #d4d4d4; border-radius: 6px; font-size: 12px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; max-height: 300px; overflow-y: auto; }

/* ===== Email Preferences ===== */
.email-prefs-mgr { max-width: 700px; margin: 0 auto; padding: 16px; }
.email-prefs-mgr h3 { margin: 0 0 4px; }
.prefs-desc { font-size: 13px; color: var(--text-light, #6b7280); margin: 0 0 16px; }
.prefs-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.pref-card { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--card-bg, #fff); border-radius: 10px; border: 1px solid var(--border-light, #e5e7eb); }
.pref-icon { font-size: 24px; width: 40px; text-align: center; }
.pref-info { flex: 1; }
.pref-info strong { font-size: 14px; }
.pref-info p { margin: 2px 0 0; font-size: 12px; color: var(--text-light, #6b7280); }
.pref-toggle { position: relative; display: inline-block; width: 48px; height: 26px; }
.pref-toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #d1d5db; border-radius: 26px; cursor: pointer; transition: .3s; }
.toggle-slider::before { content: ''; position: absolute; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: #fff; border-radius: 50%; transition: .3s; }
.pref-toggle input:checked + .toggle-slider { background-color: var(--primary, #4f46e5); }
.pref-toggle input:checked + .toggle-slider::before { transform: translateX(22px); }
.prefs-save-info { text-align: center; }
.prefs-auto-save { font-size: 12px; color: var(--text-light, #6b7280); }

/* ===== Modal Overlay (shared) ===== */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-box { background: var(--card-bg, #fff); border-radius: 12px; padding: 24px; box-shadow: 0 10px 40px rgba(0,0,0,.15); max-height: 85vh; overflow-y: auto; }
.modal-box h3 { margin: 0 0 16px; font-size: 17px; }

/* ===== Shared ===== */
.loading-block { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px; gap: 8px; color: var(--text-light, #6b7280); font-size: 14px; }
.empty-block { display: flex; align-items: center; justify-content: center; padding: 32px; color: var(--text-light, #6b7280); font-size: 14px; }
.spinner { width: 32px; height: 32px; border: 3px solid var(--border-light, #e5e7eb); border-top-color: var(--primary, #4f46e5); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }