body { --primary-color: #036fe2; }

.tab .addhover { border-bottom: 2px solid #0028c9;}

.banner { width: 100%; height: 400px; }

.banner-pic { width: 100%; height: 400px; background: url("../images/ai-banner.jpg") no-repeat center top; }

.container { display: flex; flex-direction: column; gap: 30px; }

.w-1200 { width: 1200px; margin: 0 auto; }

.w-1200 .h-title { padding-top: 45px; font-size: 30px; color: #333; letter-spacing: 0; text-align: center; font-weight: 600; }

.w-1200 .h2-title { margin-bottom: 10px; font-size: 22px; color: #333; letter-spacing: 0; font-weight: 600; }

.format-buttons { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }

.format-buttons button { cursor: pointer; background-color: transparent; color: #333; border: none; font-size: 16px; }

.format-buttons button.active { /* background-color: var(--primary-color); */ color: var(--primary-color); font-weight: 600; }

/* .format-buttons button:hover:not(.active) {
  background-color: #ccc;
} */
.format-buttons button:disabled { background-color: #cccccc; cursor: not-allowed; }

.function-section { display: none; background-color: white; padding: 20px; border-radius: 8px; /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */ box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; margin-bottom: 45px; }

.function-section.active { display: block; }

.upload-section { display: flex; flex-direction: column; gap: 15px; }

.upload-area { border: 2px dashed #ccc; border-radius: 8px; padding: 40px; text-align: center; cursor: pointer; transition: all 0.3s ease; background-color: #f9f9f9; }

.upload-area:hover { border-color: var(--primary-color); background-color: #f0f8f0; }

.upload-area.active { border-color: var(--primary-color); background-color: #f0f8f0; }

.upload-icon { font-size: 48px; color: var(--primary-color); margin-bottom: 10px; }

.upload-text { color: #666; margin-bottom: 10px; }

.file-input { display: none; }

.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 20px; }

.image-item { background-color: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; position: relative; display: flex; flex-direction: column; border: 2px solid var(--primary-color); }

.image-item:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }

.delete-btn { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; background-color: var(--primary-color); color: white; border: none; border-radius: 50%; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; z-index: 5; opacity: 0.8; transition: opacity 0.2s; }

.delete-btn:hover { opacity: 1; background-color: #d32f2f; }

.image-container { position: relative; width: 100%; aspect-ratio: 1 / 1; /* height: 150px; */ overflow: hidden; }

.image-preview { width: 100%; height: 100%; object-fit: contain; cursor: pointer; }

.item-message { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; padding: 5px; color: white; font-size: 12px; z-index: 10; display: none; }

.item-message.success { /* background-color: var(--primary-color); */ background: #000; opacity: .8; }

.item-message.error { background-color: var(--primary-color); }

.image-info { padding: 10px; text-align: center; font-size: 14px; color: #666; flex: 1; display: flex; flex-direction: column; }

.image-name { font-weight: bold; margin-bottom: 5px; word-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; flex: 1; }

.image-size { font-size: 12px; }

.action-buttons { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 0 10px 10px; }

button.action-btn { padding: 8px 12px; cursor: pointer; background-color: var(--primary-color); color: white; border: none; border-radius: 4px; font-size: 14px; flex: 1; }

button.action-btn:hover { background-color: var(--primary-color); }

button.action-btn:disabled { background-color: #cccccc; cursor: not-allowed; }

.preview-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); z-index: 1000; justify-content: center; align-items: center; }

.modal-content { position: relative; max-width: 80%; max-height: 90%; background-color: white; border-radius: 8px; overflow: hidden; }

.close-modal { position: absolute; top: 10px; right: 10px; font-size: 24px; color: white; cursor: pointer; background: none; border: none; /* padding: 5px; */ border-radius: 50%; opacity: 0.8; background-color: rgba(0, 0, 0, 0.5); line-height: 24px; aspect-ratio: 1 / 1; width: 30px; }

.close-modal:hover { opacity: 1; }

.download-btn { background-color: #2196F3; }

.download-btn:hover { background-color: #1976D2; }

.preview-btn { background-color: #FF9800; }

.preview-btn:hover { background-color: #E68A00; }

.convert-all-btn { background-color: #FF9800; }

.convert-all-btn:hover { background-color: #E68A00; }

.status-message { margin-top: 10px; padding: 10px; border-radius: 4px; color: white; }

.success { background-color: var(--primary-color); }

.error { background-color: var(--primary-color); }

.comparison-container { display: flex; gap: 20px; width: 100%; height: 100%; overflow: hidden; padding: 10px; box-sizing: border-box; }

.image-side { flex: 1; position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 1 / 1; }

.modal-image { width: 100%; height: 100%; object-fit: contain; display: block; }

.image-label { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.7); color: white; padding: 4px 8px; font-size: 12px; border-radius: 4px; }

.convert-button { padding: 10px 15px; cursor: pointer; background-color: var(--primary-color); color: white; border: none; border-radius: 4px; font-size: 14px; margin-top: 10px; }

.convert-button:hover { background-color: var(--primary-color); }

.convert-button:disabled { background-color: #cccccc; cursor: not-allowed; }

.add-more-btn { background-color: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; border: 2px dashed #ccc; color: #666; font-size: 48px; min-height: 200px; }

.add-more-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-color: var(--primary-color); background-color: #f0f8f0; }