/* Contrast Checker page scoped styles */
:root {--bg:#f5f7fa;--card:#ffffff;--text:#2c3e50;--primary:#3498db;--success:#27ae60;--danger:#e74c3c;}
body {font-family:'Segoe UI',sans-serif;background:var(--bg);color:var(--text);margin:0;padding:0;}

/* Layout spacing under fixed header */
.cc-main { padding: 120px 0 40px; }
.cc-card { background:#fff; padding:30px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.cc-actions { margin-bottom: 10px; }

/* Form grid */
.cc-card .input-row {display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-bottom:20px; align-items:end;}
.cc-card .color-group {display:flex; flex-direction:column;}
.cc-card label {font-weight:600; margin-bottom:6px; font-size:.95em;}
.cc-card .color-inputs {display:flex; gap:8px; align-items:center;}
.cc-card input[type="color"] {width:60px; height:60px; border:none; border-radius:8px; cursor:pointer;}
.cc-card input[type="text"] {flex:1; padding:10px; border:1px solid #ddd; border-radius:6px; font-family:monospace; height:44px;}

/* Buttons */
.cc-card .actions {display:flex; gap:10px; margin:20px 0; flex-wrap:wrap;}
.cc-card button {background:var(--primary); color:white; border:none; padding:12px 20px; border-radius:6px; cursor:pointer; font-weight:bold; transition:.2s;}
.cc-card button:hover {background:#2980b9;}
.cc-card button.secondary {background:#95a5a6;}
.cc-card button.success {background:var(--success);}
.cc-card button.danger {background:var(--danger);}

/* Preview & results */
.cc-card #preview {margin:25px 0; padding:25px; border-radius:12px; font-size:1.2em; text-align:center; min-height:80px; display:flex; align-items:center; justify-content:center; transition:all .3s; font-weight:500;}
.cc-card .result {margin-top:20px; padding:20px; background:#f8f9fa; border-radius:10px;}
.cc-card .result h3 {margin-top:0; color:var(--primary);}
.cc-card .standards {display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:15px;}
.cc-card .std-item {text-align:center; padding:10px; border-radius:8px; background:rgba(52,152,219,.1);}
.cc-card .status {display:block; font-weight:bold; font-size:1.1em; margin-bottom:4px;}
.cc-card .pass {color:var(--success);} 
.cc-card .fail {color:var(--danger);} 
.cc-card .suggestions {margin-top:20px; padding:15px; background:#e8f4fd; border-radius:8px;}
.cc-card .suggestion-item {display:flex; align-items:center; gap:10px; margin:8px 0;}
.cc-card .color-swatch {width:30px; height:30px; border-radius:6px; border:2px solid #ddd;}

/* 流程图样式 */
.cc-card .flow-diagram,
.suggestions .flow-diagram {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  margin: 20px 0;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
}

.cc-card .flow-step,
.suggestions .flow-step {
  width: 100%;
  max-width: 400px;
  margin: 10px 0;
}

.cc-card .flow-box,
.suggestions .flow-box {
  background: white;
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  text-align: center;
}

.cc-card .flow-box.bg-color-box,
.suggestions .flow-box.bg-color-box {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.cc-card .flow-box.result-box,
.suggestions .flow-box.result-box {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
}

.cc-card .flow-color,
.suggestions .flow-color {
  width: 60px;
  height: 60px;
  margin: 10px auto;
  border-radius: 8px;
  border: 3px solid rgba(255,255,255,0.3);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  display: block;
}

.cc-card .flow-box code,
.suggestions .flow-box code {
  display: block;
  margin-top: 8px;
  padding: 4px 8px;
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
  font-size: 0.9em;
}

.cc-card .flow-arrow,
.suggestions .flow-arrow {
  font-size: 32px;
  color: #3498db;
  margin: 5px 0;
  font-weight: bold;
  display: block;
}

.cc-card .flow-conditions,
.suggestions .flow-conditions {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
  text-align: left;
}

.cc-card .flow-conditions li,
.suggestions .flow-conditions li {
  margin: 8px 0;
  padding-left: 20px;
  position: relative;
}

.cc-card .flow-conditions li:before,
.suggestions .flow-conditions li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #27ae60;
  font-weight: bold;
}

.cc-card .flow-explanation,
.suggestions .flow-explanation {
  margin-top: 20px;
  padding: 15px;
  background: #e8f4fd;
  border-radius: 8px;
  border-left: 4px solid #3498db;
  display: block;
}

.cc-card .flow-explanation h5,
.suggestions .flow-explanation h5 {
  margin-top: 0;
  color: #3498db;
}

.cc-card .flow-explanation ul,
.suggestions .flow-explanation ul {
  margin: 10px 0 0 0;
  padding-left: 20px;
}

.cc-card .flow-explanation li,
.suggestions .flow-explanation li {
  margin: 8px 0;
  line-height: 1.6;
}

/* 未找到推荐色的分析框样式 */
.cc-card .no-result-analysis,
.suggestions .no-result-analysis {
  margin-top: 30px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  border: 2px solid #3498db;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.cc-card .no-result-analysis h4,
.suggestions .no-result-analysis h4 {
  margin-top: 0;
  color: #3498db;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cc-card .no-result-analysis ul,
.suggestions .no-result-analysis ul {
  margin: 10px 0;
  padding-left: 25px;
}

.cc-card .no-result-analysis li,
.suggestions .no-result-analysis li {
  margin: 8px 0;
  line-height: 1.8;
}