.performance-note { color: var(--muted); margin-block: .5rem 1.25rem; line-height: 1.9; }
.performance-cards { display: grid; gap: 1.5rem; }
.performance-refresh-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-block: 0 1.5rem; }
.performance-refresh-controls p { color: var(--muted); }
[data-performance-countdown] { display: inline-block; min-width: 5rem; font-variant-numeric: tabular-nums; }
[data-performance-refresh]:disabled { opacity: .65; cursor: wait; }
.performance-add { padding: 1rem 1.5rem; margin-block: 0 1.5rem; overflow: visible; }
.performance-add summary { cursor: pointer; color: var(--accent-text); font-weight: 800; }
.performance-add form { display: grid; gap: 1rem; padding-block-start: .5rem; }
.performance-add .field-group { min-width: 0; }
.performance-add input { width: 100%; min-width: 0; }
.performance-add button { justify-self: start; }
.performance-add .errorlist { color: var(--danger); font-size: .85rem; margin-block-start: .5rem; }
.performance-card { position: relative; padding: clamp(1rem, 3vw, 1.75rem); }
.performance-card::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background-image: linear-gradient(-90deg, var(--accent-2), var(--accent-fill)); }
.performance-card.performance-card-manual { background: #fffaf0; border-color: #e8d9b5; }
.performance-card.performance-card-manual::before { background-image: linear-gradient(-90deg, #f59e0b, #b45309); }
.performance-manual-badge { background: #f5e9cb; color: #72511e; margin-inline-end: .4rem; }
.performance-remove { margin-block-start: 1rem; }
.performance-card-heading, .performance-footer { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.performance-card h2 { color: var(--ink); font-size: 1.2rem; font-weight: 900; overflow-wrap: anywhere; }
.performance-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-block: 1.5rem; }
.performance-values > div { border: 1px solid var(--line); border-radius: var(--radius); background-color: var(--surface-2); padding: 1.2rem .7rem; text-align: center; transition: border-color .25s, transform .25s var(--ease-out); }
.performance-values > div:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.performance-values > div:first-child { border-color: var(--accent-line); background-color: var(--accent-soft); }
.performance-values dt { color: var(--muted); font-size: .85rem; font-weight: 700; }
.performance-values dd { color: var(--ink); font-size: clamp(1.25rem, 2.5vw, 2rem); font-weight: 900; margin-block-start: .6rem; overflow-wrap: anywhere; }
.performance-values > div:first-child dd { color: var(--accent-soft-text); }
.performance-footer { border-top: 1px solid var(--line); padding-top: 1rem; color: var(--muted); font-size: .8rem; line-height: 1.9; }
.performance-pagination { display: flex; justify-content: center; align-items: center; gap: .8rem; margin-block: 1.5rem; flex-wrap: wrap; }
[data-performance][data-disconnected] .performance-card { border-color: #d97706; }
html[data-theme="dark"] .performance-card.performance-card-manual { background: #2b291f; border-color: #685a36; }
html[data-theme="dark"] .performance-manual-badge { background: #514326; color: #f4de9e; }
@media (max-width: 640px) { .performance-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }