.html-chart-wrapper{width:100%}.chart-grid{display:flex;height:350px;position:relative}.y-axis{display:flex;flex-direction:column;justify-content:space-between;width:45px;text-align:right;font-size:12px;color:#666;font-weight:500;padding-right:8px}.chart-bars{flex:1;display:flex;justify-content:space-between;align-items:flex-end;gap:15px;border-bottom:2px solid #e0e0e0;border-left:2px solid #e0e0e0;position:relative;background-image:linear-gradient(to top,transparent 0%,#f5f5f5 0%,#f5f5f5 1px,transparent 1px,transparent 20%,#f5f5f5 20%,#f5f5f5 calc(20% + 1px),transparent calc(20% + 1px),transparent 40%,#f5f5f5 40%,#f5f5f5 calc(40% + 1px),transparent calc(40% + 1px),transparent 60%,#f5f5f5 60%,#f5f5f5 calc(60% + 1px),transparent calc(60% + 1px),transparent 80%,#f5f5f5 80%,#f5f5f5 calc(80% + 1px),transparent calc(80% + 1px))}.bar-column{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;height:100%;justify-content:flex-end}.bar-value-top{font-size:13px;font-weight:700;color:#333;position:absolute;top:-20px;left:50%;transform:translateX(-50%);white-space:nowrap;z-index:2}.bar-container{width:100%;height:100%;display:flex;align-items:flex-end;justify-content:center;position:relative}.bar{width:70%;max-width:80px;background:linear-gradient(180deg,#2B7EE5 0%,#2254AB 100%);border-radius:8px 8px 0 0;transition:all 0.3s ease;position:relative;cursor:pointer;box-shadow:0 2px 4px rgb(0 0 0 / .1)}.bar:hover{background:linear-gradient(180deg,#3A8EF5 0%,#2A64BB 100%);transform:translateY(-3px);box-shadow:0 4px 8px rgb(0 0 0 / .15)}.bar::after{content:attr(data-value) '%';position:absolute;bottom:100%;left:50%;transform:translateX(-50%) translateY(-8px);background:rgb(0 0 0 / .8);color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.3s ease}.bar:hover::after{opacity:1}.bar-label{font-size:12px;color:#333;text-align:center;margin-top:10px;font-weight:500;position:absolute;bottom:-25px;white-space:nowrap}@keyframes growBar{from{height:0}to{height:var(--bar-height)}}.bar{animation:growBar 0.8s ease-out forwards}@media (max-width:768px){.chart-grid{height:280px}.y-axis{width:35px;font-size:11px;padding-right:5px}.chart-bars{gap:8px}.bar-column{min-width:0}.bar{width:80%;max-width:50px}.bar-value-top{font-size:11px;top:-18px}.bar-label{font-size:10px;bottom:-22px}}@media (max-width:480px){.chart-grid{height:250px}.chart-bars{gap:3px}.bar{width:90%;max-width:40px;border-radius:6px 6px 0 0}.bar-value-top{font-size:10px;font-weight:600;top:-15px}.bar-label{font-size:9px}}