/* ==========================================================================
   MODAL WINDOWS (Обобщенные и оптимизированные)
   ========================================================================== */
/* Backdrop — как в Figma: слабое затемнение, лёгкий блюр (bg-black/20 backdrop-blur-[0.138vw]) */
.modal-backdrop {
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(0.138vw);
    z-index: 5000000; 
    align-items: center; 
    justify-content: center;
    animation: modalBackdropFade 0.2s ease-out;
}

.modal-backdrop.active {
    display: flex;
}

@keyframes modalBackdropFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Появление модалки — как в Figma: scale 0.95, y: 10 → scale 1, y: 0, 0.2s easeOut */
.modal {
    background: var(--bg-color); 
    border-radius: 0.829vw; 
    padding: 0; 
    width: 90%; 
    max-width: 34.53vw;
    box-shadow: 0 1.727vw 3.453vw -0.829vw rgba(0, 0, 0, 0.25);
    max-height: 80vh; 
    display: flex; 
    flex-direction: column;
    animation: modalSlideIn 0.2s ease-out;
    overflow: hidden;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(0.691vw) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.modal.modal-large { 
    max-width: 69.061vw; 
    max-height: 90vh; 
}
.modal.modal-gallery { 
    max-width: 48.343vw; 
}

/* ==========================================================================
   GALLERY MODAL — идентично Figma CreateGalleryModal
   ========================================================================== */
#gallery-modal .gallery-figma {
    background: #ffffff;
    border-radius: 0.552vw;
    box-shadow: 0 1.727vw 3.453vw -0.829vw rgba(0, 0, 0, 0.25);
    border: 0.069vw solid #e5e7eb;
    max-width: 42rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    overflow: hidden;
}

#gallery-modal .gallery-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.85rem;  /* уменьшены вертикальные отступы */
    border-bottom: 0.069vw solid #e5e7eb;
    flex-shrink: 0;
}

#gallery-modal .gallery-modal-title {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e1e24;
}

#gallery-modal .gallery-modal-close {
    width: 2.21vw;
    height: 2.21vw;
    min-width: 2.21vw;
    min-height: 2.21vw;
    padding: 0;
    border: none;
    border-radius: 0.414vw;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: color 0.2s, background 0.2s;
}

#gallery-modal .gallery-modal-close:hover {
    background: #f3f4f6;
    color: #1e1e24;
}

#gallery-modal .gallery-modal-close svg {
    width: 1.381vw;
    height: 1.381vw;
    flex-shrink: 0;
}

#gallery-modal .gallery-modal-body {
    padding: 0.85rem 0.85rem 1rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

#gallery-modal .gallery-field {
    margin-bottom: 1.657vw;
}

#gallery-modal .gallery-field-label {
    display: block;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #1e1e24;
    margin-bottom: 0.35rem;
}

#gallery-modal .gallery-caption-wrap {
    position: relative;
}

#gallery-modal .gallery-caption-input {
    width: 100%;
    height: 2.25rem;
    padding: 0 2.25rem 0 0.5rem;
    border: 0.069vw solid #e5e7eb;
    border-radius: 0.414vw;
    background: rgba(238, 242, 255, 0.3);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    color: #1e1e24;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

#gallery-modal .gallery-caption-input:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 0.138vw rgba(139, 92, 246, 0.1);
}

#gallery-modal .gallery-caption-counter {
    position: absolute;
    right: 0.829vw;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: #9ca3af;
}

#gallery-modal .gallery-images-label {
    display: block;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #1e1e24;
    margin-bottom: 0.5rem;
}

#gallery-modal .gallery-image-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 6.906vw;
    margin-bottom: 0.5rem;
}

#gallery-modal .gallery-image-list:empty::before {
    content: none;
}

#gallery-modal .gallery-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    text-align: center;
    min-height: 13.812vw;
}

#gallery-modal .gallery-empty-icon {
    width: 4.42vw;
    height: 4.42vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 50%, #f9fafb 100%);
    border-radius: 0.829vw;
    margin-bottom: 1.105vw;
    color: #9ca3af;
}

#gallery-modal .gallery-empty-icon svg {
    width: 2.21vw;
    height: 2.21vw;
}

#gallery-modal .gallery-empty-text {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 0.552vw 0;
}

#gallery-modal .gallery-empty-hint {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    color: #6b7280;
    margin: 0;
}

#gallery-modal .gallery-list-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.35rem;
    background: #ffffff;
    border: 0.069vw solid #e5e7eb;
    border-radius: 0.552vw;
    box-shadow: 0 0.069vw 0.138vw rgba(0, 0, 0, 0.05);
    transition: border-color 0.2s, box-shadow 0.2s;
    position: relative;
}

#gallery-modal .gallery-list-item:hover {
    border-color: #e5e7eb;
    box-shadow: 0 0.069vw 0.207vw rgba(0, 0, 0, 0.08);
}

#gallery-modal .gallery-list-item.dragging {
    opacity: 0.7;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 0.138vw rgba(139, 92, 246, 0.2);
}

#gallery-modal .gallery-item-handle-wrap {
    display: flex;
    align-items: center;
    padding: 0.276vw;
    cursor: grab;
    color: #9ca3af;
    transition: color 0.2s;
}

#gallery-modal .gallery-item-handle-wrap:active {
    cursor: grabbing;
}

#gallery-modal .gallery-item-handle-wrap:hover {
    color: #1e1e24;
}

#gallery-modal .gallery-item-handle {
    font-size: 0.875rem;
    width: 1.381vw;
    height: 1.381vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

#gallery-modal .gallery-item-number {
    width: 1.657vw;
    height: 1.657vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border-radius: 0.414vw;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: #9ca3af;
    flex-shrink: 0;
    border: 0.069vw solid transparent;
}

#gallery-modal .gallery-item-thumb-wrap {
    width: 4.42vw;
    height: 2.762vw;
    flex-shrink: 0;
    border-radius: 0.276vw;
    overflow: hidden;
    border: 0.069vw solid rgba(229, 231, 235, 0.5);
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 50%, #f9fafb 100%);
}

#gallery-modal .gallery-item-preview {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

#gallery-modal .gallery-item-alt {
    flex: 1;
    min-width: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #1e1e24;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#gallery-modal .gallery-item-delete {
    width: 2.21vw;
    height: 2.21vw;
    padding: 0;
    margin-right: 0.552vw;
    border: 0.069vw solid transparent;
    border-radius: 0.414vw;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background 0.2s;
    flex-shrink: 0;
}

#gallery-modal .gallery-item-delete:hover {
    color: #ef4444;
    background: #fef2f2;
}

#gallery-modal .gallery-item-delete i {
    font-size: 0.8125rem;
}

#gallery-modal .gallery-add-btn {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 0.138vw dashed rgba(139, 92, 246, 0.3);
    border-radius: 0.552vw;
    background: transparent;
    color: #8b5cf6;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.552vw;
    transition: border-color 0.2s, background 0.2s;
}

#gallery-modal .gallery-add-btn:hover:not(:disabled) {
    background: rgba(238, 242, 255, 0.5);
    border-color: rgba(139, 92, 246, 0.5);
}

#gallery-modal .gallery-add-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    color: #9ca3af;
    border-color: #e5e7eb;
}

#gallery-modal .gallery-add-icon {
    font-size: 0.875rem;
}

#gallery-modal .gallery-modal-footer {
    padding: 0.7rem 0.85rem;
    border-top: 0.069vw solid #e5e7eb;
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
}

#gallery-modal .gallery-save-btn {
    padding: 0.4rem 1.25rem;
    border: none;
    border-radius: 0.414vw;
    background: #8b5cf6;
    color: #ffffff;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0.691vw 1.036vw -0.207vw rgba(139, 92, 246, 0.25);
    transition: box-shadow 0.2s, transform 0.2s;
}

#gallery-modal .gallery-save-btn:hover {
    box-shadow: 0 0.691vw 1.036vw -0.207vw rgba(139, 92, 246, 0.4);
    transform: scale(1.02);
}

#gallery-modal .gallery-save-btn:active {
    transform: scale(0.98);
}

/* ==========================================================================
   EDIT TABLE MODAL — идентично Figma EditInfoTableModal
   ========================================================================== */
#info-table-edit-modal .info-table-figma {
    background: #ffffff;
    border-radius: 0.552vw;
    box-shadow: 0 1.727vw 3.453vw -0.829vw rgba(0, 0, 0, 0.25);
    border: 0.069vw solid #e5e7eb;
    max-width: 48rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    overflow: hidden;
}

#info-table-edit-modal .info-table-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75vw 1.381vw;  /* уменьшены вертикальные отступы */
    border-bottom: 0.069vw solid #e5e7eb;
    flex-shrink: 0;
}

#info-table-edit-modal .info-table-modal-title {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e1e24;
}

#info-table-edit-modal .info-table-modal-close {
    width: 2.21vw;
    height: 2.21vw;
    min-width: 2.21vw;
    min-height: 2.21vw;
    padding: 0;
    border: none;
    border-radius: 0.414vw;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: color 0.2s, background 0.2s;
}

#info-table-edit-modal .info-table-modal-close:hover {
    background: #f3f4f6;
    color: #1e1e24;
}

#info-table-edit-modal .info-table-modal-close svg {
    width: 1.381vw;
    height: 1.381vw;
    flex-shrink: 0;
}

#info-table-edit-modal .info-table-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#info-table-edit-modal .info-table-edit-scroll {
    padding: 1.381vw 1.381vw 1.657vw;
    overflow-y: auto;
    min-height: 20.718vw;
    max-height: 60vh;
    padding-right: 1.934vw;
}

