:root{--bg:#0f1115;--card:#1a1d23;--text:#e2e4e8;--muted:#8b92a8;--accent:#4a9eff;--accent2:#00d4aa;--border:#2a2e38;--danger:#ff6b6b;--warn:#ffd166;}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh}
a{color:var(--accent);text-decoration:none}
.container{max-width:960px;margin:0 auto;padding:20px}
header{background:linear-gradient(135deg,#1a1d23 0%,#0f1115 100%);border-bottom:1px solid var(--border);padding:20px 0;text-align:center;position:sticky;top:0;z-index:100}
header h1{font-size:1.6rem;font-weight:700;letter-spacing:-0.5px}
header h1 a{color:var(--text)}
header p{color:var(--muted);font-size:0.9rem;margin-top:4px}
.nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
.nav a{background:var(--card);border:1px solid var(--border);padding:6px 14px;border-radius:20px;font-size:0.8rem;color:var(--muted);transition:all .2s}
.nav a:hover,.nav a.active{color:var(--text);border-color:var(--accent);background:#22262e}
.tool-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:24px;margin:20px 0}
.tool-card h2{font-size:1.3rem;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.form-row{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:16px;align-items:flex-end}
.form-group{flex:1;min-width:140px}
.form-group label{display:block;font-size:0.8rem;color:var(--muted);margin-bottom:6px}
.form-group input,.form-group select{width:100%;background:#0f1115;border:1px solid var(--border);color:var(--text);padding:10px 12px;border-radius:8px;font-size:1rem}
.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--accent)}
.btn{background:linear-gradient(135deg,var(--accent),#357abd);border:none;color:#fff;padding:12px 24px;border-radius:8px;font-size:1rem;cursor:pointer;transition:opacity .2s}
.btn:hover{opacity:.9}
.result-box{background:#0f1115;border:1px solid var(--border);border-radius:8px;padding:16px;margin-top:16px}
.result-box h3{font-size:0.9rem;color:var(--muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:1px}
.result-value{font-size:1.5rem;font-weight:700;color:var(--accent2)}
.result-detail{color:var(--muted);font-size:0.85rem;margin-top:4px}
.section-title{font-size:1.1rem;margin:32px 0 16px;padding-bottom:8px;border-bottom:1px solid var(--border);color:var(--text)}
.scenario-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:16px 0}
.scenario-card{background:#0f1115;border:1px solid var(--border);border-radius:10px;padding:16px}
.scenario-card h4{font-size:0.95rem;color:var(--accent);margin-bottom:6px}
.scenario-card p{font-size:0.85rem;color:var(--muted)}
.faq-item{background:#0f1115;border:1px solid var(--border);border-radius:10px;padding:16px;margin-bottom:12px}
.faq-item h4{font-size:0.95rem;color:var(--text);margin-bottom:6px}
.faq-item p{font-size:0.85rem;color:var(--muted)}
.compare-box{display:flex;align-items:center;gap:12px;background:#0f1115;border:1px solid var(--border);border-radius:10px;padding:20px;margin:12px 0}
.compare-label{min-width:80px;font-size:0.8rem;color:var(--muted);text-align:center}
.compare-bar{flex:1;height:32px;border-radius:6px;position:relative;overflow:hidden}
.compare-bar-inner{height:100%;border-radius:6px;display:flex;align-items:center;justify-content:flex-end;padding-right:10px;font-size:0.75rem;color:#fff;font-weight:600}
.compare-vs{font-size:0.8rem;color:var(--muted);font-weight:700}
footer{text-align:center;padding:30px 20px;color:var(--muted);font-size:0.8rem;border-top:1px solid var(--border);margin-top:40px}
.tip{background:rgba(74,158,255,0.1);border-left:3px solid var(--accent);padding:12px 16px;border-radius:0 8px 8px 0;margin:12px 0;font-size:0.85rem;color:var(--muted)}
.warn{background:rgba(255,107,107,0.1);border-left:3px solid var(--danger);padding:12px 16px;border-radius:0 8px 8px 0;margin:12px 0;font-size:0.85rem;color:var(--muted)}
@media(max-width:600px){.container{padding:12px}.form-row{flex-direction:column}.scenario-grid{grid-template-columns:1fr}}

/* SVG 案例对比图 */
.compare-svg{width:100%;height:120px;border-radius:10px;background:#0f1115;border:1px solid var(--border);overflow:hidden}
.compare-svg text{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;fill:var(--muted);font-size:11px}
.compare-svg .label{fill:var(--text);font-size:12px;font-weight:600}

/* 色温条 */
.temp-bar{height:24px;border-radius:12px;margin:12px 0;position:relative}
.temp-bar::after{content:attr(data-val);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:11px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}

/* 表格 */
.data-table{width:100%;border-collapse:collapse;margin:12px 0;font-size:0.85rem}
.data-table th,.data-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border)}
.data-table th{color:var(--muted);font-weight:600;font-size:0.8rem;text-transform:uppercase;letter-spacing:0.5px}
.data-table td{color:var(--text)}
.data-table tr:hover td{background:rgba(74,158,255,0.05)}

/* 颜色预览 */
.color-preview{width:100%;height:60px;border-radius:8px;border:1px solid var(--border);margin:8px 0;transition:background .3s}

/* 标签 */
.tag{display:inline-block;padding:3px 10px;border-radius:12px;font-size:0.75rem;margin:2px;background:var(--card);border:1px solid var(--border);color:var(--muted)}
.tag.active{background:rgba(74,158,255,0.15);border-color:var(--accent);color:var(--accent)}

/* 结果高亮 */
.result-highlight{background:linear-gradient(135deg,rgba(74,158,255,0.1),rgba(0,212,170,0.1));border:1px solid var(--accent);border-radius:8px;padding:12px 16px;margin:8px 0}
.result-highlight .big{font-size:1.3rem;font-weight:700;color:var(--accent2)}