.calculator-container{max-width:1200px;margin:0 auto;padding:20px;}
.calculator-header{text-align:center;margin-bottom:32px;padding:16px 12px;}
.calculator-header h1{font-size:2.5rem;font-weight:700;margin-bottom:10px;text-shadow:0 2px 4px rgba(0,0,0,0.1);}
.calculator-header p{font-size:1.1rem;opacity:0.9;margin:0;}
.input-section{height:100%;background:white;border-radius:20px;padding:40px;box-shadow:0 10px 30px rgba(0,0,0,0.1);margin-bottom:30px;}
.input-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px;margin-bottom:30px;}
.input-group{position:relative;}
.input-group h4{font-size:1.1rem;font-weight:600;color:#2d3748;margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.input-group h4::before{content:'';width:4px;height:20px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:2px;}
.input-field{width:100%;padding:16px 20px;border:2px solid #e2e8f0;border-radius:12px;font-size:1rem;transition:all 0.3s ease;background:#f8fafc;color:#2d3748;}
.input-field:focus{outline:none;border-color:#667eea;background:white;box-shadow:0 0 0 3px rgba(102,126,234,0.1);}
.input-field:hover{border-color:#cbd5e0;}
.input-description{font-size:0.875rem;color:#718096;margin-top:8px;line-height:1.4;}
.tc-rgb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.tc-convert-rgb-btn{margin-top:24px;}
.temp-slider{width:100%;height:8px;border-radius:4px;background:linear-gradient(to right,#ff6b35,#ffeb3b,#ffffff,#87ceeb,#4169e1);outline:none;-webkit-appearance:none;margin:15px 0;}
.temp-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:white;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.3);}
.temp-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:white;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.3);border:none;}
.calculate-btn{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;border:none;padding:18px 40px;border-radius:12px;font-weight:600;font-size:1.1rem;cursor:pointer;width:100%;transition:all 0.3s ease;box-shadow:0 4px 15px rgba(102,126,234,0.3);}
.calculate-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(102,126,234,0.4);}
.calculate-btn:active{transform:translateY(0);}
.results-section{height:100%;background:white;border-radius:20px;padding:24px;box-shadow:0 10px 30px rgba(0,0,0,0.1);animation:tc-fadeInUp 0.6s ease;}
@keyframes tc-fadeInUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}
.results-section h3{font-size:1.1rem;font-weight:700;color:#2d3748;margin-bottom:16px;}
.color-display{width:100%;padding:24px;border-radius:16px;margin:20px 0;box-shadow:0 8px 25px rgba(0,0,0,0.15);border:3px solid #e2e8f0;display:flex;align-items:center;justify-content:center;color:white;font-size:1.4rem;font-weight:bold;text-shadow:0 2px 4px rgba(0,0,0,0.5);transition:all 0.3s ease;}
.values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:30px 0;}
.value-card{background:#f8fafc;border:2px solid #e2e8f0;border-radius:8px;padding:16px;text-align:center;transition:all 0.3s ease;position:relative;overflow:hidden;}
.value-card::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,rgba(102,126,234,0.05) 0%,transparent 100%);pointer-events:none;}
.value-card:hover{border-color:#667eea;transform:translateY(-5px);box-shadow:0 8px 25px rgba(102,126,234,0.15);}
.value-label{font-size:0.9rem;color:#718096;margin-bottom:4px;font-weight:500;}
.value-number{font-size:1.4rem;font-weight:800;color:#2d3748;margin-bottom:12px;}
.copy-btn{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;border:none;padding:8px 16px;border-radius:8px;cursor:pointer;font-size:0.85rem;font-weight:500;transition:all 0.3s ease;}
.copy-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(102,126,234,0.3);}
.presets-section{background:#f8fafc;border-radius:20px;padding:40px;margin:30px 0;border:1px solid #e2e8f0;}
.presets-section h3{font-size:1.5rem;font-weight:700;color:#2d3748;margin-bottom:20px;text-align:center;}
.tc-presets-intro{text-align:center;color:#718096;margin-bottom:20px;}
.presets-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:15px;margin-top:20px;}
.preset-item{background:white;border:2px solid #e2e8f0;border-radius:12px;padding:15px;text-align:center;cursor:pointer;transition:all 0.3s ease;}
.preset-item:hover{border-color:#667eea;transform:translateY(-3px);box-shadow:0 8px 20px rgba(102,126,234,0.15);}
.preset-color{width:100%;height:50px;border-radius:8px;margin-bottom:10px;border:1px solid #e2e8f0;}
.preset-name{font-weight:600;margin-bottom:5px;color:#2d3748;font-size:0.9rem;}
.preset-temp{color:#718096;font-size:0.8rem;}
.info-section{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;border-radius:20px;padding:40px;margin:30px 0;}
.info-section h3{font-size:1.5rem;font-weight:700;margin-bottom:20px;text-align:center;}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:20px;}
.info-card{background:rgba(255,255,255,0.1);border-radius:12px;padding:20px;backdrop-filter:blur(10px);}
.info-card h4{font-size:1.1rem;font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.info-card p{font-size:0.9rem;opacity:0.9;line-height:1.5;margin:0;}
@media (max-width:768px){.calculator-header h1{font-size:2rem;}.input-grid{grid-template-columns:1fr;}.values-grid{grid-template-columns:repeat(2,1fr);}.presets-grid{grid-template-columns:repeat(2,1fr);}.input-section,.results-section{padding:25px;}}