#info-table-edit-modal .info-table-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 11.05vw;
    border: 0.138vw dashed rgba(229, 231, 235, 0.5);
    border-radius: 0.829vw;
    background: rgba(243, 244, 246, 0.2);
    color: #9ca3af;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

#info-table-edit-modal .info-table-empty-text {
    font-size: 0.8125rem;
    font-weight: 500;
}

#info-table-edit-modal .info-table-add-first {
    margin-top: 0.552vw;
    padding: 0;
    border: none;
    background: none;
    color: #8b5cf6;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
}

#info-table-edit-modal .info-table-add-first:hover {
    color: #7c3aed;
}

#info-table-edit-modal .info-table-edit-container {
    margin-bottom: 0.35rem;
}

#info-table-edit-modal .info-table-header-row {
    display: grid;
    grid-template-columns: 2.072vw 1fr 1fr 2.072vw;
    gap: 0.829vw;
    align-items: center;
    margin-bottom: 0.35rem;
    padding: 0 0.276vw;
}

#info-table-edit-modal .info-table-header-drag,
#info-table-edit-modal .info-table-header-actions {
    width: 100%;
}

#info-table-edit-modal .info-table-header-param,
#info-table-edit-modal .info-table-header-value {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#info-table-edit-modal .info-table-rows {
    display: flex;
    flex-direction: column;
    gap: 0.552vw;
}

#info-table-edit-modal .info-table-edit-row {
    display: grid;
    grid-template-columns: 2.072vw 1fr 1fr 2.072vw;
    gap: 0.829vw;
    align-items: center;
    padding: 0;
    background: #ffffff;
    border-radius: 0.414vw;
    border: 0.069vw solid transparent;
    transition: border-color 0.2s, background 0.2s;
}

#info-table-edit-modal .info-table-edit-row.dragging {
    opacity: 0.6;
    border-color: #8b5cf6;
    box-shadow: 0 0.276vw 0.829vw rgba(139, 92, 246, 0.2);
}

#info-table-edit-modal .info-table-edit-drag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.21vw;
    height: 2.762vw;
    border-radius: 0.414vw;
    color: rgba(156, 163, 175, 0.4);
    cursor: grab;
    transition: color 0.2s, background 0.2s;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: element;
}

#info-table-edit-modal .info-table-edit-drag:hover {
    color: #1e1e24;
    background: #f3f4f6;
}

#info-table-edit-modal .info-table-edit-drag:active {
    cursor: grabbing;
}

#info-table-edit-modal .info-table-edit-drag i {
    font-size: 0.8125rem;
}

#info-table-edit-modal .info-table-edit-key,
#info-table-edit-modal .info-table-edit-value {
    width: 100%;
    height: 2.762vw;
    padding: 0 0.829vw;
    border: 0.069vw solid #e5e7eb;
    border-radius: 0.414vw;
    background: #ffffff;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    color: #1e1e24;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

#info-table-edit-modal .info-table-edit-key::placeholder,
#info-table-edit-modal .info-table-edit-value::placeholder {
    color: rgba(156, 163, 175, 0.4);
}

#info-table-edit-modal .info-table-edit-key:focus,
#info-table-edit-modal .info-table-edit-value:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 0.138vw rgba(139, 92, 246, 0.1);
}

#info-table-edit-modal .info-table-edit-value {
    color: #9ca3af;
}

#info-table-edit-modal .info-table-edit-value:focus {
    color: #1e1e24;
}

#info-table-edit-modal .info-table-edit-delete-btn {
    width: 2.21vw;
    height: 2.762vw;
    padding: 0;
    border: 0.069vw solid transparent;
    border-radius: 0.414vw;
    background: transparent;
    color: rgba(156, 163, 175, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background 0.2s;
}

#info-table-edit-modal .info-table-edit-delete-btn:hover {
    color: #ef4444;
    background: #fef2f2;
}

#info-table-edit-modal .info-table-edit-delete-btn i {
    font-size: 0.8125rem;
}

#info-table-edit-modal .info-table-edit-move-indicator {
    grid-column: 1 / -1;
    padding: 0.276vw 0;
    cursor: pointer;
}

#info-table-edit-modal .info-table-edit-move-line {
    height: 0.138vw;
    background: #8b5cf6;
    border-radius: 0.069vw;
}

#info-table-edit-modal .info-table-add-row-wrap {
    display: flex;
    justify-content: center;
    margin-top: 1.105vw;
    margin-bottom: 0.35rem;
}

#info-table-edit-modal .info-table-add-row-btn {
    display: flex;
    align-items: center;
    gap: 0.552vw;
    padding: 0.552vw 1.105vw;
    border: 0.069vw solid rgba(229, 231, 235, 0.5);
    border-radius: 0.414vw;
    background: rgba(243, 244, 246, 0.5);
    color: rgba(30, 30, 36, 0.7);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

#info-table-edit-modal .info-table-add-row-btn:hover {
    background: #f3f4f6;
    color: #1e1e24;
    border-color: #e5e7eb;
}

#info-table-edit-modal .info-table-add-row-btn i {
    font-size: 0.8125rem;
}

#info-table-edit-modal .info-table-modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.105vw;
    padding: 1.381vw 1.381vw;
    border-top: 0.069vw solid #e5e7eb;
    flex-shrink: 0;
}

#info-table-edit-modal .info-table-footer-left {
    display: flex;
    align-items: center;
    gap: 0.552vw;
    flex-wrap: wrap;
}

#info-table-edit-modal .info-table-btn-clear {
    display: flex;
    align-items: center;
    gap: 0.414vw;
    padding: 0.414vw 0.829vw;
    border: 0.069vw solid transparent;
    border-radius: 0.414vw;
    background: #fef2f2;
    color: #dc2626;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

#info-table-edit-modal .info-table-btn-clear:hover {
    background: #fee2e2;
}

#info-table-edit-modal .info-table-btn-clear i {
    font-size: 0.75rem;
}

#info-table-edit-modal .info-table-footer-divider {
    width: 0.069vw;
    height: 1.105vw;
    background: #e5e7eb;
}

#info-table-edit-modal .info-table-btn-secondary {
    display: flex;
    align-items: center;
    gap: 0.414vw;
    padding: 0.414vw 0.829vw;
    border: 0.069vw solid rgba(229, 231, 235, 0.5);
    border-radius: 0.414vw;
    background: rgba(243, 244, 246, 0.3);
    color: rgba(30, 30, 36, 0.7);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

#info-table-edit-modal .info-table-btn-secondary:hover {
    background: #f3f4f6;
    color: #1e1e24;
    border-color: #e5e7eb;
}

#info-table-edit-modal .info-table-btn-secondary i {
    font-size: 0.75rem;
}

#info-table-edit-modal .info-table-footer-right {
    display: flex;
    align-items: center;
    gap: 0.829vw;
}

#info-table-edit-modal .info-table-btn-cancel {
    padding: 0.552vw 1.381vw;
    border: 0.069vw solid #e5e7eb;
    border-radius: 0.414vw;
    background: #ffffff;
    color: #9ca3af;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}

#info-table-edit-modal .info-table-btn-cancel:hover {
    color: #1e1e24;
    background: #f3f4f6;
    border-color: #e5e7eb;
}

#info-table-edit-modal .info-table-btn-save {
    padding: 0.552vw 1.381vw;
    border: none;
    border-radius: 0.414vw;
    background: #8b5cf6;
    color: #ffffff;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0.691vw 1.036vw -0.207vw rgba(139, 92, 246, 0.25);
    transition: box-shadow 0.2s, transform 0.2s;
}

#info-table-edit-modal .info-table-btn-save:hover {
    box-shadow: 0 0.691vw 1.036vw -0.207vw rgba(139, 92, 246, 0.4);
    transform: scale(1.02);
}

#info-table-edit-modal .info-table-btn-save:active {
    transform: scale(0.98);
}

.modal.modal-small {
    max-width: 29.006vw;
}

/* Компактность type-modal */
#type-modal .modal-header {
    padding: 0.5rem 1rem;  /* уменьшены вертикальные отступы */
}
#type-modal .modal-body {
    padding: 0.85rem 1rem;
}
#type-modal .meta-field {
    margin-bottom: 0.691vw;
}
#type-modal .modal-actions {
    padding: 0.7rem 1rem;
}

.modal-header {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 0; 
    padding: 0.65rem 1.25rem;  /* уменьшены вертикальные отступы */
    border-bottom: 0.069vw solid var(--border-color); 
    flex-shrink: 0;
    background: var(--bg-color);
}
.modal-header h3 { 
    margin: 0; 
    font-family: 'Montserrat', sans-serif; 
    font-size: 1rem; 
    font-weight: 600;
    color: var(--text-color);
}
.modal-close {
    background: var(--bg-secondary); 
    border: none; 
    font-size: 1rem; 
    cursor: pointer; 
    color: var(--text-light); 
    padding: 0; 
    width: 2rem; 
    height: 2rem; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 0.5rem; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1.25rem;
    line-height: 1;
}
/* Красный hover только для крестиков без Figma-класса (quote/table/youtube/page-settings/seo используют свой hover ниже) */
.modal-close:hover:not(.quote-modal-close):not(.table-modal-close):not(.youtube-modal-close):not(.page-settings-close):not(.seo-modal-close):not(.image-library-close):not(.crop-modal-close):not(.link-modal-close) {
    background: var(--danger); 
    color: white; 
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 0.276vw 0.829vw rgba(239, 68, 68, 0.3);
}

.modal-body { 
    padding: 1.25rem; 
    overflow-y: auto; 
    overflow-x: visible !important;
    flex-grow: 1; 
    min-height: 13.812vw;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
    background: var(--bg-color);
    position: relative;
}

.modal-body::-webkit-scrollbar {
    width: 0.552vw;
}

.modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.modal-body::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 0.276vw;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--text-light);
}

