/* ==================== UNIVERSAL SUBMISSION COMPONENT ==================== */

.universal-submission {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ==================== TAB BAR ==================== */

.submission-tab-bar {
    display: flex;
    gap: 8px;
    padding: 6px;
    background: var(--color-bg-card-3);
    border-radius: var(--border-radius-xl);
}

.submission-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    background: transparent;
    border: none;
    border-radius: var(--border-radius-lg);
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-base);
    flex: 1;
}

.submission-tab:hover {
    background: var(--color-bg-card-2);
    color: var(--color-text-primary);
}

.submission-tab.active {
    background: linear-gradient(135deg, rgba(90, 76, 233, 0.15) 0%, rgba(124, 108, 240, 0.15) 100%);
    color: var(--color-text-primary);
    box-shadow: 0 2px 8px rgba(90, 76, 233, 0.15);
}

.submission-tab-icon {
    font-size: 18px;
}

.submission-tab-name {
    font-weight: var(--font-weight-medium);
}

/* ==================== TAB CONTENT ==================== */

.submission-tab-content {
    min-height: 300px;
}

.submission-panel {
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==================== UPLOAD PANEL ==================== */

.upload-panel .file-upload-area {
    border: 2px dashed var(--color-border-secondary);
    border-radius: var(--border-radius-xl);
    padding: 40px 24px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-base);
    background: var(--color-bg-card-3);
}

.upload-panel .file-upload-area:hover,
.upload-panel .file-upload-area.dragover {
    border-color: var(--color-primary-glow);
    background: rgba(90, 76, 233, 0.05);
}

.upload-panel .file-upload-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.upload-panel .file-upload-text {
    font-size: 16px;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.upload-panel .file-upload-hint {
    font-size: 13px;
    color: var(--color-text-muted);
}

.upload-panel .file-upload-input {
    display: none;
}

/* Uploaded Files List */
.uploaded-files-list {
    margin-top: 20px;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-xl);
    overflow: hidden;
}

.uploaded-files-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--color-bg-card-3);
    border-bottom: 1px solid var(--color-border-primary);
    font-size: 13px;
    color: var(--color-text-secondary);
}

.clear-all-btn {
    background: none;
    border: none;
    color: var(--color-error);
    font-size: 12px;
    cursor: pointer;
    transition: color var(--transition-base);
}

.clear-all-btn:hover {
    color: #ef4444;
}

.uploaded-file-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-bg-card-2);
    transition: background var(--transition-base);
}

.uploaded-file-item:last-child {
    border-bottom: none;
}

.uploaded-file-item:hover {
    background: var(--color-bg-card-3);
}

.uploaded-file-item .file-icon {
    font-size: 24px;
    width: 32px;
    text-align: center;
}

.uploaded-file-item .file-info {
    flex: 1;
    min-width: 0;
}

.uploaded-file-item .file-name {
    font-size: 14px;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uploaded-file-item .file-size {
    font-size: 12px;
    color: var(--color-text-muted);
}

.file-remove-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--border-radius-sm);
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-error);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
}

.file-remove-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* ==================== LINKS PANEL ==================== */

.link-input-section {
    margin-bottom: 20px;
}

.link-input-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.link-url-input {
    flex: 1;
}

.link-source-select {
    width: 160px;
}

.add-link-btn {
    white-space: nowrap;
}

.link-input-hint {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 8px;
}

/* Added Links List */
.added-links-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.added-link-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--color-bg-card-3);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-xl);
    transition: all var(--transition-base);
}

.added-link-item:hover {
    background: var(--color-bg-card-2);
}

.link-source-icon {
    font-size: 20px;
    width: 28px;
    text-align: center;
}

.link-info {
    flex: 1;
    min-width: 0;
}

.link-url {
    font-size: 14px;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.link-type {
    font-size: 12px;
    color: var(--color-text-muted);
}

.link-remove-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--border-radius-sm);
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-error);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
}

.link-remove-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* ==================== SOCIAL PANEL ==================== */

/* Brand Toggle */
.social-brand-toggle {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.social-toggle-option {
    position: relative;
    display: block;
    padding: 14px 16px;
    background: var(--color-bg-card-3);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-xl);
    cursor: pointer;
    transition: all var(--transition-base);
}

