#scene { position:fixed; inset:0; width:100%; height:100%; }
#panel-looks { top:16px; left:16px; width:292px; }
#panel-scopes { top:16px; right:16px; width:292px; }
#panel-color { bottom:78px; left:16px; width:320px; }
#panel-curve { bottom:78px; right:16px; width:292px; }
#panel-info { left:50%; right:auto; bottom:64px; transform:translateX(-50%); width:420px; }
.panel { touch-action:pan-y; }
.panel p + p { margin-top:8px; }
.panel .hint { margin-top:8px; }
.panel .hint.small, .panel .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.looks button { flex:1 1 calc(50% - 3px); padding:7px 6px; }
.panel .row input[type="range"] { flex:1; min-width:0; }
.panel .row b { font-variant-numeric:tabular-nums; font-size:11.5px; min-width:38px; text-align:right; font-family:'SF Mono',ui-monospace,monospace; }
.panel .small-lab { font-size:11px; opacity:.78; flex:0 0 104px; }
.slider-row { margin-top:9px; }
.toggles { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:12px; }
.toggles .check { min-height:24px; font-size:11px; }
.photo-row { display:flex; gap:6px; margin-top:10px; }
.photo-row .ghost { flex:1; }
#look-hint { min-height:4.5em; }
#btn-reset { margin-top:10px; }

/* Messgeräte, Kurve: eigene Flächen im Panel (theme-bewusst) */
.scope-wrap { position:relative; border-radius:10px; overflow:hidden; background:var(--vk-panel-surface); }
.scope-wrap canvas { display:block; width:100%; touch-action:none; }
#vscope { aspect-ratio:1 / 1; height:auto; }
#hist { height:104px; margin:0; }
#hist-wrap { margin-top:8px; }
#curve { aspect-ratio:1.35 / 1; height:auto; cursor:crosshair; }
#skin-mark, #face-mark { position:absolute; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; pointer-events:none; }
.legend { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:7px; font-size:10.5px; opacity:.75; }
.legend > span { display:inline-flex; align-items:center; gap:5px; }
.legend i { display:inline-block; }
.lg-skin { width:14px; height:2px; border-radius:1px; background:var(--cg-skin); }
.lg-face { width:9px; height:9px; border-radius:50%; background:var(--cg-face); }
.lg-before { width:9px; height:9px; border-radius:50%; }
body.theme-dark .lg-before { background:rgba(230,232,242,.35); }
body.theme-light .lg-before { background:rgba(30,41,59,.3); }
.curve-vals { display:flex; justify-content:space-between; font-size:10.5px; opacity:.62; margin:5px 2px 8px; font-variant-numeric:tabular-nums; }

/* Farbräder */
.wheels { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.wheel { display:flex; flex-direction:column; align-items:center; min-width:0; }
.wheel canvas { width:100%; aspect-ratio:1 / 1; height:auto; cursor:grab; touch-action:none; }
.wheel canvas:active { cursor:grabbing; }
.wheel .wl { font-size:11px; font-weight:700; margin-top:4px; }
.wheel .ws { font-size:9.5px; opacity:.6; margin-top:1px; text-align:center; line-height:1.2; }
.wheel input[type="range"] { width:100%; margin-top:6px; }
.wheel .wm-spacer { height:16px; margin-top:6px; }

/* Vorher/Nachher-Wischer */
#wipe { position:fixed; top:0; bottom:0; left:50%; width:30px; margin-left:-15px; z-index:5; cursor:ew-resize; touch-action:none; }
#wipe .wipe-line { position:absolute; top:0; bottom:0; left:14px; width:2px; border-radius:1px; background:rgba(255,255,255,.82); }
#wipe-knob { position:absolute; left:50%; top:50%; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
body.theme-dark #wipe-knob { background:rgba(10,13,26,.78); color:#e6e8f2; }
body.theme-light #wipe-knob { background:rgba(255,255,255,.9); color:#1e293b; }
#wipe-knob svg { width:18px; height:18px; }
#wipe.off, #wipe-tags.off { display:none; }
#wipe-tags { position:fixed; top:16px; left:50%; z-index:4; pointer-events:none; }
#wipe-tags span { position:absolute; top:0; padding:4px 9px; border-radius:7px; font:650 11px/1.2 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; white-space:nowrap; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
#tag-before { right:10px; }
#tag-after { left:10px; }
body.theme-dark #wipe-tags span { background:rgba(10,13,26,.72); color:#e6e8f2; }
body.theme-light #wipe-tags span { background:rgba(255,255,255,.88); color:#1e293b; }

@media(max-width:768px) {
  #panel-looks,#panel-scopes,#panel-color,#panel-curve,#panel-info { width:auto; max-height:56vh; }
  #vscope { max-width:240px; margin:0 auto; }
  #vscope-wrap { display:flex; justify-content:center; }
  #wipe-knob { top:42%; }
  #wipe-tags { top:12px; }
}
/* 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); }