/* ============ 密钥管理：KPI / 筛选标签 / 卡片 / 弹窗 ============ */
.kpi-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}
.kpi{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025);min-width:0}
.kpi-lbl{display:block;font-size:11.5px;color:var(--dim);margin-bottom:4px;letter-spacing:.02em}
.kpi b{font-size:19px;font-variant-numeric:tabular-nums;word-break:break-all}

.tabbar{display:flex;gap:6px;margin-bottom:14px;overflow-x:auto;scrollbar-width:none}
.tabbar::-webkit-scrollbar{display:none}
.tab{padding:7px 14px;border-radius:9px;border:1px solid var(--line);font-size:13px;color:var(--muted);white-space:nowrap;flex:none}
.tab:hover{color:var(--text);background:rgba(255,255,255,.04)}
.tab.on{background:rgba(124,92,255,.16);border-color:rgba(124,92,255,.4);color:#d3c6ff;font-weight:600}

.key-list{display:grid;gap:12px}
.key-card{
  border:1px solid var(--line);border-radius:14px;padding:16px;
  background:rgba(255,255,255,.025);min-width:0;display:grid;gap:12px;
}
.key-card.is-off{opacity:.68}
.key-card-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.key-id{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.key-name{font-weight:600;font-size:14.5px;overflow-wrap:anywhere}
.key-prefix{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--dim);background:rgba(255,255,255,.04);padding:3px 8px;border-radius:7px;border:1px solid var(--line)}
.key-note{margin:0;font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.key-meta{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px 12px}
.key-meta>div{min-width:0}
.key-meta span{display:block;font-size:11px;color:var(--dim);margin-bottom:2px}
.key-meta b{font-size:12.5px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;font-weight:600}
.meter{height:5px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.meter>i{display:block;height:100%;background:linear-gradient(90deg,#7c5cff,#5b7bff);border-radius:4px}
.meter.warn>i{background:linear-gradient(90deg,#ffb020,#ff6b6b)}
.key-ops{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.key-ops form{display:inline-flex}

/* 对话框 */
.dlg{border:1px solid var(--line);background:#11131c;color:var(--text);border-radius:16px;padding:0;max-width:min(460px,calc(100vw - 32px));width:100%}
.dlg::backdrop{background:rgba(0,0,0,.62);backdrop-filter:blur(2px)}
.dlg form{padding:20px;display:grid;gap:12px}
.dlg-t{margin:0 0 2px;font-size:16px;overflow-wrap:anywhere}
.dlg .field{display:grid;gap:6px;margin:0}
.dlg .field label{font-size:12.5px;color:var(--muted)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dlg-ops{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}

@media(max-width:900px){
  .kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .key-meta{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:640px){
  .key-card{padding:14px;gap:10px}
  .key-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dlg{max-width:calc(100vw - 24px)}
  .dlg form{padding:16px}
  .field-row{grid-template-columns:1fr}
  .key-ops .btn{flex:1 1 auto;justify-content:center}
}