.usage-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:14px;padding:20px 22px;border-left:4px solid #c8322b;background:#fff}.usage-head p{font-size:10px;color:#8a9298}.usage-head h2{margin-top:6px;font-size:21px}.usage-head>div:first-child>span{display:block;margin-top:6px;color:#6e777e;font-size:12px}.usage-head-actions{display:flex;align-items:flex-end;gap:10px}.usage-head label{margin:0;min-width:134px}.usage-head input{margin-top:7px}.usage-head-actions>button{min-height:38px;border:1px solid #cfd7da;background:#fff}.usage-head-actions>button:disabled{cursor:not-allowed;color:#a5adb2;background:#f2f4f5}.usage-connection{min-width:190px;padding:8px 12px;border:1px solid #dce6e2;background:#f4f8f6}.usage-connection strong,.usage-connection small{display:block}.usage-connection strong{display:flex;align-items:center;gap:7px;color:#28745b;font-size:11px}.usage-connection strong i{width:8px;height:8px;border-radius:50%;background:#36a26e;box-shadow:0 0 0 3px #dcefe6}.usage-connection small{margin-top:5px;color:#768087;font-size:9px}.usage-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-bottom:14px;border:1px solid #e0e3e7;background:#fff}.usage-kpis article{padding:18px 20px;border-right:1px solid #e0e3e7}.usage-kpis article:last-child{border-right:0}.usage-kpis span,.usage-kpis strong,.usage-kpis small{display:block}.usage-kpis span{font-size:11px;color:#768087}.usage-kpis strong{margin:9px 0 5px;font-size:30px;font-weight:600}.usage-kpis small{font-size:10px;color:#8a9298}.usage-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:14px;margin-bottom:14px}.usage-panel{border:1px solid #e0e3e7;background:#fff}.usage-panel-title{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #eceef0}.usage-panel-title strong{font-size:13px}.usage-panel-title span{color:#7b848b;font-size:10px}.usage-trend{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;min-height:230px;padding:22px 18px 16px}.usage-trend.empty{display:flex;align-items:center;justify-content:center}.usage-empty-state{text-align:center;color:#858e94;font-size:12px}.usage-empty-state strong,.usage-empty-state span{display:block}.usage-empty-state strong{color:#526169;font-size:13px}.usage-empty-state span{margin-top:7px}.trend-day{display:flex;flex-direction:column;justify-content:flex-end;min-width:0;height:180px}.trend-bars{height:145px;display:flex;align-items:flex-end;justify-content:center;gap:4px}.trend-bars i{display:block;width:8px;min-height:2px;background:#c8322b}.trend-bars i:nth-child(2){background:#2f715f}.trend-bars i:nth-child(3){background:#9ca5aa}.trend-day strong,.trend-day span{text-align:center}.trend-day strong{margin-top:8px;font-size:10px}.trend-day span{margin-top:3px;color:#8a9298;font-size:9px}.usage-features{padding:8px 16px}.feature-row{display:grid;grid-template-columns:minmax(90px,1fr) 2fr auto;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid #eceef0}.feature-row:last-child{border-bottom:0}.feature-row>span{font-size:11px}.feature-track{height:5px;background:#edf0f1}.feature-track i{display:block;height:100%;background:#c8322b}.feature-row strong{font-size:11px;font-variant-numeric:tabular-nums}.feature-empty{padding:52px 10px;text-align:center;color:#858e94;font-size:12px}.account-panel{margin-bottom:16px}.usage-table th,.usage-table td{white-space:nowrap}.usage-table td:first-child strong,.usage-table td:first-child span{display:block}.usage-table td:first-child span{margin-top:3px;color:#7b848b;font-size:10px}.usage-status{padding:4px 7px;font-size:10px}.usage-status.active{background:#e4f3ed;color:#28745b}.usage-status.inactive{background:#eef0f2;color:#6f787f}
@media(max-width:1050px){.usage-kpis{grid-template-columns:repeat(3,1fr)}.usage-kpis article:nth-child(3){border-right:0}.usage-kpis article:nth-child(-n+3){border-bottom:1px solid #e0e3e7}.usage-grid{grid-template-columns:1fr}}
@media(max-width:800px){.usage-head{align-items:flex-start;flex-direction:column}.usage-head-actions{align-items:stretch;flex-direction:column;width:100%}.usage-head label,.usage-head input,.usage-head-actions>button{width:100%}.usage-kpis{grid-template-columns:1fr 1fr}.usage-kpis article:nth-child(3){border-right:1px solid #e0e3e7}.usage-kpis article:nth-child(2n){border-right:0}.usage-kpis article:nth-child(-n+4){border-bottom:1px solid #e0e3e7}.usage-trend{gap:3px;padding-left:8px;padding-right:8px}.trend-bars{gap:2px}.trend-bars i{width:5px}.account-panel .table-wrap{overflow:auto}.usage-table{min-width:760px}}
