/* ---------- rack (parte de baixo) ---------- */
.rack {
  max-width: 1180px; margin: 0 auto 40px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(#26282e, #1a1c21); border: 1px solid #33363e;
  box-shadow: 0 18px 40px #0009, inset 0 1px 0 #3c3f48;
}
/* abas = botões grandes */
.rack .tabs { display: flex; gap: 6px; padding: 12px; border: none; background: #121317; border-bottom: 1px solid #2c2f37; flex-wrap: wrap; }
.rack .tabs button {
  flex: 1; min-width: 150px; padding: 12px 10px; border-radius: 10px; border: 1px solid #2f323a; background: linear-gradient(#2a2d34, #1f2127);
  color: #aeb3bf; font-weight: 800; font-size: 13px; letter-spacing: .5px; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 2px 0 #000; transition: background .15s, color .15s;
}
.rack .tabs button:hover { color: #fff; }
.rack .tabs button.on { background: linear-gradient(#e83a2e, #b51d14); border-color: #ff6a5a; color: #fff; box-shadow: 0 2px 0 #6a0d07, 0 0 18px #e83a2e55; }
.rack .panel { padding: 18px; }

/* controles de formulário */
.rack select, .rack input[type=number], .rack input:not([type]) {
  appearance: none; -webkit-appearance: none; background: #0d0e11 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ff8a3d'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid #343842; border-radius: 8px; padding: 8px 28px 8px 10px; color: #e8e9ec; font-size: 13px;
}
.rack input[type=number], .rack input:not([type]) { background-image: none; padding-right: 10px; }
.rack select:focus, .rack input:focus { outline: none; border-color: #ff8a3d; box-shadow: 0 0 0 2px #ff8a3d33; }
.rack .btn { border-radius: 8px; padding: 9px 14px; font-weight: 700; background: linear-gradient(#30333b, #24262c); border: 1px solid #3a3e48; box-shadow: 0 2px 0 #000; }
.rack .btn.accent { background: linear-gradient(#e83a2e, #b51d14); border-color: #ff6a5a; color: #fff; }
.rack fieldset { background: #16181c; border: 1px solid #2c2f37; border-radius: 12px; padding: 14px 16px 16px; }
.rack legend { background: #e83a2e; color: #fff; padding: 3px 10px; border-radius: 6px; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; }
.rack .hint { line-height: 1.5; }

/* ---------- mesa de som ---------- */
.mixflow { margin-bottom: 12px; font-size: 12px; }
.mixflow b { color: #ff8a3d; }
.mixer { display: flex; gap: 6px; overflow-x: auto; padding: 10px; background: #0f1013; border-radius: 12px; border: 1px solid #25272d; }
.strip {
  flex: 1 0 128px; max-width: 160px; display: flex; flex-direction: column; gap: 8px; padding: 10px 8px 0; border-radius: 10px;
  background: linear-gradient(#24262c, #1b1d22); border: 1px solid #2e3139; border-top: 3px solid var(--ch); position: relative;
}
.strip.master { background: linear-gradient(#2a1714, #1d1210); border-color: #4a2620; border-top-color: var(--ch); }
.strip.ret { background: linear-gradient(#1c2426, #161c1e); }
.slots { display: flex; flex-direction: column; gap: 4px; }
.slot { display: flex; align-items: center; gap: 7px; background: #0b0c0e; border: 1px solid #2b2e35; border-radius: 6px; padding: 5px 7px;
  font: 700 11px Menlo, monospace; color: #8b909c; cursor: pointer; letter-spacing: .5px; }
.slot:hover { border-color: #4a4f5a; }
.slot.on { color: #e8ffe9; border-color: #2e6b3e; background: #0e1a12; }
.slot.empty { color: #555b66; font-weight: 400; }
.slot.sel { outline: 2px solid var(--ch); outline-offset: 1px; }
.slot .pw { width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; background: #3a1210; box-shadow: inset 0 1px 2px #000; cursor: pointer; flex: none; }
.slot.on .pw { background: #3dff6c; box-shadow: 0 0 8px #3dff6c; }
.byp, .pre { background: #0b0c0e; border: 1px solid #2b2e35; border-radius: 6px; font: 700 10px sans-serif; padding: 5px; color: #8b909c; cursor: pointer; letter-spacing: .5px; }
.byp.on { color: #1a1300; background: #ffd21a; border-color: #ffd21a; }
.pre.on { color: #fff; background: #36506e; border-color: #4aa3ff; }
.mini-sel { width: 100%; font-size: 11px !important; padding: 6px 22px 6px 7px !important; background-position: right 6px center !important; }

.knobs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 4px; }
.mk { display: flex; flex-direction: column; align-items: center; gap: 2px; user-select: none; }
.mk-dial { width: 42px; height: 42px; border-radius: 50%; cursor: ns-resize; touch-action: none;
  background: radial-gradient(circle at 35% 30%, #4a4d55, #121316 70%); box-shadow: 0 3px 6px #000c, inset 0 1px 1px #666;
  display: flex; align-items: center; justify-content: center; position: relative; }
.mk-dial::before { content: ''; position: absolute; inset: -5px; border-radius: 50%;
  background: conic-gradient(from -135deg, #3a3d45 0deg, #3a3d45 270deg, transparent 270deg); -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%); mask: radial-gradient(circle, transparent 58%, #000 60%); }
.mk-cap { width: 78%; height: 78%; border-radius: 50%; background: repeating-conic-gradient(#1d1f23 0 8deg, #15161a 8deg 16deg); position: relative; }
.mk-cap i { position: absolute; left: 50%; top: 4%; width: 3px; height: 34%; margin-left: -1.5px; background: var(--ch, #ff8a3d); border-radius: 2px; box-shadow: 0 0 4px var(--ch, #ff8a3d); }
.mk.active .mk-dial { box-shadow: 0 0 0 2px var(--ch, #ff8a3d), 0 3px 6px #000c; }
.mk-val { font: 600 10px Menlo, monospace; color: #e8e9ec; white-space: nowrap; }
.mk-lbl { font-size: 9px; font-weight: 800; color: #8b909c; letter-spacing: .5px; text-align: center; }

.ms { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.ms button { height: 30px; border-radius: 6px; border: 1px solid #2b2e35; background: linear-gradient(#2a2d34, #1d1f24); color: #aeb3bf; font-weight: 900; font-size: 13px; cursor: pointer; box-shadow: 0 2px 0 #000; }
.ms .mute.on { background: #e83a2e; border-color: #ff6a5a; color: #fff; box-shadow: 0 0 12px #e83a2e88; }
.ms .solo.on { background: #ffd21a; border-color: #ffe25a; color: #1a1300; box-shadow: 0 0 12px #ffd21a88; }
.ms button:disabled { opacity: .3; }
.routeinfo { font-size: 10px; font-weight: 800; color: #8b909c; text-align: center; padding: 6px; border: 1px dashed #3a3e48; border-radius: 6px; }

.fadwrap { display: flex; justify-content: center; gap: 6px; height: 200px; margin-top: auto; padding: 6px 0; background: #0d0e11; border-radius: 8px; border: 1px solid #23262c; }
.fscale { position: relative; width: 26px; font: 9px Menlo, monospace; color: #6a6f7a; text-align: right; }
.fscale span { position: absolute; right: 0; top: calc(9px + (100% - 18px) * var(--f)); transform: translateY(-50%); line-height: 1; }
.fadwrap .fader { touch-action: none; writing-mode: vertical-lr; direction: rtl; -webkit-appearance: none; appearance: none; width: 30px; height: 100%; background: transparent; cursor: pointer; }
.fadwrap .fader::-webkit-slider-runnable-track { width: 6px; background: #000; border-radius: 3px; border: 1px solid #2b2e35; }
.fadwrap .fader::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 18px; border-radius: 3px; margin-left: -13px; border: 1px solid #000;
  background: linear-gradient(#55585f, #1a1b1f 45%, var(--ch) 47%, var(--ch) 53%, #1a1b1f 55%, #3a3c42); box-shadow: 0 2px 4px #000a; }
.fadwrap .fader::-moz-range-thumb { width: 30px; height: 18px; border-radius: 3px; background: #444; border: 1px solid #000; }
.vmeter { width: 8px; height: 100%; background: repeating-linear-gradient(0deg, #000 0 3px, #15171a 3px 4px); border-radius: 2px; position: relative; overflow: hidden; }
.vmeter i { position: absolute; bottom: 0; left: 0; right: 0; height: 0;
  background: linear-gradient(0deg, #3dff6c 0%, #3dff6c 60%, #ffd21a 80%, #ff2a1a 100%); background-size: 100% 200px; background-position: bottom;
  -webkit-mask: repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 4px); mask: repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 4px); }
.vmeter i.clip { background: #ff2a1a; }
.db { text-align: center; font: 700 11px Menlo, monospace; color: #e8e9ec; }
.sname { margin: 0 -8px; padding: 7px 4px 8px; text-align: center; font-weight: 900; font-size: 12px; letter-spacing: 1px; color: #111;
  background: var(--ch); border-radius: 0 0 9px 9px; }
.sname small { display: block; font-size: 9px; font-weight: 700; letter-spacing: .5px; opacity: .75; }

/* ---------- editor de efeito (visual de pedal) ---------- */
.fxeditor { margin-top: 14px; }
.fx-unit { border-radius: 14px; padding: 14px 18px 18px; background: linear-gradient(#2c2f36, #1e2025); border: 1px solid #3a3e48; border-left: 6px solid var(--ch); box-shadow: 0 8px 20px #0007; }
.fx-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.fx-led { width: 14px; height: 14px; border-radius: 50%; background: #3a1210; box-shadow: inset 0 1px 3px #000; flex: none; }
.fx-led.on { background: #ff2a1a; box-shadow: 0 0 12px #ff2a1a; }
.fx-lcd { flex: 1; min-width: 260px; background: linear-gradient(#1747d6, #0e33a8); border-radius: 8px; padding: 8px 12px; border: 3px solid #0a0a0a; font-family: Menlo, monospace; color: #fff; }
.fx-where { font-size: 11px; opacity: .85; letter-spacing: 1px; }
.fx-lcd .fxtype { width: 100%; background-color: transparent !important; border: none !important; color: #fff !important; font: 800 20px Menlo, monospace !important; padding: 2px 26px 2px 0 !important; box-shadow: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='%23fff'/%3E%3C/svg%3E") !important; background-position: right 4px center !important; }
.fx-lcd .fxtype option { background: #0e33a8; }
.fx-role { font-size: 11px; opacity: .85; }
.fx-actions { display: flex; gap: 10px; align-items: center; }
.fxon { padding: 12px 18px; border-radius: 10px; font-weight: 900; letter-spacing: 1px; cursor: pointer; border: 1px solid #3a3e48; background: linear-gradient(#30333b, #24262c); color: #aeb3bf; box-shadow: 0 3px 0 #000; }
.fxon.on { background: linear-gradient(#22b04a, #137a30); border-color: #3dff6c; color: #fff; box-shadow: 0 3px 0 #0a3a17, 0 0 16px #3dff6c55; }
.fx-move { display: flex; flex-direction: column; gap: 4px; }
.fx-move button { width: 34px; height: 22px; border-radius: 5px; border: 1px solid #3a3e48; background: #24262c; color: #e8e9ec; cursor: pointer; font-size: 10px; }
.fx-empty { padding: 18px 4px 4px; color: #8b909c; }
.fx-body { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-start; margin-top: 16px; }
.fx-sel { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 800; color: #aeb3bf; letter-spacing: .5px; text-transform: uppercase; }
.fx-knobs { display: flex; flex-wrap: wrap; gap: 16px 18px; flex-basis: 100%; }
.fx-knobs .mk { width: 86px; }
.fx-knobs .mk-dial { width: 58px; height: 58px; }
.fx-knobs .mk-val { font-size: 11px; }
.fx-knobs .mk-lbl { font-size: 10px; line-height: 1.2; }

/* ---------- switches do Chocolate ---------- */
.swcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 10px 0; }
.swcard { background: linear-gradient(#24262c, #1b1d22); border: 1px solid #33363e; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.swcard.learning { border-color: #ff8a3d; box-shadow: 0 0 0 2px #ff8a3d55, 0 0 24px #ff8a3d33; }
.sw-head { display: flex; align-items: center; gap: 10px; }
.sw-btn { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 22px; color: #222;
  background: radial-gradient(circle at 40% 35%, #fff, #bbb 45%, #777 80%); box-shadow: 0 0 0 4px #555, 0 4px 8px #000a; flex: none; }
.sw-head .rname { width: 70px; }
.sw-del { margin-left: auto; background: none; border: 1px solid #4a2020; color: #ff8d8d; border-radius: 6px; width: 30px; height: 30px; cursor: pointer; }
.sw-msg { font: 700 13px Menlo, monospace; text-align: center; padding: 8px; border-radius: 6px; background: linear-gradient(#1747d6, #0e33a8); color: #fff; }
.sw-msg.none { background: #0d0e11; color: #6a6f7a; }
.sw-learn { padding: 9px; border-radius: 8px; font-weight: 900; letter-spacing: 1px; cursor: pointer; border: 1px solid #3a3e48; background: linear-gradient(#30333b, #24262c); color: #e8e9ec; }
.swcard.learning .sw-learn { background: #ff8a3d; color: #1a0d05; animation: blink .6s steps(2) infinite; }
.swcard label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 800; color: #8b909c; text-transform: uppercase; letter-spacing: .5px; }
.swcard select { width: 100%; }

/* ---------- memórias como mini-visores ---------- */
.memlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 16px; }
.memitem { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; cursor: pointer;
  background: #101116; border: 2px solid #23262c; font-family: Menlo, monospace; color: #6a6f7a; }
.memitem b { font-size: 22px; line-height: 1; }
.memitem span { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.memitem.used { background: linear-gradient(#1747d6, #0e33a8); color: #fff; border-color: #0a0a0a; }
.memitem.cur { border-color: #ff8a3d; box-shadow: 0 0 14px #ff8a3d66; }
.memitem i { position: absolute; top: 6px; right: 8px; color: #3dff6c; font-style: normal; text-shadow: 0 0 6px #3dff6c; }
.memitem:hover { border-color: #4a4f5a; }

/* botão minimizar + REC dos canais de entrada + gráfico do EQ + medidor de redução */
.rack { position: relative; }
.racktoggle { display: block; width: 100%; padding: 8px; border: none; border-bottom: 1px solid #2c2f37; background: #0d0e11; color: #8b909c; font-weight: 800; font-size: 11px; letter-spacing: 1px; cursor: pointer; }
.racktoggle:hover { color: #fff; background: #16181c; }
.rack.min .tabs, .rack.min .panel { display: none !important; }
.rack.min .racktoggle { border-bottom: none; padding: 14px; color: #e8e9ec; }
.recrow { display: grid; grid-template-columns: auto 1fr; gap: 4px; }
.recon { border-radius: 6px; border: 1px solid #2b2e35; background: #0b0c0e; color: #8b909c; font: 900 10px sans-serif; padding: 0 6px; cursor: pointer; }
.recon.on { background: #ff8a3d; border-color: #ffb07a; color: #000; box-shadow: 0 0 10px #ff8a3d66; }
/* armar o canal para gravar na DAW */
.dawarm { display: block; width: 100%; height: 26px; border-radius: 6px; border: 1px solid #3a3e48; background: #16181c; color: #ff6a5a; font: 900 10px sans-serif; letter-spacing: .5px; cursor: pointer; }
.dawarm.on { background: #e83a2e; border-color: #ff6a5a; color: #fff; box-shadow: 0 0 10px #e83a2e88; }
.eqgraph { display: block; width: 100%; height: 170px; margin-top: 14px; border-radius: 8px; border: 3px solid #0a0a0a; }
.grmeter { display: grid; grid-template-columns: auto 1fr 70px; gap: 10px; align-items: center; margin-top: 14px; font: 800 11px Menlo, monospace; color: #aeb3bf; }
.grbar { height: 12px; background: #0b0c0e; border-radius: 6px; overflow: hidden; border: 1px solid #2b2e35; }
.grbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd21a, #ff2a1a); transition: width .08s; }
.grval { color: #ffd21a; text-align: right; }

/* pedal da Loja que a conta não tem (no mixer) */
.slot.locked { opacity: .45; border-style: dashed; }