/* Tabs */
.modal-tabs {
    display: flex; 
    gap: 0.25rem; 
    border-bottom: 1px solid var(--border-color); 
    padding: 0.85rem 1.25rem 0 1.25rem; 
    background: var(--bg-secondary); 
    flex-shrink: 0;
}
.modal-tab {
    padding: 0.5rem 0.75rem; 
    background: transparent; 
    border: none; 
    border-bottom: 2px solid transparent; 
    cursor: pointer; 
    font-family: 'Inter', sans-serif; 
    font-size: 0.8125rem; 
    font-weight: 600;
    color: var(--text-light);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0.552vw 0.552vw 0 0;
    position: relative;
}
.modal-tab:hover {
    color: var(--text-color);
    background: rgba(99, 102, 241, 0.05);
}
.modal-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background: rgba(99, 102, 241, 0.08);
}

.modal-subtabs { 
    display: flex; 
    gap: 0.35rem; 
    margin-bottom: 0.85rem; 
    flex-wrap: wrap; 
}
.modal-subtab {
    padding: 0.35rem 0.6rem; 
    background: var(--bg-secondary); 
    border: 1px solid var(--border-color); 
    border-radius: 0.25rem; 
    cursor: pointer; 
    font-family: 'Montserrat', sans-serif; 
    font-size: 0.75rem; 
    transition: all 0.2s ease;
}
.modal-subtab.active { 
    background: var(--primary-color); 
    color: white; 
    border-color: var(--primary-color); 
}

.modal-tab-content { 
    display: none; 
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.modal-tab-content.active { 
    display: flex; 
}
.modal-subtab-content { 
    display: none; 
}
.modal-subtab-content.active { 
    display: block; 
}

.modal-actions {
    margin-top: 0; 
    display: flex; 
    gap: 0.5rem; 
    justify-content: flex-end; 
    padding: 1rem 1.25rem; 
    border-top: 0.069vw solid var(--border-color); 
    background: var(--bg-color); 
    flex-shrink: 0;
}
.modal-footer-controls {
    flex-shrink: 0; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 0.65rem 1.25rem; 
    border-top: 0.069vw solid var(--border-color); 
    background: var(--bg-secondary); 
    min-height: 4.144vw; 
    visibility: hidden; 
    opacity: 0; 
    transition: visibility 0.3s ease, opacity 0.3s ease;
}
#wiki-modal-body.search-active + .modal-footer-controls,
#other-modal-body.search-active + .modal-footer-controls { 
    visibility: visible; 
    opacity: 1; 
}
.modal-footer-controls .modal-actions { 
    padding: 0; 
    border: none; 
    background: transparent; 
}

.modal-btn {
    padding: 0.4rem 0.85rem; 
    border: none; 
    border-radius: 0.5rem; 
    font-family: 'Montserrat', sans-serif; 
    font-size: 0.8125rem; 
    font-weight: 600; 
    cursor: pointer; 
    transition: all 0.2s ease;
    min-width: 8.287vw;
    box-shadow: 0 0.138vw 0.276vw rgba(0,0,0,0.05);
}
.modal-btn.primary { 
    background: var(--primary-color); 
    color: white; 
}
.modal-btn.primary:hover:not(:disabled) { 
    background: var(--secondary-color); 
    transform: translateY(-0.069vw);
    box-shadow: 0 0.276vw 0.552vw rgba(99, 102, 241, 0.2);
}
.modal-btn.primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 0.138vw 0.276vw rgba(0,0,0,0.05);
}
.modal-btn:disabled { 
    background: var(--border-color); 
    color: var(--text-light);
    cursor: not-allowed; 
    opacity: 0.6;
    box-shadow: none;
}

/* Search Inputs (Links) */
.search-input {
    width: 100%; 
    padding: 0.4rem 0.55rem; 
    border: 1px solid var(--border-color); 
    border-radius: 0.35rem; 
    font-family: 'Montserrat', sans-serif; 
    font-size: 0.8125rem; 
    box-sizing: border-box; 
    background: var(--bg-secondary); 
    color: var(--text-color); 
    margin-bottom: 1.036vw;
}
.search-results {
    max-height: 13.812vw; 
    overflow-y: auto; 
    border: 0.069vw solid var(--border-color); 
    border-radius: 0.414vw; 
    background: var(--bg-secondary);
}
.search-result-item {
    padding: 0.4rem 0.55rem; 
    border-bottom: 0.069vw solid var(--border-color); 
    cursor: pointer; 
    font-family: 'Montserrat', sans-serif; 
    font-size: 0.8125rem; 
    transition: background 0.2s ease; 
    color: var(--text-color);
}
.search-result-item:hover, .search-result-item.active { 
    background: var(--primary-color); 
    color: white; 
}
.search-loading { 
    padding: 0.829vw 1.036vw; 
    text-align: center; 
    color: var(--text-light); 
    font-style: italic; 
    font-family: 'Montserrat', sans-serif; 
}

/* URL Prefix for Link Modal */
.url-prefix-container {
    display: flex; 
    align-items: center; 
    border: 0.069vw solid var(--border-color); 
    border-radius: 0.414vw; 
    background: var(--bg-secondary); 
    overflow: hidden; 
    margin-bottom: 1.036vw;
}
.url-prefix {
    padding: 0.829vw 1.036vw; 
    background: var(--border-color); 
    color: var(--text-color); 
    font-family: 'Montserrat', sans-serif; 
    font-size: 0.8125rem; 
    font-weight: 500; 
    border-right: 0.069vw solid var(--border-color); 
    white-space: nowrap;
}
.url-input {
    flex: 1; 
    border: none; 
    padding: 0.829vw 1.036vw; 
    font-family: 'Montserrat', sans-serif; 
    font-size: 0.8125rem; 
    background: transparent; 
    color: var(--text-color); 
    outline: none;
}

.error-message {
    color: #ef4444;
    font-size: 0.75rem;
    padding: 0.345vw;
}

/* File Upload */
.file-upload-container { 
    margin-bottom: 1.657vw; 
    padding: 1.381vw;
    background: var(--bg-secondary);
    border: 0.069vw solid var(--border-color);
    border-radius: 0.691vw;
    transition: all 0.2s ease;
}
.file-upload-container:hover {
    border-color: var(--primary-color);
    background: rgba(99, 102, 241, 0.02);
}
.file-upload-btn {
    display: flex; 
    align-items: center; 
    gap: 0.691vw; 
    width: 100%; 
    padding: 0.967vw 1.381vw; 
    background: var(--primary-color); 
    color: white; 
    border: none; 
    border-radius: 0.552vw; 
    font-family: 'Montserrat', sans-serif; 
    font-size: 0.8125rem; 
    font-weight: 600; 
    cursor: pointer; 
    transition: all 0.2s ease; 
    justify-content: center;
    box-shadow: 0 0.138vw 0.414vw rgba(99, 102, 241, 0.2);
}
.file-upload-btn:hover { 
    background: var(--secondary-color); 
    transform: translateY(-0.069vw); 
    box-shadow: 0 0.276vw 0.829vw rgba(99, 102, 241, 0.25); 
}
.file-upload-btn:active {
    transform: translateY(0);
    box-shadow: 0 0.138vw 0.414vw rgba(99, 102, 241, 0.2);
}
.file-name { 
    margin-top: 0.829vw; 
    font-family: 'Montserrat', sans-serif; 
    font-size: 0.75rem; 
    color: var(--text-light); 
    text-align: center; 
    padding: 0.552vw;
    background: var(--bg-color);
    border-radius: 0.414vw;
    border: 0.069vw solid var(--border-color);
}

/* Alt Input Container */
.alt-input-container {
    margin-bottom: 0;
    padding: 1.381vw;
    background: var(--bg-secondary);
    border: 0.069vw solid var(--border-color);
    border-radius: 0.691vw;
    transition: all 0.2s ease;
}
.alt-input-container:hover {
    border-color: var(--primary-color);
    background: rgba(99, 102, 241, 0.02);
}
.alt-input-container label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.691vw;
    display: flex;
    align-items: center;
    gap: 0.414vw;
}
.alt-input-container label::after {
    content: '*';
    color: var(--danger);
    font-size: 0.875rem;
    margin-left: 0.138vw;
}
.alt-input {
    width: 100%;
    padding: 0.829vw 1.105vw;
    border: 0.069vw solid var(--border-color);
    border-radius: 0.552vw;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8125rem;
    background: var(--bg-color);
    color: var(--text-color);
    box-sizing: border-box;
    transition: all 0.2s ease;
    outline: none;
}
.alt-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.207vw rgba(99, 102, 241, 0.1);
    background: var(--bg-color);
}
.alt-input::placeholder {
    color: var(--text-light);
    opacity: 0.6;
}

/* Cropper — идентично Figma CropImageModal */
#crop-modal .crop-modal-figma {
    background: #ffffff;
    border-radius: 0.552vw;
    box-shadow: 0 1.727vw 3.453vw -0.829vw rgba(0, 0, 0, 0.25);
    border: 0.069vw solid #e5e7eb;
    max-width: 41.436vw;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

#crop-modal .crop-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75vw 1.381vw;  /* уменьшены вертикальные отступы */
    border-bottom: 0.069vw solid #e5e7eb;
    flex-shrink: 0;
}

#crop-modal .crop-modal-header h3 {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e1e24;
}

#crop-modal .crop-modal-close {
    width: 2.21vw;
    height: 2.21vw;
    border: none;
    background: transparent;
    color: #9ca3af;
    border-radius: 0.414vw;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.2s, background 0.2s;
}

#crop-modal .crop-modal-close svg {
    width: 1.381vw;
    height: 1.381vw;
}

