#scene { position:fixed; inset:0; width:100%; height:100%; cursor:grab; }
#scene.dragging { cursor:grabbing; }
#scene.hot { cursor:ew-resize; }
#scene.add { cursor:copy; }
#panel-plan { top:16px; left:16px; width:284px; }
#panel-compare { top:16px; right:16px; width:262px; }
#panel-model { bottom:78px; left:16px; width:284px; }
#panel-exp { bottom:78px; right:16px; width:300px; }
#panel-info { left:50%; right:auto; bottom:64px; transform:translateX(-50%); width:440px; }
.panel { touch-action:pan-y; }
.panel p + p { margin-top:8px; }
.panel .hint { margin-top:8px; }
.panel .hint.small { font-size:10.5px; opacity:.62; }
.panel button { min-width:0; overflow-wrap:break-word; }
.panel .seg { flex-wrap:wrap; }
.panel .seg button { white-space:normal; line-height:1.2; }
.panel .seg.seg-4 { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); }
.panel .seg.seg-4 button { padding-left:2px; padding-right:2px; font-size:11px; }
.panel .lab { margin-top:12px; }
.panel .panel-hd + .lab { margin-top:2px; }
.plan-lab { display:flex; align-items:center; gap:7px; }
.sw { display:inline-block; width:10px; height:10px; border-radius:3px; flex:0 0 10px; }
.sw-a { background:var(--lane-a); }
.sw-b { background:var(--lane-b); }
.panel .stat { font-size:11.5px; margin-top:9px; }
.panel .stat b { font-size:11.5px; }
.panel .row input[type="range"] { flex:1; min-width:0; }
.panel .row b { font-variant-numeric:tabular-nums; font-size:11.5px; min-width:52px; text-align:right; font-family:'SF Mono',ui-monospace,monospace; }
.btn-row { margin-top:9px; gap:6px !important; }
.btn-row .ghost { flex:1; padding:7px 4px; font-size:11px; line-height:1.15; }
.panel .check { margin-top:11px; }
.play-row { margin-top:9px; }
.play-row .hint { margin-top:0; }
.panel .icon-btn { width:34px; flex:0 0 34px; padding:6px 0; display:flex; align-items:center; justify-content:center; }
.panel .icon-btn svg { width:14px; height:14px; }
.cmp-head, .cmp-row { display:grid; grid-template-columns:1fr 52px 52px; align-items:center; gap:4px; font-size:11.5px; padding:3px 0; }
.cmp-head b { display:flex; align-items:center; justify-content:flex-end; gap:5px; font-size:10.5px; opacity:.7; }
.cmp-row span { opacity:.78; line-height:1.3; }
.cmp-row b { text-align:right; font-family:'SF Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; font-weight:700; }
#row-week b { font-size:13px; }
.verdict { min-height:34px; }
.formula { font-size:11.5px; line-height:1.6; padding:8px 10px; border-radius:9px; background:var(--vk-panel-surface); }
.formula i { font-family:Georgia,'Times New Roman',serif; }
/* Selbstversuch */
#exp-body .big { font-size:40px; font-weight:750; letter-spacing:.08em; text-align:center; padding:18px 0 14px; font-family:'SF Mono',ui-monospace,monospace; }
#exp-body .bar { height:4px; border-radius:99px; background:var(--vk-panel-surface); overflow:hidden; margin-top:6px; }
#exp-body .bar i { display:block; height:100%; background:var(--vk-ui-action); border-radius:99px; }
#exp-body .task { font-size:24px; font-weight:700; text-align:center; padding:12px 0 8px; font-family:'SF Mono',ui-monospace,monospace; }
#exp-body input[type="text"], #exp-body input[type="number"] { width:100%; border:none; border-radius:9px; padding:9px 11px; font:inherit; font-size:14px; background:var(--vk-panel-surface); color:inherit; outline:none; touch-action:manipulation; }
#exp-body .chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; min-height:26px; }
#exp-body .chip { font-size:11.5px; font-weight:700; padding:4px 8px; border-radius:7px; background:var(--vk-panel-surface); font-family:'SF Mono',ui-monospace,monospace; }
#exp-body .chip.hit { background:var(--vk-ui-active-bg); color:var(--vk-ui-active-ink); }
#exp-body .chip.miss { opacity:.45; }
#exp-body .act { margin-top:10px; }
#exp-body .ghost { margin-top:8px; width:100%; }
#exp-body .score { font-size:26px; font-weight:750; text-align:center; padding:8px 0 2px; }
#exp-body .row { margin-top:9px; }
#exp-body .row .ghost, #exp-body .row .act { margin-top:0; flex:1; }
a { color:inherit; }
@media(max-width:768px) {
  #panel-plan,#panel-compare,#panel-model,#panel-exp,#panel-info { width:auto; max-height:56vh; }
  #exp-body .big { font-size:34px; padding:12px 0 10px; }
}
/* Scrollbalken wie heyprof global — für JEDEN Scroll-Container. */
@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); }