.social-toggle-option:hover {
    background: var(--color-bg-card-2);
}

.social-toggle-option.active,
.social-toggle-option:has(input:checked) {
    background: rgba(90, 76, 233, 0.1);
    border-color: rgba(90, 76, 233, 0.35);
}

.social-toggle-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.social-toggle-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toggle-label {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.toggle-desc {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* Brand Selector */
.social-panel .brand-selector {
    width: 100%;
    margin-bottom: 20px;
}

/* Platforms Section */
.social-platforms-section {
    margin-bottom: 16px;
}

.social-section-label {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-bottom: 12px;
    font-weight: var(--font-weight-medium);
}

.social-platforms-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
}

.social-platform-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--color-bg-card-3);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
}

.social-platform-row:hover {
    background: var(--color-bg-card-2);
}

.social-platform-row.selected {
    background: rgba(90, 76, 233, 0.08);
    border-color: rgba(90, 76, 233, 0.25);
}

.social-platform-row .platform-icon {
    font-size: 20px;
    width: 28px;
    text-align: center;
}

.social-platform-row .platform-info {
    flex: 1;
    min-width: 0;
}

.social-platform-row .platform-name {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.platform-handle-input {
    width: 100%;
    padding: 6px 10px;
    background: var(--color-bg-card-2);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-sm);
    color: var(--color-text-primary);
    font-size: 13px;
    transition: all var(--transition-base);
}

.platform-handle-input:focus {
    outline: none;
    border-color: var(--color-primary-glow);
    background: var(--color-border-primary);
}

.platform-handle-input::placeholder {
    color: var(--color-border-secondary);
}

/* Platform Checkbox */
.platform-checkbox {
    position: relative;
    cursor: pointer;
}

.platform-checkbox input {
    position: absolute;
    opacity: 0;
}

.platform-checkbox .checkbox-visual {
    width: 22px;
    height: 22px;
    border: 2px solid var(--color-border-secondary);
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
}

.platform-checkbox input:checked + .checkbox-visual {
    background: var(--gradient-primary);
    border-color: transparent;
}

.platform-checkbox input:checked + .checkbox-visual::after {
    content: '✓';
    color: var(--color-text-primary);
    font-size: 12px;
    font-weight: bold;
}

/* Analysis Mode Toggle */
.analysis-mode-section {
    padding-top: 16px;
    border-top: 1px solid var(--color-border-primary);
}

.analysis-mode-toggle {
    display: flex;
    gap: 8px;
}

.analysis-mode-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--color-bg-card-3);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-lg);
    color: var(--color-text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: all var(--transition-base);
}

.analysis-mode-btn:hover {
    background: var(--color-bg-card-2);
}

.analysis-mode-btn.active {
    background: rgba(90, 76, 233, 0.1);
    border-color: rgba(90, 76, 233, 0.35);
    color: var(--color-text-primary);
}

.analysis-mode-icon {
    font-size: 16px;
}

/* ==================== FIGMA PANEL ==================== */

/* Access Method Selector */
.figma-access-methods {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.figma-access-method {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    background: var(--color-bg-card-3);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-xl);
    cursor: pointer;
    transition: all var(--transition-base);
    text-align: center;
}

.figma-access-method:hover {
    background: var(--color-bg-card-2);
    border-color: var(--color-border-secondary);
}

.figma-access-method.active {
    background: rgba(90, 76, 233, 0.1);
    border-color: rgba(90, 76, 233, 0.35);
}

.figma-access-icon {
    font-size: 28px;
}

.figma-access-label {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.figma-access-desc {
    font-size: 11px;
    color: var(--color-text-muted);
}

/* Section Card Component */
.figma-section-card {
    background: var(--color-bg-card-3);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-xl);
    padding: 20px;
    margin-bottom: 16px;
}

.figma-section-card:last-child {
    margin-bottom: 0;
}

.figma-section-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-bg-card-2);
}

.figma-section-card-icon {
    font-size: 18px;
}

.figma-section-card-title {
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.figma-section-card-count {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-muted);
    margin-left: auto;
}

/* Method Content Container */
.figma-method-content {
    margin-bottom: 20px;
}

/* Cloud Method Styles */
.figma-cloud-setup {
    background: var(--color-bg-card-3);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-xl);
    padding: 24px;
}

