.pie-chart {position: relative;width: 200px;height: 200px;border-radius: 50%;transform: rotate(-270deg);}.slice {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 50%;}.slice.magenta {background: conic-gradient(#C30054 0% var(--income-percentage), transparent var(--income-percentage) 100%);z-index: 1;}.slice.orange {background: conic-gradient(transparent 0% var(--income-percentage), #FFA500 var(--income-percentage) 100%);}.legend {display: flex;flex-direction: column;font-family: Arial, sans-serif;font-size: 16px;color: #5C5C5C;margin-top: 10px;}.legend div {display: flex;align-items: center;margin: 6px 0;}.legend .color {display: inline-block;width: 12px;height: 12px;border-radius: 50%;margin-right: 8px;}.legend .income {background-color: #C30054;}.legend .expenses {background-color: #FFA301;}.donut-chart {position: relative;width: 220px;height: 220px;}.donut {width: 100%;height: 100%;border-radius: 50%;background: conic-gradient(var(--donut-gradient));z-index: 1;}.donut-center {position: absolute;top: 50%;left: 50%;width: 124px;height: 124px;transform: translate(-50%, -50%);background: #fff;border-radius: 50%;z-index: 2;}.percent-labels {position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;z-index: 3;}.percent-label {position: absolute;transform: translate(-32%, -33%) !important;font-size: 15px !important;font-weight: 700;color: #000;padding: 2px 6px;border-radius: 14px;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);}.legend {font-family: Arial, sans-serif;font-size: 14px;margin-top: 10px;}.legend div {display: flex;align-items: center;margin: 4px 0;}.legend .color {display: inline-block;width: 12px;height: 12px;border-radius: 50%;margin-right: 8px;}.rent {background-color: #008FFB;}.services {background-color: #00E396;}.health {background-color: #FFB01A;}.extras {background-color: #FF4560;}.fun {background-color: #775DD0;}.percent-labels {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;pointer-events: none;}.percent-label {position: absolute;font-family: 'Inter', sans-serif;font-size: 12px;font-weight: bold;color: rgb(12, 12, 12);padding: 2px 5px;border-radius: 5px;}.dream-slider {-webkit-appearance: none;appearance: none;width: 100%;height: 10px;border-radius: 50px;background: #F0EFEF;outline: none;transition: background 0.3s ease-in-out;}.dream-slider::-webkit-slider-thumb {-webkit-appearance: none;appearance: none;width: 18px;height: 18px;border-radius: 50%;background: #CA0059;cursor: pointer;position: relative;z-index: 2;}.dream-slider::-moz-range-thumb {width: 16px;height: 16px;border-radius: 50%;background: #CA0059;cursor: pointer;}.slider-box {width: 90%;}.dreams-text {margin-top: 16px;}.cost-label {color: #CA0059;font-weight: bold;font-size: 16px;}.savings-info {font-weight: bold;text-align: center;color: #625C5C;}.savings-box {background: #F0EFEF;padding: 24px;border-radius: 8px;text-align: left;display: inline-block;}.savings-label {color: #CA0059;font-weight: bold;}