.usage-panel { margin-top:14px; }
.usage-heading { align-items:center; flex-wrap:wrap; gap:12px; }
.usage-toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:17px; }
.usage-legend { display:flex; flex-wrap:wrap; align-items:center; gap:7px 13px; font-size:11px; color:var(--muted); }
.usage-key { display:inline-flex; align-items:center; gap:5px; }
.usage-key i { width:7px; height:7px; border-radius:50%; background:#285fe3; }
.usage-key[data-status="finished"] i { background:#08765a; }
.usage-key[data-status="running"] i { background:#086c88; }
.usage-key[data-status="paused"] i { background:#91600b; }
.usage-table { table-layout:fixed; border-collapse:separate; border-spacing:0; }
.usage-table .usage-client { width:160px; min-width:160px!important; font-size:12px; overflow-wrap:anywhere; }
.usage-table tbody th.usage-client { vertical-align:middle; font-weight:600; border-bottom:1px solid var(--border); box-shadow:5px 0 7px -7px #10274680; }
.usage-table td { padding:10px 6px; vertical-align:top; height:78px; }
.usage-table thead th { text-align:center; padding:4px 6px 11px; vertical-align:bottom; }
.usage-table th.usage-client { text-align:left; }
.usage-week { min-width:800px; }
.usage-week thead th { text-transform:none; letter-spacing:0; }
.usage-day { width:100%; border:0; border-radius:8px; background:transparent; color:var(--muted); padding:8px 2px; font:inherit; }
.usage-day strong,.usage-day span,.usage-day small { display:block; }
.usage-day strong { font-size:11px; font-weight:600; }
.usage-day span { font-size:14px; font-weight:600; color:var(--text); margin-top:4px; }
.usage-day small { font-size:11px; margin-top:5px; font-weight:400; }
.usage-table [data-today="true"] .usage-day { color:var(--blue-600); background:#edf2ff; }
.usage-table [data-today="true"] .usage-day span { color:var(--blue-600); }
.usage-campaigns { display:grid; gap:7px; }
.usage-campaign { width:100%; text-align:left; border:1px solid transparent; border-radius:9px; background:#edf2ff; color:#2455bd; padding:10px 8px; font-size:11px; line-height:1.45; overflow-wrap:anywhere; }
.usage-campaign[data-status="finished"] { color:#08765a; background:#e9f5ef; }
.usage-campaign[data-status="running"] { color:#086c88; background:#e9f6fc; }
.usage-campaign[data-status="paused"] { color:#91600b; background:#fbf0df; }
.usage-campaign[aria-pressed="true"] { border-color:currentColor; box-shadow:0 0 0 1px currentColor; }
.usage-campaign strong { display:block; color:var(--text); font-weight:600; margin-bottom:4px; }
.usage-time { display:block; color:var(--text); margin-bottom:5px; font-variant-numeric:tabular-nums; }
.usage-status { display:inline-flex; align-items:center; gap:4px; font-weight:600; }
.usage-status::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0; }
.usage-none { display:block; text-align:center; color:#a6b1bf; padding:15px 4px; }
.usage-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; padding:13px 3px; border-top:1px solid var(--border); color:var(--muted); font-size:11px; }
.usage-detail { padding:14px 15px; background:var(--surface-soft); border:1px solid var(--border); border-radius:10px; }
.usage-detail-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 15px; margin-bottom:10px; }
.usage-detail h3 { font-size:13px; font-weight:600; margin:0; overflow-wrap:anywhere; }
.usage-detail-status { color:var(--blue-600); font-size:11px; font-weight:600; }
.usage-detail-status[data-status="finished"] { color:#08765a; }
.usage-detail-status[data-status="running"] { color:#086c88; }
.usage-detail-status[data-status="paused"] { color:#91600b; }
.usage-detail-row,.usage-detail-fields { display:flex; align-items:center; flex-wrap:wrap; gap:9px 20px; }
.usage-detail-row { justify-content:space-between; }
.usage-detail-fields span { color:var(--muted); font-size:11px; }
.usage-detail-fields strong { margin-left:5px; color:var(--text); font-weight:600; }
.usage-detail .btn { font-size:12px; padding:8px 10px; min-height:36px; }
@media(max-width:640px){
 .usage-panel .date-navigator { width:100%; justify-content:space-between; }
 .usage-panel .matrix-date { min-width:0; }
 .usage-panel .matrix-date strong { font-size:12px; }
 .usage-table .usage-client { width:130px; min-width:130px!important; }
 .usage-table { min-width:920px; }
 .usage-week { min-width:750px; }
 .usage-detail-fields { display:grid; gap:6px; }
}