.main-container{max-width:950px;margin:20px auto;padding:25px;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:20px;box-shadow:0 15px 35px rgb(0 0 0 / .1);position:relative;overflow:hidden}.main-container::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');pointer-events:none}.title{text-align:center;color:#fff;font-size:2.2rem;margin-bottom:30px;text-shadow:2px 2px 4px rgb(0 0 0 / .3);position:relative;z-index:1}.subtitle{text-align:center;color:rgb(255 255 255 / .9);font-size:1rem;margin-bottom:25px;position:relative;z-index:1}.calculator-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:start;position:relative;z-index:1}.calculator-section{background:rgb(255 255 255 / .95);padding:25px;border-radius:15px;box-shadow:0 8px 25px rgb(0 0 0 / .1);backdrop-filter:blur(15px);border:1px solid rgb(255 255 255 / .3)}.result-section{background:rgb(255 255 255 / .95);padding:25px;border-radius:15px;box-shadow:0 8px 25px rgb(0 0 0 / .1);backdrop-filter:blur(15px);border:1px solid rgb(255 255 255 / .3);min-height:450px}.section-title{font-size:1.4rem;color:#2c3e50;margin-bottom:20px;text-align:center;border-bottom:3px solid #667eea;padding-bottom:10px;position:relative}.section-title::after{content:'';position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);width:50px;height:3px;background:#764ba2;border-radius:2px}.formula-container{background:linear-gradient(135deg,#f8f9ff 0%,#e8f4fd 100%);padding:15px;border-radius:12px;margin-bottom:20px;border:2px solid #e3f2fd;position:relative}.formula{text-align:center;font-size:1.1rem;color:#2c3e50;font-weight:600}.input-group{margin-bottom:18px;position:relative}.input-label{display:block;font-weight:600;color:#2c3e50;margin-bottom:8px;font-size:1.1rem}.input-field{width:100%;padding:15px;border:2px solid #e1e8ed;border-radius:10px;font-size:1.1rem;transition:all 0.3s ease;box-sizing:border-box;background:rgb(255 255 255 / .9)}.input-field:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 4px rgb(102 126 234 / .1);background:#fff}.button-group{display:flex;gap:15px;margin-top:25px}.btn{flex:1;padding:15px;border:none;border-radius:10px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all 0.3s ease;text-transform:uppercase;letter-spacing:1px;position:relative;overflow:hidden}.btn::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgb(255 255 255 / .3);border-radius:50%;transform:translate(-50%,-50%);transition:width 0.3s,height 0.3s}.btn:hover::before{width:300px;height:300px}.btn-calculate{background:linear-gradient(45deg,#667eea,#764ba2);color:#fff}.btn-clear{background:linear-gradient(45deg,#ff6b6b,#ee5a24);color:#fff}.result-display{margin-bottom:25px}.result-title{font-size:1.2rem;color:#2c3e50;margin-bottom:10px;font-weight:600}.result-value{font-size:1.8rem;font-weight:700;padding:20px;background:linear-gradient(45deg,#667eea,#764ba2);color:#fff;border-radius:12px;text-align:center;min-height:60px;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 15px rgb(102 126 234 / .3);position:relative;overflow:hidden}.detailed-results{background:#f8f9ff;padding:20px;border-radius:12px;margin-bottom:20px;border-left:4px solid #667eea}.detail-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #e1e8ed}.detail-item:last-child{border-bottom:none}.detail-label{font-weight:600;color:#2c3e50}.detail-value{font-weight:500;color:#667eea}.visual-indicator{width:100%;height:8px;background:#e1e8ed;border-radius:4px;margin:10px 0;overflow:hidden}.indicator-bar{height:100%;border-radius:4px;transition:width 0.5s ease}.increase-bar{background:linear-gradient(90deg,#27ae60,#2ecc71)}.decrease-bar{background:linear-gradient(90deg,#e74c3c,#c0392b)}.solution-steps{background:#f8f9ff;padding:18px;border-radius:12px;border-left:4px solid #667eea}.solution-title{font-size:1.2rem;color:#2c3e50;margin-bottom:15px;font-weight:600}.step{margin-bottom:10px;font-size:.95rem;color:#555;line-height:1.6}.step-formula{font-family:'Courier New',monospace;background:#fff;padding:8px 12px;border-radius:6px;margin:6px 0;border:1px solid #e1e8ed;font-size:.9rem}.hidden{display:none}@media (max-width:768px){.main-container{margin:10px;padding:20px}.title{font-size:1.9rem;margin-bottom:20px}.calculator-wrapper{grid-template-columns:1fr;gap:20px}.calculator-section,.result-section{padding:20px;min-height:auto}.result-value{font-size:1.5rem}.button-group{flex-direction:column}}