.figma-setup-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.figma-setup-icon {
    font-size: 32px;
}

.figma-setup-title {
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.figma-setup-desc {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.figma-token-input-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.figma-token-input {
    flex: 1;
    font-family: monospace;
}

.figma-token-hint {
    font-size: 12px;
    color: var(--color-text-muted);
}

.figma-token-hint a {
    color: var(--color-primary);
    text-decoration: none;
}

.figma-token-hint a:hover {
    text-decoration: underline;
}

/* Cloud Connected State */
.figma-cloud-connected {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--color-bg-card-3);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-xl);
    padding: 20px;
}

.figma-cloud-tabs {
    display: flex;
    gap: 8px;
    padding: 4px;
    background: var(--color-bg-card-3);
    border-radius: var(--border-radius-lg);
}

.figma-cloud-tab {
    flex: 1;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-radius: var(--border-radius-md);
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-base);
}

.figma-cloud-tab:hover {
    background: var(--color-bg-card-2);
    color: var(--color-text-primary);
}

.figma-cloud-tab.active {
    background: rgba(90, 76, 233, 0.15);
    color: var(--color-text-primary);
}

.figma-token-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(115, 249, 124, 0.08);
    border: 1px solid rgba(115, 249, 124, 0.2);
    border-radius: var(--border-radius-lg);
}

.figma-token-valid {
    font-size: 13px;
    color: var(--color-success);
}

.figma-token-change {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: color var(--transition-base);
}

.figma-token-change:hover {
    color: var(--color-text-primary);
}

/* File Browser */
.figma-file-browser {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 4px;
}

.figma-files-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

.figma-file-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--color-bg-card-3);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-xl);
    cursor: pointer;
    transition: all var(--transition-base);
    text-align: center;
}

.figma-file-item:hover {
    background: var(--color-bg-card-2);
    border-color: rgba(90, 76, 233, 0.35);
    transform: translateY(-2px);
}

.figma-file-item.selected {
    background: rgba(90, 76, 233, 0.1);
    border-color: var(--color-primary-glow);
}

.figma-file-thumbnail {
    width: 100%;
    height: 80px;
    background: var(--color-bg-card-2);
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    overflow: hidden;
    border: 1px solid var(--color-bg-card-2);
}

.figma-file-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.figma-file-info {
    width: 100%;
}

.figma-file-name {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.figma-file-date {
    font-size: 11px;
    color: var(--color-text-muted);
}

.figma-files-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px;
    color: var(--color-text-secondary);
    font-size: 14px;
}

.figma-loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border-primary);
    border-top-color: var(--color-primary-glow);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Desktop Method Styles */
.figma-desktop-method {
    min-height: 200px;
}

.figma-desktop-checking {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--color-text-secondary);
    font-size: 14px;
}

.figma-desktop-status-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: var(--border-radius-xl);
    margin-bottom: 20px;
}

.figma-desktop-status-card.connected {
    background: rgba(115, 249, 124, 0.08);
    border: 1px solid rgba(115, 249, 124, 0.25);
}

.figma-desktop-status-card.disconnected {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.figma-desktop-status-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 16px;
    font-weight: bold;
}

.figma-desktop-status-card.connected .figma-desktop-status-icon {
    background: rgba(115, 249, 124, 0.2);
    color: var(--color-success);
}

.figma-desktop-status-card.disconnected .figma-desktop-status-icon {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.figma-desktop-status-title {
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.figma-desktop-status-desc {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* Desktop File Card */
.figma-desktop-file {
    background: var(--color-bg-card-3);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-xl);
    padding: 20px;
    text-align: center;
}

.figma-desktop-file-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-muted);
    margin-bottom: 10px;
}

.figma-desktop-file-name {
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: 16px;
}

/* Desktop No File */
.figma-desktop-no-file {
    text-align: center;
    padding: 40px 20px;
    background: var(--color-bg-card-3);
    border: 1px dashed var(--color-border-secondary);
    border-radius: var(--border-radius-xl);
}

.figma-no-file-icon {
    font-size: 40px;
    margin-bottom: 12px;
    display: block;
}

.figma-no-file-text {
    font-size: 15px;
    color: var(--color-text-primary);
    margin-bottom: 6px;
}

.figma-no-file-hint {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-bottom: 20px;
}