#crop-modal .crop-modal-close:hover {
    background: #f3f4f6;
    color: #1e1e24;
    transform: none;
    box-shadow: none;
}

#crop-modal .crop-modal-body {
    padding: 1.381vw;
    overflow: hidden;
}

#crop-modal .crop-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

#crop-modal .crop-preview {
    width: 100%;
    max-height: 27.624vw;
    border-radius: 0.552vw;
    margin-bottom: 1.381vw;
    display: block;
    background: #f3f4f6;
}

#crop-modal .crop-aspect-ratio {
    display: flex;
    gap: 0.829vw;
    margin-top: 1.657vw;
    margin-bottom: 0;
    flex-wrap: wrap;
    justify-content: center;
}

#crop-modal .crop-ratio-btn {
    padding: 0.552vw 1.105vw;
    border: 0.069vw solid #e5e7eb;
    border-radius: 0.414vw;
    background: #ffffff;
    color: #1e1e24;
    cursor: pointer;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

#crop-modal .crop-ratio-btn:hover:not(:disabled) {
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.05);
}

#crop-modal .crop-ratio-btn.active {
    background: #8b5cf6;
    color: #ffffff;
    border-color: #8b5cf6;
}

#crop-modal .crop-ratio-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* При фиксированном соотношении сторон — только угловые точки (диагональный ресайз) */
#crop-modal.crop-fixed-ratio .cropper-point.point-n,
#crop-modal.crop-fixed-ratio .cropper-point.point-s,
#crop-modal.crop-fixed-ratio .cropper-point.point-e,
#crop-modal.crop-fixed-ratio .cropper-point.point-w {
    display: none !important;
}

#crop-modal .crop-modal-footer {
    padding: 1.381vw;
    border-top: 0.069vw solid #e5e7eb;
    flex-shrink: 0;
}

#crop-modal .crop-apply-btn {
    width: 100%;
    padding: 0.691vw 1.657vw;
    border: none;
    border-radius: 0.552vw;
    background: #8b5cf6;
    color: #ffffff;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0.691vw 1.036vw -0.207vw rgba(139, 92, 246, 0.25);
    transition: box-shadow 0.2s, transform 0.2s;
}

#crop-modal .crop-apply-btn:hover {
    box-shadow: 0 0.691vw 1.036vw -0.207vw rgba(139, 92, 246, 0.4);
    transform: scale(1.02);
}

#crop-modal .crop-apply-btn:active {
    transform: scale(0.98);
}

/* Legacy crop (если не в #crop-modal) */
.crop-container { 
    width: 100%; 
    max-width: 55.249vw; 
    margin: 0 auto; 
}
.crop-preview { 
    width: 100%; 
    max-height: 34.53vw; 
    border-radius: 0.552vw; 
    margin-bottom: 1.381vw; 
    display: block; 
}
.crop-aspect-ratio { 
    display: flex; 
    gap: 1.036vw; 
    margin-bottom: 2.072vw; 
    flex-wrap: wrap; 
    justify-content: center; 
}
.crop-ratio-btn {
    padding: 0.552vw 1.105vw; 
    border: 0.069vw solid var(--border-color); 
    border-radius: 0.276vw; 
    background: var(--bg-secondary); 
    cursor: pointer; 
    font-family: 'Montserrat', sans-serif; 
    font-size: 0.8125rem; 
    transition: all 0.2s ease;
}
.crop-ratio-btn.active { 
    background: var(--primary-color); 
    color: white; 
    border-color: var(--primary-color); 
}

/* ==========================================================================
   QUOTE MODAL — идентично Figma (InsertQuoteModal)
   ========================================================================== */

/* Backdrop для цитаты использует общие стили .modal-backdrop (Figma: bg-black/20, blur 0.138vw) */

/* Контейнер модалки — Figma: один слой, только border и скругление, без outline/ring */
#quote-modal .modal-quote-figma {
    background: #ffffff;
    border-radius: 0.552vw;
    box-shadow: 0 1.727vw 3.453vw -0.829vw rgba(0, 0, 0, 0.25);
    border: 0.069vw solid #e5e7eb;
    max-height: 85vh;
    max-width: 36rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

/* Шапка — Figma: px-5 py-4 border-b border-border */
#quote-modal .quote-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75vw 1.381vw;  /* уменьшены вертикальные отступы */
    border-bottom: 0.069vw solid #e5e7eb;
    flex-shrink: 0;
}

#quote-modal .quote-modal-header h3 {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e1e24;
}

/* Кнопка закрытия — Figma: w-8 h-8 rounded-md text-muted-foreground hover:bg-muted */
#quote-modal .quote-modal-close {
    width: 2.21vw;
    height: 2.21vw;
    border: none;
    background: transparent;
    color: #9ca3af;
    border-radius: 0.414vw;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.2s, background 0.2s;
}
#quote-modal .quote-modal-close svg {
    width: 1.243vw;
    height: 1.243vw;
    flex-shrink: 0;
}

#quote-modal .quote-modal-close:hover {
    background: #f3f4f6;
    color: #1e1e24;
    transform: none;
    box-shadow: none;
}

/* Тело — Figma: p-5 overflow-y-auto */
#quote-modal .quote-modal-body {
    padding: 1.381vw;
    overflow-y: auto;
    flex-grow: 1;
    min-height: 0;
}

/* Внутренний блок — Figma: flex flex-col gap-5 */
#quote-modal .quote-modal-inner {
    display: flex;
    flex-direction: column;
    gap: 1.381vw;
}

/* Табы — Figma: grid grid-cols-2 p-1 bg-muted rounded-lg */
#quote-modal .quote-mode-switcher {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0.276vw;
    background: #f3f4f6;
    border-radius: 0.552vw;
}

#quote-modal .quote-mode-label {
    cursor: pointer;
    padding: 0.552vw 0;
    border-radius: 0.414vw;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #9ca3af;
    text-align: center;
    transition: all 0.2s;
}

#quote-modal .quote-mode-label:hover {
    color: #1e1e24;
}

#quote-modal .quote-mode-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

#quote-modal .quote-mode-label:has(input[type="radio"]:checked) {
    background: #ffffff;
    color: #8b5cf6;
    box-shadow: 0 0.069vw 0.138vw rgba(0, 0, 0, 0.05);
}

/* Описание — Figma: text-xs text-muted-foreground */
#quote-modal .quote-mode-description {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.75rem;
    color: #9ca3af;
    line-height: 1.5;
    margin: 0 0 0 0;
}

.quote-mode-hidden {
    display: none !important;
}

/* Поле — Figma: space-y-2, label text-sm font-bold text-foreground */
#quote-modal .quote-field {
    display: flex;
    flex-direction: column;
    gap: 0.552vw;
}

#quote-modal .quote-field-label {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #1e1e24;
}

/* Обёртка textarea с счётчиком — Figma: relative */
#quote-modal .quote-textarea-wrap {
    position: relative;
}

/* Textarea — внутренние отступы чуть меньше */
#quote-modal .quote-textarea {
    width: 100%;
    min-height: 9.669vw;
    padding: 0.691vw 0.829vw;
    border: 0.069vw solid #e5e7eb;
    border-radius: 0.414vw;
    background: #ffffff;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    color: #1e1e24;
    resize: none;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

#quote-modal .quote-textarea:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 0.138vw rgba(139, 92, 246, 0.1);
}

#quote-modal .quote-textarea::placeholder {
    color: #9ca3af;
}

/* Счётчик */
#quote-modal .quote-char-counter {
    position: absolute;
    bottom: 0.691vw;
    right: 0.829vw;
    font-size: 0.6875rem;
    font-weight: 500;
    color: #9ca3af;
}

/* Текстовый input — внутренние отступы чуть меньше */
#quote-modal .quote-input-text {
    width: 100%;
    height: 2.762vw;
    padding: 0 0.691vw;
    border: 0.069vw solid #e5e7eb;
    border-radius: 0.414vw;
    background: #ffffff;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    color: #1e1e24;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

#quote-modal .quote-input-text:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 0.138vw rgba(139, 92, 246, 0.1);
}

#quote-modal .quote-input-text::placeholder {
    color: #9ca3af;
}

/* Контент вкладки — Figma: space-y-5 */
#quote-modal .quote-tab-content {
    display: flex;
    flex-direction: column;
    gap: 1.381vw;
}

/* Строки диалога — Figma: flex gap-2, input w-1/3 h-9, flex-1 h-9, button w-9 h-9 */
#quote-modal .quote-dialogue-rows {
    display: flex;
    flex-direction: column;
    gap: 0.829vw;
    max-height: 20.718vw;
    overflow-y: auto;
    padding-right: 0.276vw;
}

#quote-modal .quote-dialogue-row {
    display: flex;
    gap: 0.552vw;
    align-items: center;
}

#quote-modal .quote-input-speaker {
    width: 33.333%;
    min-width: 5.525vw;
    height: 2.486vw;
    padding: 0 0.691vw;
    border: 0.069vw solid #e5e7eb;
    border-radius: 0.414vw;
    background: #ffffff;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    color: #1e1e24;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

#quote-modal .quote-input-replica {
    flex: 1;
    height: 2.486vw;
    padding: 0 0.691vw;
    border: 0.069vw solid #e5e7eb;
    border-radius: 0.414vw;
    background: #ffffff;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    color: #1e1e24;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

#quote-modal .quote-input-speaker:focus,
#quote-modal .quote-input-replica:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 0.138vw rgba(139, 92, 246, 0.1);
}

#quote-modal .quote-input-speaker::placeholder,
#quote-modal .quote-input-replica::placeholder {
    color: #9ca3af;
}

