/* ============ 图片转 Base64 - 工具特有样式 ============ */
/* 通用样式（卡片、按钮、分隔线、info-box、mode-btn、badge 等）已由 common.css 统一提供 */

/* ---- 容器 + 左右 1:2 布局 ---- */
#base64-container > .section-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

#base64-container > .section-row > .settings-card {
    flex: 1;
    margin-top: 0;
    margin-bottom: 0;
}

#base64-container > .section-row > .preview-card {
    flex: 2;
    margin-top: 0;
    margin-bottom: 0;
}

/* ---- 上传区 ---- */
.upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 40px;
    border: 3px dashed #d1d5db;
    border-radius: 16px;
    background: #f9fafb;
    cursor: pointer;
    transition: all 0.2s;
}

.upload-area:hover {
    border-color: #8b5cf6;
    background: #f5f3ff;
}

.upload-icon {
    font-size: 48px;
}

.upload-text {
    font-size: 18px;
    font-weight: 600;
    color: #374151;
}

.upload-hint {
    font-size: 13px;
    color: #9ca3af;
}

/* ---- 预览区 ---- */
.preview-box {
    border-radius: 10px;
    overflow: hidden;
    background: #1f2937;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.preview-img {
    display: block;
    max-width: 100%;
    max-height: 360px;
}

/* ---- 图片信息 ---- */
.meta-card {
    background: #f9fafb;
    border: 1px solid #eef0f3;
    border-radius: 10px;
    padding: 4px 14px;
    margin-bottom: 18px;
}

.meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    padding: 8px 0;
    border-bottom: 1px dashed #eceef1;
}

.meta-row:last-child {
    border-bottom: none;
}

.meta-row span {
    color: #9ca3af;
}

.meta-row b {
    color: #374151;
    font-weight: 600;
    word-break: break-all;
    text-align: right;
    max-width: 72%;
}

/* ---- 设置项（说明文案沿用 common.css 的 .form-hint） ---- */

/* ---- 下拉选择器（沿用 common.css 的 .select-wrapper / .select-wrapper-container） ---- */

/* ---- 滑块（带数值） ---- */
.range-with-value {
    display: flex;
    align-items: center;
    gap: 10px;
}

.range-slider {
    flex: 1;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: #8b5cf6;
    border-radius: 50%;
    cursor: pointer;
}

.range-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #8b5cf6;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.range-value {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    min-width: 48px;
    text-align: right;
}

/* ---- 输出区 ---- */
.output-container {
    position: relative;
    margin-bottom: 10px;
}

/* ---- 复制按钮居中（沿用 common.css 的 .btn-container-center） ---- */

.code-editor {
    width: 100%;
    min-height: 130px;
    padding: 12px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    line-height: 1.6;
    background: #1e1e1e;
    color: #d4d4d4;
    border: none;
    border-radius: 8px;
    resize: vertical;
    box-sizing: border-box;
    word-break: break-all;
}

.code-editor:focus {
    outline: none;
}

/* ---- 标签内徽标（沿用 common.css 的 .badge / .badge-primary） ---- */

/* ---- 响应式 ---- */
@media (max-width: 768px) {
    #base64-container > .section-row {
        flex-direction: column;
        gap: 12px;
    }
}