/**
 * 调色板工具专属样式
 * - spectrum colorpicker 控件本体样式来自 script/colorpicker/spectrum.css
 * - 本文件仅负责工具页壳层布局、控件居中、间距、移动端适配
 */

/* 工具表单容器：居中显示调色板控件 */
.tool-form .tab-content {
    padding: 20px 0;
    min-height: 360px;
}

.tool-form .tab-pane {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 340px;
}

/* spectrum 内嵌（flat:true）模式下，控件占用空间较大，确保不溢出 */
.tool-form .sp-container.sp-flat {
    margin: 0 auto;
    max-width: 100%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    overflow: hidden;
}

/* full-spectrum 是 docs.js 配置的 containerClassName，对应 #full 输入框 */
.tool-form .sp-container.sp-flat.full-spectrum {
    background: #fff;
    border: 1px solid #e0e6ed;
}

/* 颜色码输入框美化 */
.tool-form .sp-input {
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    padding: 6px 10px !important;
    font-family: Consolas, Monaco, "Courier New", monospace !important;
    font-size: 14px !important;
}

.tool-form .sp-input:focus {
    border-color: #4a86e8 !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.15rem rgba(74, 134, 232, 0.15) !important;
}

/* 选色按钮 */
.tool-form .sp-choose,
.tool-form .sp-cancel {
    border-radius: 4px !important;
    padding: 4px 12px !important;
    font-size: 13px !important;
}

/* 错误提示容器 */
.error-container {
    max-width: 520px;
    margin: 20px auto 0;
}

.error-container .alert {
    margin-bottom: 0;
}

/* 移动端适配：spectrum 默认宽度 240px，移动端缩放 */
@media (max-width: 480px) {
    .tool-form .tab-content {
        padding: 10px 0;
    }

    .tool-form .sp-container.sp-flat {
        transform: scale(0.92);
        transform-origin: top center;
    }
}