.performance-monitor{position:fixed;top:20px;right:20px;background:rgba(0,0,0,.9);color:white;padding:15px;border-radius:8px;font-size:12px;font-family:monospace;z-index:10000;max-width:250px;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 12px rgba(0,0,0,.3)}.performance-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:8px}.performance-header h4{margin:0;font-size:14px;color:#00d4ff}.toggle-button{background:transparent;border:1px solid rgba(255,255,255,.3);color:white;border-radius:4px;width:24px;height:24px;cursor:pointer;font-size:16px;line-height:1}.toggle-button:hover{background:rgba(255,255,255,.1)}.performance-metrics{display:flex;flex-direction:column;gap:8px}.metric-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0}.metric-name{font-weight:700;color:#cccccc;width:50px}.metric-value{font-weight:700;width:70px;text-align:right}.metric-value.good{color:#00ff00}.metric-value.needs-improvement{color:#ffff00}.metric-value.poor{color:#ff6b6b}.metric-value.loading{color:#cccccc}.metric-status{font-size:10px;color:#888888;width:80px;text-align:right;text-transform:capitalize}.performance-summary{margin-top:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}.performance-summary small{color:#888888;line-height:1.4}@media (max-width:768px){.performance-monitor{position:relative;top:auto;right:auto;margin:20px;max-width:none}}