.site-metrics { position: relative; z-index: 4; border-bottom: 1px solid #b7a3dd22; background: #222030; }
.metrics-inner { display: flex; align-items: center; gap: 28px; min-height: 43px; }
.metrics-status { display: flex; align-items: center; gap: 7px; color: #bdb1cf; font-size: 9px; font-weight: 650; letter-spacing: 1.4px; }
.metrics-status i { width: 5px; height: 5px; border-radius: 50%; background: #9c90ae; }
.site-metrics[data-state="live"] .metrics-status i { background: #a9eed1; box-shadow: 0 0 9px #a9eed14d; }
.metric { display: flex; align-items: baseline; gap: 7px; color: #bfb6d0; font-size: 11px; }
.metric strong { color: #eee6fb; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 8px; }
.metrics-info { margin-left: auto; color: #c0acd9; font-size: 11px; padding: 8px 0; }
.metrics-info:hover { color: white; }
@media (max-width: 600px) { .metrics-inner { gap: 12px; min-height: 45px; flex-wrap: wrap; padding-block: 8px; } .metrics-status { font-size: 8px; gap: 5px; } .metric { font-size: 10px; gap: 5px; } .metric strong { font-size: 12px; } .metrics-info { font-size: 10px; } }
@media (max-width: 420px) { .metrics-status { display: none; } .metrics-inner { justify-content: space-between; gap: 8px; } .metrics-info { margin-left: 0; } }