.keys-toolbar-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.key-copy-cell{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.key-copy-cell button{white-space:nowrap}
#page-usage{max-width:1400px;margin:0 auto}
.usage-filter{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin:8px 0 12px}
.usage-filter label{margin:0;min-width:135px;font-size:12px;flex:1}
.usage-filter .usage-key-select{flex:1.5;min-width:180px}
.usage-filter input,.usage-filter select{background:#fff}
.usage-filter button{margin-bottom:1px}
.usage-shortcuts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.usage-shortcuts button{border:0;background:#eaf0f7;font-size:12px;padding:6px 11px}
.usage-shortcuts span{color:var(--muted);font-size:12px;margin-left:6px}
.usage-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:20px 0 24px}
.usage-metrics section{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;min-width:0}
.usage-metrics span{font-size:13px;color:#526070}
.usage-metrics strong{display:block;font-size:31px;letter-spacing:-.7px;font-weight:600;margin:12px 0;overflow-wrap:anywhere}
.usage-metrics small{color:#7b8793;font-size:12px;line-height:1.5}
.usage-chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.usage-panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;margin-bottom:22px;min-width:0}
.usage-panel h2{font-size:15px;font-weight:550}
.usage-panel table{min-width:550px}
.usage-chart svg{display:block;width:100%;height:auto}
.usage-chart rect{transition:fill .12s}
.usage-chart rect:hover{fill:#195bd7}
.chart-detail{font-size:11px;color:#728299;margin:8px 0 0;min-height:20px}
#archiveDialog{width:950px;max-height:88dvh;overflow:auto}
#archiveDialog .table-wrap{max-height:55dvh}
#archiveDialog table{min-width:580px}
.archive-select{margin:0;display:block}
.archive-select input{width:17px;height:17px;accent-color:var(--accent)}
#archiveDialog .actions{align-items:center;justify-content:space-between}
#archiveCount{font-size:13px;color:var(--muted)}
#exportDialog{max-height:90dvh;overflow:auto}
#exportDialog h2{margin:0}
#page-usage .primary{background:#26313c;border-color:#26313c}
@media(max-width:1150px){.usage-chart-grid{grid-template-columns:1fr}.usage-metrics section{padding:18px}.usage-metrics strong{font-size:26px}}
@media(max-width:640px){
 .keys-toolbar{align-items:flex-start;flex-direction:column;gap:12px}
 .keys-toolbar-actions{width:100%}
 .keys-toolbar-actions button{flex:1}
 .usage-metrics{grid-template-columns:1fr;gap:12px}
 .usage-metrics section{padding:20px}
 .usage-filter label{flex:1 1 100%;min-width:0}
 .usage-filter .usage-key-select{min-width:0;flex:1 1 100%}
 .usage-panel{padding:17px}
 .usage-metrics strong{font-size:30px}
 #archiveDialog,#exportDialog{max-width:calc(100vw - 20px);padding:20px}
 #archiveDialog .card-heading{align-items:flex-start}
 #exportDialog .form-row{flex-direction:column;gap:0}
}
body:has(#archiveDialog[open]),body:has(#exportDialog[open]){overflow:hidden}