.chart-card{overflow:hidden}.chart-title{display:flex;justify-content:space-between}.chart-title h2,.chart-card h2{margin:0}.chart-title p{margin:3px 0;color:var(--muted)}.chart-ranges{display:flex;gap:6px;margin:14px 0}.chart-ranges button{flex:1;border:1px solid var(--line);background:var(--bg);color:var(--text);padding:8px;border-radius:10px}.chart-ranges button.active{background:var(--green);border-color:var(--green);color:#fff}.chart-summary{display:flex;gap:18px;flex-wrap:wrap;margin:10px 0;color:var(--muted);font-size:13px}.chart-summary span{display:flex;align-items:center;gap:6px}.chart-summary i{width:9px;height:9px;border-radius:50%}.chart-summary b{color:var(--text)}.chart-scroll{width:100%;overflow:hidden}.line-chart{display:block;width:100%;min-height:220px}.chart-grid line{stroke:var(--line);stroke-width:1}.chart-grid text{fill:var(--muted);font-size:10px}.line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.line.download{stroke:#2f965a}.line.upload{stroke:#4b78d1}.area.download{fill:#2f965a18;stroke:none}.bar-chart{height:210px;display:flex;align-items:flex-end;gap:8px;padding-top:28px}.bar-column{height:100%;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center}.bar-track{flex:1;width:min(44px,75%);background:var(--bg);border-radius:9px 9px 3px 3px;display:flex;align-items:flex-end;overflow:hidden}.bar-track i{display:block;width:100%;background:linear-gradient(#44ad6c,#217a46);border-radius:8px 8px 2px 2px}.bar-value{height:24px;font-size:10px;color:var(--muted);white-space:nowrap}.bar-column small{margin-top:6px;text-transform:capitalize}.account-bar{margin:17px 0}.account-bar>div{display:flex;justify-content:space-between}.account-bar>i{display:block;height:10px;background:var(--bg);border-radius:99px;overflow:hidden;margin:6px 0}.account-bar>i>em{display:block;height:100%;background:linear-gradient(90deg,#217a46,#51b878);border-radius:99px}.account-bar small{color:var(--muted)}.chart-empty{text-align:center;color:var(--muted);padding:70px 15px}.traffic-hero{background:linear-gradient(135deg,#173c59,#267d72)}@media(max-width:430px){.line-chart{width:680px}.chart-scroll{overflow-x:auto}.chart-summary{gap:10px}.bar-value{font-size:9px}}