/* Desktop Instructions */
.figma-desktop-instructions {
    background: var(--color-bg-card-3);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-xl);
    padding: 24px;
}

.figma-instruction-header {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: 16px;
}

.figma-instruction-steps {
    margin: 0 0 20px 0;
    padding-left: 24px;
}

.figma-instruction-steps li {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 10px;
    line-height: 1.5;
}

.figma-instruction-steps li strong {
    color: var(--color-text-primary);
}

.figma-instruction-steps kbd {
    display: inline-block;
    padding: 3px 8px;
    background: var(--color-border-primary);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-sm);
    font-family: monospace;
    font-size: 12px;
    color: var(--color-text-primary);
}

/* Local Method Styles */
.figma-local-method {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.figma-local-upload-area {
    border: 2px dashed var(--color-border-secondary);
    border-radius: var(--border-radius-xl);
    padding: 40px 24px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-base);
    background: var(--color-bg-card-3);
}

.figma-local-upload-area:hover,
.figma-local-upload-area.dragover {
    border-color: var(--color-primary-glow);
    background: rgba(90, 76, 233, 0.05);
}

.figma-local-upload-icon {
    font-size: 40px;
    margin-bottom: 12px;
}

.figma-local-upload-text {
    font-size: 15px;
    color: var(--color-text-primary);
    margin-bottom: 6px;
}

.figma-local-upload-hint {
    font-size: 12px;
    color: var(--color-text-muted);
}

.figma-local-input {
    display: none;
}

/* Local Notice */
.figma-local-notice {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: var(--border-radius-xl);
}

.figma-notice-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.figma-notice-content {
    flex: 1;
}

.figma-notice-title {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: rgba(251, 191, 36, 0.95);
    margin-bottom: 8px;
}

.figma-notice-desc {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-bottom: 12px;
}

.figma-notice-steps {
    margin: 0 0 16px 0;
    padding-left: 20px;
}

.figma-notice-steps li {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}

.figma-notice-steps li strong {
    color: var(--color-text-primary);
}

.figma-notice-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.figma-clear-local {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: color var(--transition-base);
}

.figma-clear-local:hover {
    color: var(--color-error);
}

/* Disconnect Button in Status */
.figma-disconnect-btn {
    background: var(--color-border-primary);
    border: none;
    padding: 6px 14px;
    border-radius: var(--border-radius-sm);
    color: var(--color-text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all var(--transition-base);
}

.figma-disconnect-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    color: var(--color-error);
}

/* Responsive */
@media (max-width: 600px) {
    .figma-access-methods {
        grid-template-columns: 1fr;
    }

    .figma-access-method {
        flex-direction: row;
        justify-content: flex-start;
        padding: 16px;
    }

    .figma-access-icon {
        font-size: 24px;
    }

    .figma-access-method .figma-access-label,
    .figma-access-method .figma-access-desc {
        text-align: left;
    }

    .figma-token-input-row {
        flex-direction: column;
    }

    .figma-files-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .figma-pages-list {
        grid-template-columns: 1fr;
    }

    .figma-section-card {
        padding: 16px;
    }

    .figma-depth-options {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 400px) {
    .figma-files-list {
        grid-template-columns: 1fr;
    }
}

.figma-url-section {
    margin-bottom: 20px;
}

.figma-url-input-row {
    display: flex;
    gap: 12px;
}

.figma-url-input {
    flex: 1;
}

.figma-url-hint {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 8px;
}

/* Connection Status */
.figma-connection-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--color-bg-card-3);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-xl);
    margin-bottom: 20px;
}

.figma-connection-status.connected {
    background: rgba(115, 249, 124, 0.08);
    border-color: rgba(115, 249, 124, 0.3);
}

.figma-connection-status.connecting {
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.3);
}

.figma-connection-status.error {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
}

.figma-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.figma-status-dot.disconnected {
    background: var(--color-border-secondary);
}

.figma-status-dot.connecting {
    background: #fbbf24;
    animation: pulse 1.5s infinite;
}

.figma-status-dot.connected {
    background: var(--color-success);
}

.figma-status-dot.error {
    background: #ef4444;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.figma-status-info {
    flex: 1;
}

.figma-status-text {
    font-size: 14px;
    color: var(--color-text-primary);
}

