/* MIV Jam Editor (/jam-editor): pro studio console look. Builds on jam.css (body.jam-page, day/night toggle).
   Night = dark gunmetal console. Day = brushed silver/aluminum. CSS only: gradients, bevels and glows, no images.
   Palette: cyan #19e6ff and purple #8a2bff for LEDs, meters and waveforms; gold #ffc83d only for loop and selection. */

/* ---------- materials ---------- */
body.ed-page {
  --jc: #19e6ff; --jp: #8a2bff; --jg: #ffc83d;
  --ink: #e4e8f1; --sub: #98a0b4; --jink: var(--ink); --jsub: var(--sub);
  --base: #08090c;
  --panel-a: #353943; --panel-b: #1d2027; --panel-c: #15171c;
  --brush: rgba(255,255,255,.022);
  --bevel-hi: rgba(255,255,255,.13); --bevel-lo: rgba(0,0,0,.75); --edge: #050608;
  --key-a: #565b67; --key-b: #2e323b; --key-c: #22252c; --key-d: #3a3e48; --key-ink: #eef1f7; --key-gloss: rgba(255,255,255,.16);
  --well: #07080b; --well-ink: #e4e8f1; --line: rgba(255,255,255,.07);
  --screw: radial-gradient(circle at 40% 35%, #9aa0ad 0 1.5px, #474b55 2.5px, #1a1c22 3.5px, transparent 4px);
  background: radial-gradient(1200px 600px at 50% -10%, rgba(25,230,255,.08), transparent 60%), radial-gradient(900px 500px at 100% 100%, rgba(138,43,255,.08), transparent 60%), var(--base);
  color: var(--ink);
}
body.ed-page.day-mode {
  --ink: #1b1e27; --sub: #4c5263;
  --base: #c9cdd5;
  --panel-a: #f7f8fa; --panel-b: #dadde3; --panel-c: #c6cad2;
  --brush: rgba(0,0,0,.025);
  --bevel-hi: rgba(255,255,255,.95); --bevel-lo: rgba(60,66,80,.35); --edge: #8d929d;
  --key-a: #ffffff; --key-b: #e2e4e9; --key-c: #c7cad1; --key-d: #eceef1; --key-ink: #1b1e27; --key-gloss: rgba(255,255,255,.85);
  --well: #e9ebef; --well-ink: #1b1e27; --line: rgba(30,34,48,.12);
  --screw: radial-gradient(circle at 40% 35%, #ffffff 0 1.5px, #a3a8b3 2.5px, #6e7380 3.5px, transparent 4px);
  background: radial-gradient(1100px 600px at 50% -10%, rgba(255,255,255,.9), transparent 60%), radial-gradient(900px 500px at 100% 100%, rgba(25,230,255,.10), transparent 60%), var(--base);
}
/* brushed panel with bevel and four screws */
.ed-metal, body.ed-page .jam-card, .ed-bar, .ed-timeline {
  background:
    var(--screw) 8px 8px / 8px 8px no-repeat, var(--screw) calc(100% - 8px) 8px / 8px 8px no-repeat,
    var(--screw) 8px calc(100% - 8px) / 8px 8px no-repeat, var(--screw) calc(100% - 8px) calc(100% - 8px) / 8px 8px no-repeat,
    repeating-linear-gradient(90deg, var(--brush) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, var(--panel-a), var(--panel-b) 55%, var(--panel-c));
  border: 1px solid var(--edge); border-radius: 14px;
  box-shadow: inset 0 1px 0 var(--bevel-hi), inset 0 -1px 0 var(--bevel-lo), 0 10px 26px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.04);
}
body.ed-page.day-mode .jam-card, body.ed-page.day-mode .ed-bar, body.ed-page.day-mode .ed-timeline { box-shadow: inset 0 1px 0 var(--bevel-hi), inset 0 -1px 0 var(--bevel-lo), 0 10px 24px rgba(40,46,60,.22); }
body.ed-page .jam-card { color: var(--ink); padding: 20px 22px; }
body.ed-page .jam-card h2, body.ed-page .jam-card h3 { color: var(--ink); text-transform: uppercase; letter-spacing: .12em; font-size: 17px; text-shadow: 0 -1px 0 rgba(0,0,0,.7); }
body.ed-page.day-mode .jam-card h2, body.ed-page.day-mode .jam-card h3 { text-shadow: 0 1px 0 rgba(255,255,255,.9); }
body.ed-page .jam-card h2 { font-size: 19px; display: flex; align-items: center; gap: 10px; }
body.ed-page .jam-card h2::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--jc); box-shadow: 0 0 6px var(--jc), 0 0 14px rgba(25,230,255,.6); }
body.ed-page .jam-card p, body.ed-page .jam-tip, body.ed-page .jam-meta { color: var(--sub); }
body.ed-page a { color: var(--jc); }
body.ed-page.day-mode a { color: #0a8ea8; }

/* ---------- header strip ---------- */
body.ed-page .topbar.ed-top {
  background: repeating-linear-gradient(90deg, var(--brush) 0 1px, transparent 1px 3px), linear-gradient(180deg, var(--panel-a), var(--panel-b));
  border-bottom: 1px solid var(--edge); box-shadow: inset 0 1px 0 var(--bevel-hi), 0 4px 18px rgba(0,0,0,.4);
}
.ed-top { gap: 12px; }
.ed-top .jam-mode { margin-left: 0; }
.ed-titlebox { display: grid; line-height: 1.2; min-width: 0; margin-right: auto; }
.ed-titlebox strong { font-size: 20px; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.ed-titlebox small { color: var(--sub); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-save { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sub); white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.ed-save::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--jc); box-shadow: 0 0 6px var(--jc); }
.ed-save.ed-dirty { color: var(--ink); }
.ed-save.ed-dirty::before { background: var(--jp); box-shadow: 0 0 8px var(--jp); }
body.ed-page .ed-main { max-width: 1480px; margin: 0 auto; padding: 12px 16px 60px; }
body.ed-page .jam-msg { color: var(--jc); text-shadow: 0 0 10px rgba(25,230,255,.45); letter-spacing: .02em; }
body.ed-page.day-mode .jam-msg { color: #5a12c4; text-shadow: none; }
.ed-conflict { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 14px; margin: 0 0 12px; border-radius: 12px; border: 1px solid var(--jg); background: linear-gradient(180deg, rgba(255,200,61,.18), rgba(255,200,61,.06)); font-weight: 700; box-shadow: 0 0 18px rgba(255,200,61,.18); }
.ed-conflict span { flex: 1 1 260px; }
.ed-loading progress, .ed-clean progress, .ed-export progress { margin-top: 10px; }

/* ---------- chrome keys ---------- */
body.ed-page .jam-btn, .ed-ic {
  position: relative; overflow: hidden; color: var(--key-ink); font-weight: 800; letter-spacing: .03em;
  background: linear-gradient(180deg, var(--key-a) 0%, var(--key-b) 48%, var(--key-c) 52%, var(--key-d) 100%);
  border: 1px solid var(--edge); border-radius: 10px;
  box-shadow: inset 0 1px 0 var(--key-gloss), inset 0 -2px 3px rgba(0,0,0,.25), 0 2px 0 rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.3);
  text-shadow: 0 -1px 0 rgba(0,0,0,.5); transition: box-shadow .12s, transform .06s, filter .12s;
}
body.ed-page.day-mode .jam-btn, body.ed-page.day-mode .ed-ic { text-shadow: 0 1px 0 rgba(255,255,255,.8); box-shadow: inset 0 1px 0 var(--key-gloss), inset 0 -2px 3px rgba(0,0,0,.08), 0 2px 0 rgba(60,66,80,.35), 0 4px 10px rgba(40,46,60,.18); }
body.ed-page .jam-btn::before, .ed-ic::before { content: ""; position: absolute; left: 3px; right: 3px; top: 1px; height: 45%; border-radius: 8px 8px 50% 50% / 8px 8px 30% 30%; background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0)); pointer-events: none; }
body.ed-page .jam-btn:hover, .ed-ic:hover { filter: brightness(1.12); border-color: var(--edge); transform: none; }
body.ed-page .jam-btn:active, .ed-ic:active { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(0,0,0,.55), 0 1px 0 rgba(0,0,0,.3); }
body.ed-page .jam-btn:focus-visible, .ed-ic:focus-visible { outline: 2px solid var(--jc); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(25,230,255,.25), 0 0 14px rgba(25,230,255,.5); }
body.ed-page .jam-btn[disabled], .ed-ic[disabled] { opacity: .45; filter: saturate(.5); cursor: default; }
/* anodized primary */
body.ed-page .jam-primary, .ed-play {
  color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.55) !important;
  background: linear-gradient(180deg, #5df0ff 0%, #12b9d6 46%, #6a1fe0 54%, #8a2bff 100%) !important;
  border-color: #2a0b66 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 2px 0 rgba(0,0,0,.4), 0 0 16px rgba(25,230,255,.35), 0 0 22px rgba(138,43,255,.25) !important;
}
body.ed-page .jam-del { color: var(--key-ink); }
body.ed-page .jam-del::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: var(--jp); box-shadow: 0 0 6px var(--jp); }

