/* 颜色对比检查器特有样式 - 添加contrast-前缀 */
.contrast-color-picker-section {display: grid;grid-template-columns: 1fr 1fr;gap: 30px;margin: 30px 0;}
.contrast-color-group {display: flex;flex-direction: column;gap: 15px;}
.contrast-color-group h4 {font-size: 16px;color: #333;margin-bottom: 5px;}
.contrast-color-input-group {display: flex;gap: 10px;align-items: center;}
.contrast-color-picker {width: 60px;height: 40px;border: 2px solid #dee2e6;border-radius: 8px;overflow: hidden;cursor: pointer;}
.contrast-color-input {flex: 1;padding: 10px 15px;border: 2px solid #dee2e6;border-radius: 8px;font-size: 14px;}
.contrast-color-input:focus {outline: none;border-color: #2196F3;}
.contrast-preview-container {display: flex;flex-direction: column;gap: 20px;margin: 30px 0;}
.contrast-preview-box {padding: 40px;border-radius: 12px;text-align: center;transition: all 0.3s;}
.contrast-preview-box.large-text {font-size: 24px;font-weight: bold;}
.contrast-preview-box.normal-text {font-size: 16px;}
.contrast-preview-box.small-text {font-size: 14px;}
.contrast-result-container {display: grid;grid-template-columns: 1fr 1fr;gap: 20px;margin: 30px 0;}
.contrast-result-card {background: #f8f9fa;padding: 25px;border-radius: 12px;text-align: center;border: 2px solid #e9ecef;}
.contrast-result-card h4 {font-size: 16px;color: #333;margin-bottom: 15px;}
.contrast-ratio-value {font-size: 32px;font-weight: bold;color: #333;margin: 10px 0;}
.contrast-grade-badge {display: inline-block;padding: 8px 20px;border-radius: 20px;font-weight: bold;font-size: 14px;margin: 5px;}
.contrast-grade-pass {background: #4CAF50;color: white;}
.contrast-grade-fail {background: #F44336;color: white;}
.contrast-preset-colors {display: flex;flex-wrap: wrap;gap: 8px;margin-top: 10px;}
.contrast-preset-color {width: 30px;height: 30px;border-radius: 50%;cursor: pointer;border: 2px solid transparent;transition: all 0.2s;}
.contrast-preset-color:hover {transform: scale(1.1);border-color: #333;}
@media (max-width: 992px) {
    .contrast-color-picker-section {grid-template-columns: 1fr;}
    .contrast-result-container {grid-template-columns: 1fr;}
}