/* assets/ui.css — Hardware console skin (compact) */
:root{
  --bg0:#0b1018; --bg1:#0e1520;
  --p0:#121a26; --p1:#172234; --p2:#1c2a40;
  --txt:#e7eef7; --mut:rgba(231,238,247,.66);
  --hi:rgba(255,255,255,.06); --lo:rgba(0,0,0,.58);
  --r12:12px; --r16:16px; --gap:14px;
  --shadow:0 18px 50px rgba(0,0,0,.55);
  --inset: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -14px 28px rgba(0,0,0,.35);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; color:var(--txt); overflow:hidden;
  background:
    radial-gradient(1200px 800px at 35% 10%, rgba(70,120,180,.22), transparent 60%),
    radial-gradient(1100px 900px at 75% 30%, rgba(70,200,255,.12), transparent 70%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
body:before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.18; mix-blend-mode:overlay;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025), rgba(255,255,255,.025) 1px, rgba(0,0,0,.02) 2px, rgba(0,0,0,.02) 3px),
    radial-gradient(closest-side at 20% 10%, rgba(255,255,255,.05), transparent 70%),
    radial-gradient(closest-side at 80% 40%, rgba(0,0,0,.20), transparent 65%);
}
.shell{height:100%; padding:16px; display:flex; flex-direction:column; gap:var(--gap)}
.mono{font-family:var(--mono)}
.hdr{
  height:70px; border-radius:var(--r16);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 24%), linear-gradient(180deg, var(--p2), var(--p0));
  box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.06);
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 18px;
}
.hdr:after{content:""; position:absolute; inset:0; pointer-events:none; box-shadow:var(--inset)}
.brand{display:flex; align-items:center; gap:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:900; font-size:14px}
.brand .pot{font-size:22px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.brand .sub{font-weight:800; color:rgba(231,238,247,.60); letter-spacing:.18em; margin-left:8px; font-size:11px}
.hdrRight{display:flex; align-items:center; gap:16px}
.nav{display:flex; gap:10px; background:rgba(0,0,0,.20); border:1px solid rgba(255,255,255,.05); border-radius:999px; padding:6px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05)}
.nav a{color:rgba(231,238,247,.70); text-decoration:none; padding:8px 12px; border-radius:999px; font-weight:800; letter-spacing:.10em; text-transform:uppercase; font-size:11px}
.nav a.active{color:var(--txt); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)), rgba(30,110,180,.18); border:1px solid rgba(90,190,255,.20)}
.hdrStatus{display:flex; align-items:center; gap:10px}
.lamp{width:12px;height:12px;border-radius:999px; background:rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 14px rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.06)}
.lamp.ok{background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,0) 35%), radial-gradient(circle at 40% 40%, rgba(90,255,140,.95), rgba(12,60,30,.95)); border-color: rgba(90,255,140,.35)}
.lamp.warn{background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,0) 35%), radial-gradient(circle at 40% 40%, rgba(255,210,90,.95), rgba(60,40,12,.95)); border-color: rgba(255,210,90,.35)}
.lamp.bad{background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,0) 35%), radial-gradient(circle at 40% 40%, rgba(255,90,110,.95), rgba(60,12,20,.95)); border-color: rgba(255,90,110,.35)}
.module{
  border-radius:var(--r16);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 26%), linear-gradient(180deg, var(--p1), var(--p0));
  border:1px solid rgba(255,255,255,.06); box-shadow:var(--shadow);
  position:relative; overflow:hidden; min-height:0;
}
.module:after{content:""; position:absolute; inset:0; pointer-events:none; box-shadow:var(--inset)}
.mhead{height:48px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; border-bottom:1px solid rgba(255,255,255,.05); text-transform:uppercase; letter-spacing:.10em; font-weight:900; font-size:11px; color:rgba(231,238,247,.82); position:relative; z-index:1}
.mbody{padding:12px 14px 14px; position:relative; z-index:1; min-height:0}
.chip{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.05)}
.sep{height:1px; background:rgba(255,255,255,.06); margin:12px 0}
.kv{display:flex; justify-content:space-between; gap:12px; align-items:center}
.kv .k{color:rgba(231,238,247,.55); font-size:11px; letter-spacing:.10em; text-transform:uppercase; font-weight:900}
.kv .v{color:rgba(231,238,247,.92); font-weight:900}
.badge{display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:999px; background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.05)}
.hint{font-size:12px; color:rgba(231,238,247,.62); line-height:1.45}
.btnrow{display:flex; gap:10px; flex-wrap:wrap}
button{height:42px; padding:0 16px; border-radius:12px; border:1px solid rgba(255,255,255,.10); color:rgba(231,238,247,.90); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22)), rgba(0,0,0,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 24px rgba(0,0,0,.40); font-weight:900; letter-spacing:.10em; text-transform:uppercase; font-size:11px; cursor:pointer}
button:disabled{opacity:.45; cursor:not-allowed}
button.primary{background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 35%), linear-gradient(180deg, rgba(40,140,220,.35), rgba(18,40,70,.50)); border-color: rgba(120,210,255,.25)}
button.warn{background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 35%), linear-gradient(180deg, rgba(240,190,60,.26), rgba(60,40,12,.55)); border-color: rgba(255,210,90,.22)}
button.danger{background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 35%), linear-gradient(180deg, rgba(220,70,90,.28), rgba(60,12,20,.55)); border-color: rgba(255,90,110,.24)}
input[type="text"]{width:100%; height:42px; border-radius:12px; border:1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.16)), rgba(10,14,20,.40); color:var(--txt); padding:0 12px; outline:none; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -10px 18px rgba(0,0,0,.35)}
input[type="text"]:focus{border-color: rgba(95,190,255,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -10px 18px rgba(0,0,0,.35), 0 0 0 3px rgba(95,190,255,.12)}
.consoleMixer,.consoleOperator,.consoleGuest{flex:1; min-height:0; display:grid; grid-template-columns: 1fr 470px; gap:var(--gap)}
.bankWrap{position:relative; min-height:0; height:100%}
.bank{position:absolute; inset:0; padding:12px; display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px; overflow:auto}
.bankEmpty{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; color:rgba(231,238,247,.60); text-align:center}
.strip{border-radius:14px; border:1px solid rgba(255,255,255,.07); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 26%), linear-gradient(180deg, rgba(30,44,66,.80), rgba(14,18,28,.78)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -14px 24px rgba(0,0,0,.40), 0 14px 26px rgba(0,0,0,.45); padding:10px; display:flex; flex-direction:column; gap:10px; user-select:none}
.strip.selected{outline:2px solid rgba(75,179,255,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -14px 24px rgba(0,0,0,.40), 0 0 0 4px rgba(75,179,255,.10), 0 14px 26px rgba(0,0,0,.45)}
.stTop{display:flex; align-items:center; justify-content:space-between; gap:10px}
.stName{display:flex; align-items:center; gap:10px; min-width:0; font-weight:900}
.avatar{width:34px;height:34px;border-radius:999px; border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.25); overflow:hidden; display:flex; align-items:center; justify-content:center; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); flex:0 0 auto}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar .ini{font-weight:1000; font-size:12px; opacity:.9}
.stName span:last-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.stMeta{display:flex; align-items:center; gap:8px; color:rgba(231,238,247,.55); font-size:11px}
.micDot{width:10px;height:10px;border-radius:999px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.10); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 14px rgba(0,0,0,.45)}
.micDot.on{background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,0) 35%), radial-gradient(circle at 40% 40%, rgba(70,255,140,.95), rgba(12,60,30,.95)); border-color: rgba(70,255,140,.35)}
.stMid{display:grid; grid-template-columns: 1fr 92px; gap:10px; align-items:stretch; min-height:170px}
.ledbar{border-radius:12px; border:1px solid rgba(255,255,255,.07); background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.20)), rgba(0,0,0,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -14px 22px rgba(0,0,0,.45); padding:10px; display:grid; grid-template-columns: repeat(7, 1fr); gap:6px; align-content:start}
.seg{height:8px; border-radius:4px; opacity:.22}
.seg.g{background: rgba(70,255,140,.35)} .seg.y{background: rgba(255,210,90,.38)} .seg.r{background: rgba(255,90,110,.40)} .seg.on{opacity:.95}
.vslider{border-radius:12px; border:1px solid rgba(255,255,255,.07); background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.22)), rgba(0,0,0,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -14px 22px rgba(0,0,0,.45); padding:10px; display:flex; flex-direction:column; gap:10px}
.vtrack{position:relative; height:120px; border-radius:10px; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.06); overflow:hidden}
.vticks{position:absolute; inset:0; background: repeating-linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.06) 1px, transparent 1px, transparent 10px); opacity:.35}
.vthumb{position:absolute; left:6px; right:6px; height:22px; border-radius:10px; background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 35%), linear-gradient(180deg, rgba(120,210,255,.35), rgba(18,40,70,.55)); border:1px solid rgba(120,210,255,.25); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 12px 22px rgba(0,0,0,.45)}
.vread{text-align:center; color:rgba(231,238,247,.85); font-weight:1000; font-size:12px}
.muteBtn{height:34px; border-radius:12px; border:1px solid rgba(255,255,255,.10); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22)), rgba(0,0,0,.12); color:rgba(231,238,247,.85); font-weight:1000; letter-spacing:.12em; text-transform:uppercase; font-size:11px}
.muteBtn.on{background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 35%), linear-gradient(180deg, rgba(220,70,90,.28), rgba(60,12,20,.55)); border-color: rgba(255,90,110,.24)}
.profile{display:flex; gap:14px; align-items:center}
.pfp{width:74px;height:74px;border-radius:18px; border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.25); overflow:hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 26px rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.pfp img{width:100%;height:100%;object-fit:cover}
.pfp .ini{font-weight:1000; opacity:.8}
.pmeta{flex:1; min-width:0}
.pmeta .nameRow{display:flex; gap:10px; align-items:center}
.pmeta .nameRow input{flex:1}
.pmeta .small{margin-top:6px; color:rgba(231,238,247,.55); font-size:12px}
.fileBtn{position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center}
.fileBtn input[type="file"]{position:absolute; inset:0; opacity:0; cursor:pointer}
.list{display:flex; flex-direction:column; gap:10px}
.listItem{padding:12px; border-radius:14px; border:1px solid rgba(255,255,255,.07); background:rgba(0,0,0,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px}
.listItem.sel{outline:2px solid rgba(75,179,255,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 4px rgba(75,179,255,.10)}
.listLeft{display:flex; gap:10px; align-items:center; min-width:0}
.listLeft .nm{font-weight:900; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.listLeft .id{font-family:var(--mono); color:rgba(231,238,247,.55); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* =========================================================
   CONSOLE (side-by-side CUE + LIVE) — extra styling
========================================================= */

.consoleGrid{
  display:grid;
  grid-template-columns: minmax(320px, 1fr) minmax(420px, 2fr) 360px;
  gap:12px;
  min-height:0;
}

.consoleGrid .module{min-height:0;}

.list{display:flex; flex-direction:column; gap:10px; min-height:0;}

#listCue, #listLive{overflow:auto; padding-right:6px;}

.row{
  display:grid;
  grid-template-columns: 52px 1fr 84px 160px 68px;
  gap:10px;
  align-items:center;
  padding:10px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -8px 24px rgba(0,0,0,.35);
}

.row.sel{outline:2px solid rgba(136,193,255,.35);}

.ava{
  width:52px; height:52px; border-radius:14px; overflow:hidden;
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.18), rgba(255,255,255,.06) 35%, rgba(0,0,0,.22));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
}
.ava img{width:100%; height:100%; object-fit:cover; display:block;}
.ava span{font-weight:900; letter-spacing:.02em; opacity:.95;}

.rtxt{min-width:0;}
.rnm{font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.rmeta{font-size:12px; opacity:.65; margin-top:2px;}

.meter{
  height:10px;
  border-radius:999px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.08);
  position:relative;
  overflow:hidden;
}
.meter > i{
  position:absolute; inset:0;
  width:0%;
  background:linear-gradient(90deg, rgba(58,211,129,.9), rgba(246,216,66,.92), rgba(239,74,74,.92));
  box-shadow: 0 0 18px rgba(58,211,129,.25);
}

.gain{
  width:100%;
  -webkit-appearance:none;
  height:10px;
  border-radius:999px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.10);
  outline:none;
}
.gain::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px; height:18px;
  border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10);
}
.gain::-moz-range-thumb{
  width:18px; height:18px;
  border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10);
}