.figma-status-text.error {
    color: var(--color-error);
}

.figma-status-text strong {
    color: var(--color-text-primary);
}

/* Extraction Depth */
.figma-depth-section {
    margin-bottom: 20px;
}

.figma-section-label {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-bottom: 12px;
    font-weight: var(--font-weight-medium);
    display: flex;
    align-items: center;
    gap: 8px;
}

.figma-pages-count {
    font-weight: 400;
    color: var(--color-text-muted);
}

.figma-depth-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.figma-depth-option {
    padding: 20px 16px;
    background: var(--color-bg-card-3);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-xl);
    cursor: pointer;
    transition: all var(--transition-base);
    text-align: center;
}

.figma-depth-option:hover {
    background: var(--color-bg-card-2);
}

.figma-depth-option.active {
    background: rgba(90, 76, 233, 0.1);
    border-color: rgba(90, 76, 233, 0.35);
}

.figma-depth-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.figma-depth-label {
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: 6px;
}

.figma-depth-desc {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.4;
    margin-bottom: 8px;
}

.figma-depth-directors {
    font-size: 11px;
    color: var(--color-primary-glow);
    background: rgba(90, 76, 233, 0.1);
    padding: 4px 8px;
    border-radius: var(--border-radius-sm);
    display: inline-block;
}

/* Page Selection */
.figma-pages-section {
    margin-bottom: 16px;
}

.figma-pages-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-height: 240px;
    overflow-y: auto;
    padding-right: 4px;
}

.figma-page-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--color-bg-card-3);
    border: 1px solid var(--color-bg-card-2);
    border-radius: var(--border-radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    min-height: 48px;
}

.figma-page-item:hover {
    background: var(--color-bg-card-2);
    border-color: var(--color-border-secondary);
}

.figma-page-item.selected {
    background: rgba(90, 76, 233, 0.1);
    border-color: rgba(90, 76, 233, 0.3);
}

.figma-page-checkbox {
    width: 22px;
    height: 22px;
    border: 2px solid var(--color-border-secondary);
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    color: var(--color-text-primary);
    transition: all var(--transition-base);
}

.figma-page-item.selected .figma-page-checkbox {
    background: var(--gradient-primary);
    border-color: transparent;
}

.figma-page-name {
    font-size: 14px;
    color: var(--color-text-primary);
}

/* ==================== EXTRACTION MODE SECTION ==================== */

.extraction-mode-section {
    background: var(--color-bg-card-3);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-xl);
    padding: 20px;
}

.extraction-mode-title {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.extraction-mode-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.extraction-mode-option {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--color-bg-card-3);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-xl);
    cursor: pointer;
    transition: all var(--transition-base);
}

.extraction-mode-option:hover {
    background: var(--color-bg-card-2);
}

.extraction-mode-option.active {
    background: rgba(90, 76, 233, 0.1);
    border-color: rgba(90, 76, 233, 0.35);
}

.extraction-mode-radio {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border-secondary);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all var(--transition-base);
}

.extraction-mode-option.active .extraction-mode-radio {
    border-color: var(--color-primary);
    background: radial-gradient(circle, var(--color-primary) 40%, transparent 45%);
}

.extraction-mode-content {
    flex: 1;
}

.extraction-mode-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.extraction-mode-label {
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.extraction-mode-desc {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* Gap Fill Option */
.gap-fill-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--color-bg-card-3);
    border-radius: var(--border-radius-lg);
    cursor: pointer;
    transition: background var(--transition-base);
}

.gap-fill-option:hover {
    background: var(--color-bg-card-2);
}

.gap-fill-option input[type="checkbox"] {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
}

.gap-fill-text {
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.gap-fill-text strong {
    color: var(--color-text-primary);
}

/* ==================== ACTION BUTTONS ==================== */

.submission-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border-primary);
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 600px) {
    .submission-tab-bar {
        flex-wrap: wrap;
    }

    .submission-tab {
        flex: 0 0 calc(50% - 4px);
        padding: 12px 16px;
    }

    .submission-tab-name {
        display: none;
    }

    .submission-tab-icon {
        font-size: 22px;
    }

    .link-input-row {
        flex-direction: column;
    }

    .link-source-select {
        width: 100%;
    }

    .social-brand-toggle {
        grid-template-columns: 1fr;
    }

    .extraction-mode-options,
    .figma-depth-options {
        grid-template-columns: 1fr;
    }

    .figma-url-input-row {
        flex-direction: column;
    }
}

