.metrics-chart{background:#0b0b0b;border:1px solid #1a1a1a;border-radius:6px;max-width:100%;overflow:hidden;padding:6px 8px 4px;position:relative}.metrics-chart svg{cursor:crosshair;display:block;height:56px;overflow:visible;width:100%}.metrics-chart--bars svg{height:64px}.metrics-chart__point{transition:r .15s ease,fill .15s ease,opacity .15s ease}.metrics-chart__legend{align-items:center;color:#cfd4d8;display:flex;font-size:11px;gap:10px;margin-top:4px}.metrics-chart-tabs{align-items:center;display:flex;gap:8px;margin-bottom:6px}.metrics-chart-tabs__pill{background:#1a1a1a;border:1px solid #333;border-radius:999px;color:#ddd;cursor:pointer;font-size:11px;padding:2px 8px;transition:all .15s ease}.metrics-chart-tabs__pill:hover{background:#222;color:#7fd7ff}.metrics-chart-tabs__pill.is-active{background:#123142;border-color:#225a7a;box-shadow:0 0 0 1px #7ad7ff40;color:#8ad7ff}.metrics-panel-filters{align-items:center;display:flex;flex-grow:1;gap:12px;justify-content:space-between;padding:8px 10px}.metrics-panel-filters__title{font-weight:700;letter-spacing:.2px}.metrics-panel-filters__controls{align-items:center;display:flex;gap:8px}.metrics-panel-filters__controls label{align-items:center;display:inline-flex;font-size:12px;gap:6px}.metrics-panel-filters__controls select{background:#1c1c1c;border:1px solid #333;border-radius:4px;color:#ddd;cursor:pointer;font-size:12px;padding:2px 6px}.metrics-panel-filters__controls select option{background:#1c1c1c;color:#ddd}.metrics-panel-filters__controls select:hover{background:#222}.metrics-panel-filters__input{background:#1c1c1c;border:1px solid #333;border-radius:4px;color:#ddd;padding:2px 6px}.metrics-panel-filters__input--limit{width:72px}.metrics-panel-filters__close{align-items:center;background:#1c1c1c;border:1px solid #444;border-radius:50%;color:#ddd;cursor:pointer;display:flex;height:18px;justify-content:center;padding:0;transition:all .2s ease;width:18px}.metrics-panel-filters__close svg{display:block;flex-shrink:0}.metrics-panel-filters__close:hover{background:#f44;border-color:#f66;color:#fff}.metrics-panel-stats{align-items:center;display:flex;flex-grow:1;gap:12px;justify-content:space-between;padding:8px 10px}.metrics-panel-stats__info{align-items:center;display:flex;font-size:12px;gap:12px}.metrics-panel-stats__icon-btn{align-items:center;background:#1c1c1c;border:1px solid #444;border-radius:4px;color:#ddd;cursor:pointer;display:inline-flex;height:24px;justify-content:center;padding:0;transition:all .15s ease;width:24px}.metrics-panel-stats__icon-btn:hover{background:#222;border-color:#555;color:#7fd7ff}.metrics-panel-stats__icon-btn.is-active{background:#123142;border-color:#225a7a;box-shadow:0 0 0 1px #7ad7ff40;color:#8ad7ff}.metrics-panel-stats__actions{align-items:center;display:flex;gap:8px}.metrics-panel-stats__btn{background:#1c1c1c;border:1px solid #444;border-radius:4px;color:#ddd;cursor:pointer;font-size:12px;padding:2px 8px}.metrics-panel-stats__btn:hover{background:#222}.metrics-request-details{background:#0f0f0f;border-top:1px solid #1a1a1a;display:flex;flex-direction:column;gap:10px;grid-column:1/-1;padding:8px 10px 12px}.metrics-request-details__head{align-items:center;display:flex;gap:10px;justify-content:space-between}.metrics-request-details__title{font-size:13px;font-weight:700}.metrics-request-details__meta{color:#cfd4d8;display:flex;flex:1;flex-wrap:wrap;font-size:11px;gap:10px;justify-content:flex-end}.metrics-request-details__close{align-items:center;background:#1c1c1c;border:1px solid #444;border-radius:50%;color:#ddd;cursor:pointer;display:flex;font-size:10px;height:18px;justify-content:center;padding:0;transition:all .2s ease;width:18px}.metrics-request-details__close:hover{background:#f44;border-color:#f66;color:#fff}.metrics-request-details__grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}.metrics-request-details__block{background:#0b0b0b;border:1px solid #1a1a1a;border-radius:6px;display:flex;flex-direction:column;gap:6px;padding:8px}.metrics-request-details__label{color:#9ca3af;font-size:11px}.metrics-request-details__pre{background:#050505;border:1px solid #131313;border-radius:4px;max-height:250px;overflow:auto;overflow-wrap:anywhere;padding:6px;white-space:pre-wrap}.metrics-table{max-height:240px;overflow:hidden auto}.metrics-table__row,.metrics-table__thead{align-items:center;border-bottom:1px solid #2a2a2a;display:grid;gap:8px;grid-template-columns:96px 70px 1fr 70px 70px 90px minmax(100px,.6fr);padding:6px 10px}.metrics-table__thead{background:#141414;font-size:12px;font-weight:600;position:sticky;top:0}.metrics-table__row{cursor:pointer;font-size:12px;transition:background .15s ease}.metrics-table__row:hover{background:#ffffff0f}.metrics-table__row--slow{background:#ffd00014}.metrics-table__row--slow:hover{background:#ffd00024}.metrics-table__row--error{background:#ff3c3c14}.metrics-table__row--error:hover{background:#ff3c3c24}.metrics-table__row--active{background:#6ec8ff1f;outline:1px solid #6ad1ff}.metrics-table__row--active:hover{background:#6ec8ff29}.metrics-table__cell--url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.metrics-table__cell--num{text-align:right}.metrics-table__cell--error{color:#ff7a7a}.metrics-tooltip{background:#000000e6;border:1px solid #6ad1ff;border-radius:6px;box-shadow:0 4px 12px #000c;font-size:11px;opacity:0;padding:6px 8px;pointer-events:none;position:absolute;transform:translate(-50%);transition:opacity .15s ease;white-space:nowrap;z-index:1000}.metrics-tooltip.is-visible{animation:metrics-tooltip-in .15s ease forwards;opacity:1}@keyframes metrics-tooltip-in{0%{transform:translate(-50%) translateY(-4px)}to{transform:translate(-50%) translateY(0)}}.metrics-tooltip__label{color:#aaa;font-size:10px;margin-bottom:2px}.metrics-tooltip__value{color:#6ad1ff;font-size:12px;font-weight:700}.metrics-panel{background:#141414f0;border:1px solid #333;border-radius:8px;bottom:12px;box-shadow:0 8px 24px #00000059;color:#eaeaea;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;left:0;margin:0 auto;max-height:90vh;max-width:min(1300px,100vw - 40px);overflow:hidden;position:fixed;right:0;scrollbar-color:#444 #1a1a1a;scrollbar-width:thin;width:-moz-fit-content;width:fit-content;z-index:9999}.metrics-panel ::-webkit-scrollbar{height:8px;width:8px}.metrics-panel ::-webkit-scrollbar-track{background:#1a1a1a;border-radius:4px}.metrics-panel ::-webkit-scrollbar-thumb{background:#444;border-radius:4px;-webkit-transition:background .2s ease;transition:background .2s ease}.metrics-panel ::-webkit-scrollbar-thumb:hover{background:#555}.metrics-panel ::-webkit-scrollbar-thumb:active{background:#666}.metrics-panel ::-webkit-scrollbar-corner{background:#1a1a1a}.metrics-panel--charts{max-height:520px}.metrics-panel--details{max-height:800px}.metrics-panel--details .metrics-table{max-height:600px}.metrics-panel__header{background:#111;border-bottom:1px solid #2a2a2a;position:relative}.metrics-panel__header-row:not(:last-child){border-bottom:1px solid #1a1a1a}.metrics-panel__charts{background:#0f0f0f;border-top:1px solid #1a1a1a;max-width:100%;padding:8px 10px 4px;position:relative}.metrics-panel-slide-enter-active,.metrics-panel-slide-leave-active{transition:all .3s ease}.metrics-panel-slide-enter-from,.metrics-panel-slide-leave-to{opacity:0;transform:translateY(calc(100% + 12px))}.metrics-panel-chart-enter-active,.metrics-panel-chart-leave-active{transition:all .2s ease}.metrics-panel-chart-enter-from,.metrics-panel-chart-leave-to{opacity:0;transform:translateY(-4px)}