.nav a.active{color:#fff;font-weight:600}
.tool-main{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:36px}
.tool-desc{color:var(--text-light);margin-bottom:18px;font-size:0.9375rem;line-height:1.7}
.grayscale-bar{height:64px;border-radius:10px;margin-bottom:10px;box-shadow:inset 0 2px 4px rgba(0,0,0,0.1)}
.grayscale-labels{display:flex;justify-content:space-between;font-size:0.75rem;color:var(--text-light);margin-bottom:18px}
.grayscale-actions{display:flex;gap:14px;margin-bottom:18px}
.steps-select{display:flex;align-items:center;gap:14px}
.steps-select select{padding:10px 14px;border:1px solid var(--border);border-radius:8px;font-size:0.9375rem}
.gray-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
.gray-grid .gray-item{height:54px;border-radius:8px;cursor:pointer;border:1px solid var(--border);transition:transform 0.2s}
.gray-grid .gray-item:hover{transform:scale(1.05)}
.backlight-preview{height:220px;background:#000;border-radius:14px;margin-bottom:18px}
.backlight-tips{background:linear-gradient(135deg,var(--bg-gray) 0%,#e2e8f0 100%);padding:18px;border-radius:10px;margin-bottom:18px}
.backlight-tips h3{font-size:1rem;margin-bottom:10px;color:var(--primary)}
.backlight-tips ul{padding-left:22px;color:var(--text-light);font-size:0.9375rem}
.backlight-tips li{margin-bottom:6px}
.backlight-actions{text-align:center}
.level-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.level-item{height:88px;border-radius:10px;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;transition:transform 0.2s}
.level-item:hover{transform:scale(1.03)}
.level-item span{background:rgba(255,255,255,0.85);padding:4px 10px;border-radius:6px;font-size:0.75rem}
.refresh-display{text-align:center;padding:44px;background:linear-gradient(135deg,var(--bg-gray) 0%,#e2e8f0 100%);border-radius:14px;margin-bottom:22px}
.refresh-value{font-size:4.5rem;font-weight:700;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.refresh-unit{font-size:1.625rem;color:var(--text-light)}
.refresh-info{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
.info-row{background:var(--bg-gray);padding:14px;border-radius:10px;text-align:center}
.info-row span:first-child{display:block;font-size:0.75rem;color:var(--text-light)}
.refresh-actions{display:flex;gap:14px;justify-content:center}
.animation-box{height:108px;background:linear-gradient(135deg,var(--bg-gray) 0%,#e2e8f0 100%);border-radius:10px;position:relative;overflow:hidden;margin-bottom:18px}
.moving-block{width:64px;height:64px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);border-radius:10px;position:absolute;top:22px;left:0;box-shadow:0 4px 12px rgba(5,150,105,0.3)}
.animation-controls{display:flex;align-items:center;gap:14px}
.animation-controls input{flex:1}
.animation-controls #speedValue{min-width:28px;text-align:center;font-weight:600;color:var(--primary)}
.ufo-test-area{background:#0f172a;border-radius:14px;padding:22px;margin-bottom:18px}
.ufo-track{height:44px;background:#1e293b;border-radius:6px;margin-bottom:14px;position:relative;overflow:hidden}
.ufo-block{width:44px;height:44px;background:#fff;position:absolute;left:0;border-radius:4px}
.response-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.response-controls select{padding:10px 14px;border:1px solid var(--border);border-radius:8px;font-size:0.9375rem}
.bw-test-area{height:160px;background:#000;border-radius:14px;margin-bottom:18px}
.bw-controls{display:flex;align-items:center;gap:14px}
.bw-controls select{padding:10px 14px;border:1px solid var(--border);border-radius:8px;font-size:0.9375rem}
.result-box{background:linear-gradient(135deg,var(--bg-gray) 0%,#e2e8f0 100%);border-radius:14px;padding:18px;margin-bottom:18px}
.result-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}
.result-item:last-child{border-bottom:none}
.result-label{color:var(--text-light);font-size:0.9375rem}
.result-value{font-weight:600;color:var(--primary)}
.result-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:18px}
.result-buttons .btn{padding:12px;font-size:0.875rem}
.result-tips{background:linear-gradient(135deg,var(--bg-gray) 0%,#e2e8f0 100%);border-radius:10px;padding:18px;margin-top:18px}
.result-tips h3{font-size:1rem;margin-bottom:10px;color:var(--primary)}
.result-tips ul{padding-left:22px;color:var(--text-light);font-size:0.9375rem}
.result-tips li{margin-bottom:6px}
.standard-colors{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:28px}
.std-color{height:108px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform 0.2s}
.std-color:hover{transform:scale(1.03)}
.std-color span{background:rgba(0,0,0,0.5);color:#fff;padding:10px 14px;border-radius:8px;font-size:0.75rem;text-align:center}
.gradient-tests{display:grid;gap:14px}
.gradient-tests .gradient-bar{height:44px;border-radius:8px}
.skin-tone-test{margin-top:36px}
.skin-colors{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.skin-color{height:88px;border-radius:10px;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;transition:transform 0.2s}
.skin-color:hover{transform:scale(1.03)}
.skin-color span{background:rgba(0,0,0,0.5);color:#fff;padding:4px 10px;border-radius:6px;font-size:0.75rem}
.contrast-display{display:grid;grid-template-columns:1fr 1fr;height:220px;border-radius:14px;overflow:hidden;margin-bottom:18px}
.contrast-half{cursor:pointer;transition:opacity 0.2s}
.contrast-half:hover{opacity:0.9}
.contrast-half.black{background:#000}
.contrast-half.white{background:#fff}
.contrast-actions{text-align:center;margin-bottom:22px}
.dark-levels,.light-levels{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-bottom:22px}
.dark-levels div,.light-levels div{height:44px;border-radius:6px}
.checkerboard{height:220px;border-radius:14px;cursor:pointer;margin-bottom:18px}
.viewing-test-area{background:var(--bg-gray);padding:22px;border-radius:14px;margin-bottom:18px}
.viewing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.vg-item{height:88px;border-radius:8px}
.viewing-actions{text-align:center;margin-bottom:22px}
.guide-list{display:grid;gap:14px}
.guide-item{display:flex;align-items:center;gap:14px;background:var(--bg-gray);padding:14px;border-radius:10px}
.guide-num{width:36px;height:36px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0;box-shadow:0 4px 12px rgba(5,150,105,0.25)}
.guide-item p{margin:0;color:var(--text-light)}
.panel-compare{margin-top:36px}
.compare-table{border:1px solid var(--border);border-radius:10px;overflow:hidden}
.compare-row{display:grid;grid-template-columns:1fr 1fr 2fr 1.5fr;padding:14px 18px;border-bottom:1px solid var(--border)}
.compare-row:last-child{border-bottom:none}
.compare-row.header{background:linear-gradient(135deg,var(--bg-gray) 0%,#e2e8f0 100%);font-weight:600}
.wp-color-picker{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.wp-color-picker input{width:64px;height:44px;border:none;border-radius:10px;cursor:pointer}
.wp-preset-colors{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:28px}
.wp-color{height:44px;border-radius:8px;cursor:pointer;border:2px solid transparent;transition:all 0.2s}
.wp-color:hover{border-color:var(--primary);transform:scale(1.05)}
.wp-resolutions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.wp-res-item{display:flex;align-items:center;gap:10px;padding:12px;background:var(--bg-gray);border-radius:10px;cursor:pointer;transition:all 0.2s}
.wp-res-item:has(input:checked){background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);color:#fff}
.wp-res-item input{display:none}
.wp-custom-res{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.wp-custom-res input{width:108px;padding:10px;border:1px solid var(--border);border-radius:8px}
.wp-preview-box{height:220px;border-radius:14px;margin-bottom:18px;border:2px solid var(--border)}
.popular-wallpapers{padding:48px 0;background:var(--bg-gray)}
.popular-wallpapers h2{text-align:center;margin-bottom:10px}
.popular-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:28px}
.popular-item{height:128px;border-radius:14px;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:14px;transition:transform 0.2s}
.popular-item:hover{transform:scale(1.03)}
.popular-item span{background:rgba(0,0,0,0.5);color:#fff;padding:6px 14px;border-radius:6px;font-size:0.9375rem}
.related-tools{padding:70px 0;background:var(--bg-gray)}
.related-tools h2{text-align:center;margin-bottom:36px}
.tools-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tool-card{display:block;background:var(--bg);padding:24px;border-radius:14px;text-align:center;text-decoration:none;transition:all 0.3s;border:1px solid var(--border)}
.tool-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);text-decoration:none;border-color:var(--primary)}
.tool-icon{font-size:2.25rem;display:block;margin-bottom:10px}
.tool-card h3{font-size:1rem;margin-bottom:6px;color:var(--text)}
.tool-card p{font-size:0.8125rem;color:var(--text-light);margin:0}
.btn-large{padding:16px 36px;font-size:1.0625rem}
@media(max-width:900px){.tool-main{grid-template-columns:1fr}.tools-grid{grid-template-columns:repeat(2,1fr)}.popular-grid{grid-template-columns:repeat(2,1fr)}.wp-resolutions{grid-template-columns:repeat(2,1fr)}.compare-row{grid-template-columns:1fr;gap:6px}.standard-colors{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.tools-grid{grid-template-columns:1fr}.skin-colors{grid-template-columns:repeat(3,1fr)}.wp-preset-colors{grid-template-columns:repeat(4,1fr)}}