/* Кнопка удаления строки — Figma: w-9 h-9 rounded-md border border-border text-muted-foreground hover:bg-red-50 hover:text-red-500 hover:border-red-200 */
#quote-modal .quote-row-delete {
    width: 2.486vw;
    height: 2.486vw;
    flex-shrink: 0;
    border: 0.069vw solid #e5e7eb;
    border-radius: 0.414vw;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

#quote-modal .quote-row-delete:hover {
    background: #fef2f2;
    color: #ef4444;
    border-color: #fecaca;
}

/* Кнопка Add Line — Figma: w-full h-9 rounded-md bg-primary/10 text-primary text-sm font-bold hover:bg-primary/20 disabled:opacity-50 */
#quote-modal .quote-add-line-btn {
    width: 100%;
    height: 2.486vw;
    border: none;
    border-radius: 0.414vw;
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.552vw;
    transition: background 0.2s;
}

#quote-modal .quote-add-line-btn:hover:not(:disabled) {
    background: rgba(139, 92, 246, 0.2);
}

#quote-modal .quote-add-line-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#quote-modal .quote-dialogue-counter {
    margin-left: 0;
}

/* Футер с кнопкой — Figma: flex justify-end pt-2 */
#quote-modal .quote-modal-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.552vw;
}

/* Кнопка Insert Quote — Figma: px-6 py-2 bg-primary text-white text-sm font-bold rounded-md shadow-lg shadow-primary/25 hover:shadow-primary/40 hover:scale-[1.02] active:scale-[0.98] */
#quote-modal .quote-insert-btn {
    padding: 0.552vw 1.657vw;
    height: auto;
    min-width: auto;
    border: none;
    border-radius: 0.414vw;
    background: #8b5cf6;
    color: #ffffff;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0.691vw 1.036vw -0.207vw rgba(139, 92, 246, 0.25);
    transition: box-shadow 0.2s, transform 0.2s;
}

#quote-modal .quote-insert-btn:hover {
    box-shadow: 0 0.691vw 1.036vw -0.207vw rgba(139, 92, 246, 0.4);
    transform: scale(1.02);
}

#quote-modal .quote-insert-btn:active {
    transform: scale(0.98);
}

/* ==========================================================================
   REVERT CONFIRM MODAL — идентично Figma ConfirmRevertModal
   ========================================================================== */

#revert-confirm-modal {
    z-index: 5000001;
    align-items: center;
    justify-content: center;
}

#revert-confirm-modal .revert-confirm-modal-inner {
    background: #ffffff;
    border-radius: 1.105vw;
    border: 0.069vw solid #e4e4e7;
    box-shadow: 0 1.727vw 3.453vw -0.829vw rgba(0, 0, 0, 0.25), 0 0 0 0.069vw rgba(0, 0, 0, 0.05);
    padding: 2.21vw;
    max-width: 24rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: modalSlideIn 0.2s ease-out;
}

#revert-confirm-modal .revert-confirm-icon-wrap {
    width: 3.867vw;
    height: 3.867vw;
    background: #fef2f2;
    color: #ef4444;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.381vw;
    box-shadow: 0 0 0 0.552vw rgba(254, 242, 242, 0.5);
}

#revert-confirm-modal .revert-confirm-icon {
    width: 2.21vw;
    height: 2.21vw;
    flex-shrink: 0;
}

#revert-confirm-modal .revert-confirm-title {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 0.552vw 0;
}

#revert-confirm-modal .revert-confirm-message {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.875rem;
    color: #9ca3af;
    line-height: 1.625;
    margin: 0 0 2.21vw 0;
}

#revert-confirm-modal .revert-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.829vw;
    width: 100%;
}

#revert-confirm-modal .revert-confirm-cancel {
    padding: 0.691vw 1.105vw;
    border-radius: 0.829vw;
    border: 0.069vw solid #e5e7eb;
    background: transparent;
    color: #1e1e24;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

#revert-confirm-modal .revert-confirm-cancel:hover {
    background: #f3f4f6;
}

#revert-confirm-modal .revert-confirm-revert {
    padding: 0.691vw 1.105vw;
    border-radius: 0.829vw;
    border: none;
    background: #dc2626;
    color: #ffffff;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 0.691vw 1.036vw -0.207vw rgba(239, 68, 68, 0.2);
    transition: background 0.2s, transform 0.2s;
}

#revert-confirm-modal .revert-confirm-revert:hover {
    background: #b91c1c;
}

#revert-confirm-modal .revert-confirm-revert:active {
    transform: scale(0.95);
}

/* ==========================================================================
   CUSTOM CONFIRM MODAL — идентично revert-confirm-modal по стилистике
   ========================================================================== */

#custom-confirm-modal {
    z-index: 5000001;
    align-items: center;
    justify-content: center;
}

#custom-confirm-modal .custom-confirm-modal-inner {
    background: #ffffff;
    border-radius: 1.105vw;
    border: 0.069vw solid #e4e4e7;
    box-shadow: 0 1.727vw 3.453vw -0.829vw rgba(0, 0, 0, 0.25), 0 0 0 0.069vw rgba(0, 0, 0, 0.05);
    padding: 2.21vw;
    max-width: 24rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: modalSlideIn 0.2s ease-out;
}

#custom-confirm-modal .custom-confirm-icon-wrap {
    width: 3.867vw;
    height: 3.867vw;
    background: #fef2f2;
    color: #ef4444;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.381vw;
    box-shadow: 0 0 0 0.552vw rgba(254, 242, 242, 0.5);
}

#custom-confirm-modal .custom-confirm-icon {
    width: 2.21vw;
    height: 2.21vw;
    flex-shrink: 0;
}

#custom-confirm-modal .custom-confirm-title {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 0.552vw 0;
}

#custom-confirm-modal .custom-confirm-message {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.875rem;
    color: #9ca3af;
    line-height: 1.625;
    margin: 0 0 2.21vw 0;
}

#custom-confirm-modal .custom-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.829vw;
    width: 100%;
}

#custom-confirm-modal .custom-confirm-cancel {
    padding: 0.691vw 1.105vw;
    border-radius: 0.829vw;
    border: 0.069vw solid #e5e7eb;
    background: transparent;
    color: #1e1e24;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

#custom-confirm-modal .custom-confirm-cancel:hover {
    background: #f3f4f6;
}

#custom-confirm-modal .custom-confirm-delete {
    padding: 0.691vw 1.105vw;
    border-radius: 0.829vw;
    border: none;
    background: #dc2626;
    color: #ffffff;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 0.691vw 1.036vw -0.207vw rgba(239, 68, 68, 0.2);
    transition: background 0.2s, transform 0.2s;
}

#custom-confirm-modal .custom-confirm-delete:hover {
    background: #b91c1c;
}

#custom-confirm-modal .custom-confirm-delete:active {
    transform: scale(0.95);
}

.custom-confirm-actions {
    display: flex;
    gap: 0.691vw;
    justify-content: center;
}

/* ==========================================================================
   TABLE MODAL (Insert Table) — идентично Figma (InsertTableModal)
   ========================================================================== */

#table-modal .modal-table-figma {
    background: #ffffff;
    border-radius: 0.552vw;
    box-shadow: 0 1.727vw 3.453vw -0.829vw rgba(0, 0, 0, 0.25);
    border: 0.069vw solid #e5e7eb;
    max-height: 85vh;
    max-width: 36rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

#table-modal .table-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75vw 1.381vw;  /* уменьшены вертикальные отступы */
    border-bottom: 0.069vw solid #e5e7eb;
    flex-shrink: 0;
}

#table-modal .table-modal-header h3 {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e1e24;
}

#table-modal .table-modal-close {
    width: 2.21vw;
    height: 2.21vw;
    border: none;
    background: transparent;
    color: #9ca3af;
    border-radius: 0.414vw;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.2s, background 0.2s;
}
#table-modal .table-modal-close svg {
    width: 1.381vw;
    height: 1.381vw;
    flex-shrink: 0;
}

#table-modal .table-modal-close:hover {
    background: #f3f4f6;
    color: #1e1e24;
    transform: none;
    box-shadow: none;
}

#table-modal .table-modal-body {
    padding: 1.381vw;
    overflow-y: auto;
    flex-grow: 1;
    min-height: 0;
}

#table-modal .table-modal-inner {
    display: flex;
    flex-direction: column;
    gap: 1.381vw;
}

#table-modal .table-field {
    display: flex;
    flex-direction: column;
    gap: 0.552vw;
}

#table-modal .table-field-label {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #1e1e24;
}

#table-modal .table-input-wrap {
    position: relative;
}

#table-modal .table-input {
    width: 100%;
    height: 2.762vw;
    padding: 0 0.691vw;
    border: 0.069vw solid #e5e7eb;
    border-radius: 0.414vw;
    background: #ffffff;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    color: #1e1e24;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

#table-modal .table-input:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 0.138vw rgba(139, 92, 246, 0.1);
}

#table-modal .table-input::placeholder {
    color: #9ca3af;
}

#table-modal .table-char-counter {
    position: absolute;
    top: 50%;
    right: 1.105vw;
    transform: translateY(-50%);
    font-size: 0.6875rem;
    font-weight: 500;
    color: #9ca3af;
}

#table-modal .table-dims-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.105vw;
}

#table-modal .table-headers-block {
    display: flex;
    flex-direction: column;
    gap: 0.829vw;
}

#table-modal .table-headers-head {
    display: flex;
    flex-direction: column;
    gap: 0.276vw;
}

#table-modal .table-headers-hint {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.75rem;
    color: #9ca3af;
    margin: 0;
}

#table-modal #table-headers-config {
    max-height: 13.812vw;
    overflow-y: auto;
    padding-right: 0.552vw;
}

#table-modal .table-header-row {
    display: grid;
    grid-template-columns: 4.834vw 1fr;
    gap: 0.829vw;
    align-items: center;
    margin-bottom: 0.35rem;
}