/* ==================== SCROLLBAR STYLING ==================== */

.social-platforms-list::-webkit-scrollbar,
.figma-pages-list::-webkit-scrollbar {
    width: 6px;
}

.social-platforms-list::-webkit-scrollbar-track,
.figma-pages-list::-webkit-scrollbar-track {
    background: var(--color-bg-card-3);
    border-radius: 3px;
}

.social-platforms-list::-webkit-scrollbar-thumb,
.figma-pages-list::-webkit-scrollbar-thumb {
    background: var(--color-border-secondary);
    border-radius: 3px;
}

.social-platforms-list::-webkit-scrollbar-thumb:hover,
.figma-pages-list::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-secondary);
}

/* ==================== FIGMA PROGRESS & RESULTS (in modals) ==================== */

.figma-extraction-progress {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.figma-progress-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--color-bg-card-3);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-xl);
    transition: all var(--transition-base);
}

.figma-progress-item.extracting {
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.3);
}

.figma-progress-item.completed {
    background: rgba(115, 249, 124, 0.08);
    border-color: rgba(115, 249, 124, 0.3);
}

.figma-progress-item.error {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
}

.figma-progress-icon {
    font-size: 24px;
}

.figma-progress-info {
    flex: 1;
}

.figma-progress-name {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.figma-progress-status {
    font-size: 12px;
    color: var(--color-text-muted);
}

.figma-progress-item.extracting .figma-progress-status {
    color: rgba(251, 191, 36, 0.9);
}

.figma-progress-item.completed .figma-progress-status {
    color: var(--color-success);
}

.figma-progress-item.error .figma-progress-status {
    color: var(--color-error);
}

/* Extraction Mode Indicator */
.extraction-mode-indicator {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding-top: 16px;
    border-top: 1px solid var(--color-border-primary);
}

.extraction-mode-badge,
.extraction-depth-badge {
    padding: 8px 16px;
    background: var(--color-bg-card-2);
    border-radius: var(--border-radius-xl);
    font-size: 13px;
    color: var(--color-text-secondary);
}

.extraction-mode-badge.literal {
    background: rgba(90, 76, 233, 0.12);
    color: var(--color-primary);
}

.extraction-mode-badge.director {
    background: rgba(124, 108, 240, 0.12);
    color: rgba(124, 108, 240, 0.9);
}

/* Figma Results */
.figma-results-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.figma-result-card {
    padding: 20px;
    background: var(--color-bg-card-3);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-xl);
}

.figma-result-label {
    font-size: 12px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.figma-result-colors {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.color-swatch {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-md);
    border: 2px solid var(--color-border-primary);
    cursor: pointer;
    transition: transform var(--transition-base);
}

.color-swatch:hover {
    transform: scale(1.1);
}

.figma-result-fonts {
    font-size: 14px;
    color: var(--color-text-primary);
    line-height: 1.5;
}

@media (max-width: 500px) {
    .figma-results-summary {
        grid-template-columns: 1fr;
    }
}

/* ==================== LIBRARY PANEL ==================== */

.library-panel.library-expanded {
    min-height: 350px;
}

.submission-tab-content.library-mode {
    min-height: 400px;
}

.library-view-toggle {
    display: flex;
    gap: 8px;
    padding: 6px;
    background: var(--color-bg-card-3);
    border-radius: var(--border-radius-lg);
    margin-bottom: 16px;
}

.library-view-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-radius: var(--border-radius-md);
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-base);
}

.library-view-btn:hover {
    background: var(--color-bg-card-2);
}

.library-view-btn.active {
    background: rgba(90, 76, 233, 0.15);
    color: var(--color-text-primary);
}

.library-view-icon {
    font-size: 16px;
}

.library-inline-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.library-search-box {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--color-bg-input);
    border: 1px solid var(--color-border-input);
    border-radius: var(--border-radius-input);
}

.library-search-icon {
    font-size: 14px;
    opacity: 0.6;
}

.library-search-box input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--color-text-primary);
    font-size: 13px;
    outline: none;
}

.library-search-box input::placeholder {
    color: var(--color-text-muted);
}

