/* Dark 303 editor — screen and export stay visually identical. */
#patternSheet{background:#101012;color:#f1f1ed;border-color:#303037;box-shadow:0 34px 100px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.035)}
#patternSheet .sheet-header{background:#09090b;border-bottom-color:var(--acid)}
#patternSheet .sheet-kicker{color:#74747c}
#patternSheet .sheet-meta{border-bottom-color:#303036;background:#121215}
#patternSheet .meta-fields label{border-bottom-color:#303036}
#patternSheet .meta-fields label:last-child{background:#151518}
#patternSheet .meta-fields span{color:#85858d}
#patternSheet .meta-fields input{color:#f0f0ec;caret-color:var(--acid)}
#patternSheet .memory-panel{border-left-color:#303036;background:#151518}
#patternSheet .memory-row:first-child{border-bottom-color:#303036}
#patternSheet .segment-button{border-right-color:#303036;color:#8f8f97}
#patternSheet .segment-button:not(.selected):hover{background:#1d1d22;color:#f0f0ec}
#patternSheet .segment-button.selected{background:var(--acid);color:#09090a}
#patternSheet .sequence-table th,#patternSheet .sequence-table td{border-right-color:#2e2e34;border-bottom-color:#2e2e34}
#patternSheet .sequence-table thead th{background:#17171b;color:#9b9ba3}
#patternSheet .sequence-table thead th.downbeat{background:#202025;color:var(--acid)}
#patternSheet .sequence-table .row-label{color:#84848c;background:#111114}
#patternSheet .sequence-table tbody tr:nth-child(even) .row-label{background:#151518}
#patternSheet .sequence-table td.step-cell{background:#101012}
#patternSheet .sequence-table td.step-cell.shaded{background:#17171b}
#patternSheet .sequence-table .cell-control{color:#ededeb}
#patternSheet .sequence-table .cell-control:hover,#patternSheet .sequence-table .cell-control:focus{background:rgba(221,255,55,.11);color:#fff}
#patternSheet .sequence-table button.accentSlide-cell{color:var(--acid)}
#patternSheet .sequence-table button.gate-cell{color:#f1f1ed}
#patternSheet .sequence-table [data-playing="true"]{background:var(--acid)!important;color:#070708!important;box-shadow:inset 0 0 0 2px rgba(0,0,0,.16)}
#patternSheet .hardware-strip{background:#141417;border-bottom-color:#303036}
#patternSheet .hardware-module{border-right-color:#303036}
#patternSheet .control-label{color:#85858d}
#patternSheet .wave-button{border-color:#34343a;background:#1b1b1f;color:#8b8b93;box-shadow:inset 0 -2px #101012}
#patternSheet .wave-button:hover{background:#232328;color:#d8d8dc}
#patternSheet .wave-button.selected{background:#080809;border-color:#4b5420;color:var(--acid);box-shadow:inset 0 -3px #000}
#patternSheet .seven-display{border-color:#34343a;box-shadow:inset 0 0 16px #000,0 1px rgba(255,255,255,.04)}
#patternSheet .knob + .knob::before{background:#303036}
#patternSheet .knob-title{color:#8b8b92}
#patternSheet .knob-value{color:#74747c}
#patternSheet .dial-tick{stroke:#5d5d65}
#patternSheet .dial-tick.major{stroke:#8b8b92}
#patternSheet .dial-bezel{fill:#242429;stroke:#3d3d44}
#patternSheet .dial-body{fill:#111114;stroke:#050506}
#patternSheet .dial-center{fill:#0a0a0c}
#patternSheet .dial-pointer{stroke:var(--acid)}
#patternSheet .notes-panel{background:#111114}
#patternSheet .notes-panel textarea{color:#d8d8dc;caret-color:var(--acid)}
#patternSheet .notes-panel textarea::placeholder{color:#62626a}

/* 303 shell now behaves like the rhythm panel: the wide sheet scrolls, controls stay anchored. */
.workspace.shell{min-width:0!important;overflow:hidden!important}
.sheet-scroll{min-width:0!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;border:1px solid #2d2d33;border-radius:17px;background:#0f0f12}
#patternSheet{display:flex!important;flex-direction:column!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important}
#patternSheet .sheet-header{order:1}
#patternSheet .sheet-meta{order:2}
#patternSheet .sequence-table-wrap{order:3}
#patternSheet .hardware-strip{order:4}
#patternSheet .notes-panel{order:5}
#patternSheet .sheet-toolbar{order:6;position:sticky!important;left:0!important;z-index:8;width:min(calc(100vw - 28px),1080px)!important;max-width:100vw!important;min-width:0!important;box-sizing:border-box!important;padding:15px!important;background:#121215!important;border-top:1px solid #29292e!important;border-bottom:1px solid #29292e!important}
#patternSheet .sheet-io{order:7;position:sticky!important;left:0!important;z-index:7;width:min(calc(100vw - 28px),1080px)!important;max-width:100vw!important;min-width:0!important;box-sizing:border-box!important;background:#0b0b0d!important;border-top:0!important}
#patternSheet .sheet-toolbar .toolbar-group{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;width:100%!important}
#patternSheet .sheet-toolbar .tool-button{width:100%!important;min-width:0!important;min-height:44px!important;margin:0!important;padding:0 12px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;border:1px solid #34343a!important;border-radius:8px!important;background:#1a1a1e!important;color:#e9e9eb!important;box-shadow:none!important;font:800 .59rem/1 JetBrains Mono,monospace!important;letter-spacing:.01em!important;text-align:center!important;white-space:normal!important;overflow:hidden!important}
#patternSheet .sheet-toolbar .tool-button svg{display:none!important}
#patternSheet .sheet-toolbar .tool-button-acid{border-color:#5b681b!important;color:#ddff37!important;background:#181c0b!important}
#patternSheet .sheet-toolbar .tool-button-play{border-color:#34343a!important;background:#1a1a1e!important}
#patternSheet .sheet-toolbar .tool-button-clear{border-color:#492522!important;color:#ff6b64!important;background:#181112!important}
#patternSheet .sheet-toolbar .status-led{flex:0 0 7px;width:7px;height:7px}

@media(min-width:1120px){
  .sheet-scroll{overflow-x:visible!important}
  #patternSheet .sheet-toolbar,#patternSheet .sheet-io{width:1080px!important;max-width:1080px!important}
}

@media(max-width:640px){
  .sheet-scroll{border-radius:15px}
  #patternSheet .sheet-toolbar{width:calc(100vw - 28px)!important;max-width:calc(100vw - 28px)!important;padding:11px!important}
  #patternSheet .sheet-io{width:calc(100vw - 28px)!important;max-width:calc(100vw - 28px)!important;grid-template-columns:1fr!important}
  #patternSheet .sheet-toolbar .toolbar-group{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  #patternSheet .sheet-toolbar .tool-button{min-height:44px!important;padding:0 8px!important;font-size:.55rem!important}
}