.percentage-visual-container{margin-top:30px;padding:25px;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.1)}.visual-title{text-align:center;color:#2c3e50;margin-bottom:25px;font-size:1.5rem;font-weight:700}.visual-subtitle{color:#34495e;margin-bottom:15px;font-size:1.2rem;font-weight:600}.visual-steps{background:white;border-radius:10px;padding:20px;margin-bottom:25px;box-shadow:0 2px 8px rgba(0,0,0,.08)}.visual-step{display:flex;align-items:flex-start;margin-bottom:15px;padding:12px;background:#f8f9fa;border-radius:8px;transition:transform .2s ease}.visual-step:hover{transform:translateX(5px);background:#e8f4f8}.visual-step:last-child{margin-bottom:0}.step-number{min-width:35px;height:35px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);color:white;border-radius:50%;font-weight:700;font-size:16px;margin-right:15px;flex-shrink:0}.step-description{flex:1 1;color:#2c3e50;font-size:15px;line-height:1.6;padding-top:6px}.visual-representation{background:white;border-radius:10px;padding:25px;margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,.08)}.visual-bars-container{margin:20px 0}.visual-comparison{display:flex;flex-direction:column;gap:20px}.visual-bar-section{width:100%}.visual-bar-label{margin-bottom:8px;font-weight:600;color:#2c3e50;font-size:14px}.visual-bar-wrapper{display:flex;width:100%;height:50px;border-radius:8px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.1)}.visual-bar-total{width:100%;background-color:#ecf0f1;display:flex;align-items:center;position:relative}.visual-bar-percentage{background:linear-gradient(90deg,#3498db,#5dade2);height:100%}.visual-bar-original,.visual-bar-percentage{display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:14px;transition:width .8s ease}.visual-bar-original{background:linear-gradient(90deg,#95a5a6,#7f8c8d)}.visual-bar-increase,.visual-bar-increase-full{background:linear-gradient(90deg,#27ae60,#2ecc71)}.visual-bar-decrease,.visual-bar-increase,.visual-bar-increase-full{display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:14px;transition:width .8s ease}.visual-bar-decrease{background:linear-gradient(90deg,#f39c12,#f1c40f)}.visual-bar-decrease-full{background:linear-gradient(90deg,#e67e22,#f39c12)}.visual-bar-decrease-full,.visual-bar-removed{display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:14px;transition:width .8s ease}.visual-bar-removed{background:linear-gradient(90deg,#e74c3c,#c0392b);opacity:.5}.visual-change-indicator{text-align:center;margin-top:15px;font-size:18px;font-weight:700}.change-positive{color:#27ae60}.change-negative{color:#e74c3c}.visual-info{margin-top:15px;padding:12px;background:#e8f4f8;border-radius:6px;text-align:center;color:#2c3e50;font-weight:500}.pie-chart-container{margin-top:30px;text-align:center}.pie-chart-title{margin-bottom:20px;font-weight:600;color:#2c3e50;font-size:16px}.pie-chart{width:200px;height:200px;border-radius:50%;margin:0 auto 20px;position:relative;box-shadow:0 4px 12px rgba(0,0,0,.15)}.pie-slice{width:100%;height:100%;border-radius:50%}.pie-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120px;height:120px;background:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;color:#2c3e50;box-shadow:0 2px 8px rgba(0,0,0,.1)}.pie-legend{display:flex;flex-direction:column;gap:10px;max-width:300px;margin:0 auto}.legend-item{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#f8f9fa;border-radius:6px}.legend-color{width:20px;height:20px;border-radius:4px;flex-shrink:0}.practical-hint{background:linear-gradient(135deg,#ffeaa7,#fdcb6e);border-radius:10px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,.08)}.practical-hint h4{margin:0 0 10px;color:#2d3436;font-size:16px;font-weight:700}.practical-hint p{margin:0;color:#2d3436;line-height:1.6;font-size:15px}@media (max-width:767px){.percentage-visual-container{padding:20px 15px}.visual-title{font-size:1.3rem}.visual-subtitle{font-size:1.1rem}.visual-steps{padding:15px}.visual-step{padding:10px}.step-number{min-width:30px;height:30px;margin-right:10px}.step-description,.step-number{font-size:14px}.visual-representation{padding:20px 15px}.visual-bar-wrapper{height:45px}.visual-bar-decrease,.visual-bar-decrease-full,.visual-bar-increase,.visual-bar-increase-full,.visual-bar-original,.visual-bar-percentage,.visual-bar-removed{font-size:13px}.pie-chart{width:180px;height:180px}.pie-center{width:100px;height:100px;font-size:24px}.practical-hint{padding:15px}.practical-hint h4{font-size:15px}.practical-hint p{font-size:14px}}@media (max-width:375px){.visual-bar-wrapper{height:40px}.visual-bar-decrease,.visual-bar-decrease-full,.visual-bar-increase,.visual-bar-increase-full,.visual-bar-original,.visual-bar-percentage,.visual-bar-removed{font-size:11px}.pie-chart{width:160px;height:160px}.pie-center{width:90px;height:90px;font-size:20px}}