.smallNote{font-size:12px; opacity:.65; line-height:1.25;}

.busRow{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

.busBox{
  padding:10px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -8px 24px rgba(0,0,0,.35);
}
.busBox .ttl{font-weight:900; letter-spacing:.08em; font-size:12px; opacity:.85;}
.busBox .db{margin-top:6px; font-variant-numeric: tabular-nums; opacity:.9;}
.busBox .meter{margin-top:8px;}

@media (max-width: 1280px){
  .consoleGrid{grid-template-columns: 1fr;}
}

/* =========================================================
   MIXER STRIPS (VERTICAL LED METER + FADER CAP)
   - Overrides earlier card styles for a more hardware-like strip look.
========================================================= */

/* Horizontal strip bank (mixer-like) */
.stripBank{
  height:100%;
  min-height:0;
  display:flex;
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:8px;
  scroll-behavior:smooth;
}
.stripBank::-webkit-scrollbar{height:10px}
.stripBank::-webkit-scrollbar-track{
  background:rgba(0,0,0,.35);
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.35);
}
.stripBank::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.45));
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
}

/* Channel strip */
.strip{
  flex:0 0 auto;
  width:104px;
  height:100%;
  min-height:520px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.30));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 36px rgba(0,0,0,.35),
             inset 0 1px 0 rgba(255,255,255,.08),
             inset 0 -2px 0 rgba(0,0,0,.62);
  overflow:hidden;
  position:relative;
  cursor:pointer;
  user-select:none;
}
.strip:before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(220px 160px at 50% 0%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.18));
  opacity:.65;
}
.strip.selected{
  outline:2px solid rgba(75,179,255,.30);
  box-shadow:0 0 0 4px rgba(75,179,255,.10),
             0 18px 36px rgba(0,0,0,.38),
             inset 0 1px 0 rgba(255,255,255,.08),
             inset 0 -2px 0 rgba(0,0,0,.62);
}

