/* ============ 证件照裁剪 · 工具特有样式 ============ */
/* 布局 / 卡片 / 标题 / 表单 / 按钮等统一使用 common.css，此处仅保留本工具专属样式 */

/* 同一列内多张卡片间距 + 网格顶部对齐 */
.section-row-1-2 { align-items: start; }
.settings-card + .settings-card { margin-top: 20px; }

/* 预览头部右侧信息 */
.header-right { display: flex; align-items: center; gap: 12px; }
.image-size { font-size: 12px; color: #6b7280; font-family: 'Consolas', 'Monaco', monospace; }

/* 证件照尺寸网格 */
.size-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.size-btn {
    padding: 8px 6px; background: #fff; border: 2px solid #d1d5db; border-radius: 6px;
    font-size: 12px; color: #374151; cursor: pointer; transition: all .2s; text-align: center;
}
.size-btn:hover { border-color: #8b5cf6; color: #8b5cf6; }
.size-btn.active { background: linear-gradient(135deg, #8b5cf6, #7c3aed); border-color: #8b5cf6; color: #fff; }
.size-name { font-weight: 600; margin-bottom: 2px; }
.size-spec { font-size: 10px; opacity: .8; }

/* 背景色选择 */
.color-options { display: flex; gap: 8px; }
.color-btn {
    width: 36px; height: 36px; border-radius: 50%; border: 3px solid #e5e7eb;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); transition: all .2s;
}
.color-btn:hover { transform: scale(1.1); }
.color-btn.active { border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,.2); }
.color-label { font-size: 12px; color: #6b7280; margin-top: 6px; }

/* 旋转按钮行（覆盖 common.css 中 btn-outline 的 width:100%） */
.action-buttons { display: flex; gap: 8px; }
.action-buttons .btn { width: auto; flex: 1; margin-top: 0; }

/* 缩放滑块（common.css 无此控件，保留本工具样式） */
.zoom-slider {
    width: 100%; height: 6px; background: #e5e7eb; border-radius: 3px;
    outline: none; -webkit-appearance: none;
}
.zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 18px; height: 18px;
    background: #8b5cf6; border-radius: 50%; cursor: pointer;
}

/* 裁剪预览区 */
.crop-wrapper {
    position: relative; width: 400px; height: 400px; max-width: 100%;
    margin: 0 auto; overflow: hidden; border-radius: 8px;
    background:
        linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
        linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e5e7eb 75%),
        linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    cursor: grab;
}
.crop-wrapper:active { cursor: grabbing; }
.crop-canvas { display: block; width: 400px; height: 400px; max-width: 100%; }
.crop-frame {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    border: 2px dashed #8b5cf6; background: rgba(139, 92, 246, .1);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5); pointer-events: none;
}

/* 空状态（可点击上传） */
.empty-preview {
    min-height: 400px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; border: 2px dashed #d1d5db;
    border-radius: 8px; cursor: pointer; transition: all .2s; background: #fafafa;
}
.empty-preview:hover { border-color: #8b5cf6; background: #f5f3ff; }
.empty-icon { font-size: 48px; margin-bottom: 16px; }
.empty-text { font-size: 14px; color: #888; }
.empty-hint { font-size: 13px; color: #9ca3af; }

/* 裁剪信息 */
.info-grid { display: flex; flex-direction: column; gap: 6px; }
.info-item { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.info-label { color: #6b7280; }
.info-value { color: #374151; font-family: 'Consolas', 'Monaco', monospace; }

/* 结果预览 */
.result-preview {
    display: flex; justify-content: center; align-items: center; min-height: 100px;
    padding: 15px; border-radius: 8px;
    background:
        linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
        linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e5e7eb 75%),
        linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}
.result-canvas { display: block; box-shadow: 0 2px 8px rgba(0,0,0,.15); border-radius: 2px; }
.result-info {
    display: flex; justify-content: center; align-items: center; gap: 10px;
    margin-top: 10px; padding-top: 10px; border-top: 1px solid #e5e7eb;
}
.result-label { font-size: 14px; font-weight: 600; color: #374151; }
.result-dims { font-size: 12px; color: #6b7280; font-family: 'Consolas', 'Monaco', monospace; }

@media (max-width: 768px) {
    .crop-wrapper, .crop-canvas { width: 100%; height: auto; }
}