@layer components{.perf-monitor{background:var(--color-bg-card);border:1px solid var(--color-border-strong);width:360px;max-height:70vh;z-index:var(--z-overlay-top);color:var(--color-fg-primary);border-radius:8px;flex-direction:column;font-family:ui-monospace,JetBrains Mono,monospace;font-size:12px;display:flex;position:fixed;bottom:16px;right:16px;overflow:hidden;box-shadow:0 8px 24px #0000001f}.perf-monitor-header{background:var(--color-accent-base);color:var(--color-text-inverse);cursor:default;justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.perf-monitor-title{font-size:13px;font-weight:600}.perf-monitor-actions{gap:4px;display:flex}.perf-monitor-actions button{width:22px;height:22px;color:var(--color-text-inverse);cursor:pointer;background:#ffffff26;border:none;border-radius:4px;justify-content:center;align-items:center;padding:0;display:inline-flex}.perf-monitor-actions button:hover{background:#ffffff4d}.perf-monitor-body{flex:1;padding:10px 12px;overflow-y:auto}.perf-monitor.collapsed .perf-monitor-body{display:none}.perf-monitor.collapsed{opacity:.55;width:auto;transition:opacity var(--motion-duration-fast) var(--motion-easing-out)}.perf-monitor.collapsed:hover{opacity:1}.perf-monitor.collapsed .perf-monitor-title,.perf-monitor.collapsed #perf-monitor-close{display:none}.perf-monitor.collapsed .perf-monitor-header{background:var(--color-bg-card);padding:5px}.perf-monitor.collapsed .perf-monitor-actions button{color:var(--color-fg-secondary);background:0 0}.perf-monitor.collapsed .perf-monitor-actions button:hover{background:var(--color-bg-hover);color:var(--color-fg-primary)}@media (width<=767.98px){.perf-monitor.collapsed{bottom:64px;right:10px}}.perf-section{margin-bottom:12px}.perf-section:last-child{margin-bottom:0}.perf-section-title{color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px;margin:0 0 6px;font-size:11px;font-weight:600}.perf-vitals-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:6px;display:grid}.perf-vital-card{background:var(--color-bg-hover);border-left:3px solid var(--color-text-secondary);border-radius:4px;padding:6px 8px}.perf-vital-card.rating-good{border-left-color:var(--color-success-base)}.perf-vital-card.rating-needs-improvement{border-left-color:var(--color-warning-base)}.perf-vital-card.rating-poor{border-left-color:var(--color-danger-base)}.perf-vital-name{color:var(--color-text-secondary);font-size:10px;font-weight:600}.perf-vital-value{color:var(--color-fg-primary);font-size:14px;font-weight:700}.perf-summary{grid-template-columns:auto 1fr;gap:4px 12px;font-size:11px;display:grid}.perf-summary-row{display:contents}.perf-summary-label{font-weight:600}.perf-summary-values{color:var(--color-text-secondary)}.perf-waterfall{flex-direction:column;gap:2px;max-height:200px;display:flex;overflow-y:auto}.perf-waterfall-item{grid-template-columns:120px 1fr 60px;align-items:center;gap:6px;font-size:10px;display:grid}.perf-waterfall-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.perf-waterfall-bar-container{background:var(--color-bg-hover);border-radius:2px;height:8px;position:relative;overflow:hidden}.perf-waterfall-bar{background:var(--color-accent-base);border-radius:2px;height:100%;position:absolute;top:0}.perf-waterfall-duration{text-align:right;color:var(--color-text-secondary)}.perf-hint{color:var(--color-text-secondary);margin:0;font-size:10px;line-height:1.4}.perf-hint code{background:var(--color-bg-hover);border-radius:2px;padding:1px 4px;font-size:10px}.perf-actions{gap:6px;display:flex}.perf-btn{background:var(--color-bg-hover);border:1px solid var(--color-border-strong);color:var(--color-fg-primary);cursor:pointer;border-radius:4px;flex:1;padding:5px 8px;font-family:inherit;font-size:11px}.perf-btn:hover{background:var(--color-bg-hover-strong,#00000014)}.perf-btn-danger{color:var(--color-danger);border-color:var(--color-danger)}.perf-btn-danger:hover{background:color-mix(in srgb, var(--color-danger-base) 10%, transparent)}.perf-empty{color:var(--color-text-secondary);font-size:11px;font-style:italic}.nav-toggle{width:32px;height:32px;color:var(--color-text-secondary);cursor:pointer;margin-right:calc(var(--space-1) * -1);background:0 0;border:none;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.nav-toggle:hover{background:var(--color-bg-tertiary);color:var(--color-fg-primary)}@media (width<=767.98px){.nav-toggle{display:inline-flex}}.breadcrumb{align-items:center;gap:var(--space-1);padding:var(--space-2) 0;margin-bottom:var(--space-6);font-size:var(--font-size-secondary);border-bottom:1px solid var(--color-border-light);max-width:var(--content-width);margin-left:auto;margin-right:auto;display:flex}.bc-sep{color:var(--color-text-tertiary);opacity:.4;font-family:var(--font-family-heading)}.bc-ellipsis{color:var(--color-text-tertiary);font-family:var(--font-family-heading);display:none}.bc-link{color:var(--color-text-secondary)}.bc-link:hover{color:var(--color-accent-base)}.bc-current{color:var(--color-fg-primary);font-weight:500;font-family:var(--font-family-heading)}@media (width<=767.98px){.breadcrumb{z-index:var(--z-sticky);background:var(--color-bg-primary);padding:var(--space-2) var(--space-4);margin-bottom:0;position:sticky;top:0}.bc-ellipsis{display:inline}.bc-sep-hide-mobile,.bc-mobile-hide{display:none}}}