.stTop{
  position:relative; z-index:2;
  padding:10px 8px 8px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(0,0,0,.28), rgba(255,255,255,.03));
}
.stName{
  font-weight:900;
  font-size:12px;
  line-height:1.05;
  text-transform:uppercase;
  letter-spacing:.6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display:flex;
  align-items:center;
  gap:6px;
}

.avatar{
  width:18px; height:18px;
  border-radius:50%;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.22));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 0 rgba(0,0,0,.55), 0 6px 12px rgba(0,0,0,.25);
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.avatar img{width:100%; height:100%; object-fit:cover; display:block}
.avatar .ini{
  font-size:10px;
  font-weight:950;
  letter-spacing:.8px;
  color:rgba(215,227,240,.90);
  text-transform:uppercase;
}

.stMeta{
  margin-top:3px;
  font-size:11px;
  color:rgba(147,164,184,.95);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
}

.micDot{
  width:9px; height:9px; border-radius:50%;
  background:var(--ledOff);
  border:1px solid rgba(0,0,0,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  flex:0 0 auto;
}
.micDot.on{
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,0) 45%),
    radial-gradient(circle at 50% 75%, rgba(39,224,122,.95), rgba(0,0,0,.78) 72%);
  box-shadow:0 0 10px rgba(39,224,122,.20);
}

