:root{--bg-body:#2d3035;--bg-toolbar:#3b3f45;--bg-editor:#33373d;--border-color:#232529;--text-light:#c0c0c0;--text-dark:#888;--accent-green:#2ecc71;--accent-red:#d9534f}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";background-color:var(--bg-body);color:var(--text-light);padding-left:300px;transition:padding-left .3s ease}
body.sidebar-hidden{padding-left:0}

/* (NOVO) Muda o cursor do mouse na página inteira enquanto arrasta um knob */
body.knob-dragging {
    cursor: ns-resize; /* Seta de redimensionamento Norte-Sul */
}

.sample-browser{position:fixed;top:0;left:0;width:300px;height:100vh;background-color:var(--bg-toolbar);border-right:2px solid var(--border-color);z-index:1500;display:flex;flex-direction:column;transform:translateX(0);transition:transform .3s ease}
body.sidebar-hidden .sample-browser{transform:translateX(-100%)}
.browser-header{padding:15px;background-color:#2a2c30;border-bottom:2px solid var(--border-color);text-align:center;font-weight:bold;color:var(--text-light);}
.browser-content{flex-grow:1;overflow-y:auto;padding:10px}
.browser-content ul{list-style:none;padding-left:15px}
.browser-content li{padding:5px;cursor:pointer;border-radius:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;user-select:none}
.browser-content li:hover{background-color:var(--bg-editor)}
.browser-content li i{margin-right:8px;width:12px;color:var(--text-dark);transition:transform .2s}
.browser-content li.directory > ul{display:none}
.browser-content li.directory.open > ul{display:block}
.browser-content li.directory.open > .fa-folder{transform:rotate(90deg)}
#sidebar-toggle{position:fixed;top:60px;left:305px;z-index:1400;background-color:var(--bg-toolbar);border:1px solid var(--border-color);color:var(--text-light);width:25px;height:40px;cursor:pointer;border-top-right-radius:4px;border-bottom-right-radius:4px;transition:left .3s ease;display:flex;align-items:center;justify-content:center}
body.sidebar-hidden #sidebar-toggle{left:5px}
.global-toolbar{padding-top:8px;padding-bottom:8px;padding-right:15px;position:fixed;top:0;width:100%;z-index:1000;display:flex;align-items:center;gap:20px;background-color:var(--bg-toolbar);border-bottom:2px solid var(--border-color)}
.main-content{padding:2rem}
.beat-editor{background-color:var(--bg-body);border:1px solid var(--border-color);width:100%;max-width:900px;margin:auto;box-shadow:0 5px 15px rgba(0,0,0,.3);border-radius:4px;overflow:hidden}
.editor-header{background-color:var(--bg-toolbar);padding:4px 10px;font-size:.8rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color)}
.window-controls i{margin-left:12px;cursor:pointer}
.editor-toolbar{background-color:var(--bg-toolbar);padding:5px 10px;display:flex;align-items:center;gap:15px;border-bottom:2px solid var(--border-color)}
.editor-toolbar i{cursor:pointer;padding:5px;border-radius:3px}
.editor-toolbar i.enabled{background-color:var(--bg-body);box-shadow:inset 0 0 2px #000}
.pattern-selector{background-color:var(--bg-body);padding:5px 15px;border:1px solid var(--border-color);flex-grow:1;font-size:.9rem;border-radius:2px}
.track-lane{display:flex;align-items:center;padding:8px 10px;background-color:var(--bg-editor); border: 2px dashed transparent; transition: border-color 0.2s;}
.track-lane.drag-over { border-color: var(--accent-green); }
.track-info{display:flex;align-items:center;gap:8px;width:180px;flex-shrink:0}
.track-info .fa-gear{font-size:1.2rem;cursor:pointer}
.track-mute{width:25px;height:12px;background-color:var(--accent-green);border-radius:6px;cursor:pointer;border:1px solid var(--border-color);box-shadow:inset 0 0 2px #000}
.track-name{color:var(--accent-red);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-controls{display:flex;gap:5px;margin:0 10px;padding-left:10px;border-left:1px solid var(--bg-toolbar)}
.knob-container{text-align:center;font-size:.7rem;color:var(--text-dark)}
.knob{width:28px;height:28px;background-color:var(--bg-toolbar);border-radius:50%;border:1px solid var(--border-color);margin-bottom:2px;cursor:grab;box-shadow:inset 0 0 4px #222; position: relative;}
.knob:active {cursor: grabbing;}
.knob-indicator {width: 2px;height: 8px;background-color: var(--text-light);position: absolute;top: 2px;left: 50%;transform-origin: bottom center;transform: translateX(-50%) rotate(0deg);border-radius: 1px;}
.step-sequencer{display:flex;flex-grow:1;gap:4px;overflow-x:auto;padding-bottom:8px}
.step-sequencer::-webkit-scrollbar{height:8px}
.step-sequencer::-webkit-scrollbar-track{background:var(--border-color);border-radius:4px}
.step-sequencer::-webkit-scrollbar-thumb{background:var(--bg-toolbar);border-radius:4px}
.step-sequencer::-webkit-scrollbar-thumb:hover{background:#555}
.step-wrapper{position:relative}
.step-marker{position:absolute;top:-16px;left:1px;font-size:.6rem;color:var(--text-dark)}
.step{width:28px;aspect-ratio:1 / 1;background-color:#2a2a2a;border:1px solid #4a4a4a;border-radius:2px;cursor:pointer;transition:background-color .1s, transform 0.1s}
.step-dark{background-color:#1e1e1e}
.step:hover{background-color:#555;border-color:#888}
.step.active{background-color:var(--accent-green);border:1px solid #fff;box-shadow:0 0 8px var(--accent-green)}
.step.playing { transform: scale(1.1); box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.8); }
.interactive-input-container{display:flex;align-items:center;justify-content:center;gap:4px}
.compasso-group{display:flex;align-items:center;gap:4px}
.value-input{background:0 0;border:0;outline:0;color:var(--accent-green);font-weight:700;font-size:1.4rem;font-family:Courier New,Courier,monospace;text-align:center;padding:0;width:55px}
.compasso-input{width:25px}
.compasso-separator{color:var(--accent-green);font-weight:700;font-size:1.4rem;font-family:Courier New,Courier,monospace;margin:0 2px}
.value-input::-webkit-outer-spin-button,.value-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.value-input[type=number]{-moz-appearance:textfield}
.adjust-btn{background:0 0;border:0;color:var(--text-dark);font-size:1rem;font-weight:700;cursor:pointer;padding:0 5px;transition:color .2s;line-height:1}
.adjust-btn:hover{color:#fff}
.control-group{display:flex;align-items:center;gap:15px;padding:0 10px}
.control-group i{font-size:1.2rem;cursor:pointer;color:var(--text-light);transition:color .2s}
.control-group i:hover{color:#fff}
.fa-play, .fa-pause {color:var(--accent-green)!important}
.divider{width:1px;height:25px;background-color:var(--border-color)}
.info-display-group{display:flex;align-items:center;gap:5px}
.info-display{background-color:#1a1c1e;padding:5px 8px;border-radius:3px;text-align:center}
.info-display .label{color:var(--text-dark);font-size:.6rem;text-transform:uppercase}
.spacer{flex-grow:1}
#metronome-btn{background:0 0;border:1px solid var(--text-dark);color:var(--accent-green);font-family:inherit;font-weight:700;font-size:.8rem;padding:5px 10px;border-radius:3px;cursor:pointer;transition:all .2s}
#metronome-btn:hover{border-color:var(--text-light);background-color:var(--bg-editor)}
#metronome-btn.active{background-color:var(--accent-green);color:var(--bg-body);border-color:var(--accent-green)}