#table-modal .table-header-label {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: #9ca3af;
}

#table-modal .table-header-row .table-input {
    height: 2.486vw;
}

#table-modal .table-modal-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.552vw;
    border-top: 0.069vw solid #e5e7eb;
    margin-top: 0.276vw;
}

#table-modal .table-create-btn {
    padding: 0.552vw 1.657vw;
    border: none;
    border-radius: 0.414vw;
    background: #8b5cf6;
    color: #ffffff;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0.691vw 1.036vw -0.207vw rgba(139, 92, 246, 0.25);
    transition: box-shadow 0.2s, transform 0.2s;
}

#table-modal .table-create-btn:hover {
    box-shadow: 0 0.691vw 1.036vw -0.207vw rgba(139, 92, 246, 0.4);
    transform: scale(1.02);
}

#table-modal .table-create-btn:active {
    transform: scale(0.98);
}

/* ==========================================================================
   YOUTUBE MODAL (Embed YouTube) — идентично Figma (InsertYoutubeModal)
   ========================================================================== */

#youtube-modal .modal-youtube-figma {
    background: #ffffff;
    border-radius: 0.552vw;
    box-shadow: 0 1.727vw 3.453vw -0.829vw rgba(0, 0, 0, 0.25);
    border: 0.069vw solid #e5e7eb;
    max-height: 85vh;
    max-width: 36rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

#youtube-modal .youtube-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75vw 1.381vw;  /* уменьшены вертикальные отступы */
    border-bottom: 0.069vw solid #e5e7eb;
    flex-shrink: 0;
}

#youtube-modal .youtube-modal-header h3 {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e1e24;
}

#youtube-modal .youtube-modal-close {
    width: 2.21vw;
    height: 2.21vw;
    border: none;
    background: transparent;
    color: #9ca3af;
    border-radius: 0.414vw;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.2s, background 0.2s;
}
#youtube-modal .youtube-modal-close svg {
    width: 1.381vw;
    height: 1.381vw;
    flex-shrink: 0;
}

#youtube-modal .youtube-modal-close:hover {
    background: #f3f4f6;
    color: #1e1e24;
    transform: none;
    box-shadow: none;
}

#youtube-modal .youtube-modal-body {
    padding: 1.381vw;
    overflow-y: auto;
    flex-grow: 1;
    min-height: 0;
}

#youtube-modal .youtube-modal-inner {
    display: flex;
    flex-direction: column;
    gap: 1.657vw;
}

#youtube-modal .youtube-field {
    display: flex;
    flex-direction: column;
    gap: 0.552vw;
}

#youtube-modal .youtube-field-label {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #1e1e24;
}

#youtube-modal .youtube-input {
    width: 100%;
    height: 3.039vw;
    padding: 0 0.691vw;
    border: 0.069vw solid #e5e7eb;
    border-radius: 0.414vw;
    background: #ffffff;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    color: #1e1e24;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

#youtube-modal .youtube-input:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 0.138vw rgba(139, 92, 246, 0.1);
}

#youtube-modal .youtube-input::placeholder {
    color: #9ca3af;
}

#youtube-modal .youtube-caption-wrap {
    position: relative;
}

#youtube-modal .youtube-caption-input {
    padding-right: 3.315vw;
}

#youtube-modal .youtube-char-counter {
    position: absolute;
    right: 0.829vw;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: #9ca3af;
}

#youtube-modal .youtube-modal-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 1.105vw;
    margin-top: 0.552vw;
}

#youtube-modal .youtube-insert-btn {
    padding: 0.552vw 1.657vw;
    border: none;
    border-radius: 0.414vw;
    background: #8b5cf6;
    color: #ffffff;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0.691vw 1.036vw -0.207vw rgba(139, 92, 246, 0.25);
    transition: box-shadow 0.2s, transform 0.2s;
}

#youtube-modal .youtube-insert-btn:hover:not(:disabled) {
    box-shadow: 0 0.691vw 1.036vw -0.207vw rgba(139, 92, 246, 0.4);
    transform: scale(1.02);
}

#youtube-modal .youtube-insert-btn:active:not(:disabled) {
    transform: scale(0.98);
}

#youtube-modal .youtube-insert-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* ==========================================================================
   TWITTER (X) MODAL — идентично YouTube Figma (Embed X Post)
   ========================================================================== */

#twitter-modal .twitter-modal-figma {
    background: #ffffff;
    border-radius: 0.552vw;
    box-shadow: 0 1.727vw 3.453vw -0.829vw rgba(0, 0, 0, 0.25);
    border: 0.069vw solid #e5e7eb;
    max-height: 85vh;
    max-width: 36rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

#twitter-modal .twitter-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75vw 1.381vw;  /* уменьшены вертикальные отступы */
    border-bottom: 0.069vw solid #e5e7eb;
    flex-shrink: 0;
}

#twitter-modal .twitter-modal-header h3 {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e1e24;
}

#twitter-modal .twitter-modal-close {
    width: 2.21vw;
    height: 2.21vw;
    border: none;
    background: transparent;
    color: #9ca3af;
    border-radius: 0.414vw;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.2s, background 0.2s;
}

#twitter-modal .twitter-modal-close svg {
    width: 1.381vw;
    height: 1.381vw;
    flex-shrink: 0;
}

#twitter-modal .twitter-modal-close:hover {
    background: #f3f4f6;
    color: #1e1e24;
}

#twitter-modal .twitter-modal-body {
    padding: 1.381vw;
    overflow-y: auto;
    flex-grow: 1;
    min-height: 0;
}

#twitter-modal .twitter-modal-inner {
    display: flex;
    flex-direction: column;
    gap: 1.657vw;
}

#twitter-modal .twitter-field {
    display: flex;
    flex-direction: column;
    gap: 0.552vw;
}

#twitter-modal .twitter-field-label {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #1e1e24;
}

#twitter-modal .twitter-input {
    width: 100%;
    height: 3.039vw;
    padding: 0 0.691vw;
    border: 0.069vw solid #e5e7eb;
    border-radius: 0.414vw;
    background: #ffffff;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    color: #1e1e24;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

#twitter-modal .twitter-input:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 0.138vw rgba(139, 92, 246, 0.1);
}

#twitter-modal .twitter-caption-wrap {
    position: relative;
}

#twitter-modal .twitter-caption-input {
    padding-right: 3.315vw;
}

#twitter-modal .twitter-char-counter {
    position: absolute;
    right: 0.829vw;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: #9ca3af;
}

#twitter-modal .twitter-modal-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 1.105vw;
    margin-top: 0.552vw;
}

#twitter-modal .twitter-insert-btn {
    padding: 0.552vw 1.657vw;
    border: none;
    border-radius: 0.414vw;
    background: #8b5cf6;
    color: #ffffff;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0.691vw 1.036vw -0.207vw rgba(139, 92, 246, 0.25);
    transition: box-shadow 0.2s, transform 0.2s;
}

#twitter-modal .twitter-insert-btn:hover:not(:disabled) {
    box-shadow: 0 0.691vw 1.036vw -0.207vw rgba(139, 92, 246, 0.4);
    transform: scale(1.02);
}

#twitter-modal .twitter-insert-btn:active:not(:disabled) {
    transform: scale(0.98);
}

#twitter-modal .twitter-insert-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* ==========================================================================
   PAGE SETTINGS (Article Settings) — идентично Figma ArticleSettingsModal
   ========================================================================== */

#admin-settings-modal .page-settings-figma {
    background: #ffffff;
    border-radius: 0.552vw;
    box-shadow: 0 1.727vw 3.453vw -0.829vw rgba(0, 0, 0, 0.25);
    border: 0.069vw solid #e5e7eb;
    max-height: 85vh;
    max-width: 28rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

#admin-settings-modal .page-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.105vw 1.381vw;
    border-bottom: 0.069vw solid #e5e7eb;
    flex-shrink: 0;
}

#admin-settings-modal .page-settings-header h3 {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e1e24;
}

#admin-settings-modal .page-settings-close {
    width: 2.21vw;
    height: 2.21vw;
    border: none;
    background: transparent;
    color: #9ca3af;
    border-radius: 0.414vw;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.2s, background 0.2s;
}

#admin-settings-modal .page-settings-close svg {
    width: 1.381vw;
    height: 1.381vw;
    flex-shrink: 0;
}

#admin-settings-modal .page-settings-close:hover {
    background: #f3f4f6;
    color: #1e1e24;
    transform: none;
    box-shadow: none;
}

#admin-settings-modal .page-settings-body {
    padding: 1.381vw;
    overflow-y: auto;
    flex-grow: 1;
    min-height: 0;
}

#admin-settings-modal .page-settings-inner {
    display: flex;
    flex-direction: column;
    gap: 1.657vw;
    padding-top: 0.552vw;
    padding-bottom: 0.552vw;
}

#admin-settings-modal .page-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.105vw;
}

#admin-settings-modal .page-settings-label-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.276vw;
}

#admin-settings-modal .page-settings-label {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #1e1e24;
}

#admin-settings-modal .page-settings-desc {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.75rem;
    color: #9ca3af;
}

#admin-settings-modal .page-settings-divider {
    height: 0.069vw;
    background: rgba(229, 231, 235, 0.5);
}

#admin-settings-modal .page-settings-switch {
    position: relative;
    display: inline-block;
    width: 3.039vw;
    height: 1.657vw;
    flex-shrink: 0;
    cursor: pointer;
}

#admin-settings-modal .page-settings-switch-input {
    opacity: 0;
    width: 0;
    height: 0;
}

#admin-settings-modal .page-settings-switch-slider {
    position: absolute;
    inset: 0;
    border-radius: 690.539vw;
    background: #e5e7eb;
    transition: background 0.2s ease-in-out;
}

