.nav-admin-cluster{display:grid;gap:5px;margin-top:10px;padding-top:10px;border-top:1px solid var(--hairline)}
.nav-admin-cluster[hidden]{display:none!important}
.nav-section-label{display:flex;align-items:center;min-height:20px;padding:0 11px;color:var(--muted-2);font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.nav-section-label abbr{display:none;text-decoration:none}
.side-nav.closed .nav-section-label{justify-content:center;padding:0}
.side-nav.closed .nav-section-label span{display:none}
.side-nav.closed .nav-section-label abbr{display:block}

.performance-shell{display:grid;gap:18px;max-width:1500px;margin:0 auto}
.performance-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;padding:2px 2px 4px}
.performance-kicker,.performance-section-head>div>span{color:var(--accent);font-size:.65rem;font-weight:850;letter-spacing:.11em;text-transform:uppercase}
.performance-hero h2{margin:6px 0 7px;font-size:clamp(1.65rem,2.5vw,2.25rem);letter-spacing:-.04em}
.performance-hero p{max-width:730px;margin:0;color:var(--muted);line-height:1.55}
.performance-health{display:flex;align-items:center;gap:8px;min-height:38px;padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--muted);font-size:.76rem;font-weight:750;white-space:nowrap}
.performance-health i{width:9px;height:9px;border-radius:50%;background:var(--muted-2);box-shadow:0 0 0 4px color-mix(in srgb,var(--muted-2) 15%,transparent)}
.performance-health[data-status="normal"] i{background:var(--positive)}
.performance-health[data-status="warning"] i{background:var(--warning)}
.performance-health[data-status="critical"] i{background:var(--negative)}
.performance-health[data-status="stale"] i{background:var(--warning)}
.performance-message{padding:11px 13px;border:1px solid color-mix(in srgb,var(--negative) 36%,var(--border));border-radius:12px;background:color-mix(in srgb,var(--negative) 9%,var(--surface));color:var(--text);font-size:.82rem}
.performance-current,.performance-history{min-width:0;padding:18px;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm)}
.performance-section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:15px}
.performance-section-head h3{margin:4px 0 0;font-size:1.08rem}
.performance-freshness{display:flex;align-items:center;justify-content:flex-end;gap:12px;color:var(--muted);font-size:.73rem}
.performance-freshness-copy{display:grid;min-width:190px;gap:2px;text-align:right}
.performance-freshness-copy>span{color:var(--text-2);font-weight:700}
.performance-freshness-copy>small{color:var(--muted-2);font-size:.68rem}
.performance-updating{min-width:66px;color:var(--accent);font-size:.68rem;font-weight:750;opacity:0;transition:opacity 140ms ease}
.performance-updating[data-active="true"]{opacity:1}
.performance-refresh-control{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.68rem;font-weight:750}
.performance-refresh-control .app-select{width:78px;min-height:38px;padding:0 27px 0 10px}
.performance-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.performance-card{position:relative;display:grid;min-width:0;gap:7px;padding:15px;border:1px solid var(--hairline);border-radius:15px;background:var(--surface-2);overflow:hidden}
.performance-card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--muted-2)}
.performance-card[data-status="normal"]::before{background:var(--positive)}
.performance-card[data-status="warning"]::before{background:var(--warning)}
.performance-card[data-status="critical"]::before{background:var(--negative)}
.performance-card>span{color:var(--muted);font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.performance-card strong{overflow:hidden;font-size:1.7rem;letter-spacing:-.045em;text-overflow:ellipsis}
.performance-card small{min-height:2.5em;color:var(--muted-2);font-size:.72rem;line-height:1.35}
.performance-card-meter{height:5px;overflow:hidden;border-radius:999px;background:var(--border)}
.performance-card-meter i{display:block;height:100%;border-radius:inherit;background:var(--accent)}
.performance-history-head{align-items:flex-end}
.performance-metric-tabs{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none}
.performance-metric-tabs::-webkit-scrollbar{display:none}
.performance-metric-tabs .timeline-filter-btn{flex:0 0 auto;min-height:38px}
.performance-chart-summary{display:grid;grid-template-columns:repeat(3,minmax(0,150px));gap:8px;margin:0 0 12px}
.performance-stat{display:grid;gap:2px;padding:9px 11px;border:1px solid var(--hairline);border-radius:11px;background:var(--surface-2)}
.performance-stat span{color:var(--muted-2);font-size:.61rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.performance-stat strong{font-size:.95rem}
.performance-chart-wrap{position:relative;min-height:320px;overflow:hidden;border:1px solid var(--hairline);border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 4%,var(--surface-2)),var(--surface-2))}
.performance-chart{display:block;width:100%;height:auto;min-height:280px}
.performance-grid-line{stroke:var(--hairline);stroke-width:1}
.performance-axis-label{fill:var(--muted-2);font-size:11px}
.performance-line{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.performance-dot{fill:var(--surface);stroke:var(--accent);stroke-width:2;cursor:pointer}
.performance-dot:focus{outline:none;stroke:var(--text);stroke-width:3}
.performance-tooltip{position:absolute;z-index:3;max-width:220px;padding:7px 9px;border:1px solid var(--border-strong);border-radius:9px;background:var(--surface);box-shadow:var(--shadow-md);color:var(--text);font-size:.7rem;pointer-events:none}
.performance-tooltip strong,.performance-tooltip span{display:block}
.performance-tooltip span{margin-top:2px;color:var(--muted)}
.performance-chart-empty{position:absolute;inset:0;display:grid;place-items:center;padding:24px;color:var(--muted);font-size:.82rem;text-align:center}
.performance-chart-note{margin:10px 2px 0;color:var(--muted-2);font-size:.69rem}

@media(max-width:900px){
  .side-nav .nav-list{display:flex;align-items:center}
  .side-nav .nav-group{min-width:auto}
  .side-nav .nav-group:first-child{min-width:100%}
  .side-nav .nav-admin-cluster{display:flex;align-items:center;gap:8px;margin:0;padding:0 2px 0 10px;border:0;border-left:1px solid var(--border)}
  .side-nav .nav-admin-cluster[hidden]{display:none!important}
  .side-nav .nav-admin-cluster .nav-group{min-width:auto}
  .side-nav .nav-section-label{min-width:44px;height:32px;justify-content:center;padding:0 7px;border:1px solid var(--border);border-radius:999px;background:var(--surface-2);font-size:.56rem}
  .side-nav.closed .nav-section-label span{display:block}
  .side-nav.closed .nav-section-label abbr{display:none}
  .performance-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:640px){
  .performance-shell{gap:12px}
  .performance-hero{display:grid;gap:12px}
  .performance-hero h2{font-size:1.55rem}
  .performance-hero p{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;font-size:.8rem}
  .performance-health{width:max-content;max-width:100%}
  .performance-current,.performance-history{padding:13px;border-radius:15px}
  .performance-section-head{display:grid;align-items:flex-start}
  .performance-freshness{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;width:100%;text-align:left}
  .performance-freshness-copy{grid-column:1/-1;min-width:0;text-align:left}
  .performance-updating{grid-column:1}
  .performance-refresh-control{grid-column:2;grid-row:2}
  .performance-cards{grid-template-columns:1fr;gap:8px}
  .performance-card{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:12px}
  .performance-card>span,.performance-card small,.performance-card-meter{grid-column:1}
  .performance-card strong{grid-column:2;grid-row:1 / span 2;font-size:1.35rem}
  .performance-card small{min-height:0}
  .performance-history-head{display:grid}
  .performance-metric-tabs{width:100%}
  .performance-chart-summary{grid-template-columns:repeat(3,1fr)}
  .performance-stat{padding:8px}
  .performance-chart-wrap{min-height:250px}
  .performance-chart{min-width:0;min-height:250px}
}

@media(prefers-reduced-motion:reduce){
  .performance-line{transition:none}
}