body {
    min-height: 1024px;
}
/*调整整体大小*/
.custom-main-width {
    max-width: 75%; /* 自定义具体数值 */
}
.drag-area {
    border: 2px dashed #ccc;
    transition: all 0.3s ease;
}
.drag-area.active {
    border-color: #3B82F6;
    background: #EFF6FF;
}
.base64-textarea {
    font-family: monospace;
}
input[type="file"] {
    display: none;
}



/* 移动端适配 START (max-width: 768px) */
@media (max-width: 768px) {
    /* 网格布局改为单列 */
    .grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* 导航栏文字缩小 */
    nav h1 {
        font-size: 1.1rem !important;
    }

    /* 工具说明文字优化 */
    .leading-relaxed {
        line-height: 1.5 !important;
        font-size: 0.875rem !important;
    }

    /* 按钮组垂直排列 */
    .flex.space-x-4 {
        flex-direction: column;
        gap: 0.75rem !important;
    }

    /* 文本区域高度优化 */
    .base64-textarea {
        height: 200px !important;
        font-size: 0.875rem !important;
    }

    /* 拖放区域尺寸优化 */
    .drag-area {
        height: 180px !important;
        padding: 1rem !important;
    }

    /* 预览图最大宽度限制 */
    .max-w-full {
        max-width: 280px !important;
        margin: 0 auto;
    }

    /* 文件信息文字适配 */
    #imagePreview .text-sm {
        font-size: 0.75rem !important;
    }
}
/* 移动端适配 END */

/*转换中动画 start*/
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 9999;
}

.spinner {
    width: 60px;
    height: 60px;
    position: relative;
    margin-bottom: 15px;
}

.double-bounce1, .double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #3b82f6;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
    animation-delay: -1.0s;
}

@keyframes sk-bounce {
    0%, 100% {
        transform: scale(0.0);
    } 50% {
          transform: scale(1.0);
      }
}

.loading-text {
    color: #4b5563;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}

/*转换中动画 end*/


/* 工具栏按钮样式 */
.toolbar-btn {
    @apply w-10 h-10 flex items-center justify-center
    bg-white border border-gray-200 rounded-full
    shadow-md hover:shadow-lg transition-all
    text-gray-600 hover:text-blue-600
    relative;
}

.tooltip {
    @apply absolute right-full top-1/2 -translate-y-1/2
    bg-gray-800 text-white text-xs px-2 py-1 rounded
    whitespace-nowrap opacity-0 group-hover:opacity-100
    transition-opacity duration-300 mr-2;
}

/* 夜间模式样式 */
.dark-mode {
    @apply bg-gray-900 text-gray-100;
}
.dark-mode .toolbar-btn {
    @apply bg-gray-800 border-gray-700 text-gray-300 hover:text-blue-400;
}