:root{--battery-width: 120px;--battery-height: 60px;--battery-border: 3px solid #333;--battery-radius: 6px;--pin-width: 8px;--pin-height: 20px;--full-color: #4cd964;--medium-color: #ffcc00;--low-color: #ff3b30;--empty-color: #e0e0e0}.battery-container{position:relative;width:var(--battery-width);height:var(--battery-height);margin:70px 50px 50px 70px}.battery-body{width:100%;height:100%;border:var(--battery-border);border-radius:var(--battery-radius);position:relative;background-color:#fff;overflow:hidden}.battery-pin{width:var(--pin-width);height:var(--pin-height);background-color:#333;position:absolute;top:50%;right:calc(-1 * var(--pin-width));transform:translateY(-50%);border-radius:0 var(--battery-radius) var(--battery-radius) 0}.battery-level{height:100%;transition:width .5s ease;padding:4px;box-sizing:border-box}.battery-level.full{width:95%;background-color:var(--full-color)}.battery-level.medium{width:60%;background-color:var(--medium-color)}.battery-level.low{width:20%;background-color:var(--low-color);animation:blink 1.5s infinite}.battery-level.empty{width:5%;background-color:var(--empty-color)}.battery-charging{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#333;font-size:12px;display:none}.battery-container.charging .battery-charging{display:block}@keyframes blink{0%,to{opacity:1}50%{opacity:.6}}.battery-percentage{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#333;font-size:14px;font-weight:700}@layer utilities{.stat-card{border-radius:.75rem;background-color:var(--pro-ant-color-white);padding:1.5rem;--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / .1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:.3s}.stat-card:hover{--un-translate-y:-.25rem;transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-shadow:var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgb(0 0 0 / .1)),var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.stat-icon{margin-bottom:1rem;width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;border-radius:9999px;font-size:1.25rem;line-height:1.75rem}.stat-value{margin-bottom:.25rem;font-size:1.5rem;line-height:2rem;font-weight:700;--un-text-opacity:1;color:rgb(34 34 34 / var(--un-text-opacity))}.stat-label{font-size:.875rem;line-height:1.25rem;letter-spacing:.05em;text-transform:uppercase;--un-text-opacity:1;color:rgb(107 114 128 / var(--un-text-opacity))}}.stat-card{border-radius:.75rem;background-color:var(--pro-ant-color-white);padding:1.5rem;--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / .1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:.3s}.stat-card:hover{--un-translate-y:-.25rem;transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-shadow:var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgb(0 0 0 / .1)),var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.stat-icon{margin-bottom:1rem;width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;border-radius:9999px;font-size:1.25rem;line-height:1.75rem}.stat-value{margin-bottom:.25rem;font-size:1.5rem;line-height:2rem;font-weight:700;--un-text-opacity:1;color:rgb(31 41 55 / var(--un-text-opacity))}.stat-label{font-size:.875rem;line-height:1.25rem;letter-spacing:.05em;text-transform:uppercase;--un-text-opacity:1;color:rgb(107 114 128 / var(--un-text-opacity))}:root{--primary: #165DFF;--secondary: #36D399}.text-primary{color:var(--primary)}.text-secondary{color:var(--secondary)}.bg-blue-100{background-color:#165dff1a}.bg-green-100{background-color:#36d3991a}.bg-purple-100{background-color:#7c3aed1a}.text-purple-600{color:#7c3aed}