/* v4: stabile Mobile-Shell, pinchbarer Notensatz und Wiedergabe-Cursor */
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{position:fixed;inset:0}
.app-shell{
  position:fixed;inset:0;width:100%;height:auto;min-height:0;
  grid-template-rows:68px 58px minmax(0,1fr) auto;
  overflow:hidden;contain:layout paint;
}
.workspace{min-height:0;overflow:hidden;padding-bottom:0;display:grid;grid-template-rows:auto minmax(0,1fr)}
.score-viewport{
  min-width:0;min-height:0;overflow:auto;scrollbar-width:none;-ms-overflow-style:none;
  touch-action:none;overscroll-behavior:contain;overflow-anchor:none;
  -webkit-overflow-scrolling:touch;
}
.score-viewport::-webkit-scrollbar,.actionbar::-webkit-scrollbar,.drawer-panel::-webkit-scrollbar,.drum-pad::-webkit-scrollbar{display:none;width:0;height:0}
.score-stage{position:relative;margin:0 auto 24px;transform-origin:top left;will-change:width,height}
.score{position:absolute;left:0;top:0;margin:0;background:var(--paper);transform-origin:top left;will-change:transform}
.score-system{width:100%;max-width:100%}
.bottom-console{
  position:relative;left:auto;right:auto;bottom:auto;z-index:28;width:100%;transform:none;
  padding:10px max(12px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  border-radius:0;box-shadow:0 -5px 18px rgba(13,20,34,.18);
}
.toast{bottom:calc(174px + env(safe-area-inset-bottom))}
.playhead{
  position:fixed;z-index:27;width:2px;min-height:20px;border-radius:2px;
  background:#64cfff;box-shadow:0 0 0 1px rgba(255,255,255,.72),0 0 5px rgba(100,207,255,.42);
  pointer-events:none;transform:translateX(-1px);will-change:left,top,height;
}
.playhead span{display:none}
.playback-badge{
  position:sticky;left:100%;top:8px;z-index:26;float:right;margin:8px 8px 0 0;
  width:max-content;max-width:calc(100% - 16px);padding:6px 9px;border-radius:999px;
  background:rgba(16,24,39,.88);color:#fff;font-size:11px;font-weight:850;
  box-shadow:0 3px 12px rgba(0,0,0,.22);pointer-events:none;backdrop-filter:blur(6px);
}

@media(max-width:900px){
  :root{--console-height:166px}
  .app-shell{grid-template-rows:58px 50px minmax(0,1fr) auto}
  .topbar{gap:6px;padding:0 8px}
  .icon-button{width:46px;height:46px;border-radius:12px}
  .brand-block strong{font-size:17px}.brand-block span{font-size:10px}
  .actionbar{padding:4px 7px;gap:5px}
  .tool,.signature-control{height:40px;min-width:42px;border-radius:10px;padding:0 10px;font-size:12px}
  .score-summary{padding:7px 10px 6px;min-height:46px}.score-summary h1{font-size:17px}.score-summary p{font-size:11px;margin-top:1px}
  .bottom-console{padding-top:7px;padding-bottom:calc(7px + env(safe-area-inset-bottom))}
  .console-inner{gap:10px}
  .input-panel-title{margin-bottom:4px;font-size:10px}
  .number-pad{gap:5px}.pad-key,.drum-key{height:45px;border-radius:10px}
  .dpad{grid-template:44px 44px 44px/48px 48px 48px;gap:4px}.dpad-button{border-radius:10px;font-size:22px}
  .toast{bottom:calc(158px + env(safe-area-inset-bottom))}
}

@media(max-width:650px){
  :root{--tap:42px;--console-height:154px}
  .app-shell{grid-template-rows:52px 45px minmax(0,1fr) auto}
  .topbar{padding:0 5px;gap:2px}.icon-button{width:42px;height:42px;font-size:21px}
  .brand-block strong{font-size:15px}.brand-block span{display:none}.topbar #stopButton{display:grid}
  .actionbar{padding:3px 5px;gap:4px}.tool,.signature-control{height:36px;min-width:38px;padding:0 8px;font-size:11px}
  .signature-control>span{display:none}.signature-control select{height:28px;min-width:56px;padding:0 5px}
  .score-summary{padding:5px 8px 4px;min-height:40px}.score-summary h1{font-size:15px}.score-summary p{font-size:10px}
  .score-viewport{padding:2px 4px 10px}
  .score{padding:10px 12px 18px;border:0;box-shadow:0 7px 22px rgba(20,33,61,.13)}
  .bottom-console{padding:6px 7px calc(6px + env(safe-area-inset-bottom))}
  .console-inner{grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:end}
  .input-panel-title{font-size:9px;margin-bottom:3px}
  .number-pad{grid-template-columns:repeat(4,minmax(35px,1fr));gap:4px}
  .pad-key{height:40px;border-radius:9px;font-size:16px}.pad-key.delete{font-size:12px}
  .drum-pad{grid-template-columns:repeat(3,minmax(54px,1fr));gap:4px;max-height:128px;overflow:auto;scrollbar-width:none}
  .drum-key{height:39px;border-radius:9px;font-size:9px}.drum-key strong{font-size:12px}
  .dpad{grid-template:40px 40px 40px/43px 43px 43px;gap:3px}.dpad-button{font-size:20px;border-radius:9px}.dpad-button.center{font-size:22px}
  .toast{bottom:calc(145px + env(safe-area-inset-bottom));font-size:12px}
  .playback-badge{top:4px;margin:4px 4px 0 0;font-size:10px;padding:5px 8px}
}

@media(min-width:1200px){
  .bottom-console{position:relative;left:auto;right:auto;bottom:auto;width:100%;transform:none;border-radius:0;padding:10px 15px}
  .workspace{padding-bottom:0}
}
.playback-badge{position:fixed;float:none;left:auto;right:auto;top:auto;margin:0}


/* v5: 32tel, Tuplets, exakt zwei Takte pro System und Drum-TAB */
.tool.tuplet{min-width:52px;font-variant-numeric:tabular-nums}
.tuplet-bracket{fill:none;stroke:#263246;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.tuplet-number{font:800 10px/1 system-ui,sans-serif;text-anchor:middle;fill:#263246;paint-order:stroke;stroke:#fff;stroke-width:3px}
.score-system{justify-content:flex-start}
.drum-midi-label{font:800 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;text-anchor:end;fill:#4a5870}
.drum-midi-note{font-size:9px}
.drum-tab-label{font-size:12px;letter-spacing:.02em}
.drum-tab-line{stroke:#5c687a;stroke-width:.8}
.drum-tab-bg{fill:#fff;stroke:none}
.pad-key.confirm{background:#bdf5e9;color:#006d63}
@media(max-width:650px){
  .tool.tuplet{min-width:44px;padding:0 7px}
  .drum-pad{display:grid!important;grid-template-columns:repeat(6,minmax(36px,1fr));gap:3px;max-height:none;overflow:hidden}
  .drum-key{height:36px;font-size:7px;padding:3px}.drum-key strong{font-size:11px}
  .number-pad:has(+ .drum-pad:not([hidden])){grid-template-columns:repeat(6,minmax(34px,1fr))}
}

/* v6: zwei nahtlose Takte, ereignisbasierte Auswahl und saubere Pausen */
.score-system{
  gap:0!important;
  column-gap:0!important;
  overflow:visible;
}
.measure-card{
  margin:0!important;
  border-spacing:0;
}
.measure-card + .measure-card{margin-left:0!important}
.cell-hit.placeholder-cell:hover{
  fill:rgba(0,168,150,.035);
  stroke:rgba(0,168,150,.22);
}
.cell-hit.placeholder-cell.selected:not(.primary){
  fill:transparent;
  stroke:transparent;
}
.cell-hit.placeholder-cell.primary{
  fill:rgba(255,183,3,.08);
  stroke:var(--selection-strong);
  stroke-width:1.6;
  stroke-dasharray:3 2;
}
.rest-token{pointer-events:none}
.rest-halo{fill:transparent;stroke:transparent;stroke-width:0}
.rest-glyph{
  font-family:"Bravura","Noto Music","Segoe UI Symbol",serif;
  font-size:27px;
  fill:#263246;
  text-anchor:middle;
  dominant-baseline:alphabetic;
}
.cell-hit.selected + .rest-token .rest-halo{fill:rgba(0,168,150,.12);stroke:var(--teal);stroke-width:2}
.cell-hit.primary + .rest-token .rest-halo{fill:rgba(255,183,3,.16);stroke:var(--selection-strong);stroke-width:2.7}


/* v7: ereignisreine Auswahl, lesbare 32tel und vorgerendertes Audio */
.cell-hit.placeholder-cell{display:none!important;pointer-events:none!important}
.cell-hit.event-cell{cursor:pointer;pointer-events:all}
.note-head{stroke-width:1.45}
.note-stem,.note-flag{stroke-width:1.45}
.beam-line{stroke-width:3.15;stroke-linecap:butt}
.beam-stub{stroke:#263246;stroke-width:3.15;stroke-linecap:butt}
.note-token,.rest-token{pointer-events:visiblePainted;cursor:pointer}
.notation-hit,.notation-hit[data-has-event="1"]{pointer-events:none!important}
.measure-card svg{overflow:visible}
@media(max-width:650px){
  .note-label{font-size:12px}
  .effect-label{font-size:7px}
}

/* v8: rhythmussicherer GP-Import und vertikaler Saitencursor */
.lane-cursor-marker{
  fill:rgba(255,183,3,.14);
  stroke:var(--selection-strong);
  stroke-width:2;
  stroke-dasharray:4 3;
  vector-effect:non-scaling-stroke;
  pointer-events:none;
}
.lane-cursor-caret{fill:var(--selection-strong);pointer-events:none}


/* v9: kollisionsfreier 32tel-Notensatz nach Guitar-Pro-Prinzipien */
.note-head{stroke-width:1.3}
.note-stem,.note-flag{stroke-width:1.25}
.beam-line,.beam-stub{stroke-width:2.55;stroke-linecap:butt}
.effect-run-label,.technique-span-label{
  font:800 8.5px/1 ui-sans-serif,system-ui,sans-serif;
  fill:#526176;
  paint-order:stroke;
  stroke:#fff;
  stroke-width:2.8px;
  stroke-linejoin:round;
}
.effect-run-label{text-anchor:middle}
.technique-span-label{text-anchor:start;font-style:italic}
.technique-span-line{
  stroke:#66758a;
  stroke-width:1.05;
  stroke-dasharray:4 2;
  fill:none;
}
.technique-span-hook{stroke:#66758a;stroke-width:1.05}
.measure-card[data-density="dense"] .note-label{font-weight:900}
.measure-card[data-density="dense"] .effect-run-label,
.measure-card[data-density="dense"] .technique-span-label{font-size:8px}
@media(max-width:650px){
  .beam-line,.beam-stub{stroke-width:2.35}
  .effect-run-label,.technique-span-label{font-size:8px}
}


/* v10: festes sechsliniges Drum-TAB und flüssige kinetische Touch-Navigation */
.score-viewport{scroll-snap-type:none;scroll-padding:0;will-change:scroll-position}
.drum-midi-note{font-size:10px;font-weight:900;paint-order:stroke;stroke:#fff;stroke-width:2.6px;stroke-linejoin:round}
.drum-tab-line{stroke:#566273;stroke-width:.9}
@media(max-width:650px){.drum-midi-note{font-size:9.4px;stroke-width:2.3px}}

/* v11: natives App-Scrolling und Wiedergabestart an der Auswahl */
.score-viewport{
  touch-action:pan-x pan-y!important;
  overscroll-behavior:contain;
  scroll-behavior:auto;
  will-change:auto;
  -webkit-overflow-scrolling:touch;
}


.gp5-report{max-height:min(70vh,620px);overflow:auto}.gp5-status{display:flex;align-items:center;gap:10px;margin:4px 0 14px;padding:12px;border-radius:13px;font-weight:850}.gp5-status.ok{background:#e8f8f4;color:#087566;border:1px solid #a9ded4}.gp5-status.error{background:#fff0ee;color:#a63629;border:1px solid #efb8b0}.gp5-report-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}.gp5-report-grid div{padding:11px;border:1px solid var(--line);border-radius:12px;background:#f8fafc}.gp5-report-grid strong{display:block;font-size:18px}.gp5-report-grid small{color:var(--muted)}.gp5-mismatch{max-height:220px;overflow:auto;margin:12px 0;padding:10px;border-radius:10px;background:#111827;color:#e5e7eb;font:11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap}.drawer-action[disabled]{opacity:.55;pointer-events:none}@media(max-width:480px){.gp5-report-grid{grid-template-columns:1fr 1fr}.gp5-report{padding:16px}}

/* v15: TuxGuitar 1:1 Layout-Modus */
.score-viewport{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  touch-action:pan-y !important;
  overscroll-behavior-y:contain;
  overscroll-behavior-x:none;
}
.score-stage{
  width:100% !important;
  min-width:0 !important;
  margin:0 auto 16px !important;
}
.score{
  position:relative !important;
  left:0 !important;
  top:0 !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  transform:none !important;
}
.score-system{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-height:0 !important;
  margin:0 0 8px 0 !important;
  padding:0 !important;
  gap:0 !important;
  overflow:visible !important;
}
.measure-card{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  flex:0 0 auto !important;
  margin:0 !important;
}
.measure-card .measure-scroll{overflow:visible !important}
.measure-card svg{display:block; width:100%; height:auto; overflow:visible}
.playhead{width:2px !important; background:#70cfff !important; box-shadow:none !important}
.playhead span{display:none !important}
.playback-badge{display:none !important}
.effect-run-label{font-size:8px !important}
@media(max-width:650px){
  .score-viewport{padding:2px 4px 10px !important}
  .score{padding:8px 10px 16px !important; box-shadow:none !important; border:0 !important}
  .measure-number{left:2px !important}
}


/* v16: kompromisslos enger TuxGuitar-Mobilmodus */
.score-viewport{overflow-x:hidden !important; overflow-y:auto !important; padding:0 0 6px 0 !important}
.workspace{padding-bottom:0 !important}
.score-stage{margin:0 !important; width:100% !important; min-width:0 !important}
.score{padding:0 6px 4px 6px !important; margin:0 !important; width:100% !important; max-width:100% !important; box-shadow:none !important; border:0 !important}
.score-system{margin:0 0 2px 0 !important}
.measure-card{margin:0 !important; scroll-margin-top:2px; padding:0 !important}
.measure-number{left:1px !important; top:-1px !important}
.measure-scroll{margin-left:0 !important; padding-left:0 !important; padding-right:0 !important}
@media(max-width:650px){
  .score{padding:0 4px 4px 4px !important}
  .score-summary{padding:3px 6px 2px !important; min-height:30px !important}
  .score-summary h1{font-size:13px !important}
  .score-summary p{font-size:9px !important}
  .measure-number{font-size:10px !important}
}


/* v17: kompromisslos näher an TuxGuitar */
:root{
  --teal:#6f7c8b;
  --teal-dark:#5e6a79;
  --selection:#d7bf80;
  --selection-strong:#b67a20;
  --line:#d7dde5;
}
.topbar{
  min-height:56px !important;
  padding:0 6px !important;
  gap:3px !important;
  box-shadow:none !important;
}
.icon-button{width:40px !important;height:40px !important;border-radius:10px !important;font-size:20px !important}
.brand-block strong{font-size:14px !important}
.brand-block span{display:none !important}
.actionbar{padding:4px 6px !important; gap:5px !important; border-bottom:1px solid #d9e0e8 !important}
.tool{height:38px !important; min-width:42px !important; padding:0 11px !important; border-radius:11px !important; box-shadow:none !important}
.signature-control{height:38px !important; padding:0 6px 0 9px !important; border-radius:11px !important}
.signature-control select{height:27px !important; min-width:54px !important}
.workspace{grid-template-rows:auto 1fr !important}
.score-summary{padding:2px 6px 1px !important; min-height:28px !important; gap:8px !important}
.score-summary h1{font-size:12px !important; letter-spacing:-.02em !important}
.score-summary p{font-size:9px !important; margin-top:0 !important}
.selection-summary{display:none !important}
.score-viewport{
  background:#eceff3 !important;
  padding:0 6px 8px !important;
  overflow-x:hidden !important;
}
.score{
  padding:0 8px 4px 8px !important;
  width:100% !important;
  max-width:100% !important;
  box-shadow:none !important;
  border:0 !important;
  margin:0 auto 8px !important;
}
.score-system{margin:0 0 1px 0 !important; min-height:0 !important}
.measure-card{margin:0 !important; padding:0 !important; contain:none !important; content-visibility:visible !important}
.measure-card.active-measure::before{display:none !important}
.measure-number{left:0 !important; top:0 !important; font-size:10px !important; color:#b64b45 !important}
.measure-scroll{margin:0 !important; padding:0 !important}
.tab-line,.staff-line{stroke:#6f7885 !important; stroke-width:.72 !important}
.bar-line{stroke:#2e3642 !important; stroke-width:1.45 !important}
.note-head{stroke:#263142 !important; stroke-width:1.08 !important}
.note-head.filled{fill:#263142 !important}
.note-stem,.note-flag{stroke:#263142 !important; stroke-width:1.02 !important}
.beam-line,.beam-stub{stroke:#263142 !important; stroke-width:2.15 !important; stroke-linecap:butt !important}
.note-dot,.ledger-line,.accidental{fill:#263142 !important; stroke:#263142 !important}
.ledger-line{stroke-width:.95 !important}
.clef{font-size:43px !important; fill:#1e2836 !important}
.percussion-clef{font-size:32px !important; fill:#1e2836 !important}
.tab-label{font-size:12px !important; font-weight:800 !important; fill:#586779 !important}
.tempo-label{font-size:9px !important; fill:#263142 !important}
.time-signature{font-size:17px !important; fill:#1e2836 !important}
.note-label{font-size:10.8px !important; font-weight:800 !important; fill:#162031 !important}
.effect-label,.effect-run-label,.technique-span-label{font-size:6.4px !important; fill:#6b7787 !important}
.technique-span-line,.technique-span-hook{stroke:#6b7787 !important; stroke-width:.95 !important}
.cell-hit:hover{fill:rgba(122,136,154,.05) !important; stroke:rgba(103,119,136,.28) !important}
.cell-hit.selected{fill:rgba(111,124,139,.08) !important; stroke:rgba(103,116,131,.52) !important; stroke-width:1.6 !important}
.cell-hit.primary{fill:rgba(190,143,55,.12) !important; stroke:#b67a20 !important; stroke-width:2 !important}
.cell-hit.selected + .note-token .note-halo{stroke:#728091 !important; stroke-width:3.2 !important}
.cell-hit.primary + .note-token .note-halo{stroke:#b67a20 !important; stroke-width:4.4 !important}
.cell-hit.selected + .note-token .tab-note-bg{fill:#eef2f6 !important}
.cell-hit.primary + .note-token .tab-note-bg{fill:#fbf4e3 !important}
.lane-cursor-marker{fill:rgba(190,143,55,.08) !important; stroke:#b67a20 !important; stroke-width:1.5 !important}
.lane-cursor-caret{fill:#b67a20 !important}
.selection-marquee{border:1px solid #728091 !important; background:rgba(111,124,139,.08) !important; box-shadow:none !important}
.bottom-console{padding:8px 8px calc(8px + env(safe-area-inset-bottom)) 8px !important; box-shadow:0 -4px 14px rgba(13,20,34,.16) !important}
.console-inner{gap:8px !important}
.input-panel-title{font-size:10px !important; margin-bottom:5px !important}
.pad-key,.drum-key{height:52px !important; border-radius:12px !important; font-size:18px !important}
.dpad{grid-template:48px 48px 48px/52px 52px 52px !important; gap:5px !important}
.dpad-button{border-radius:12px !important; font-size:23px !important}
.dpad-button.center{font-size:24px !important; background:#2f9f97 !important}
@media(max-width:650px){
  :root{--tap:42px;--console-height:238px}
  .app-shell{grid-template-rows:56px 48px 1fr !important}
  .score-viewport{padding:0 4px 6px !important}
  .score{padding:0 6px 4px 6px !important}
  .score-summary{padding:2px 5px 1px !important; min-height:26px !important}
  .score-summary h1{font-size:11px !important}
  .score-summary p{font-size:8.5px !important}
  .tool{height:36px !important; min-width:40px !important; padding:0 10px !important}
  .signature-control{height:36px !important}
  .pad-key{height:48px !important}
}


/* v18: Notenblatt/TAB-Renderer komplett neu – ruhige TuxGuitar-Geometrie */
.score-viewport{
  padding:0 4px 8px !important;
  background:#e9edf1 !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  touch-action:pan-y !important;
}
.score{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 4px 5px !important;
  border:0 !important;
  box-shadow:none !important;
  background:#fff !important;
}
.score-system{
  width:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
}
.measure-card{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  contain:none !important;
  content-visibility:visible !important;
  background:#fff !important;
}
.measure-card svg{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  overflow:hidden !important;
  shape-rendering:geometricPrecision;
  text-rendering:geometricPrecision;
}
.measure-scroll{width:100% !important;overflow:hidden !important;margin:0 !important;padding:0 !important}
.measure-card.active-measure::before{display:none !important}
.measure-number{
  left:2px !important;
  top:1px !important;
  color:#a54b47 !important;
  font-size:9px !important;
  font-weight:700 !important;
  line-height:1 !important;
}
.tg-paper{fill:#fff}
.tg-staff-line,.tg-tab-line{
  stroke:#59616b;
  stroke-width:.68;
  vector-effect:non-scaling-stroke;
  shape-rendering:crispEdges;
}
.tg-bar-line{
  stroke:#252d37;
  stroke-width:1.15;
  vector-effect:non-scaling-stroke;
  shape-rendering:crispEdges;
}
.tg-note-head{fill:#252e3b;stroke:#252e3b;stroke-width:.75;vector-effect:non-scaling-stroke}
.tg-note-head.open{fill:#fff;stroke-width:1.05}
.tg-note-stem,.tg-note-flag,.tg-beam,.tg-ledger{
  fill:none;
  stroke:#252e3b;
  vector-effect:non-scaling-stroke;
}
.tg-note-stem{stroke-width:1.05;stroke-linecap:butt}
.tg-note-flag{stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.tg-beam{stroke-width:2.1;stroke-linecap:butt}
.tg-ledger{stroke-width:.82;shape-rendering:crispEdges}
.tg-accidental{font:13px Georgia,"Times New Roman",serif;fill:#252e3b;text-anchor:middle}
.tg-clef{font-family:"Bravura","Noto Music","Segoe UI Symbol",serif;font-size:39px;fill:#202936}
.tg-time{font:700 15px Georgia,"Times New Roman",serif;fill:#202936;text-anchor:middle}
.tg-tempo{font:600 8.5px Arial,sans-serif;fill:#404a58}
.tg-tab-title{font:800 10.5px Arial,sans-serif;letter-spacing:.02em;fill:#4b5664}
.tg-tab-number{
  font:700 9.5px Arial,sans-serif;
  fill:#202936;
  text-anchor:middle;
  dominant-baseline:middle;
}
.tg-tab-mask{fill:#fff}
.tg-rest{font-family:"Bravura","Noto Music","Segoe UI Symbol",serif;font-size:21px;fill:#252e3b;text-anchor:middle}
.tg-tech-label,.tg-connection-label,.tg-bend-label{
  font:italic 600 6.8px Arial,sans-serif;
  fill:#586575;
}
.tg-tech-line,.tg-connection,.tg-bend,.tg-vibrato{
  fill:none;
  stroke:#596575;
  vector-effect:non-scaling-stroke;
}
.tg-tech-line{stroke-width:.75;stroke-dasharray:2.4 1.8}
.tg-tech-hook{stroke:#596575;stroke-width:.75;vector-effect:non-scaling-stroke}
.tg-connection{stroke-width:1.02;stroke-linecap:round}
.tg-bend{stroke-width:.85;stroke-linecap:round;stroke-linejoin:round}
.tg-vibrato{stroke-width:.82;stroke-linecap:round}
.tg-articulation{fill:#252e3b;stroke:#252e3b;stroke-width:.8;vector-effect:non-scaling-stroke}
.tg-harmonic{fill:#fff;stroke:#252e3b;stroke-width:1;vector-effect:non-scaling-stroke}
.tg-dead{fill:none;stroke:#252e3b;stroke-width:1.15;stroke-linecap:round;vector-effect:non-scaling-stroke}
.tg-ghost-paren{fill:none;stroke:#657080;stroke-width:.75;vector-effect:non-scaling-stroke}
.tg-tuplet{fill:none;stroke:#596575;stroke-width:.72;vector-effect:non-scaling-stroke}
.tg-tuplet-number{font:600 7px Arial,sans-serif;fill:#596575;text-anchor:middle}
.cell-hit.event-cell{fill:transparent;stroke:transparent;stroke-width:1;cursor:pointer}
.cell-hit.event-cell:hover{fill:rgba(90,105,122,.04);stroke:rgba(90,105,122,.22);stroke-width:1}
.cell-hit.event-cell.selected{fill:rgba(91,108,126,.07);stroke:#69798a;stroke-width:1.15}
.cell-hit.event-cell.primary{fill:rgba(185,127,31,.09);stroke:#ae731f;stroke-width:1.45}
.note-halo{fill:transparent;stroke:transparent;stroke-width:0}
.cell-hit.selected + .note-token .note-halo{stroke:#6c7c8d;stroke-width:2.6}
.cell-hit.primary + .note-token .note-halo{stroke:#ad741f;stroke-width:3.4}
.cell-hit.selected + .note-token .tg-tab-mask{fill:#f0f3f6}
.cell-hit.primary + .note-token .tg-tab-mask{fill:#fbf4e5}
.playhead{width:1.5px !important;background:#4e9ec9 !important;box-shadow:none !important}
@media(max-width:650px){
  .score-viewport{padding:0 3px 6px !important}
  .score{padding:0 3px 4px !important}
  .measure-number{font-size:8.5px !important}
}


/* v19: Wiedergabe-/Bearbeitungsmodus, sichtbarer Saitencursor */
.app-shell{
  grid-template-rows:56px 0 minmax(0,1fr) 0 !important;
}
.actionbar{
  height:0 !important;
  min-height:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  border:0 !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  overflow:hidden !important;
}
.bottom-console{display:none !important}
.app-shell.edit-mode{
  grid-template-rows:56px 48px minmax(0,1fr) auto !important;
}
.app-shell.edit-mode .actionbar{
  height:auto !important;
  min-height:0 !important;
  padding:4px 6px !important;
  border-bottom:1px solid #d9e0e8 !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  overflow-x:auto !important;
}
.app-shell.edit-mode .bottom-console{display:block !important}
.edit-mode-button{
  font-family:Arial,sans-serif !important;
  font-size:23px !important;
  border:1px solid transparent !important;
}
.edit-mode-button.active{
  color:#fff !important;
  background:#2f9f97 !important;
  border-color:rgba(255,255,255,.22) !important;
}
.tg-lane-cursor{
  fill:#fff8e8;
  stroke:#ad741f;
  stroke-width:1.35;
  vector-effect:non-scaling-stroke;
}
.tg-lane-caret{fill:#ad741f}
.tg-cursor-time{
  fill:none;
  stroke:#ad741f;
  stroke-width:.75;
  stroke-dasharray:2 1.5;
  vector-effect:non-scaling-stroke;
  opacity:.75;
}
@media(max-width:650px){
  .app-shell{grid-template-rows:56px 0 minmax(0,1fr) 0 !important}
  .app-shell.edit-mode{grid-template-rows:56px 48px minmax(0,1fr) auto !important}
  .edit-mode-button{font-size:22px !important}
}


/* v20: integriertes Rhythmuspanel, PC-Numpad und feste History-Leiste */
.app-shell.edit-mode{grid-template-rows:56px 46px minmax(0,1fr) auto !important}
.app-shell.edit-mode .actionbar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:6px !important;
  overflow:hidden !important;
  padding:4px 6px !important;
}
.actionbar-fixed,.actionbar-tools{display:flex;align-items:center;gap:5px;min-width:0}
.actionbar-fixed{flex:0 0 auto;position:relative;z-index:2;background:#fff}
.actionbar-tools{flex:0 0 auto;margin-left:auto;overflow:hidden}
.history-tool{font-size:20px !important}
.bottom-console{padding:7px 8px calc(7px + env(safe-area-inset-bottom)) !important}
.console-inner{display:grid !important;grid-template-columns:minmax(0,1fr) auto !important;align-items:center !important;gap:10px !important;max-width:760px !important}
.input-panel{min-width:0}
.rhythm-strip{min-width:0;margin-bottom:6px}
.rhythm-scroll{
  display:flex;align-items:center;gap:5px;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  padding:1px 1px 3px;
}
.rhythm-scroll::-webkit-scrollbar{display:none}
.rhythm-divider{width:1px;height:32px;background:rgba(255,255,255,.22);flex:0 0 1px;margin:0 2px}
.rhythm-key{
  flex:0 0 45px;width:45px;height:43px;border:1px solid rgba(168,180,195,.75);
  border-radius:11px;background:#f4f7fa;color:#1d2a40;display:grid;place-items:center;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.09);padding:1px;
}
.rhythm-key.active{background:#64778b;color:#fff;border-color:#64778b;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.duration-note-svg{width:31px;height:38px;overflow:visible}
.duration-head.open{fill:#fff;stroke:currentColor;stroke-width:1.8}
.duration-head.filled{fill:currentColor;stroke:currentColor;stroke-width:1.2}
.duration-stem,.duration-flag{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rhythm-text{font-size:19px;font-weight:850}
.rhythm-text[data-tuplet]{font-size:14px;font-style:italic}
.input-panel-title{margin:0 0 4px !important;font-size:9.5px !important}
.number-pad{display:grid !important;grid-template-columns:repeat(3,minmax(46px,1fr)) !important;gap:5px !important}
.pad-key{height:45px !important;border-radius:10px !important;font-size:18px !important}
.pad-key.delete-note{color:#bd3347 !important;font-size:22px !important}
.pad-key.pause-key{font-size:19px !important;display:flex;align-items:center;justify-content:center;gap:4px}
.pad-key.pause-key small{font-size:8px;line-height:1;text-transform:uppercase;letter-spacing:.04em}
.drum-pad:not([hidden]){display:flex !important;gap:4px;overflow-x:auto;overflow-y:hidden;margin-top:5px;scrollbar-width:none}
.drum-pad::-webkit-scrollbar{display:none}
.drum-pad .drum-key{flex:0 0 72px;height:39px !important}
.dpad{grid-template:46px 46px 46px/50px 50px 50px !important;gap:4px !important}
.dpad-button{border-radius:10px !important}
@media(max-width:650px){
  :root{--console-height:270px}
  .app-shell.edit-mode{grid-template-rows:56px 44px minmax(0,1fr) auto !important}
  .app-shell.edit-mode .actionbar{padding:3px 5px !important}
  .actionbar .tool{height:36px !important;min-width:38px !important;padding:0 8px !important}
  .actionbar .signature-control{height:36px !important;padding:0 4px !important}
  .actionbar .signature-control>span{display:none !important}
  .actionbar .signature-control select{height:28px !important;min-width:52px !important}
  .bottom-console{padding:6px 7px calc(6px + env(safe-area-inset-bottom)) !important}
  .console-inner{gap:7px !important;align-items:center !important}
  .rhythm-strip{margin-bottom:4px}
  .rhythm-key{flex-basis:42px;width:42px;height:39px;border-radius:9px}
  .duration-note-svg{width:28px;height:34px}
  .number-pad{gap:4px !important}
  .pad-key{height:42px !important;border-radius:9px !important;font-size:17px !important}
  .dpad{grid-template:43px 43px 43px/46px 46px 46px !important;gap:3px !important}
}