#admin-settings-modal .page-settings-switch-slider::before {
    content: '';
    position: absolute;
    width: 1.381vw;
    height: 1.381vw;
    left: 0.138vw;
    bottom: 0.138vw;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0.069vw 0.138vw rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease-in-out;
}

#admin-settings-modal .page-settings-switch-input:checked + .page-settings-switch-slider {
    background: #8b5cf6;
}

#admin-settings-modal .page-settings-switch-input:checked + .page-settings-switch-slider::before {
    transform: translateX(1.381vw);
}

#admin-settings-modal .page-settings-switch-input:focus + .page-settings-switch-slider {
    box-shadow: 0 0 0 0.138vw rgba(139, 92, 246, 0.2);
}

/* ==========================================================================
   PAGE SETTINGS (SEO) — идентично Figma SeoSettingsModal (wiki + news)
   ========================================================================== */

#seo-modal .seo-modal-figma,
#news-seo-modal .seo-modal-figma {
    background: #ffffff;
    border-radius: 0.552vw;
    box-shadow: 0 1.727vw 3.453vw -0.829vw rgba(0, 0, 0, 0.25);
    border: 0.069vw solid #e5e7eb;
    max-height: 85vh;
    max-width: 36rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

#seo-modal .seo-modal-header,
#news-seo-modal .seo-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75vw 1.381vw;  /* уменьшены вертикальные отступы */
    border-bottom: 0.069vw solid #e5e7eb;
    flex-shrink: 0;
}

#seo-modal .seo-modal-header h3,
#news-seo-modal .seo-modal-header h3 {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e1e24;
}

#seo-modal .seo-modal-close,
#news-seo-modal .seo-modal-close {
    width: 2.21vw;
    height: 2.21vw;
    border: none;
    background: transparent;
    color: #9ca3af;
    border-radius: 0.414vw;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.2s, background 0.2s;
}

#seo-modal .seo-modal-close svg,
#news-seo-modal .seo-modal-close svg {
    width: 1.381vw;
    height: 1.381vw;
    flex-shrink: 0;
}

#seo-modal .seo-modal-close:hover,
#news-seo-modal .seo-modal-close:hover {
    background: #f3f4f6;
    color: #1e1e24;
    transform: none;
    box-shadow: none;
}

#seo-modal .seo-modal-body,
#news-seo-modal .seo-modal-body {
    padding: 1.381vw;
    overflow-y: auto;
    flex-grow: 1;
    min-height: 0;
    max-height: 60vh;
}

#seo-modal .seo-modal-inner,
#news-seo-modal .seo-modal-inner {
    display: flex;
    flex-direction: column;
    gap: 1.381vw;
}

#seo-modal .seo-field,
#news-seo-modal .seo-field {
    display: flex;
    flex-direction: column;
    gap: 0.35vw;  /* уменьшен отступ между подзаголовком и полем ввода */
}

#seo-modal .seo-field-label,
#news-seo-modal .seo-field-label {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.875rem;  /* увеличен шрифт подзаголовков */
    font-weight: 700;
    color: #1e1e24;
}

#seo-modal .seo-slug-wrap,
#news-seo-modal .seo-slug-wrap {
    position: relative;
}

#seo-modal .seo-slug-input,
#news-seo-modal .seo-slug-input {
    width: 100%;
    height: 2.762vw;
    padding: 0 0.691vw;
    padding-right: 6.5vw;  /* уменьшено для меньшего badge */
    border: 0.069vw solid #e5e7eb;
    border-radius: 0.414vw;
    background: #ffffff;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.875rem;  /* увеличен шрифт ввода */
    color: #1e1e24;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

#seo-modal .seo-slug-input:focus,
#news-seo-modal .seo-slug-input:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 0.138vw rgba(139, 92, 246, 0.1);
}

#seo-modal .seo-slug-input::placeholder,
#news-seo-modal .seo-slug-input::placeholder {
    color: #9ca3af;
}

#seo-modal .seo-slug-badge,
#news-seo-modal .seo-slug-badge {
    position: absolute;
    top: 50%;
    right: 0.691vw;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.276vw;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.625rem;  /* уменьшен шрифт */
    font-weight: 600;  /* увеличен вес для аккуратности */
    padding: 0.138vw 0.414vw;  /* уменьшены отступы */
    border-radius: 0.276vw;  /* менее круглый, более аккуратный */
    pointer-events: none;
    line-height: 1.2;
}

#seo-modal .seo-slug-badge.available,
#news-seo-modal .seo-slug-badge.available {
    color: #059669;
    background: #ecfdf5;
}

#seo-modal .seo-slug-badge.taken,
#news-seo-modal .seo-slug-badge.taken {
    color: #dc2626;
    background: #fef2f2;
}

#seo-modal .seo-slug-badge.checking,
#news-seo-modal .seo-slug-badge.checking {
    color: #6b7280;
    background: #f3f4f6;
}

#seo-modal .seo-slug-badge.warning,
#news-seo-modal .seo-slug-badge.warning {
    color: #d97706;
    background: #fffbeb;
}

#seo-modal .seo-textarea-wrap,
#seo-modal .seo-keywords-wrap,
#news-seo-modal .seo-textarea-wrap,
#news-seo-modal .seo-keywords-wrap {
    position: relative;
}

#seo-modal .seo-textarea,
#news-seo-modal .seo-textarea {
    width: 100%;
    padding: 0.691vw 0.829vw;
    border: 0.069vw solid #e5e7eb;
    border-radius: 0.414vw;
    background: #ffffff;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.875rem;  /* увеличен шрифт ввода */
    color: #1e1e24;
    outline: none;
    resize: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

#seo-modal .seo-textarea-wrap .seo-textarea,
#news-seo-modal .seo-textarea-wrap .seo-textarea {
    min-height: 6.077vw;
}

#seo-modal .seo-keywords-wrap .seo-textarea,
#news-seo-modal .seo-keywords-wrap .seo-textarea {
    min-height: 6.63vw;
    /* Счётчики в position: absolute — не занимают место; текст на всю ширину окошка */
    padding-right: 0.829vw;
}

#seo-modal .seo-textarea:focus,
#news-seo-modal .seo-textarea:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 0.138vw rgba(139, 92, 246, 0.1);
}

#seo-modal .seo-textarea::placeholder,
#news-seo-modal .seo-textarea::placeholder {
    color: #9ca3af;
}

#seo-modal .seo-char-counter,
#news-seo-modal .seo-char-counter {
    position: absolute;
    bottom: 0.691vw;
    right: 0.829vw;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.6875rem;
    font-weight: 500;
    color: #9ca3af;
    background: rgba(255, 255, 255, 0.5);
    padding: 0 0.276vw;
    border-radius: 0.138vw;
}

#seo-modal .seo-keywords-counter,
#news-seo-modal .seo-keywords-counter {
    position: absolute;
    bottom: 0.691vw;
    right: 0.829vw;
    display: flex;
    align-items: center;
    gap: 0.552vw;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.6875rem;
    font-weight: 500;
    color: #9ca3af;
    background: rgba(255, 255, 255, 0.5);
    padding: 0 0.276vw;
    border-radius: 0.138vw;
}

#seo-modal .seo-counter-divider,
#news-seo-modal .seo-counter-divider {
    width: 0.069vw;
    height: 0.829vw;
    background: #e5e7eb;
}

#seo-modal .seo-word-count.over-limit,
#news-seo-modal .seo-word-count.over-limit {
    color: #ef4444;
}

#seo-modal .seo-modal-actions,
#news-seo-modal .seo-modal-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 1.105vw;
    margin-top: 0.276vw;
    border-top: 0.069vw solid #e5e7eb;
}

#seo-modal .seo-done-btn,
#news-seo-modal .seo-done-btn {
    padding: 0.552vw 2.21vw;
    border: none;
    border-radius: 0.414vw;
    background: #8b5cf6;
    color: #ffffff;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0.691vw 1.036vw -0.207vw rgba(139, 92, 246, 0.25);
    transition: box-shadow 0.2s, transform 0.2s;
}

#seo-modal .seo-done-btn:hover,
#news-seo-modal .seo-done-btn:hover {
    box-shadow: 0 0.691vw 1.036vw -0.207vw rgba(139, 92, 246, 0.4);
    transform: scale(1.02);
}

#seo-modal .seo-done-btn:active,
#news-seo-modal .seo-done-btn:active {
    transform: scale(0.98);
}

#seo-modal .seo-hidden-input,
#news-seo-modal .seo-hidden-input {
    display: none !important;
}

/* ==========================================================================
   Insert Link Modal — в стиле остальных модальных окон
   ========================================================================== */
#link-modal .link-modal-figma {
    background: var(--bg-color);
    border-radius: 0.829vw;
    box-shadow: 0 1.727vw 3.453vw -0.829vw rgba(0, 0, 0, 0.25);
    border: 0.069vw solid var(--border-color);
    width: 90%;
    max-width: 34.53vw;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    overflow: hidden;
}

#link-modal .link-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75vw 1.381vw;  /* уменьшены вертикальные отступы */
    border-bottom: 0.069vw solid var(--border-color);
    background: var(--bg-color);
    flex-shrink: 0;
}

#link-modal .link-modal-title {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-color);
}

/* Крестик — тот же размер, что и в Insert Link */
#link-modal .link-modal-close {
    width: 2.21vw;
    height: 2.21vw;
    padding: 0;
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    border-radius: 0.414vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1;
    transition: color 0.2s, background 0.2s;
}

#link-modal .link-modal-close svg {
    width: 1.243vw;
    height: 1.243vw;
    flex-shrink: 0;
}

#link-modal .link-modal-close:hover {
    background: #f3f4f6;
    color: #1e1e24;
    transform: none;
    box-shadow: none;
}