/* ---------- toolbar / transport ---------- */
.ed-bar { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 12px 22px; margin: 0 0 12px; }
.ed-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-right: 16px; border-right: 1px solid var(--line); box-shadow: 1px 0 0 rgba(255,255,255,.04); }
body.ed-page.day-mode .ed-group { box-shadow: 1px 0 0 rgba(255,255,255,.8); }
.ed-group:last-child { border-right: 0; padding-right: 0; box-shadow: none !important; }
.ed-ic { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 54px; min-height: 52px; padding: 4px 8px; cursor: pointer; font: inherit; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.ed-ic svg { width: 22px; height: 22px; fill: currentColor; stroke: currentColor; filter: drop-shadow(0 -1px 0 rgba(0,0,0,.4)); }
body.ed-page.day-mode .ed-ic svg { filter: drop-shadow(0 1px 0 rgba(255,255,255,.9)); }
.ed-ic svg[fill="none"] { fill: none; }
.ed-play { min-width: 66px; }
.ed-play svg { filter: drop-shadow(0 0 4px rgba(255,255,255,.6)) !important; }
.ed-play .i-pause { display: none; }
.ed-play.playing .i-play { display: none; }
.ed-play.playing .i-pause { display: block; }
.ed-play.playing { animation: ed-pulse 1.2s ease-in-out infinite; }
@keyframes ed-pulse { 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 2px 0 rgba(0,0,0,.4), 0 0 26px rgba(25,230,255,.7), 0 0 34px rgba(138,43,255,.45); } }
@media (prefers-reduced-motion: reduce) { .ed-play.playing { animation: none; } }
/* LED on toggle keys: cyan for the click, gold for loop */
.ed-toggle::after { content: ""; position: absolute; top: 5px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: rgba(0,0,0,.45); box-shadow: inset 0 1px 1px rgba(0,0,0,.6); }
.ed-toggle.on::after { background: var(--jc); box-shadow: 0 0 5px var(--jc), 0 0 10px rgba(25,230,255,.8); }
#ed-loop.on { color: var(--jg); }
#ed-loop.on::after { background: var(--jg); box-shadow: 0 0 5px var(--jg), 0 0 10px rgba(255,200,61,.8); }
body.ed-page.day-mode #ed-loop.on { color: #8a6400; }
/* LCD time display */
.ed-clock {
  position: relative; display: grid; justify-items: end; padding: 5px 14px 4px; min-width: 128px; border-radius: 8px;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px), radial-gradient(120% 140% at 50% 0%, #0e2a33, #04121a 70%);
  border: 1px solid #000; box-shadow: inset 0 2px 8px rgba(0,0,0,.9), inset 0 0 0 1px rgba(25,230,255,.12), 0 1px 0 var(--bevel-hi);
  font-variant-numeric: tabular-nums; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.ed-clock span { font-size: 24px; font-weight: 800; line-height: 1.05; color: #7ff3ff; letter-spacing: .06em; text-shadow: 0 0 4px #19e6ff, 0 0 12px rgba(25,230,255,.75); }
.ed-clock small { font-size: 12.5px; color: #a66bff; letter-spacing: .08em; text-shadow: 0 0 6px rgba(138,43,255,.9); }
/* small engraved labels */
.ed-field { display: grid; gap: 3px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--sub); }
body.ed-page main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]), body.ed-page main select {
  background: linear-gradient(180deg, rgba(0,0,0,.12), transparent 40%), var(--well); color: var(--well-ink); border: 1px solid var(--edge); border-radius: 8px; box-sizing: border-box;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.55), 0 1px 0 var(--bevel-hi); font-weight: 700;
}
body.ed-page.day-mode main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]), body.ed-page.day-mode main select { box-shadow: inset 0 2px 4px rgba(40,46,60,.25), 0 1px 0 #fff; }
body.ed-page main input:focus, body.ed-page main select:focus { outline: 2px solid var(--jc); outline-offset: 1px; box-shadow: 0 0 12px rgba(25,230,255,.45) !important; }
body.ed-page .ed-field select, body.ed-page .ed-field input:not([type=range]) { min-height: 40px; font-size: 16px; padding: 0 8px; }
.ed-bpm input { width: 80px !important; font-family: ui-monospace, Menlo, Consolas, monospace; color: #19e6ff !important; text-shadow: 0 0 6px rgba(25,230,255,.6); background: #04121a !important; }
body.ed-page.day-mode .ed-bpm input { color: #7ff3ff !important; }
.ed-master { min-width: 120px; }
.ed-mastergrp { flex: 1 1 200px; flex-wrap: nowrap !important; }

/* ---------- LED meters ---------- */
.ed-meter { flex: 1 1 100px; min-width: 70px; align-self: center; display: grid; gap: 4px; padding: 5px 6px; border-radius: 6px; background: repeating-linear-gradient(90deg, rgba(25,230,255,.10) 0 4px, transparent 4px 5px) 6px 5px / calc(100% - 12px) calc(100% - 10px) no-repeat, #050608; border: 1px solid #000; box-shadow: inset 0 2px 6px rgba(0,0,0,.9), 0 1px 0 var(--bevel-hi); }
.ed-meter > div { height: 8px; width: 0; border-radius: 2px; transition: width .05s linear;
  background: repeating-linear-gradient(90deg, transparent 0 4px, rgba(0,0,0,.75) 4px 5px), linear-gradient(90deg, #19e6ff, #19e6ff 55%, #8a2bff 85%, #a66bff);
  box-shadow: 0 0 6px rgba(25,230,255,.7), 0 0 12px rgba(138,43,255,.35); }
.ed-meter > div.ed-clip-hot { background: repeating-linear-gradient(90deg, transparent 0 4px, rgba(0,0,0,.75) 4px 5px), linear-gradient(90deg, #19e6ff, #8a2bff 70%, #ffffff); box-shadow: 0 0 10px #8a2bff, 0 0 18px rgba(138,43,255,.8); }

/* ---------- faders (range inputs) ---------- */
body.ed-page main input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; min-height: 26px; height: 26px; padding: 0; border: 0; box-shadow: none; cursor: pointer; --fill: 50%; }
body.ed-page main input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, rgba(25,230,255,.85), rgba(138,43,255,.85)) 0 0 / var(--fill) 100% no-repeat, #050608; box-shadow: inset 0 1px 3px rgba(0,0,0,.9), 0 1px 0 var(--bevel-hi); }
body.ed-page main input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: #050608; box-shadow: inset 0 1px 3px rgba(0,0,0,.9), 0 1px 0 var(--bevel-hi); }
body.ed-page main input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #19e6ff, #8a2bff); box-shadow: 0 0 6px rgba(25,230,255,.6); }
body.ed-page main input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 24px; margin-top: -9px; border-radius: 3px; border: 1px solid #000;
  background: linear-gradient(90deg, transparent 6px, #111 6px 8px, transparent 8px), linear-gradient(180deg, #ffffff, #c4c8d0 45%, #8b909b 55%, #e2e4e9);
  box-shadow: 0 2px 4px rgba(0,0,0,.6), inset 0 1px 0 #fff; }
body.ed-page main input[type="range"]::-moz-range-thumb { width: 12px; height: 22px; border-radius: 3px; border: 1px solid #000;
  background: linear-gradient(90deg, transparent 5px, #111 5px 7px, transparent 7px), linear-gradient(180deg, #ffffff, #c4c8d0 45%, #8b909b 55%, #e2e4e9);
  box-shadow: 0 2px 4px rgba(0,0,0,.6); }
body.ed-page main input[type="range"]:focus-visible { outline: 2px solid var(--jc); outline-offset: 2px; box-shadow: none !important; }

/* ---------- timeline + channel strips ---------- */
.ed-timeline { display: grid; grid-template-columns: 228px minmax(0, 1fr); overflow: hidden; padding: 0; background: #050608; }
.ed-heads { border-right: 1px solid #000; box-shadow: 1px 0 0 var(--bevel-hi); background: repeating-linear-gradient(90deg, var(--brush) 0 1px, transparent 1px 3px), linear-gradient(90deg, var(--panel-b), var(--panel-a) 50%, var(--panel-b)); }
.ed-heads-top { height: 30px; box-sizing: border-box; padding: 8px 12px; font-size: 10.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--sub); border-bottom: 1px solid #000; background: linear-gradient(180deg, var(--panel-a), var(--panel-c)); }
.ed-head { position: relative; box-sizing: border-box; overflow: hidden; padding: 6px 10px 6px 14px; display: grid; gap: 4px; align-content: center; border-bottom: 1px solid rgba(0,0,0,.6); box-shadow: inset 0 1px 0 var(--bevel-hi); }
.ed-head::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 4px; border-radius: 2px; background: var(--jc); box-shadow: 0 0 6px var(--jc), 0 0 12px rgba(25,230,255,.6); }
.ed-head:nth-child(odd)::before { background: var(--jp); box-shadow: 0 0 6px var(--jp), 0 0 12px rgba(138,43,255,.6); }
.ed-head.ed-guide::before { background: var(--jc); }
.ed-head-add::before { display: none; }
.ed-head-add { box-shadow: none; border-bottom: 0; }
.ed-head-top { display: flex; gap: 4px; align-items: center; }
body.ed-page main .ed-head .ed-name { min-height: 30px; height: 30px; font-size: 14px; font-weight: 800; padding: 0 8px; flex: 1 1 auto; min-width: 0; letter-spacing: .02em; }
body.ed-page .ed-ms { min-height: 30px !important; height: 30px; min-width: 30px; padding: 0 !important; font-size: 13px !important; border-radius: 7px !important; flex: 0 0 auto !important; }
body.ed-page .ed-ms.jam-on { color: #04121a !important; text-shadow: none !important; background: radial-gradient(circle at 50% 35%, #c8fbff, #19e6ff 60%, #0aa7c2) !important; box-shadow: 0 0 10px #19e6ff, inset 0 1px 0 #fff !important; }
body.ed-page .ed-ms.jam-solo.jam-on { color: #fff !important; background: radial-gradient(circle at 50% 35%, #b98aff, #8a2bff 60%, #5a12c4) !important; box-shadow: 0 0 10px #8a2bff, inset 0 1px 0 rgba(255,255,255,.7) !important; }
.ed-head-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.ed-mini { display: grid; grid-template-columns: auto 1fr; gap: 5px; align-items: center; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sub); }
.ed-mini input { width: 100%; min-width: 0; }
/* rotary pan knob: the range input sits invisibly on top, the knob turns with it */
.ed-pan { grid-template-columns: auto 30px; position: relative; }
.ed-knob { position: relative; width: 28px; height: 28px; border-radius: 50%; pointer-events: none; transform: rotate(var(--a, 0deg));
  background: conic-gradient(from 200deg, #f4f5f8, #8b909b, #e7e9ee, #6d727d, #f4f5f8, #9aa0ac, #f4f5f8);
  border: 1px solid #000; box-shadow: 0 3px 5px rgba(0,0,0,.6), inset 0 0 0 3px rgba(0,0,0,.18), inset 0 1px 1px #fff; }
.ed-knob::after { content: ""; position: absolute; left: 50%; top: 3px; width: 3px; height: 9px; margin-left: -1.5px; border-radius: 2px; background: var(--jc); box-shadow: 0 0 5px var(--jc); }
body.ed-page main .ed-pan input[type="range"] { position: absolute; right: -2px; top: 50%; width: 34px; height: 34px; margin-top: -17px; opacity: 0; }
body.ed-page .ed-addtrack { min-height: 32px !important; font-size: 12px !important; padding: 0 12px !important; flex: 0 0 auto !important; text-transform: uppercase; letter-spacing: .1em; }
.ed-scroll { position: relative; overflow-x: auto; overflow-y: hidden; touch-action: pan-y; scrollbar-color: #4a4f5a #050608; }
.ed-spacer { position: absolute; top: 0; left: 0; height: 1px; pointer-events: none; }
.ed-canvas { position: sticky; left: 0; display: block; user-select: none; -webkit-user-select: none; }
.ed-hint { color: var(--sub); font-size: 13px; letter-spacing: .02em; margin: 8px 4px 16px; }

/* ---------- panels ---------- */
.ed-panels { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ed-none { color: var(--sub); }
.ed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 18px; margin-bottom: 14px; padding: 12px; border-radius: 10px; background: rgba(0,0,0,.18); box-shadow: inset 0 2px 6px rgba(0,0,0,.35), 0 1px 0 var(--bevel-hi); }
body.ed-page.day-mode .ed-grid { background: rgba(255,255,255,.35); box-shadow: inset 0 2px 5px rgba(40,46,60,.18), 0 1px 0 #fff; }
.ed-grid label, .ed-strength { display: grid; gap: 3px; font-weight: 800; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--sub); }
.ed-val { font-weight: 800; font-size: 15px; letter-spacing: .03em; text-transform: none; color: #7ff3ff; font-family: ui-monospace, Menlo, Consolas, monospace; text-shadow: 0 0 6px rgba(25,230,255,.55); font-variant-numeric: tabular-nums; }
body.ed-page.day-mode .ed-val { color: #5a12c4; text-shadow: none; }
.ed-clean { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
body.ed-page .jam-card .ed-clean h3 { margin-top: 0; color: var(--jc); text-shadow: 0 0 10px rgba(25,230,255,.55); }
body.ed-page.day-mode .jam-card .ed-clean h3 { color: #5a12c4; text-shadow: 0 1px 0 #fff; }
body.ed-page .jam-check { color: var(--ink); }
body.ed-page .jam-check input { accent-color: var(--jc); }
.ed-side { display: grid; gap: 0; }
.ed-export .ed-field { margin-bottom: 10px; }
body.ed-page progress { accent-color: var(--jc); filter: drop-shadow(0 0 4px rgba(25,230,255,.6)); }
.ed-finished, .ed-takes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ed-finished li { padding: 10px 12px; border-radius: 10px; display: grid; gap: 6px; background: rgba(0,0,0,.2); border: 1px solid rgba(0,0,0,.5); box-shadow: inset 0 1px 0 var(--bevel-hi); }
body.ed-page.day-mode .ed-finished li { background: rgba(255,255,255,.4); border-color: rgba(60,66,80,.25); }
.ed-fin-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; }
.ed-fin-top small { color: var(--sub); }
.ed-finished audio { width: 100%; height: 38px; }
body.ed-page .ed-finished .jam-btn { min-height: 38px; font-size: 14px; }
.ed-takes { margin-top: 12px; }
.ed-takes li { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line); }
.ed-takes li div { display: grid; min-width: 0; }
.ed-takes small { color: var(--sub); font-size: 13px; }
body.ed-page .ed-takes .jam-btn { min-height: 38px; font-size: 14px; padding: 0 12px; flex: 0 0 auto; }
body.ed-page .ed-savebtn { min-height: 40px; padding: 0 14px; font-size: 14px; }
body.ed-page .site-footer { color: var(--sub); }

/* keep [hidden] hidden even where a display rule is set */
body.ed-page [hidden] { display: none !important; }

@media (max-width: 1000px) {
  .ed-panels { grid-template-columns: 1fr; }
  .ed-group { border-right: 0; padding-right: 0; box-shadow: none !important; }
}
@media (max-width: 640px) {
  body.ed-page .ed-main { padding: 8px 8px 50px; }
  .ed-top .jam-back, .ed-save { display: none; }
  .ed-titlebox strong { font-size: 16px; }
  body.ed-page .ed-top .jam-mode, body.ed-page .ed-savebtn { min-height: 38px; padding: 0 10px; font-size: 13px; flex: 0 0 auto; }
  .ed-bar { gap: 6px; padding: 10px 14px; }
  .ed-group { gap: 4px; }
  .ed-ic { min-width: 44px; min-height: 44px; padding: 2px 4px; }
  .ed-ic span { display: none; }
  .ed-clock { min-width: 100px; padding: 3px 8px; }
  .ed-clock span { font-size: 19px; }
  .ed-bpm input { width: 64px !important; }
  .ed-mastergrp { flex-basis: 100%; }
  .ed-timeline { grid-template-columns: 140px minmax(0, 1fr); }
  .ed-head { padding: 3px 5px 3px 12px; gap: 2px; }
  body.ed-page main .ed-head .ed-name { font-size: 12px; min-height: 26px; height: 26px; padding: 0 4px; }
  body.ed-page .ed-ms { min-height: 26px !important; height: 26px; min-width: 26px; font-size: 12px !important; }
  .ed-head-row { gap: 6px; }
  .ed-mini { font-size: 9px; gap: 3px; }
  .ed-knob { width: 24px; height: 24px; }
  .ed-pan { grid-template-columns: auto 24px; }
  body.ed-page main .ed-mini input[type="range"] { min-height: 22px; height: 22px; }
  .ed-hint { font-size: 12px; }
  body.ed-page .jam-card { padding: 16px; }
}

/* ---------- Amp Room add-on: track FX button, Amp / Vocal Preamp slot and insert rack (cards and knobs live in amp.css) ---------- */
.ed-fxbtn { min-height: 34px !important; padding: 0 10px !important; font-size: 12px !important; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.ed-fxbtn.ed-fx-lit { border-color: #ffc83d !important; box-shadow: 0 0 8px rgba(255,200,61,.45); }
.ed-fx { margin-bottom: 18px; }
.ed-fx-top { display: flex; align-items: center; gap: 12px; }
.ed-fx-top h2 { margin-right: auto !important; }
.ed-slot, .ed-rack { padding: 12px 0 4px; }
.ed-rack { border-top: 1px solid var(--line); margin-top: 10px; }
.ed-slot-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ed-slot-top h3 { margin: 0 auto 0 0 !important; }
.ed-slot-on.jam-on { border-color: #19e6ff !important; }
.ed-ab { display: inline-flex; border-radius: 12px; overflow: hidden; border: 1px solid var(--edge); }
.ed-ab .jam-btn { border-radius: 0; border: 0; min-width: 52px; font-size: 18px; font-weight: 900; }
.ed-ab .jam-on { color: #0b0d12 !important; background: linear-gradient(180deg, #fff1c2, #ffc83d) !important; }
.ed-chain { display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 12px 0; }
.ed-headcard { width: 300px; }
.ed-slot-preset { max-width: 220px; }
.ed-addfx select { max-width: 240px; }
@media (max-width: 640px) { .ed-headcard { width: 100%; } .ed-chain .mk-pedal { width: calc(50% - 6px); box-sizing: border-box; } .ed-chain .ed-headcard { width: 100%; } }
body.ed-page .ed-fx select { width: auto; min-width: 200px; max-width: 280px; }
.ed-chain .ed-headcard { width: 380px; }