/* =============================================================================
   Engine skins
   ============================================================================= */
.skin-holder { max-width: 1320px; margin: 0 auto; }
.skin { border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px #000; }

/* Shared section style */
.sk-sec { padding: 10px 12px 12px; border-radius: 10px; }
.sk-sec-title { margin: 0 0 10px; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--sk-title, #e8e2d2); display: flex; align-items: center; gap: 10px; }
.sk-sec-title::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .3; }
.sk-sec-body { display: flex; flex-wrap: wrap; gap: 14px 10px; align-items: flex-start; }
.sk-drawer { display: flex; flex-wrap: wrap; gap: 12px; padding: 14px; background: #121316; border-top: 1px solid #000; }
.sk-drawer:empty { display: none; }
.sk-drawer .sk-sec { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); flex: 1 1 280px; }
.sk-drawer .ctl-label { --sk-label: #cfcac0; }

.sk-nameplate { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 14px 22px; }
.sk-brand { font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: .1em; }
.sk-model { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: .35em; opacity: .75; }
.sk-sound { margin-left: auto; font-family: var(--font-lcd); font-size: 22px; }

.sk-lcd { font-family: var(--font-lcd); font-size: 22px; line-height: 1.05; padding: 8px 12px; border-radius: 4px; min-width: 220px; border: 2px solid #000;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.6); white-space: nowrap; overflow: hidden; }
.sk-lcd-line { min-height: 1em; overflow: hidden; text-overflow: ellipsis; }
.lcd-green { background: linear-gradient(#b9d47a, #9dbb5a); color: #1d2a0c; }
.lcd-amber { background: #120a02; color: #ffb347; text-shadow: 0 0 6px rgba(255,179,71,.5); }
.lcd-red { background: #140303; color: #ff4b3a; text-shadow: 0 0 8px rgba(255,75,58,.6); letter-spacing: .08em; }
.lcd-blue { background: linear-gradient(#0d2a5c, #0a1f45); color: #cfe3ff; text-shadow: 0 0 6px rgba(140,190,255,.5); }

/* ---------------------------------------------------------------- VB3-II (tonewheel) */
.skin-vb3 { background: #2a160b; --sk-label: #f1e6d0; --sk-title: #f1d9a6; }
.hm-plate { background: linear-gradient(#5a3520, #3b2010); border-bottom: 3px solid #1a0d05; color: #f4e3c3; }
.hm-plate .sk-brand { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 32px; letter-spacing: .02em; background: linear-gradient(#fff, #c8ccd2 50%, #8d9198); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hm-plate .sk-sound { color: #ffd38a; }
.hm-wood { padding: 0 22px 18px; background:
  repeating-linear-gradient(92deg, rgba(0,0,0,.12) 0 3px, transparent 3px 9px),
  repeating-linear-gradient(88deg, rgba(255,210,150,.06) 0 2px, transparent 2px 14px),
  linear-gradient(#6b3a1d, #4a2511); }
.hm-panel { background: linear-gradient(#141010, #0a0807); border-radius: 0 0 10px 10px; padding: 16px 18px 18px; box-shadow: inset 0 6px 14px rgba(0,0,0,.8); border-top: 4px solid #c9ccd2; }
.hm-drawbars { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; }
.hm-bank { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 12px 6px; border-radius: 8px; background: linear-gradient(#1e1814, #120e0c); box-shadow: inset 0 0 0 1px #2e241c; }
.hm-bank-title { font-family: var(--font-display); font-weight: 700; letter-spacing: .3em; font-size: 12px; color: #d9c9a8; }
.hm-bars { display: flex; gap: 4px; padding-left: 10px; }
.hm-tabs { display: flex; flex-wrap: wrap; gap: 14px 10px; justify-content: center; align-items: flex-end; margin-top: 18px; padding-top: 16px; border-top: 1px solid #2c221a; }
.hm-drawer { background: linear-gradient(#2a160b, #1c0e06); }
.hm-drawer .sk-sec { background: rgba(0,0,0,.25); border-color: rgba(255,200,140,.08); }

/* ---------------------------------------------------------------- Combo F */
.skin-far { background: #111; --sk-label: #f4f0e8; --sk-title: #ffd2b8; }
.cf-top { background: linear-gradient(#ef3d26, #b8200f); border-bottom: 6px solid #e6e8ea; box-shadow: inset 0 -2px 0 #8c9095; }
.cf-plate { color: #fff; }
.cf-plate .sk-brand { font-style: italic; letter-spacing: .02em; font-size: 32px; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.cf-plate .sk-sound { color: #fff2ca; }
.cf-panel { padding: 20px 22px; background: linear-gradient(#2b2b2d, #1a1a1c); }
.cf-tabs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 14px; background: #0b0b0c; border-radius: 6px; box-shadow: inset 0 3px 8px #000; }
.cf-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.cf-sec { background: rgba(255,255,255,.04); flex: 1 1 220px; }
.cf-drawer { background: #161617; }

/* ---------------------------------------------------------------- Combo V */
.skin-vox { background: #222; --sk-label: #222; --sk-title: #333; --sk-value: #a3340f; }
.cv-top { background: linear-gradient(#ff6a2a, #e24c12); }
.cv-plate { color: #1a1a1a; }
.cv-plate .sk-brand { font-weight: 700; letter-spacing: .28em; }
.cv-plate .sk-sound { color: #fff; }
.cv-panel { display: flex; flex-wrap: wrap; gap: 26px; justify-content: center; align-items: flex-start; padding: 22px; background: linear-gradient(#cfd2d6, #a9adb3); border-top: 2px solid #f2f2f2; }
.cv-bars { display: flex; gap: 10px; padding: 14px 18px 6px; background: linear-gradient(#e9ebee, #bfc3c8); border-radius: 6px; box-shadow: inset 0 2px 6px rgba(0,0,0,.35); }
.cv-bars .drawbar { --sk-label: #111; }
.cv-bars .db-marks { color: #333; }
.cv-side { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; max-width: 420px; }
.cv-drawer { background: #2a2a2b; }
.cv-drawer .sk-sec { --sk-title: #ffb08a; --sk-label: #e9e6e0; --sk-value: #ffb26b; }

/* ---------------------------------------------------------------- String machine */
.skin-str { background: #3a2110; }
.sm-case { padding: 18px; background:
  repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 2px, transparent 2px 11px),
  linear-gradient(#8a5128, #5a3016); }
.sm-plate { background: #1f1712; border-radius: 8px 8px 0 0; color: #ffcf8a; }
.sm-plate .sk-brand { letter-spacing: .25em; font-size: 24px; }
.sm-panel { background: linear-gradient(#2a201a, #17110d); border-radius: 0 0 8px 8px; padding: 18px 22px 22px; display: flex; gap: 28px; flex-wrap: wrap; align-items: center; justify-content: center; --sk-label: #f4dfbd; }
.sm-faders { display: flex; gap: 6px; padding: 10px 12px; background: #0e0a08; border-radius: 6px; box-shadow: inset 0 2px 6px #000; }
.sm-buttons { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------- Pipe organ */
.skin-pip { background: #1c120b; --sk-label: #f3e6c8; --sk-title: #e8cf8f; }
.po-crest { height: 90px; background: linear-gradient(#0f0a06, #2b1c10); display: flex; align-items: flex-end; justify-content: center; padding: 0 30px; }
.po-pipes { display: flex; align-items: flex-end; gap: 6px; height: 100%; width: min(720px, 100%); }
.po-pipes span { flex: 1; background: linear-gradient(90deg, #6f7378, #f1f2f4 40%, #9ea2a8 70%, #5f6368); border-radius: 40% 40% 0 0 / 8% 8% 0 0; position: relative; }
.po-pipes span::after { content: ''; position: absolute; left: 20%; right: 20%; bottom: 14%; height: 6px; background: #1c120b; border-radius: 50%; }
.po-plate { background: linear-gradient(#3b2414, #24160c); color: #e9cd8a; justify-content: center; text-align: center; border-top: 2px solid #8a6538; border-bottom: 2px solid #8a6538; }
.po-plate .sk-brand { font-family: 'Playfair Display', Georgia, serif; font-style: italic; letter-spacing: .06em; }
.po-console { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; padding: 26px 22px;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 2px, transparent 2px 10px), linear-gradient(#5a3a20, #3a2412); }
.po-jamb { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; align-content: start; justify-items: center;
  padding: 16px; border-radius: 10px; background: linear-gradient(#2a1a0d, #1c1108); box-shadow: inset 0 4px 12px rgba(0,0,0,.7), 0 0 0 2px #8a6538; }
.po-center { display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 200px; }
.po-music-desk { font-family: 'Playfair Display', Georgia, serif; font-style: italic; color: #2a1a0d; background: linear-gradient(#fbf3e1, #e5d6b4); padding: 18px 20px; border-radius: 4px; box-shadow: 0 6px 14px rgba(0,0,0,.6); min-width: 180px; text-align: center; font-size: 18px; }
.po-tablets { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 340px; }
.po-drawer { background: #1c120b; }
@media (max-width: 900px) { .po-console { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Orchestra console */
.skin-orc { background: #18191b; --sk-label: #cfd3d8; --sk-value: #7ee6a2; }
.oc-plate { background: linear-gradient(#2c2e33, #1d1e22); color: #e8ecf1; border-bottom: 1px solid #000; }
.oc-plate .sk-brand { letter-spacing: .3em; }
.oc-plate .sk-sound { color: #7ee6a2; }
.oc-console { display: flex; gap: 6px; padding: 16px; overflow-x: auto; background: linear-gradient(#26282c, #1a1b1e); }
.oc-strips { display: flex; gap: 6px; }
.oc-strip { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 6px 12px; width: 104px; flex: none;
  background: linear-gradient(#32353a, #24262a); border-radius: 6px; box-shadow: inset 0 0 0 1px #3d4046, 0 2px 6px rgba(0,0,0,.5); }
.oc-strip-name { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #111; background: #e8ecf1; border-radius: 3px; padding: 3px 4px; width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-knobs { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.oc-knobs .knob { width: 92px; }
.oc-knobs .ctl-label { font-size: 10px; }
.oc-knobs .ctl-value { font-size: 14px; }
.oc-master { background: linear-gradient(#4a2a20, #2a1814); box-shadow: inset 0 0 0 1px #6a3a2a; margin-left: 10px; }
.oc-master .oc-strip-name { background: #ff6a3a; }

/* ---------------------------------------------------------------- Tine piano */
.skin-rho { background: #121212; --sk-label: #1a1a1a; --sk-title: #333; --sk-value: #b22222; }
.tp-lid { display: flex; align-items: baseline; gap: 18px; padding: 18px 26px 10px; background:
  radial-gradient(circle at 20% 0, rgba(255,255,255,.06), transparent 50%),
  repeating-radial-gradient(circle at 30% 40%, #1a1a1a 0 1px, #111 1px 3px); border-bottom: 3px solid #050505; }
.tp-logo { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 600; font-size: 34px; color: #e9ecef; letter-spacing: .02em; }
.tp-sound { margin-left: auto; font-family: var(--font-lcd); font-size: 22px; color: #e0d6c0; }
.tp-panel { display: flex; flex-wrap: wrap; gap: 14px; padding: 18px 22px; background: linear-gradient(#e8eaed, #b7bbc1 60%, #9aa0a7); box-shadow: inset 0 2px 0 #fff, inset 0 -2px 0 #6c7179; }
.tp-sec { flex: 1 1 240px; background: rgba(255,255,255,.25); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.tp-felt { height: 14px; background: linear-gradient(#9a1515, #5c0b0b); }

/* ---------------------------------------------------------------- Reed piano */
.skin-wur { background: #e9dcc0; }
.rp-body { background: linear-gradient(#f2e6cb, #ddc9a2); padding-bottom: 18px; }
.rp-head { display: flex; align-items: baseline; gap: 16px; padding: 16px 26px; background: linear-gradient(#6b4325, #4b2c16); color: #f4e4c4; }
.rp-logo { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 600; font-size: 30px; }
.rp-model { margin-left: auto; font-family: var(--font-lcd); font-size: 22px; color: #ffd38a; }
.rp-panel { display: flex; flex-wrap: wrap; gap: 14px; padding: 18px 22px 0; --sk-label: #3b2614; --sk-title: #6b4325; --sk-value: #8a2a10; }
.rp-sec { flex: 1 1 260px; background: rgba(255,255,255,.35); box-shadow: inset 0 0 0 1px rgba(107,67,37,.25), 0 2px 0 rgba(255,255,255,.6); }

/* ---------------------------------------------------------------- Electric grand */
.skin-egp { background: #0b0b0b; }
.eg-strip { display: flex; align-items: baseline; gap: 18px; padding: 16px 26px; background: linear-gradient(#f3f4f6, #b9bdc3 50%, #e4e6e9); border-bottom: 3px solid #000; position: relative; overflow: hidden; }
.eg-logo { font-family: var(--font-display); font-weight: 700; letter-spacing: .35em; font-size: 22px; color: #111; }
.eg-sound { margin-left: auto; font-family: var(--font-lcd); font-size: 22px; color: #a01818; z-index: 1; }
.eg-strings { position: absolute; right: -40px; top: 0; bottom: 0; width: 45%; background: repeating-linear-gradient(100deg, transparent 0 7px, rgba(120,90,40,.25) 7px 8px); }
.eg-panel { display: flex; flex-wrap: wrap; gap: 14px; padding: 20px 22px 24px; background: linear-gradient(#1b1b1c, #090909); --sk-label: #e9e9e9; --sk-title: #c9ccd2; --sk-value: #ff6a5a; }
.eg-sec { flex: 1 1 240px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }

/* ---------------------------------------------------------------- Clavi */
.skin-zd6 { background: #4a2a14; }
.cl-body { padding: 16px; background: repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 2px, transparent 2px 9px), linear-gradient(#a0602c, #6b3b17); }
.cl-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; padding: 20px 24px; background: linear-gradient(#1a1a1a, #0b0b0b); border-radius: 6px; box-shadow: inset 0 3px 8px #000; --sk-label: #eee; --sk-value: #ff8f6a; }
.cl-logo { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 600; font-size: 32px; color: #f2f2f2; display: flex; flex-direction: column; }
.cl-logo small { font-family: var(--font-lcd); font-style: normal; font-size: 18px; color: #ff8f6a; }
.cl-rockers { display: flex; gap: 8px; padding: 12px 14px; background: #000; border-radius: 6px; }
.cl-others { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; flex: 1; min-width: 240px; }
.cl-others .hslider { max-width: 360px; }

/* ---------------------------------------------------------------- Phase-mod E.Piano */
.skin-dx7 { background: #2a201a; }
.fm-body { background: linear-gradient(#3a2d24, #2a1f18); padding-bottom: 18px; }
.fm-top { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; padding: 20px 24px; }
.fm-logo { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: .2em; color: #e9e1d6; display: flex; flex-direction: column; }
.fm-logo small { font-size: 12px; letter-spacing: .4em; color: #b8a99a; }
.fm-top .sk-lcd { min-width: 280px; font-size: 26px; }
.fm-data { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 8px; --sk-label: #e9e1d6; }
.fm-incs { display: flex; gap: 8px; }
.fm-inc { flex: 1; height: 34px; border: 1px solid #000; border-radius: 3px; background: linear-gradient(#5a4d44, #3b3029); color: #e9e1d6; font-family: var(--font-display); font-weight: 700; letter-spacing: .1em; cursor: pointer; }
.fm-inc:active { transform: translateY(1px); }
.fm-stripe { height: 6px; background: linear-gradient(90deg, #2bb3a6 0 25%, #e05a8a 25% 50%, #9aa83a 50% 75%, #e8923a 75%); }
.fm-buttons { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; padding: 18px 24px 0; }
.fm-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 10px; min-height: 64px; border: 1px solid #000; border-radius: 3px; cursor: pointer; text-align: left;
  background: linear-gradient(#4a3d35, #352a23); color: #e9e1d6; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); border-bottom: 4px solid var(--c); }
.fm-btn--teal { --c: #2bb3a6; } .fm-btn--pink { --c: #e05a8a; } .fm-btn--olive { --c: #9aa83a; } .fm-btn--orange { --c: #e8923a; }
.fm-num { font-family: var(--font-lcd); font-size: 18px; color: var(--c); }
.fm-name { font-family: var(--font-display); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.fm-btn.is-sel { background: linear-gradient(#5e4f45, #463830); box-shadow: 0 0 0 2px var(--c), 0 0 14px color-mix(in srgb, var(--c) 50%, transparent); }

/* ---------------------------------------------------------------- MKS rack */
.skin-mks { background: #0e0e0f; padding: 18px 0; }
.rk-unit { display: flex; align-items: stretch; margin: 0 10px; }
.rk-ear { width: 34px; flex: none; background: linear-gradient(90deg, #7d8086, #c9ccd1 50%, #7d8086); display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 18px 0; border-radius: 3px; }
.rk-ear i { width: 12px; height: 20px; border-radius: 6px; background: #18191b; box-shadow: inset 0 1px 2px #000; }
.rk-front { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 18px 22px; background: linear-gradient(#4a4c51, #2e3034 60%, #26282b); border-top: 2px solid #6b6e74; border-bottom: 2px solid #121315; --sk-label: #e7e9ec; --sk-value: #ffb347; }
.rk-brand { font-family: var(--font-display); font-weight: 700; font-size: 32px; letter-spacing: .18em; color: #f2f2f2; display: flex; flex-direction: column; line-height: 1; }
.rk-brand small { font-size: 11px; letter-spacing: .4em; color: #b2b5ba; margin-top: 4px; }
.rk-knobs { display: flex; flex-wrap: wrap; gap: 14px; flex: 1; min-width: 260px; }
.rk-sec { flex: 1 1 220px; background: rgba(0,0,0,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); --sk-title: #d0d3d8; }

/* ---------------------------------------------------------------- Brass */
.skin-trp { background: #2a1a05; }
.br-panel { position: relative; overflow: hidden; background: radial-gradient(800px 300px at 85% 30%, rgba(255,240,180,.35), transparent 60%), linear-gradient(135deg, #f7d77a, #c8952c 45%, #8a5f12 80%, #d9ad48); padding-bottom: 20px; }
.br-plate { color: #2a1a05; }
.br-plate .sk-brand { font-family: 'Playfair Display', Georgia, serif; font-style: italic; letter-spacing: .02em; font-size: 34px; text-shadow: 0 1px 0 rgba(255,255,255,.4); }
.br-plate .sk-sound { color: #3a2404; }
.br-bell { position: absolute; right: -80px; top: -60px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(60,35,0,.35) 0 35%, transparent 36% 52%, rgba(255,255,255,.18) 53% 56%, transparent 57%); pointer-events: none; }
.br-controls { display: flex; flex-wrap: wrap; gap: 14px; padding: 0 22px; position: relative; --sk-label: #2a1a05; --sk-title: #3a2404; --sk-value: #5a1a00; }
.br-sec { flex: 1 1 260px; background: rgba(40,20,0,.18); box-shadow: inset 0 0 0 1px rgba(60,35,0,.3); }

/* ---------------------------------------------------------------- Grand piano */
.skin-acp { background: #050505; }
.gp-body { background: linear-gradient(#141414, #050505); }
.gp-fallboard { display: flex; align-items: baseline; gap: 18px; padding: 22px 26px; background: radial-gradient(900px 140px at 50% 0, rgba(255,255,255,.12), transparent 70%), #0a0a0a; border-bottom: 2px solid #2a2418; }
.gp-logo { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 600; font-size: 34px; background: linear-gradient(#f9e3a3, #b8913c 60%, #f2d68a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gp-sound { margin-left: auto; font-family: var(--font-lcd); font-size: 22px; color: #e8c56a; }
.gp-panel { display: flex; flex-wrap: wrap; gap: 14px; padding: 20px 22px 24px; --sk-label: #e8dcc0; --sk-title: #c9a24b; --sk-value: #e8c56a; }
.gp-sec { flex: 1 1 260px; background: rgba(201,162,75,.05); box-shadow: inset 0 0 0 1px rgba(201,162,75,.18); }

/* ---------------------------------------------------------------- GVA-1 */
.skin-syn { background: #0b0b0c; }
.va-case { display: flex; }
.va-cheek { width: 26px; flex: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 12px), linear-gradient(90deg, #5a2f14, #8a4f24 50%, #5a2f14); }
.va-panel { flex: 1; min-width: 0; padding: 16px; background: linear-gradient(#1f2023, #151618); --sk-label: #e7e7e7; --sk-value: #ffd27a; }
.va-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 4px 6px 16px; border-bottom: 2px solid #e7e7e7; margin-bottom: 14px; }
.va-logo { font-family: var(--font-display); font-weight: 700; font-size: 36px; letter-spacing: .08em; color: #ff3b2e; text-shadow: 0 0 18px rgba(255,59,46,.35); line-height: 1; }
.va-sub { font-family: var(--font-display); font-weight: 600; letter-spacing: .4em; font-size: 12px; color: #bbb; }
.va-head .sk-lcd { margin-left: auto; min-width: 260px; }
.va-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.va-sec { flex: 1 1 200px; border: 1px solid #3a3b40; border-top: 3px solid var(--accent, #ccc); border-radius: 4px; padding: 6px 10px 12px; background: rgba(255,255,255,.02); }
.va-sec-title { margin: 0 0 8px; font-family: var(--font-display); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: 12px; color: var(--accent, #ccc); }
.va-sec-body { display: flex; flex-wrap: wrap; gap: 6px; }
.va-sec .knob { width: 78px; }
.va-sec--env .va-sec-body { gap: 2px; }
.va-sec .sk-sec-title { color: #ccc; }

/* ---------------------------------------------------------------- GSP-01 */
.skin-rom { background: #16181c; }
.sp-unit { background: linear-gradient(#2a2d33, #1b1d21); }
.sp-head { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; padding: 18px 22px; border-bottom: 1px solid #000; box-shadow: 0 1px 0 #3a3e45; position: relative; }
.sp-logo { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: #f2f4f7; letter-spacing: .12em; display: flex; flex-direction: column; line-height: 1; }
.sp-logo small { font-size: 11px; letter-spacing: .35em; color: #8fb6ff; margin-top: 4px; }
.sp-head .sk-lcd { min-width: 300px; }
.sp-wave { flex: 1; min-width: 120px; height: 46px; background: repeating-linear-gradient(90deg, transparent 0 3px, rgba(61,139,255,.6) 3px 4px); -webkit-mask: radial-gradient(ellipse 60% 100% at 50% 50%, #000 30%, transparent 70%); mask: radial-gradient(ellipse 60% 100% at 50% 50%, #000 30%, transparent 70%); opacity: .7; }
.sp-panel { display: flex; flex-wrap: wrap; gap: 14px; padding: 18px 22px 22px; --sk-label: #dfe5ee; --sk-title: #8fb6ff; --sk-value: #8fb6ff; }
.sp-sec { flex: 1 1 260px; background: rgba(61,139,255,.04); box-shadow: inset 0 0 0 1px rgba(143,182,255,.15); }

/* ---------------------------------------------------------------- Generic */
.skin-generic { background: #1a1b1f; }
.gn-plate { background: #24262b; }
.gn-panel { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px; }
.gn-sec { flex: 1 1 260px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); }

/* =============================================================================
   Effects pedalboard
   ============================================================================= */
.pedalboard { display: flex; flex-wrap: wrap; gap: 16px; padding: 22px; border-radius: 14px; justify-content: center;
  background: repeating-linear-gradient(0deg, #141416 0 3px, #1b1b1e 3px 6px); box-shadow: inset 0 0 0 1px #000, 0 24px 60px rgba(0,0,0,.6); }
.fx-unit { --fx: #bbb; position: relative; width: 196px; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 12px 16px; border-radius: 12px 12px 16px 16px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--fx) 92%, #fff) 0%, var(--fx) 40%, color-mix(in srgb, var(--fx) 70%, #000) 100%);
  box-shadow: 0 10px 18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.25); --sk-label: #111; --sk-value: #111; }
.fx-unit--wide { width: 420px; }
.fx-jacks { position: absolute; top: 40px; left: -6px; right: -6px; display: flex; justify-content: space-between; pointer-events: none; }
.fx-jacks i { width: 8px; height: 18px; background: linear-gradient(#999, #444); border-radius: 2px; }
.fx-knobs { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.fx-knobs .knob { width: 82px; }
.fx-knobs .ctl-label { font-size: 11px; }
.fx-knobs .ctl-value { font-size: 15px; color: #000; opacity: .75; }
.fx-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; color: #111; text-align: center; padding: 4px 10px; border: 2px solid rgba(0,0,0,.75); border-radius: 4px; line-height: 1.1; }
.fx-title small { display: block; font-size: 11px; letter-spacing: .1em; opacity: .7; }
.fx-chain-no { position: absolute; top: 8px; left: 10px; font-family: var(--font-lcd); font-size: 18px; color: rgba(0,0,0,.45); }
.fx-unit .stomp { margin-top: auto; }
.fx-unit .ledbtn .ctl-label { --sk-label: #111; }
.fx-master { width: 260px; background: linear-gradient(#cfc6bc, #a59a8e); --sk-label: #111; }
.fx-master .fx-knobs { align-items: flex-end; }
@media (max-width: 520px) { .fx-unit, .fx-unit--wide, .fx-master { width: 100%; } }

/* ---------------------------------------------------------------- Small screens */
@media (max-width: 600px) {
  .skin { border-radius: 10px; }
  .sk-nameplate { padding: 10px 14px; }
  .sk-brand { font-size: 22px !important; }
  .hm-wood { padding: 0 6px 8px; }
  .hm-panel { padding: 10px 4px; }
  .hm-bank { padding: 8px 4px 4px; }
  .hm-bars { gap: 1px; padding-left: 0; }
  .drawbar { width: 33px; }
  .db-slot { width: 30px; }
  .db-footage { font-size: 9.5px; }
  .po-console, .cv-panel, .cf-panel, .tp-panel, .eg-panel, .rp-panel, .gp-panel, .sp-panel { padding: 12px; }
  .knob { width: 80px; }
  .fx-unit--wide { width: 100%; }
}