/* Compact mock: same look as style.css, columns end at the same height, Voice + patch display move to a bottom strip.
   Loaded after style.css. */
#elita1{ gap:4px; padding:4px; }
#title{ display:flex; align-items:center; gap:8px; padding:0 2px; line-height:1.2; }
#title .description{ flex:1; width:auto; text-align:left; font-size:10px; opacity:.75; }
#title .version, #title .date, #title .date_old{ padding:1px 10px; }

/* every panel is a flex column and grows so the three columns end on the same line */
#table-cell01, #table-cell02, #table-cell03{ gap:4px; }
#table-cell01 > div, #table-cell02 > div, #table-cell03 > div, #voice{ display:flex; flex-direction:column; }
#table-cell01 > div, #table-cell02 > div, #table-cell03 > div{ flex:1 1 auto; }
.h2-label{ font-size:12px; line-height:1.35; }
#elita1 .body{ flex:1; justify-content:space-around; padding:3px 6px 4px; gap:3px; }
.lamp img{ width:18px; height:18px; }
.tag{ padding:0 5px; }

/* Oscillators: rows stretch evenly, contents centred */
#oscillators .body{ padding:0; }
#oscillators .osc{ flex:1; margin:0; grid-template-columns:1fr 156px; grid-auto-rows:1fr; }
.osc > *{ padding:3px 6px; display:flex; }
.osc .col{ justify-content:space-around; align-items:center; }
.osc .row{ align-items:center; }
.osc .span{ padding:3px 6px; }
.col.sws{ gap:3px; align-items:flex-start; }
.col.sws .tg{ white-space:nowrap; }

/* LFO */
.lb{ gap:4px; }
.lb .row{ gap:4px; }
.sync{ font-size:9px; opacity:.8; align-self:center; }

/* bottom strip */
#elita1 #bottom{ grid-column:1/-1; display:flex; gap:4px; padding:0; border:0; background:none; }
#elita1 #voice{ flex:0 0 492px; }
#elita1 #patchbox{ flex:1; display:flex; align-items:center; gap:10px; padding:4px 8px; border:1px solid var(--dk); background:var(--panel); font:inherit; color:inherit; }
#lcdbox{ flex:1; align-self:stretch; display:flex; flex-direction:column; justify-content:center; background:var(--lcd); border:1px solid var(--lcd-edge); padding:2px 8px; color:var(--lcdf); font:15px/1.3 monospace; }
#pinfo{ font-size:11px; opacity:.8; }
#voice .row{ justify-content:space-between; }

/* osc labels: identical size, same left edge in both rows */
.osc .tag{ flex:none; width:26px; text-align:center; padding:0; font-size:14px; line-height:22px; }
.osc > :nth-child(1) .row, .osc .o2 > .row:first-child, .osc > .row:first-child{ justify-content:space-between; }
.osc > :nth-child(1){ }
.osc .o2{ align-items:stretch; justify-content:space-around; gap:4px; }
.osc .o2 .row{ width:100%; justify-content:space-between; }
.osc .o2 .row.sw3{ justify-content:space-around; }
/* LFO and Arpeggiator share the same top line / height */
#lfo, #arpeggiator{ flex:0 0 138px !important; }

/* keyboard strip */
#keybar{ grid-column:1/-1; display:flex; gap:4px; border:1px solid var(--dk); background:var(--panel); padding:4px; --bw:20px; }
#kbinfo{ flex:0 0 150px; display:flex; flex-wrap:wrap; align-content:center; align-items:center; justify-content:center; gap:4px 6px; font-size:10px; text-align:center; }
#kbinfo b{ font-size:11px; min-width:72px; text-align:center; background:var(--lcd); color:var(--lcdf); padding:2px 4px; font-family:monospace; }
#kbinfo .sb{ padding:1px 8px; }
#vc{ flex:0 0 100%; font-size:9px; opacity:.8; }
#kb{ position:relative; flex:1; display:flex; height:56px; user-select:none; touch-action:none; }
#kb .key{ display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:0; padding-bottom:2px; font-size:9px; line-height:1.1; color:var(--key-fg); }
#kb .key.w{ flex:1; background:var(--key-w); border:1px solid var(--dk); border-radius:0 0 3px 3px; }
#kb .key.b{ position:absolute; top:0; width:var(--bw); height:60%; background:var(--key-b); border-radius:0 0 2px 2px; z-index:1; color:var(--key-b-fg); font-size:8px; }
#kb .key small{ font-size:8px; opacity:.55; }
#kb .key.on{ background:var(--on); }
#kb .key.on small{ opacity:1; }

/* patch browser */
#pline{ display:flex; justify-content:space-between; gap:8px; }
#pidx{ opacity:.75; font-size:12px; }
#pbtns{ display:grid; grid-template-columns:auto auto; grid-template-rows:1fr 1fr; gap:3px; align-self:stretch; }
#pbtns .btn{ padding:2px 8px; font-size:11px; display:flex; align-items:center; justify-content:center; border:0; font-family:inherit; }
#pnav{ grid-row:1/3; display:flex; flex-direction:column; gap:3px; }
#pnav .btn{ flex:1; padding:0 10px; }
#pbtns > .btn{ grid-column:2; }

/* oscilloscope (outside the panel, under the keyboard) */
#scopebox{ position:relative; width:960px; margin-top:6px; }
#scope{ display:block; width:960px; height:120px; background:var(--lcd); border:1px solid var(--lcd-edge); box-sizing:border-box; }
#scopelbl{ position:absolute; left:8px; top:4px; font:10px monospace; color:var(--lcdf); opacity:.6; }