/* Meridian North Audio Routing Simulator V6 */
:root{--blue:#248dff;--red:#f0525f;--orange:#ff941f;--green:#54d66b;--purple:#a875ff;--text:#f7fbff;--muted:#a4b0bd;--line:rgba(255,255,255,.13)}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-items:center;background:#02070d;color:var(--text);font-family:Inter,Arial,sans-serif}
.mn-mixer{width:min(100%,1220px);padding:22px;border-radius:22px;background:linear-gradient(145deg,#101820,#050a0f);border:1px solid var(--line);box-shadow:0 28px 90px rgba(0,0,0,.6)}
.mixer-top{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:18px}.eyebrow{margin:0 0 5px;color:#7ec1ff;text-transform:uppercase;letter-spacing:.18em;font-size:12px}
h2,h3,h4,p{margin:0}h2{font-size:28px}h2 span{color:var(--blue)}h3{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:#dcecff}h4{text-transform:uppercase;letter-spacing:.08em}.sub{color:var(--muted);margin-top:5px}
.top-actions{display:flex;gap:12px}.utility-btn,.power-btn,.fx-card button{border:1px solid var(--line);background:linear-gradient(#202b37,#0a1017);color:white;border-radius:9px;padding:10px 16px;cursor:pointer}.power-btn.active,.fx-card button.active{background:linear-gradient(#2b96ff,#0d5eb2);box-shadow:0 0 20px rgba(36,141,255,.45)}.power-btn.off{color:#aab4c0}
.mixer-grid{display:grid;grid-template-columns:2fr 1.05fr;grid-template-areas:'inputs master' 'channels fx';gap:14px}
.input-section,.channel-section,.master-section,.effects-section{background:linear-gradient(#151d26,#0c1219);border:1px solid var(--line);border-radius:14px;padding:14px;position:relative;overflow:hidden}
.input-section{grid-area:inputs}.master-section{grid-area:master}.channel-section{grid-area:channels}.effects-section{grid-area:fx}
.input-row,.channel-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:12px}.input-card,.channel-card{min-height:250px;border-radius:10px;background:linear-gradient(#1b252f,#0d1319);border:1px solid var(--line);padding:12px;text-align:center;position:relative}.channel-card{min-height:305px}
.red h4{color:var(--red)}.orange h4{color:var(--orange)}.green h4{color:var(--green)}.blue h4{color:var(--blue)}
.instrument-img,.channel-img{display:block;margin:10px auto;object-fit:contain;filter:drop-shadow(0 8px 8px #000)}.instrument-img{width:105px;height:95px}.channel-img{width:118px;height:105px}
.jack{width:38px;height:38px;border-radius:50%;border:2px solid rgba(255,255,255,.65);background:radial-gradient(circle,#020406 0 26%,#d9d2c5 27% 34%,#6b6257 35% 48%,#0a0d12 49%);box-shadow:inset 0 0 9px #000,0 0 10px rgba(255,255,255,.13);cursor:pointer;position:relative;z-index:6}
.input-jack{margin:6px auto}.output-jack{margin:12px auto 10px}.jack.selected{box-shadow:0 0 20px var(--blue),inset 0 0 9px #000}
.jack.plugged:before{content:'';position:absolute;top:50%;width:32px;height:14px;background:linear-gradient(90deg,#e7d6ad,#9c8355 45%,#1b1b1b 46%,#080808);border:1px solid rgba(255,255,255,.28);border-radius:8px 2px 2px 8px;z-index:8}.input-jack.plugged:before{right:-28px;transform:translateY(-50%)}.output-jack.plugged:before{left:-28px;transform:translateY(-50%) rotate(180deg)}
.jack.plugged:after{content:'';position:absolute;top:50%;width:18px;height:8px;border-radius:999px;z-index:7}.input-jack.plugged:after{right:-44px;transform:translateY(-50%)}.output-jack.plugged:after{left:-44px;transform:translateY(-50%)}
.red .plugged:after{background:var(--red)}.orange .plugged:after{background:var(--orange)}.green .plugged:after{background:var(--green)}.blue .plugged:after{background:var(--blue)}
small,.channel-card p{color:var(--muted);font-size:12px}.leds{display:flex;gap:12px;justify-content:center;margin-top:10px}.leds span{width:14px;height:14px;border-radius:50%;background:#232b34;box-shadow:inset 0 0 6px #000}.led-labels{display:flex;gap:8px;justify-content:center;color:#9aa7b3;font-size:10px;margin-top:5px}
.channel-card.active [data-led=on]{background:#65ff70;box-shadow:0 0 12px #65ff70}.channel-card.fx-reverb [data-led=reverb]{background:#ffd141;box-shadow:0 0 12px #ffd141}.channel-card.fx-delay [data-led=delay]{background:#47aaff;box-shadow:0 0 12px #47aaff}.channel-card.fx-chorus [data-led=chorus]{background:var(--purple);box-shadow:0 0 12px var(--purple)}
.cable-layer{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}.cable-shadow{fill:none;stroke:#050505;stroke-width:13;stroke-linecap:round}.cable-path{fill:none;stroke-width:7;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(36,141,255,.6))}
.master-section{padding:13px}.meter-fader-wrap{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.meter-block,.master-fader-wrap{background:#0b1016;border:1px solid var(--line);border-radius:10px;padding:10px;text-align:center}#levelMeter{margin-top:8px;background:#05080c;border-radius:8px;border:1px solid var(--line)}.master-fader{height:150px;writing-mode:vertical-lr;direction:rtl;accent-color:var(--blue)}#dbReadout{display:block;color:#ddd;font-size:12px}.mute{width:100%;margin:10px 0}.load-note{color:var(--muted);font-size:12px;margin-top:10px;text-align:center}
.bus-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;background:#0b1016;border:1px solid var(--line);color:white;border-radius:10px;padding:10px;cursor:pointer}.bus-toggle b{width:46px;height:23px;background:#111b25;border-radius:999px;position:relative}.bus-toggle b:after{content:'';position:absolute;width:18px;height:18px;background:var(--blue);border-radius:50%;top:2.5px;left:3px;transition:.2s;box-shadow:0 0 10px var(--blue)}.bus-toggle.phones b:after{left:25px}
.fx-card{background:#0b1016;border:1px solid var(--line);border-radius:10px;padding:12px;margin-top:10px}.apply-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.status{margin-top:12px;color:var(--muted);background:#0b1016;border:1px solid var(--line);border-radius:10px;padding:12px}.hidden-route{display:none}
@media(max-width:1000px){.mixer-grid{grid-template-columns:1fr;grid-template-areas:'inputs' 'master' 'channels' 'fx'}.input-row,.channel-row{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.input-row,.channel-row{grid-template-columns:1fr}.mixer-top{flex-direction:column}}