.library-filter-select {
    min-width: 140px;
    padding: 10px 14px;
    background: var(--color-bg-input);
    border: 1px solid var(--color-border-input);
    border-radius: var(--border-radius-input);
    color: var(--color-text-primary);
    font-size: 13px;
    cursor: pointer;
}

/* Library Selection Grid */
.library-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px;
    margin-bottom: 12px;
}

.library-selection-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--transition-base);
    background: var(--color-bg-card-3);
}

.library-selection-item:hover {
    border-color: var(--color-border-active);
    transform: scale(1.02);
}

.library-selection-item.selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(90, 76, 233, 0.2);
}

.library-selection-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.library-item-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    opacity: 0;
    transition: opacity var(--transition-base);
}

.library-selection-item:hover .library-item-overlay {
    opacity: 1;
}

.library-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.library-item-tag {
    font-size: 9px;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius-sm);
    color: white;
}

.library-item-checkmark {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.library-empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

.library-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.library-empty-text {
    font-size: 16px;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.library-empty-hint {
    font-size: 13px;
    color: var(--color-text-muted);
}

.library-selection-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(90, 76, 233, 0.08);
    border-radius: var(--border-radius-lg);
}

.selection-count {
    font-size: 13px;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

.clear-selection-btn {
    background: none;
    border: none;
    color: var(--color-error);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--border-radius-sm);
    transition: background var(--transition-base);
}

.clear-selection-btn:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* ==================== PRESETS SECTION ==================== */

.presets-section {
    background: var(--color-bg-card-3);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-xl);
    padding: 20px;
}

.presets-section-title {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}

.presets-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.preset-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--color-bg-card-2);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-full);
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-base);
}

.preset-pill:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border-secondary);
}

.preset-pill.active {
    background: rgba(90, 76, 233, 0.15);
    border-color: rgba(90, 76, 233, 0.35);
    color: var(--color-text-primary);
}

.preset-pill-icon {
    font-size: 14px;
}

.preset-pill-name {
    font-weight: var(--font-weight-medium);
}

.preset-pill-count {
    font-size: 11px;
    padding: 2px 6px;
    background: var(--color-bg-card-3);
    border-radius: var(--border-radius-sm);
    color: var(--color-text-muted);
}

.preset-pill.active .preset-pill-count {
    background: rgba(90, 76, 233, 0.2);
    color: var(--color-primary);
}

.preset-modified-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(251, 191, 36, 0.08);
    border-radius: var(--border-radius-md);
    font-size: 12px;
    color: rgba(251, 191, 36, 0.9);
}

.preset-modified-icon {
    font-size: 14px;
}

/* ==================== DIRECTOR CATALOG ==================== */

.director-catalog-section {
    background: var(--color-bg-card-3);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-xl);
    padding: 20px;
    max-height: 400px;
    overflow-y: auto;
}