.stMid{
  position:relative; z-index:2;
  padding:10px 8px;
  display:grid;
  grid-template-columns: 22px 1fr;
  gap:8px;
  height: calc(100% - 140px);
  align-items:start;
}

/* LED meter (vertical segments) */
.ledbar{
  width:22px;
  height:100%;
  border-radius:10px;
  padding:6px 5px;
  background:linear-gradient(180deg, rgba(0,0,0,.65), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  display:flex;
  flex-direction:column-reverse;
  gap:2px;
  overflow:hidden;
}
.seg{
  height:6px;
  border-radius:2px;
  background:rgba(9,16,24,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.seg.g{background:rgba(15,30,22,.85)}
.seg.y{background:rgba(32,28,14,.85)}
.seg.r{background:rgba(32,14,14,.85)}
.seg.on.g{
  background:linear-gradient(180deg, rgba(39,224,122,.95), rgba(12,48,30,.9));
  box-shadow:0 0 8px rgba(39,224,122,.22), inset 0 1px 0 rgba(255,255,255,.25);
}
.seg.on.y{
  background:linear-gradient(180deg, rgba(255,204,85,.95), rgba(62,44,14,.9));
  box-shadow:0 0 8px rgba(255,204,85,.18), inset 0 1px 0 rgba(255,255,255,.20);
}
.seg.on.r{
  background:linear-gradient(180deg, rgba(255,59,59,.95), rgba(66,14,14,.9));
  box-shadow:0 0 8px rgba(255,59,59,.16), inset 0 1px 0 rgba(255,255,255,.18);
}

/* Vertical fader (custom) — cap style */
.vslider{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding:2px 0 0;
}
.vtrack{
  position:relative;
  width:44px;
  height: calc(100% - 24px);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(0,0,0,.70), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 2px 14px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
}
.vticks{
  position:absolute; inset:8px 8px;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.10) 1px, transparent 1px, transparent 10px);
  opacity:.65;
  pointer-events:none;
  border-radius:10px;
}
.vthumb{
  position:absolute;
  left:6px;
  width:32px;
  height:44px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(245,247,251,1), rgba(207,214,223,1));
  border:1px solid rgba(0,0,0,.55);
  box-shadow:0 10px 20px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 0 rgba(0,0,0,.18);
  transform:translateY(0px);
  touch-action:none;
}
.vthumb:before{
  content:""; position:absolute; inset:6px 6px;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.38), rgba(0,0,0,.06));
  opacity:.65;
}
.vread{
  font-size:11px;
  color:rgba(147,164,184,.95);
  letter-spacing:.6px;
  text-transform:uppercase;
  font-weight:800;
  min-height:16px;
}

.stBtns{
  position:relative; z-index:2;
  padding:10px 8px 12px;
  border-top:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(0,0,0,.20), rgba(255,255,255,.02));
  display:flex;
  gap:8px;
  justify-content:space-between;
}

.mini{
  padding:8px 8px;
  border-radius:12px;
  font-size:11px;
  letter-spacing:.8px;
  text-transform:uppercase;
  width:100%;
  text-align:center;
}

/* =========================================================
   CONSOLE LIST -> STRIP GRID (optional)
   - Used when pages render strips into a bank for consistency.
========================================================= */

.consoleBank{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* Make strips behave as cards inside console grids (not tall faders) */
.consoleBank .strip{
  width:100%;
  min-height:240px;
  height:240px;
  cursor:pointer;
}
.consoleBank .stMid{height: calc(100% - 110px);}
.consoleBank .stBtns{padding:8px;}