#scene { position: fixed; inset: 0; width: 100%; height: 100%; }
#tags { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }

#panel-fold { top: 16px; left: 16px; width: 272px; }
#panel-structure { top: 16px; right: 16px; width: 284px; }
#panel-funnel { bottom: 78px; right: 16px; width: 548px; }
#panel-sequence { bottom: 78px; left: 16px; width: 316px; }
#panel-info { left: 50%; right: auto; bottom: 64px; transform: translateX(-50%); width: 380px; }

.panel { touch-action: pan-y; }
.panel p + p { margin-top: 8px; }
.panel .small { font-size: 10px; opacity: .6; }
.panel button { min-width: 0; overflow-wrap: break-word; }
.panel .seg button { white-space: normal; line-height: 1.15; }
.panel .seg.wrap { flex-wrap: wrap; }
.panel .seg.wrap button { flex: 1 1 calc(50% - 3px); }
.panel .hint { margin-top: 7px; }
.panel .lab + .hint { margin-top: 0; }

.temp-head { justify-content: space-between; margin: 2px 0 6px; }
.temp-head .lab { margin: 0; }
.temp-head b { font-family: 'SF Mono', ui-monospace, monospace; font-size: 13px; font-variant-numeric: tabular-nums; }
.temp-row input { width: 100%; display: block; }
.temp-row input:focus, .temp-row input:focus-visible { outline: none; }
.temp-scale { position: relative; display: flex; justify-content: space-between; font-size: 9.5px; opacity: .5; margin-top: 4px; height: 13px; }
#tm-mark { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; font-weight: 700; opacity: 1; }
.panel .act { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; }
.panel .act svg { width: 14px; height: 14px; flex: none; }

#metrics { margin-top: 12px; padding: 8px 10px; border-radius: 10px; background: var(--vk-panel-surface); }
#metrics .stat { font-size: 11.5px; gap: 10px; }
#metrics .stat span { min-width: 0; }
#metrics .stat b { white-space: nowrap; }
.status { margin-top: 6px; font-size: 11.5px; font-weight: 650; display: flex; align-items: center; gap: 7px; }
.status i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: currentColor; }

.legend { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 8px; font-size: 10.5px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; opacity: .85; }
.legend i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.legend .bar { width: 100%; height: 8px; border-radius: 4px; }
.legend .ends { width: 100%; display: flex; justify-content: space-between; opacity: .6; margin-top: -2px; }
.toggles { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; }
.toggles .check { min-height: 26px; font-size: 11.5px; }

.chart { display: block; width: 100%; border-radius: 10px; touch-action: none; background: var(--vk-panel-surface); }
.funnel-wrap { position: relative; }
#funnel { height: 200px; }
.fn-grid { display: flex; gap: 14px; }
.fn-col { flex: 1 1 0; min-width: 0; }
.fn-col > .lab:first-child { margin-top: 2px; }
#funnel-ball { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; pointer-events: none; left: 50%; top: 50%; }
#qtrace { height: 54px; }
#runs { margin-top: 6px; }
#levinthal { font-size: 11px; line-height: 1.5; padding: 8px 10px; border-radius: 10px; background: var(--vk-panel-surface); }
#levinthal .lv-row + .lv-row { margin-top: 5px; }
#levinthal .lv-row b { display: block; font-family: 'SF Mono', ui-monospace, monospace; font-weight: 700; font-size: 12px; }
#levinthal .lv-row span { display: block; opacity: .66; font-size: 10.5px; line-height: 1.35; }
#levinthal p { margin-top: 5px; font-size: 10.5px; opacity: .66; }

#seq { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 8px; }
.aa { position: relative; width: 23px; height: 29px; border: 0; border-radius: 6px; padding: 0 0 5px; cursor: pointer; font: 700 12px/24px 'SF Mono', ui-monospace, monospace; color: inherit; display: flex; align-items: center; justify-content: center; }
.aa::after { content: ''; position: absolute; left: 3px; right: 3px; bottom: 3px; height: 3px; border-radius: 2px; background: var(--ss, transparent); opacity: var(--ssa, 0); transition: opacity .3s; }
.aa sup { position: absolute; top: -1px; right: 2px; font-size: 7px; font-weight: 600; opacity: .55; line-height: 1; }
.aa.hover, .aa.selected { outline: none; }
body.theme-dark .aa.selected { box-shadow: none; background: var(--vk-ui-active-bg) !important; color: var(--vk-ui-active-ink); }
body.theme-light .aa.selected { background: var(--vk-ui-active-bg) !important; color: var(--vk-ui-active-ink); }
.aa.hover { filter: brightness(1.15); }
#res-detail { min-height: 34px; }

.tag { position: absolute; padding: 3px 8px; border-radius: 7px; font: 650 11px/1.2 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; white-space: nowrap; transform: translate(-50%, -50%); transition: opacity .2s; }
body.theme-dark .tag { background: rgba(10, 13, 26, .78); color: #e6e8f2; }
body.theme-light .tag { background: rgba(255, 255, 255, .9); color: #1e293b; }
.tag.term { font-family: 'SF Mono', ui-monospace, monospace; font-weight: 700; padding: 2px 7px; }
.tag.sel { transform: translate(-50%, calc(-100% - 14px)); }

a { color: inherit; }

@media (max-width: 768px) {
  #panel-fold, #panel-structure, #panel-funnel, #panel-sequence, #panel-info { width: auto; max-height: 54vh; }
  .fn-grid { flex-direction: column; gap: 4px; }
  #funnel { height: 180px; }
  .tag { font-size: 10px; }
}

/* Scrollbalken wie heyprof global — für JEDEN Scroll-Container der App. */
@supports (-moz-appearance: none) {
  * { scrollbar-width: thin; }
  body.theme-light { scrollbar-color: rgba(0,0,0,0.15) transparent; }
  body.theme-dark  { scrollbar-color: rgba(255,255,255,0.15) transparent; }
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; margin: 10px 0; }
.panel::-webkit-scrollbar-track { margin: 15px 0; }
::-webkit-scrollbar-thumb { border-radius: 4px; }
::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
body.theme-light ::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.15); }
body.theme-light ::-webkit-scrollbar-thumb:hover { background-color: rgba(0,0,0,0.30); }
body.theme-dark  ::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,0.15); }
body.theme-dark  ::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,0.30); }
html::-webkit-scrollbar-thumb { background-color: rgba(127,127,160,0.35); }