.director-catalog-title {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.director-clusters {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.director-cluster {
    background: var(--color-bg-card-2);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.cluster-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
    transition: background var(--transition-base);
}

.cluster-header:hover {
    background: var(--color-bg-hover);
}

.cluster-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cluster-toggle-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: transform var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.cluster-chevron {
    font-size: 10px;
    transition: transform var(--transition-base);
}

.cluster-icon {
    font-size: 18px;
}

.cluster-name {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.cluster-count {
    font-size: 12px;
    color: var(--color-text-muted);
}

.cluster-select-all {
    position: relative;
    cursor: pointer;
}

.cluster-select-all input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.cluster-select-all .checkbox-visual {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border-secondary);
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
}

.cluster-select-all input:checked + .checkbox-visual {
    background: var(--gradient-primary);
    border-color: transparent;
}

.cluster-select-all input:checked + .checkbox-visual::after {
    content: '✓';
    color: white;
    font-size: 11px;
    font-weight: bold;
}

.cluster-select-all input:indeterminate + .checkbox-visual {
    background: rgba(90, 76, 233, 0.3);
    border-color: rgba(90, 76, 233, 0.5);
}

.cluster-select-all input:indeterminate + .checkbox-visual::after {
    content: '–';
    color: white;
    font-size: 14px;
    font-weight: bold;
}

/* Cluster Directors */
.cluster-directors {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.director-checkbox-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--color-bg-card-3);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
}

.director-checkbox-row:hover {
    background: var(--color-bg-hover);
}

.director-checkbox-row.enabled {
    background: rgba(90, 76, 233, 0.05);
    border-color: rgba(90, 76, 233, 0.2);
}

.director-checkbox {
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.director-checkbox input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.director-checkbox .checkbox-visual {
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-border-secondary);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
}

.director-checkbox input:checked + .checkbox-visual {
    background: var(--gradient-primary);
    border-color: transparent;
}

.director-checkbox input:checked + .checkbox-visual::after {
    content: '✓';
    color: white;
    font-size: 10px;
    font-weight: bold;
}

.director-code {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    min-width: 28px;
    flex-shrink: 0;
}

.director-name {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    min-width: 130px;
    flex-shrink: 0;
}

.director-specialty {
    font-size: 12px;
    color: var(--color-text-muted);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Director Item & Expand */
.director-item {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.director-item.expanded .director-checkbox-row {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}

.director-subfield-count {
    font-size: 11px;
    color: var(--color-text-muted);
    background: var(--color-bg-card-2);
    padding: 2px 6px;
    border-radius: var(--border-radius-sm);
    margin-left: auto;
    flex-shrink: 0;
}

.director-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    border-radius: var(--border-radius-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--transition-base);
    flex-shrink: 0;
    margin-left: 8px;
}

.director-expand-btn:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.director-expand-icon {
    font-size: 10px;
    transition: transform var(--transition-base);
}

/* Director Subfields */
.director-subfields {
    background: var(--color-bg-card-2);
    border: 1px solid var(--color-border-primary);
    border-top: none;
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
    padding: 12px 14px;
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.subfields-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border-primary);
}

.subfields-title {
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.subfields-actions {
    display: flex;
    gap: 6px;
}

.subfields-select-all,
.subfields-select-none {
    font-size: 11px;
    padding: 3px 8px;
    background: var(--color-bg-card-3);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
}

.subfields-select-all:hover,
.subfields-select-none:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
    border-color: var(--color-border-secondary);
}

.subfields-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}

.subfield-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    background: var(--color-bg-card-3);
    border: 1px solid transparent;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all var(--transition-base);
}

.subfield-item:hover {
    background: var(--color-bg-hover);
}

.subfield-item.enabled {
    background: rgba(90, 76, 233, 0.08);
    border-color: rgba(90, 76, 233, 0.15);
}

.subfield-item.director-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.subfield-checkbox {
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
}

.subfield-checkbox input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.subfield-checkbox .checkbox-visual {
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--color-border-secondary);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
}

.subfield-checkbox input:checked + .checkbox-visual {
    background: var(--gradient-primary);
    border-color: transparent;
}

.subfield-checkbox input:checked + .checkbox-visual::after {
    content: '✓';
    color: white;
    font-size: 8px;
    font-weight: bold;
}

.subfield-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.subfield-name {
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.subfield-desc {
    font-size: 10px;
    color: var(--color-text-muted);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==================== RESPONSIVE - LIBRARY & CATALOG ==================== */

@media (max-width: 600px) {
    .library-inline-filters {
        flex-direction: column;
    }

    .library-filter-select {
        width: 100%;
    }

    .library-selection-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .presets-pills {
        flex-direction: column;
    }

    .preset-pill {
        justify-content: space-between;
    }

    .director-specialty {
        display: none;
    }

    .director-name {
        min-width: auto;
        flex: 1;
    }

    .director-subfield-count {
        display: none;
    }

    .subfields-grid {
        grid-template-columns: 1fr;
    }

    .subfields-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .subfields-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Scrollbar for catalog */
.director-catalog-section::-webkit-scrollbar,
.library-selection-grid::-webkit-scrollbar {
    width: 6px;
}

.director-catalog-section::-webkit-scrollbar-track,
.library-selection-grid::-webkit-scrollbar-track {
    background: var(--color-bg-card-3);
    border-radius: 3px;
}

.director-catalog-section::-webkit-scrollbar-thumb,
.library-selection-grid::-webkit-scrollbar-thumb {
    background: var(--color-border-secondary);
    border-radius: 3px;
}

.director-catalog-section::-webkit-scrollbar-thumb:hover,
.library-selection-grid::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-active);
}