#link-modal .link-modal-content {
    padding: 1.657vw 2.21vw;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

#link-modal .link-modal-tabs {
    display: flex;
    width: 100%;
    padding: 0.276vw 0;
    margin-bottom: 1.657vw;
    border-bottom: 0.069vw solid var(--border-color);
    background: transparent;
    gap: 0;
}

#link-modal .link-modal-tab {
    flex: 1;
    min-width: 0;
    padding: 0.829vw 1.105vw;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    border: none;
    border-bottom: 0.207vw solid transparent;
    background: transparent;
    color: var(--text-light);
    cursor: pointer;
    border-radius: 0.552vw 0.552vw 0 0;
    transition: all 0.2s ease;
    text-align: center;
}

#link-modal .link-modal-tab:hover {
    color: var(--text-color);
    background: rgba(99, 102, 241, 0.05);
}

#link-modal .link-modal-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background: rgba(99, 102, 241, 0.08);
}

#link-modal .link-modal-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#link-modal .link-modal-subtabs {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0;
    border-bottom: 0.069vw solid var(--border-color);
    padding: 0 0 0 0;
    margin-bottom: 1.381vw;
}

#link-modal .link-modal-subtab {
    flex: 1;
    min-width: 0;
    padding: 0.691vw 0.829vw;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    border: none;
    border-bottom: 0.138vw solid transparent;
    background: transparent;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

#link-modal .link-modal-subtab:hover {
    color: var(--text-color);
    background: rgba(99, 102, 241, 0.05);
}

#link-modal .link-modal-subtab.active {
    border-bottom-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(99, 102, 241, 0.06);
}

#link-modal .link-modal-subtab-panel {
    min-height: 13.812vw;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#link-modal .link-modal-body .modal-tab-content {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#link-modal .link-modal-body .modal-tab-content.active {
    display: flex;
}

#link-modal .link-modal-body .modal-subtab-content {
    display: none;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

#link-modal .link-modal-body .modal-subtab-content.active {
    display: flex;
}

#link-modal .link-search-wrap {
    position: relative;
    margin-bottom: 0.5rem;
}

#link-modal .link-search-icon {
    position: absolute;
    left: 0.829vw;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: #9ca3af;
    pointer-events: none;
}

#link-modal .link-search-input {
    width: 100%;
    height: 2.901vw;
    padding: 0 1rem 0 2.5rem;
    border: 0.069vw solid var(--border-color);
    border-radius: 0.691vw;
    background: var(--bg-color);
    font-size: 0.8125rem;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--text-color);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#link-modal .link-search-input::placeholder {
    color: var(--text-light);
}

#link-modal .link-search-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.138vw rgba(99, 102, 241, 0.12);
}

#link-modal .link-results-list {
    flex: 1;
    min-height: 8.287vw;
    overflow-y: auto;
    max-height: 16.575vw;
    margin: 0;
    padding: 0.552vw 0;
    display: flex;
    flex-direction: column;
    gap: 0.552vw;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

#link-modal .link-results-list::-webkit-scrollbar {
    width: 0.414vw;
}

#link-modal .link-results-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 0.207vw;
}

#link-modal .link-results-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 9.669vw;
    padding: 1.657vw 1.381vw;
    font-size: 0.8125rem;
    color: var(--text-light);
    text-align: center;
    background: var(--bg-secondary);
    border: 0.069vw dashed var(--border-color);
    border-radius: 0.691vw;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

#link-modal .link-result-item {
    width: 100%;
    text-align: left;
    padding: 0.829vw 0.967vw;
    border-radius: 0.691vw;
    border: 0.069vw solid var(--border-color);
    background: var(--bg-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.829vw;
    transition: all 0.2s ease;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    box-shadow: 0 0.069vw 0.138vw rgba(0, 0, 0, 0.04);
}

#link-modal .link-result-item:hover {
    background: var(--bg-secondary);
    border-color: var(--primary-color);
    box-shadow: 0 0.138vw 0.552vw rgba(99, 102, 241, 0.1);
}

#link-modal .link-result-item.active {
    background: rgba(99, 102, 241, 0.08);
    border-color: var(--primary-color);
    box-shadow: 0 0.138vw 0.691vw rgba(99, 102, 241, 0.15);
}

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

#link-modal .link-result-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#link-modal .link-result-item.active .link-result-title {
    color: var(--primary-color);
}

#link-modal .link-result-path {
    font-size: 0.75rem;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.276vw;
}

#link-modal .link-result-check {
    width: 1.519vw;
    height: 1.519vw;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#link-modal .link-result-item.active .link-result-check {
    display: flex;
}

#link-modal .link-result-check i {
    font-size: 0.7rem;
}

#link-modal .link-results-no-pages {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 9.669vw;
    padding: 1.934vw 1.657vw;
    color: var(--text-light);
    text-align: center;
    background: var(--bg-secondary);
    border: 0.069vw dashed var(--border-color);
    border-radius: 0.829vw;
}

#link-modal .link-results-no-icon {
    width: 3.315vw;
    height: 3.315vw;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

#link-modal .link-results-no-icon i {
    font-size: 1.25rem;
    opacity: 0.8;
}

#link-modal .link-results-no-pages span {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-light);
}

#link-modal .link-field-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.35rem;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

#link-modal .link-url-prefix-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    height: 2.901vw;
    border-radius: 0.691vw;
    border: 0.069vw solid var(--border-color);
    background: var(--bg-color);
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#link-modal .link-url-prefix-wrap:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.138vw rgba(99, 102, 241, 0.12);
}

#link-modal .link-url-prefix {
    padding: 0 0.967vw;
    height: 100%;
    display: flex;
    align-items: center;
    background: var(--bg-secondary);
    border-right: 0.069vw solid var(--border-color);
    font-size: 0.75rem;
    color: var(--text-light);
    font-weight: 500;
    flex-shrink: 0;
}

#link-modal .link-url-input {
    flex: 1;
    height: 100%;
    padding: 0 0.967vw;
    border: none;
    background: transparent;
    font-size: 0.8125rem;
    color: var(--text-color);
    outline: none;
}

#link-modal .link-url-input::placeholder {
    color: var(--text-light);
}

#link-modal .link-field-hint {
    margin: 0.691vw 0 0 0;
    font-size: 0.75rem;
    color: var(--text-light);
    line-height: 1.5;
}

#link-modal .link-external-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    height: 2.901vw;
    border-radius: 0.691vw;
    border: 0.069vw solid var(--border-color);
    background: var(--bg-color);
    overflow: hidden;
    padding-left: 0.967vw;
    padding-right: 0.967vw;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#link-modal .link-external-wrap:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.138vw rgba(99, 102, 241, 0.12);
}

#link-modal .link-external-icon {
    font-size: 1rem;
    color: var(--text-light);
    margin-right: 0.691vw;
    flex-shrink: 0;
}

#link-modal .link-external-input {
    flex: 1;
    height: 100%;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 0.8125rem;
    color: var(--text-color);
    outline: none;
}

#link-modal .link-external-input::placeholder {
    color: var(--text-light);
}

#link-modal .link-error-message {
    display: none;
    margin-top: 0.691vw;
    font-size: 0.875rem;
    color: var(--danger, #ef4444);
}

#link-modal .link-modal-footer {
    padding: 1.381vw 2.21vw;
    border-top: 0.069vw solid var(--border-color);
    background: var(--bg-secondary);
    display: flex;
    justify-content: flex-end;
    gap: 0.829vw;
    flex-shrink: 0;
}

#link-modal .link-modal-btn-cancel {
    padding: 0.691vw 1.381vw;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--text-light);
    background: transparent;
    border: 0.069vw solid var(--border-color);
    border-radius: 0.691vw;
    cursor: pointer;
    transition: all 0.2s ease;
}

#link-modal .link-modal-btn-cancel:hover {
    color: var(--text-color);
    background: var(--bg-color);
    border-color: var(--primary-color);
}

#link-modal .link-modal-btn-insert {
    padding: 0.691vw 1.657vw;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: #fff;
    background: var(--primary-color);
    border: none;
    border-radius: 0.691vw;
    cursor: pointer;
    box-shadow: 0 0.138vw 0.276vw rgba(99, 102, 241, 0.2);
    transition: all 0.2s ease;
}

#link-modal .link-modal-btn-insert:hover:not(:disabled) {
    background: var(--secondary-color);
    transform: translateY(-0.069vw);
    box-shadow: 0 0.276vw 0.552vw rgba(99, 102, 241, 0.25);
}

#link-modal .link-modal-btn-insert:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* SEO Modal (legacy hide) */
#publish-datetime {
    display: none;
}

/* Template Modal */
.load-more-container {
    display: none;
    margin-top: 1.036vw;
}

.template-preview-description {
    color: var(--text-light);
    margin-bottom: 0.691vw;
}

/* Hidden elements */
.hidden {
    display: none !important;
}

/* File input hidden */
input[type="file"] {
    display: none;
}

/* Library no results */
.library-no-results {
    display: none;
}

/* Selected info content */
.selected-info-content {
    display: none;
}

/* Search bar widget */
#search-bar-widget {
    display: none;
}

/* Image display states */
.image-display-block {
    display: block;
}

.image-display-none {
    display: none;
}

.image-display-flex {
    display: flex;
}

/* Buttons hidden */
.btn-hidden {
    display: none;
}

/* Info table width */
.info-table th.width-40 {
    width: 40%;
}

/* Heading icon sizes */
.heading-icon-small {
    font-size: 0.8em;
}

.heading-icon-xs {
    font-size: 0.7em;
}

/* Category text */
.category-missing-text {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* Disabled button opacity */
.btn-disabled {
    opacity: 0.5;
}