/*.tool-container { max-width: 1200px; margin: 0 auto; }*/
.upload-zone {
    border: 2px dashed #d0d7de;
    border-radius: 16px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #f8f9fa;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.upload-zone:hover { border-color: #0d6efd; background: #e9ecef; }
.upload-zone.dragover { border-color: #0d6efd; background: #e2e7f0; transform: scale(1.01); }
.upload-zone .upload-icon { font-size: 48px; color: #6c757d; margin-bottom: 12px; }
.upload-zone .upload-text { font-size: 18px; color: #212529; font-weight: 500; }
.upload-zone .upload-hint { font-size: 14px; color: #6c757d; margin-top: 6px; }

/* 棋盘格背景用于显示透明图 */
.transparent-bg {
    background-image:
        linear-gradient(45deg, #ccc 25%, transparent 25%),
        linear-gradient(-45deg, #ccc 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #ccc 75%),
        linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.preview-box {
    border-radius: 12px;
    overflow: hidden;
    background: #f1f3f5;
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.preview-box img {
    max-width: 100%;
    max-height: 500px;
    object-fit: contain;
    display: block;
}
.preview-box .placeholder-text { color: #adb5bd; font-size: 16px; user-select: none; }

.color-swatch {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 3px solid transparent;
    display: inline-block;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.color-swatch:hover { transform: scale(1.1); }
.color-swatch.active { border-color: #0d6efd; box-shadow: 0 0 0 3px rgba(13,110,253,0.25); }

.preset-colors { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.btn-tool { min-width: 100px; }

.spinner-overlay {
    position: absolute; inset: 0;
    background: rgba(255,255,255,0.8);
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px; z-index: 10;
}
.spinner-overlay .spinner-border { width: 48px; height: 48px; }

.hidden { display: none !important; }

.param-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border: 1px solid #e9ecef;
}
.param-card .card-title { font-size: 15px; font-weight: 600; color: #212529; margin-bottom: 16px; }

.range-value { font-weight: 600; color: #0d6efd; min-width: 36px; display: inline-block; text-align: center; }

.info-badge {
    background: #e7f3ff; border-radius: 8px; padding: 12px 16px;
    font-size: 14px; color: #0a58ca; border-left: 4px solid #0d6efd;
}

.size-preset-btn {
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid #dee2e6;
    background: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.size-preset-btn:hover { border-color: #0d6efd; background: #e7f0ff; }
.size-preset-btn.active { border-color: #0d6efd; background: #0d6efd; color: #fff; }

@media (max-width: 768px) {
    .upload-zone { padding: 24px 16px; min-height: 160px; }
    .upload-zone .upload-icon { font-size: 36px; }
    .preview-box { min-height: 200px; }
    .preview-box img { max-height: 280px; }
}