.color-blindness-simulator{padding:2rem 0;min-height:auto}.color-blindness-simulator .container{max-width:var(--tool-container-max-width, 1600px);margin:0 auto;padding:0 1rem}.color-blindness-simulator .tool-header{text-align:center;margin-bottom:2rem}.color-blindness-simulator .tool-header h1{font-size:2.5rem;color:var(--text-primary);margin-bottom:.5rem}.color-blindness-simulator .tool-header p{color:var(--text-secondary);font-size:1.1rem}.simulator-grid{display:grid;grid-template-columns:1fr 350px;gap:var(--tool-content-gap, 2rem)}@media (max-width: 1023px){.simulator-grid{grid-template-columns:1fr}}.simulator-main{display:flex;flex-direction:column;gap:1.5rem}.type-selector{background:var(--bg-secondary);border-radius:12px;padding:1.5rem}.type-selector h3{margin-bottom:1rem;color:var(--text-primary)}.type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}@media (max-width: 900px){.type-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 480px){.type-grid{grid-template-columns:1fr}}.type-btn{background:var(--bg-primary);border:2px solid var(--border-color);border-radius:8px;padding:.75rem;cursor:pointer;transition:all .2s;text-align:left}.type-btn:hover{border-color:var(--primary-color)}.type-btn.active{border-color:var(--primary-color);background:var(--primary-light, rgba(59, 130, 246, .1))}.type-btn .type-name{display:block;font-weight:600;color:var(--text-primary);margin-bottom:.25rem}.type-btn .type-desc{display:block;font-size:.75rem;color:var(--text-secondary)}.type-btn.severe .type-name:before{content:"";display:inline-block;width:8px;height:8px;background:#ef4444;border-radius:50%;margin-right:.5rem}.type-btn.mild .type-name:before{content:"";display:inline-block;width:8px;height:8px;background:#f59e0b;border-radius:50%;margin-right:.5rem}.type-btn.total .type-name:before{content:"";display:inline-block;width:8px;height:8px;background:#6b7280;border-radius:50%;margin-right:.5rem}.type-btn.partial .type-name:before{content:"";display:inline-block;width:8px;height:8px;background:#8b5cf6;border-radius:50%;margin-right:.5rem}.upload-zone{background:var(--bg-secondary);border:2px dashed var(--border-color);border-radius:12px;padding:2rem;cursor:pointer;transition:all .2s;min-height:300px;display:flex;align-items:center;justify-content:center}.upload-zone:hover,.upload-zone.drag-over{border-color:var(--primary-color);background:var(--primary-light, rgba(59, 130, 246, .05))}.upload-placeholder{text-align:center;color:var(--text-secondary)}.upload-icon{font-size:4rem;display:block;margin-bottom:1rem}.upload-placeholder p{font-size:1.1rem;margin-bottom:.5rem}.upload-hint{font-size:.875rem;opacity:.7}.image-preview-container{width:100%}.image-comparison{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}@media (max-width: 600px){.image-comparison{grid-template-columns:1fr}}.image-panel{text-align:center}.image-panel h4{margin-bottom:.75rem;color:var(--text-primary);font-size:.875rem}.preview-image{max-width:100%;max-height:400px;border:2px solid #d1d5db;border-radius:8px;box-shadow:0 1px 3px #0000001a}.processing-placeholder{background:var(--bg-primary);border-radius:8px;padding:3rem;color:var(--text-secondary);min-height:200px;display:flex;align-items:center;justify-content:center}.processing-indicator{display:flex;flex-direction:column;align-items:center;gap:1rem;color:var(--primary, #3B82F6)}.processing-indicator span{font-size:.875rem;font-weight:500}.action-buttons{display:flex;gap:1rem;flex-wrap:wrap}.color-blindness-simulator .btn{padding:.75rem 1.5rem;border-radius:8px;font-weight:500;cursor:pointer;transition:all .2s;border:none;font-size:1rem}.color-blindness-simulator .btn-primary{background:var(--primary-color);color:#fff}.color-blindness-simulator .btn-primary:hover:not(:disabled){background:var(--primary-hover)}.color-blindness-simulator .btn-primary:disabled{opacity:.6;cursor:not-allowed}.color-blindness-simulator .btn-secondary{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color)}.color-blindness-simulator .btn-secondary:hover{background:var(--bg-tertiary)}.color-blindness-simulator .btn-outline{background:transparent;color:var(--text-secondary);border:1px solid var(--border-color)}.color-blindness-simulator .btn-outline:hover{border-color:var(--primary-color);color:var(--primary-color)}.simulator-sidebar{display:flex;flex-direction:column;gap:1.5rem}.color-tester,.color-palette-test,.all-types-preview{background:var(--bg-secondary);border:2px solid #d1d5db;border-radius:12px;padding:1.25rem;box-shadow:0 1px 3px #0000001a}.color-tester h3,.color-palette-test h3,.all-types-preview h3{color:var(--text-primary);margin-bottom:.25rem;font-size:1rem}.color-tester p,.color-palette-test p,.all-types-preview p{color:var(--text-secondary);font-size:.85rem;margin-bottom:1rem}.color-input-group{margin-bottom:1rem}.color-input-group label{display:block;font-size:1rem;color:var(--gray-900);margin-bottom:.5rem;font-weight:600;line-height:1.5;letter-spacing:.3px}.color-picker-row{display:flex;gap:.5rem}.color-picker-row input[type=color]{width:50px;height:40px;border:none;border-radius:6px;cursor:pointer;padding:0}.color-picker-row input[type=text]{flex:1;padding:.5rem;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-primary);color:var(--text-primary);font-family:monospace}.color-comparison{background:var(--bg-primary);border-radius:8px;padding:1rem}.color-swatch-row{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:.75rem}.swatch-item{text-align:center}.color-swatch.large{width:60px;height:60px;border-radius:8px;border:2px solid var(--border-color);margin-bottom:.25rem}.swatch-item span{font-size:.75rem;color:var(--text-secondary)}.arrow{font-size:1.5rem;color:var(--text-secondary)}.hex-values{display:flex;justify-content:center;gap:.5rem;font-family:monospace;font-size:.85rem;color:var(--text-secondary)}.palette-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.palette-item{text-align:center}.palette-swatches{display:flex;border-radius:6px;overflow:hidden;margin-bottom:.25rem}.palette-swatches .swatch{flex:1;height:30px}.palette-name{font-size:.7rem;color:var(--text-secondary)}.all-types-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.type-preview{text-align:center}.type-swatch{width:100%;height:35px;border-radius:6px;border:1px solid var(--border-color);margin-bottom:.25rem}.type-label{font-size:1rem;color:var(--gray-900)}.info-section{margin-top:3rem}.info-section h2{text-align:center;margin-bottom:1.5rem;color:var(--text-primary)}.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}@media (max-width: 900px){.info-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 480px){.info-grid{grid-template-columns:1fr}}.info-card{background:var(--bg-secondary);border-radius:12px;padding:1.5rem;text-align:center}.info-icon{font-size:2.5rem;margin-bottom:.75rem}.info-card h4{color:var(--text-primary);margin-bottom:.5rem}.info-card p{color:var(--text-secondary);font-size:.875rem}.accessibility-tips{margin-top:3rem}.accessibility-tips h2{text-align:center;margin-bottom:1.5rem;color:var(--text-primary)}.tips-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}@media (max-width: 768px){.tips-list{grid-template-columns:1fr}}.tip{display:flex;gap:1rem;background:var(--bg-secondary);border-radius:12px;padding:1.25rem}.tip-number{width:36px;height:36px;background:var(--primary-color);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}.tip-content h4{color:var(--text-primary);margin-bottom:.25rem}.tip-content p{color:var(--text-secondary);font-size:.875rem}.cta-section{text-align:center;margin-top:3rem;padding:3rem;background:linear-gradient(135deg,var(--primary-color),#8b5cf6);border-radius:16px;color:#fff}.cta-section h2{margin-bottom:.5rem}.cta-section p{opacity:.9;margin-bottom:1.5rem;max-width:600px;margin-left:auto;margin-right:auto}.btn-cta{display:inline-block;background:#fff;color:var(--primary-color);padding:1rem 2rem;border-radius:8px;font-weight:600;text-decoration:none;transition:transform .2s}.btn-cta:hover{transform:translateY(-2px)}