body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;background:#0b0f17;color:#eef3ff}
  .wrap{max-width: 100%;margin:24px auto;padding:0 16px}
  .card{border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.04);padding:16px}
  .muted{color:#a8b5d6}
  pre{white-space:pre-wrap;word-break:break-word;background:rgba(0,0,0,.35);padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.10);overflow:auto}
  .hdr{display:flex;align-items:center;gap:10px;margin-bottom:10px}
  .dot{width:10px;height:10px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 3px rgba(255,74,106,.18)}

/* --- Lightweight modal for editors --- */
.lkModal{ position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; }
.lkModal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.lkModal__panel{ position:relative; width:min(720px, 92vw); max-height:86vh; overflow:hidden;
  border-radius:18px; border:1px solid rgba(255,255,255,.14);
  background:rgba(14,18,28,.92); backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  display:flex; flex-direction:column;
}
.lkModal__hdr{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.10);
}
.lkModal__title{ font-weight:700; font-size:13px; letter-spacing:.2px; color:rgba(255,255,255,.90); }
.lkModal__x{ width:34px; height:34px; border-radius:12px; border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.22); color:rgba(255,255,255,.85); cursor:pointer; font-size:18px; line-height:1;
}
.lkModal__body{ padding:12px 14px; overflow:auto; }
.lkModal__ftr{ padding:12px 14px; border-top:1px solid rgba(255,255,255,.10); display:flex; justify-content:flex-end; gap:10px; }
.lkBtn{ border:1px solid rgba(255,255,255,.12); background:rgba(74,163,255,.12); color:rgba(255,255,255,.92);
  padding:10px 12px; border-radius:14px; cursor:pointer; }
.lkBtn--secondary{ background:rgba(0,0,0,.22); }
.lkFormRow{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:10px 0; }
.lkFormRow label{ font-size:12px; color:rgba(255,255,255,.70); min-width:110px; }
.lkFormRow input[type="range"]{ flex:1; min-width:180px; }
.lkFormRow select, .lkFormRow input[type="number"]{ border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.22);
  color:rgba(255,255,255,.92); padding:10px 10px; border-radius:12px; }
.lkHint{ font-size:12px; color:rgba(255,255,255,.60); margin-top:6px; line-height:1.25; }

/* Remote control buttons */
.btn.remote{ opacity:.92; }
.btn.remote.off{ filter:grayscale(1); opacity:.55; }

/* ===== Itahuka Layout Overrides (wide + 16:9) ===== */
.wrap{ max-width: 2560px !important; padding-left: 72px !important; padding-right: 72px !important; }
.main{ grid-template-columns: 580px 1fr !important; } /* more space for GUESTS list */
.tvRow{ align-items: stretch !important; }
.tvScreen{ width: 100% !important; aspect-ratio: 16 / 9 !important; height: auto !important; }
.tvScreen .vbox, .tvScreen .screen, .tvScreen video, .tvScreen canvas{ width:100% !important; height:100% !important; object-fit: contain !important; }

/* Guest rows: prevent ANY overlap */
.guestCard{ grid-template-columns: 180px 1fr 260px !important; }
.guestCard .gbtns{ display:flex !important; flex-wrap:wrap !important; gap:6px !important; justify-content:flex-end !important; }
.guestCard .gbtns button, .guestCard .gbtns .miniBtn{ min-width: 38px !important; }


/* --- Guests icons: enforce single-line + skin controls --- */
.guestCard .gbtns{ display:flex !important; flex-wrap:nowrap !important; gap:6px !important; justify-content:flex-end !important; align-items:center !important; }
.guestCard .gbtns button, .guestCard .gbtns .miniBtn{
  width: var(--guest-icon-size, 38px) !important;
  height: var(--guest-icon-size, 38px) !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: var(--guest-icon-radius, 10px) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}


/* Skin tuner header buttons */
.tHdr{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tHdrBtns{ display:flex; align-items:center; gap:8px; }
.miniBtn{ height:32px; padding:0 12px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:rgba(255,255,255,.92); cursor:pointer; }
.miniBtn.ok{ background:rgba(34,197,94,.15); border-color:rgba(34,197,94,.35); }
.miniBtn.danger{ background:rgba(239,68,68,.14); border-color:rgba(239,68,68,.35); }
.miniBtn:disabled{ opacity:.45; cursor:not-allowed; }

body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;background:#0b0f17;color:#eef3ff}
  .wrap{max-width:980px;margin:24px auto;padding:0 16px}
  .card{border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.04);padding:16px}
  .muted{color:#a8b5d6}
  pre{white-space:pre-wrap;word-break:break-word;background:rgba(0,0,0,.35);padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.10);overflow:auto}
  .hdr{display:flex;align-items:center;gap:10px;margin-bottom:10px}
  .dot{width:10px;height:10px;border-radius:50%;background:#ff4a6a;box-shadow:0 0 0 3px rgba(255,74,106,.18)}

:root{
    color-scheme: dark;

    /* Core colors */
    --bg:#0a0f16;
    --panel:#111a24;
    --panel2:#0f1620;
    --txt:rgba(255,255,255,.92);
    --muted:rgba(255,255,255,.72);

    --green:#22c55e;
    --red:#ef4444;
    --amber:#f59e0b;
    --blue:#3b82f6;

    /* Skin tuner variables (min 0) */
    --frame-radius: 22px;
    --frame-max: 99999px;
    --guests-width: 580px;
    --guest-icon-size: 38px;
    --guest-icon-radius: 10px;
    --panel-radius: 18px;
    --control-radius: 12px;
    --meter-radius: 14px;
    --fader-radius: 12px;

    --flare: .12;
    --noise: .14;
    --emboss: .55;  /* 0..1 */
    --engrave: .55; /* 0..1 */
    

    /* Auto-fit (prevents overlap at 100% zoom) */
    --fit-scale: 1;

    /* Layout */
    --frame-pad: 14px;
    --gap: 14px;

    /* Mixer geometry */
    --vu-w: 22px;          /* width of a single VU column (L or R) */
    --vu-gap: 8px;         /* between L and R */
    --fader-w: 36px;       /* fader well width */
    --cap-h: 76px;         /* fader cap height */
    --cap-w: 48px;         /* fader cap width */

    /* Media thumbs */
    --thumb: 150px;
    --take-radius: 14px;
  --take-w: 72px;
}

  *{ box-sizing:border-box; }
  html, body{ height:100%; }
  body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    background:
      radial-gradient(1200px 700px at 60% 40%, rgba(255,255,255,.06), transparent 55%),
      radial-gradient(900px 560px at 25% 70%, rgba(59,130,246,.08), transparent 60%),
      linear-gradient(180deg, #060a10 0%, var(--bg) 100%);
    color:var(--txt);
    padding: 14px;
    overflow:hidden; /* no page scroll */
  }

  /* ===========================
     Hardware frame
  =========================== */
  .frame{
    max-width: none;
    width: min(100%, var(--frame-max));
    height: calc(100vh - 28px);
    height: calc(100dvh - 28px);
    margin:0 auto;
    transform: scale(var(--fit-scale));
    transform-origin: top center;
    border-radius: var(--frame-radius);
    background:
      radial-gradient(900px 220px at 50% 0%, rgba(255,255,255,calc(var(--flare) * .9)), transparent 60%),
      radial-gradient(700px 260px at 20% 30%, rgba(59,130,246,calc(var(--flare) * .6)), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.18)),
      linear-gradient(180deg, #101826, #0a111b);
    box-shadow:
      0 24px 80px rgba(0,0,0,.55),
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -1px 0 rgba(0,0,0,.55);
    position:relative;
    overflow:hidden;
    padding: var(--frame-pad);
  }

  .grain{
    pointer-events:none;
    position:absolute; inset:0;
    opacity: var(--noise);
    mix-blend-mode: overlay;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
    background-size: 240px 240px;
  }
  .vignette{
    pointer-events:none;
    position:absolute; inset:-1px;
    background:
      radial-gradient(1200px 600px at 50% 45%, transparent 35%, rgba(0,0,0,.65) 100%);
    opacity:.75;
  }

  /* ===========================
     Top bar
  =========================== */
  .topbar{
    height: 54px;
    display:flex;
    gap:12px;
    align-items:center;
    padding: 10px 12px;
    border-radius: var(--panel-radius);
    background:
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.25)),
      linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.28));
    box-shadow:
      0 14px 40px rgba(0,0,0,.45),
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -1px 0 rgba(0,0,0,.6);
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
    font-size: 15px;
    opacity:.95;
    margin-right:auto;
  }
  .brand .dot{
    width:14px; height:14px; border-radius:50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,.12) 60%),
      linear-gradient(180deg, rgba(34,197,94,.9), rgba(34,197,94,.25));
    box-shadow: 0 0 18px rgba(34,197,94,.25);
  }
  .chip{
    display:flex; align-items:center; gap:8px;
    padding: 8px 10px;
    border-radius: 999px;
    font-size: 12px;
    color: var(--muted);
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    white-space:nowrap;
  }
  .chip b{ color:var(--txt); font-weight:700; }
  .chip input{
    width: 90px;
    background: transparent;
    border:none;
    outline:none;
    color: var(--txt);
    font-weight:800;
    text-align:center;
    letter-spacing:.04em;
  }
  .chip .pill{
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.25);
  }
  .pill.ok{ border-color: rgba(34,197,94,.55); box-shadow: 0 0 12px rgba(34,197,94,.15); }
  .pill.bad{ border-color: rgba(239,68,68,.55); box-shadow: 0 0 12px rgba(239,68,68,.15); }

  .btnTop{
    padding: 8px 12px;
    border-radius: var(--control-radius);
    border: 1px solid rgba(255,255,255,.10);
    background:
      linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.30));
    color: var(--txt);
    font-weight:800;
    font-size: 12px;
    letter-spacing:.04em;
    cursor:pointer;
    box-shadow:
      0 14px 40px rgba(0,0,0,.40),
      inset 0 1px 0 rgba(255,255,255,.10),
      inset 0 -1px 0 rgba(0,0,0,.55);
    user-select:none;
  }
  .btnTop:active{ transform: translateY(1px); }

  /* ===========================
     Main grid
  =========================== */
  .main{
    height: calc(100% - 54px - var(--gap));
    margin-top: var(--gap);
    display:grid;
    grid-template-columns: minmax(420px, var(--guests-width, 580px)) 1fr;
    gap: var(--gap);
    overflow:hidden;
  }

  /* ===========================
     Left column
  =========================== */
  .panel{
    border-radius: var(--panel-radius);
    background:
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.25)),
      linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.28));
    box-shadow:
      0 18px 46px rgba(0,0,0,.48),
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -1px 0 rgba(0,0,0,.62);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    min-height:0;
  }
  .panelHeader{
    padding: 12px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(0,0,0,.14);
  }
  .panelHeader .title{
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-size: 12px;
    opacity:.92;
  }
  .panelHeader .sub{
    display:flex;
    gap:8px;
    align-items:center;
    color: var(--muted);
    font-size: 11px;
  }
  .panelBody{
    padding: 12px;
    display:flex;
    flex-direction:column;
    gap: 10px;
    min-height:0;
    overflow:hidden;
  }

  /* Guest cards list */
  .guests{
    display:flex;
    flex-direction:column;
    gap:10px;
    min-height:0;
    overflow:hidden;
  }
  .guest{
    display:grid;
    grid-template-columns: 144px 1fr 176px;
    gap:10px;
    align-items:center;
    padding: 10px;
    border-radius: var(--control-radius);
    background:
      linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.22));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -1px 0 rgba(0,0,0,.55);
    overflow:hidden;
  }
  .guest.muted{
    opacity: .68;
    filter: saturate(.85) brightness(.88);
  }

  .guest > div:nth-child(2){
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .gName{
    line-height:1.05;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .gMeta{
    margin-top:4px;
    gap:5px;
    flex-wrap:nowrap;
    overflow:hidden;
  }
  .gMeta .pill{
    padding:3px 7px;
    font-size:11px;
  }

  /* Status pills */
  .pill.live{
    border-color: rgba(34,197,94,.65);
    box-shadow: 0 0 12px rgba(34,197,94,.18);
  }
  .pill.audio{
    border-color: rgba(59,130,246,.65);
    box-shadow: 0 0 12px rgba(59,130,246,.18);
  }
  .pill.offline{
    opacity:.65;
    border-color: rgba(255,255,255,.12);
    background: rgba(0,0,0,.24);
  }

  .screen{
    height: 86px;
    border-radius: calc(var(--control-radius) - 2px);
    background:
      radial-gradient(200px 80px at 30% 20%, rgba(255,255,255,.12), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.35)),
      #07101a;
    border: 1px solid rgba(255,255,255,.10);
    position:relative;
    overflow:hidden;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06),
      inset 0 -1px 0 rgba(0,0,0,.65);
  }
  .screen.off{
    filter: saturate(.6) brightness(.55);
  }
  .scrLabel{
    position:absolute;
    left:8px; top:8px;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(0,0,0,.40);
    border:1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.78);
    letter-spacing:.06em;
    text-transform:uppercase;
    font-weight:900;
  }

  .gName{
    font-weight:900;
    letter-spacing:.04em;
    font-size: 13px;
  }
  .gMeta{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    align-items:center;
    margin-top:6px;
  }
  .pill{
    padding:4px 8px;
    border-radius: 999px;
    background: rgba(0,0,0,.35);
    border:1px solid rgba(255,255,255,.10);
    white-space:nowrap;
  }
  .pill.ready{
    border-color: rgba(245,158,11,.60);
    box-shadow: 0 0 12px rgba(245,158,11,.20);
  }

  .btnRow{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
    row-gap:6px;
  }
  .btn{
    width: 25px; height: 25px;
    border-radius: 1px;
    border:1px solid rgba(255,255,255,.10);
    background:
      radial-gradient(14px 14px at 30% 25%, rgba(255,255,255,.16), transparent 65%),
      linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.35));
    box-shadow:
      0 12px 30px rgba(0,0,0,.35),
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -1px 0 rgba(0,0,0,.55);
    cursor:pointer;
    position:relative;
  }
  .btn .glow{
    position:absolute;
    inset: -6px;
    border-radius: 14px;
    opacity:0;
    background: radial-gradient(circle at 50% 50%, rgba(34,197,94,.35), transparent 60%);
    filter: blur(2px);
    transition:opacity .15s ease;
    pointer-events:none;
  }
  .btn.on .glow{ opacity:1; }
  .btn svg{ width: 16px; height: 16px; fill: rgba(255,255,255,.88); }
  .btn:active{ transform: translateY(1px); }
  .btn:disabled{
    opacity:.35;
    cursor:not-allowed;
  }
  .btn.cue .glow{ background: radial-gradient(circle at 50% 50%, rgba(245,158,11,.38), transparent 60%); }
  .btn.cue.on svg{ fill: rgba(255,255,255,.95); }
  .btn.blink{ animation: blink 1.2s infinite; }
  @keyframes blink{
    0%,60%,100%{ filter:none; }
    30%{ filter: drop-shadow(0 0 10px rgba(245,158,11,.55)); }
  }

  /* ===========================
     Cue button banks
  =========================== */
  .bank{
    border-radius: var(--panel-radius);
    background:
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.25)),
      rgba(0,0,0,.10);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:
      0 18px 46px rgba(0,0,0,.38),
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -1px 0 rgba(0,0,0,.62);
    overflow:hidden;
  }
  .bankHdr{
    padding: 10px 12px;
    display:flex; align-items:center; justify-content:space-between;
    border-bottom:1px solid rgba(255,255,255,.06);
    background: rgba(0,0,0,.14);
  }
  .bankHdr .title{
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-size: 11px;
    opacity:.9;
  }
  .bankBody{
    padding: 10px;
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
  }
  .bankBody.small{
    grid-template-columns: repeat(3, 1fr);
  }
  .btnBig{
    height: 54px;
    border-radius: var(--control-radius);
    border:1px solid rgba(255,255,255,.10);
    background:
      radial-gradient(24px 24px at 25% 25%, rgba(255,255,255,.16), transparent 65%),
      linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.32));
    box-shadow:
      0 14px 36px rgba(0,0,0,.40),
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -1px 0 rgba(0,0,0,.60);
    cursor:pointer;
    color: rgba(255,255,255,.92);
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
    font-size: 12px;
    position:relative;
    user-select:none;
  }
  .btnBig:active{ transform: translateY(1px); }
  .btnBig.active{
    border-color: rgba(245,158,11,.55);
    box-shadow:
      0 0 0 1px rgba(245,158,11,.30),
      0 14px 36px rgba(0,0,0,.40),
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -1px 0 rgba(0,0,0,.60);
  }

  /* ===========================
     Right side: Video + Tabs
  =========================== */
  .right{
    display:flex;
    flex-direction:column;
    gap: var(--gap);
    min-width:0;
    min-height:0;
    overflow:hidden;
  }

  .videoRow{
    display:grid;
    grid-template-columns: 1.25fr var(--take-w) 1.25fr;
    gap: var(--gap);
    min-height:0;
    height: 47%;
    overflow:hidden;
  }
  .tv{
    border-radius: var(--panel-radius);
    background:
      radial-gradient(900px 260px at 50% 0%, rgba(255,255,255,.08), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.30)),
      #0a121c;
    box-shadow:
      0 18px 46px rgba(0,0,0,.55),
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -1px 0 rgba(0,0,0,.68);
    border:1px solid rgba(255,255,255,.08);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:0;
  }
  .tvBezel{
    gap: 10px;
    padding: 10px 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(0,0,0,.14);
  }
  .tvBezel .title{
    font-weight:900;
    letter-spacing:.10em;
    text-transform:uppercase;
    font-size: 12px;
  }
  .tvBezel .sub{
    display:flex;
    flex-wrap: wrap;
    row-gap: 6px;
    gap:8px;
    align-items:center;
    color: var(--muted);
    font-size: 11px;
  }
  .tvBadge{
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.25);
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-size: 10px;
  }

  .tvBadge.live{
    background: linear-gradient(180deg, rgba(34,197,94,.28), rgba(0,0,0,.35));
    border-color: rgba(34,197,94,.30);
  }
  .tvBadge.audio{
    background: linear-gradient(180deg, rgba(250,204,21,.28), rgba(0,0,0,.35));
    border-color: rgba(250,204,21,.28);
  }
  .tvBadge.offline{
    background: linear-gradient(180deg, rgba(148,163,184,.18), rgba(0,0,0,.35));
    border-color: rgba(148,163,184,.20);
    opacity:.85;
  }

  .tvScreen{
    position:relative;
    flex: 1;
    aspect-ratio: 16 / 9;
    min-height: 0;
    min-height:0;
    background:
      radial-gradient(400px 260px at 35% 30%, rgba(255,255,255,.10), transparent 65%),
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.40)),
      #04070b;
    overflow:hidden;
  }
  .tvScreen video, .tvScreen img, .tvScreen iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit: cover;
    border:none;
  }
  .tvName{
    position:absolute;
    left:10px;
    bottom:10px;
    display:flex;
    gap:10px;
    align-items:center;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.45);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow:
      0 10px 30px rgba(0,0,0,.45),
      inset 0 1px 0 rgba(255,255,255,.08);
    font-weight:900;
    letter-spacing:.06em;
    font-size: 12px;
    text-transform:uppercase;
  }

  /* Tabs area */
  .tabs{
    height: calc(53% - var(--gap));
    border-radius: var(--panel-radius);
    background:
      radial-gradient(900px 260px at 50% 0%, rgba(255,255,255,.08), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.30)),
      #0a121c;
    box-shadow:
      0 18px 46px rgba(0,0,0,.55),
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -1px 0 rgba(0,0,0,.68);
    border:1px solid rgba(255,255,255,.08);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    min-height:0;
  }
  .tabHdr{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(0,0,0,.14);
  }
  .tabBtn{
    padding: 12px 10px;
    border:none;
    background: transparent;
    color: rgba(255,255,255,.82);
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
    font-size: 12px;
    cursor:pointer;
    border-right: 1px solid rgba(255,255,255,.06);
  }
  .tabBtn:last-child{ border-right:none; }
  .tabBtn.active{
    background:
      linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.18));
    color: rgba(255,255,255,.96);
  }

  .tabBody{
    flex:1;
    min-height:0;
    overflow:hidden;
    position:relative;
    padding: 12px;
  }
  .tabPane{
    position:absolute;
    inset:12px;
    display:none;
    overflow:hidden;
    border-radius: calc(var(--panel-radius) - 6px);
    background:
      linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.22));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06),
      inset 0 -1px 0 rgba(0,0,0,.65);
  }
  .tabPane.active{ display:flex; flex-direction:column; }

  /* ===========================
     AUDIO MIXER pane
  =========================== */
  .mixerWrap{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    min-height:0;
  }
  .mixerRow{
    flex:1;
    min-height:0;
    display:grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    padding: 12px;
  }
  .strip{
    border-radius: var(--control-radius);
    background:
      radial-gradient(140px 120px at 35% 20%, rgba(255,255,255,.10), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.30));
    border:1px solid rgba(255,255,255,.10);
    box-shadow:
      0 18px 46px rgba(0,0,0,.45),
      inset 0 1px 0 rgba(255,255,255,.07),
      inset 0 -1px 0 rgba(0,0,0,.65);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    min-height:0;
    position:relative;
  }
  .strip.muted{
    opacity: .62;
    filter: saturate(.85) brightness(.86);
  }
  .stripTop{
    padding: 10px 10px 8px;
    border-bottom:1px solid rgba(255,255,255,.06);
    background: rgba(0,0,0,.14);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }
  .stripTop b{
    font-size: 11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    opacity:.92;
  }
  .state{
    font-size: 10px;
    font-weight:900;
    letter-spacing:.10em;
    text-transform:uppercase;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.25);
    color: rgba(255,255,255,.82);
    white-space:nowrap;
  }

  .vuRow{
    flex:1;
    min-height:0;
    display:flex;
    justify-content:center;
    gap: 12px;
    padding: 12px 10px 10px;
    overflow:hidden;
  }

  .vuScale{
    position:absolute;
    left: 8px;
    top: 48px;
    bottom: 56px;
    width: 44px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    font-size: 10px;
    color: rgba(255,255,255,.42);
    text-align:left;
    pointer-events:none;
  }

    .vuCol{
    width: var(--vu-w);
    height: 100%;
    border-radius: var(--meter-radius);
    background:
      linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.42)),
      #060c13;
    border:1px solid rgba(255,255,255,.12);
    position:relative;
    overflow:hidden;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -1px 0 rgba(0,0,0,.72);
  }

  /* LED grid (unlit segments) */
  .vuCol::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      repeating-linear-gradient(to top,
        rgba(255,255,255,.045) 0px,
        rgba(255,255,255,.045) 1px,
        rgba(0,0,0,0) 1px,
        rgba(0,0,0,0) 12px),
      linear-gradient(90deg,
        rgba(255,255,255,.05),
        rgba(0,0,0,0),
        rgba(255,255,255,.04));
    opacity:.55;
    pointer-events:none;
    mix-blend-mode: screen;
  }

  /* Segment separators (creates the LED “blocks”) */
  .vuCol::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      repeating-linear-gradient(to top,
        rgba(0,0,0,.78) 0px,
        rgba(0,0,0,.78) 3px,
        rgba(0,0,0,0) 3px,
        rgba(0,0,0,0) 12px);
    opacity:.90;
    pointer-events:none;
  }

  .vuFill{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height: 0%;
    background:
      linear-gradient(to top,
        rgba(34,197,94,.98) 0%,
        rgba(34,197,94,.92) 58%,
        rgba(245,158,11,.96) 78%,
        rgba(239,68,68,.98) 100%);
    filter: saturate(1.25) contrast(1.12) brightness(1.08);
    box-shadow:
      0 0 18px rgba(34,197,94,.18),
      0 0 10px rgba(245,158,11,.10),
      inset 0 1px 0 rgba(255,255,255,.10);
  }

.vuLbl{
    position:absolute;
    top:6px; left:6px;
    font-size: 10px;
    font-weight:900;
    opacity:.65;
  }

  /* vertical fader */
  
.faderStack{
    width: calc(var(--cap-w) + 26px);
    height: 100%;
    display:flex;
    justify-content:center;
    position:relative;
  }

  /* Visual fader well (hardware slot) */
  .faderWell{
    position:absolute;
    left: 50%;
    top: 6px;
    bottom: 6px;
    width: var(--fader-w);
    translate: -50% 0;
    border-radius: calc(var(--control-radius) + 2px);
    background:
      /* ticks */
      repeating-linear-gradient(180deg,
        rgba(255,255,255,.10) 0px,
        rgba(255,255,255,.10) 1px,
        transparent 1px,
        transparent 10px),
      /* center groove */
      linear-gradient(90deg,
        rgba(0,0,0,.55) 0%,
        rgba(255,255,255,.06) 18%,
        rgba(0,0,0,.70) 50%,
        rgba(255,255,255,.06) 82%,
        rgba(0,0,0,.55) 100%),
      /* body */
      linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.58)),
      #070d14;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow:
      0 16px 40px rgba(0,0,0,.35),
      inset 0 1px 0 rgba(255,255,255,.10),
      inset 0 -1px 0 rgba(0,0,0,.75),
      inset 0 0 0 6px rgba(0,0,0,.28);
    overflow:hidden;
  }
  .faderWell:before{
    content:"";
    position:absolute;
    inset: 10px 10px;
    border-radius: calc(var(--control-radius));
    background:
      linear-gradient(180deg, rgba(0,0,0,.50), rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.08);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -1px 0 rgba(0,0,0,.70);
    opacity:.85;
  }

  input.vfader{
    -webkit-appearance:none;
    appearance:none;
    width: 260px; /* becomes height after rotate */
    height: calc(var(--cap-w) + 10px); /* generous hit area */
    transform: rotate(-90deg);
    position:absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    background: transparent;
    cursor:pointer;
    outline:none;
  }

  /* Track (WebKit) — hidden (we use the well + overlay cap) */
  input.vfader::-webkit-slider-runnable-track{
    height: calc(var(--cap-w) + 10px);
    border-radius: 999px;
    background: transparent;
    border:none;
    box-shadow:none;
  }
  /* Hide native thumb (WebKit) — we use the overlay cap */
  input.vfader::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width: 2px;
    height: 2px;
    opacity: 0;
    margin-top: 0;
  }

  /* Track (Firefox) — hidden */
  input.vfader::-moz-range-track{
    height: calc(var(--cap-w) + 10px);
    border-radius: 999px;
    background: transparent;
    border:none;
    box-shadow:none;
  }
  input.vfader::-moz-range-progress{
    height: calc(var(--cap-w) + 10px);
    border-radius: 999px;
    background: transparent;
  }
  /* Hide native thumb (Firefox) */
  input.vfader::-moz-range-thumb{
    width: 2px;
    height: 2px;
    opacity: 0;
    border: none;
    background: transparent;
  }

  /* Overlay cap — “Tempo”-style hardware cap */
  .faderCap{
    position:absolute;
    left: 50%;
    translate: -50% 0;
    width: var(--cap-w);
    height: var(--cap-h);
    border-radius: calc(var(--fader-radius));
    pointer-events:none;
    background:
      /* edge bevels */
      linear-gradient(90deg,
        rgba(0,0,0,.55) 0%,
        rgba(255,255,255,.12) 18%,
        rgba(255,255,255,.06) 50%,
        rgba(255,255,255,.10) 82%,
        rgba(0,0,0,.60) 100%),
      /* top sheen */
      radial-gradient(48px 30px at 30% 18%, rgba(255,255,255,.32), transparent 60%),
      radial-gradient(60px 44px at 70% 22%, rgba(255,255,255,.18), transparent 65%),
      /* body */
      linear-gradient(180deg, rgba(255,255,255,.16), rgba(0,0,0,.36));
    border: 1px solid rgba(255,255,255,.16);
    box-shadow:
      0 18px 40px rgba(0,0,0,.55),
      inset 0 1px 0 rgba(255,255,255,.18),
      inset 0 -1px 0 rgba(0,0,0,.78);
  }
  /* center “grip” with two highlight bars */
  .faderCap:before{
    content:"";
    position:absolute;
    left: 7px;
    right: 7px;
    top: 50%;
    height: 22px;
    translate: 0 -50%;
    border-radius: 999px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.42)),
      repeating-linear-gradient(180deg,
        transparent 0px,
        transparent 6px,
        rgba(255,255,255,.22) 6px,
        rgba(255,255,255,.22) 7px,
        transparent 7px,
        transparent 13px);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.16),
      inset 0 -1px 0 rgba(0,0,0,.78);
    opacity:.95;
  }
  /* center groove line */
  .faderCap:after{
    content:"";
    position:absolute;
    left: 50%;
    top: 10px;
    bottom: 10px;
    width: 5px;
    translate: -50% 0;
    border-radius: 999px;
    background:
      linear-gradient(180deg, rgba(0,0,0,.45), rgba(255,255,255,.10), rgba(0,0,0,.55));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      inset 0 -1px 0 rgba(0,0,0,.78);
    opacity:.85;
  }

  .volLbl{

    padding: 8px 10px 12px;
    font-weight:900;
    letter-spacing:.08em;
    font-size: 10px;
    text-transform:uppercase;
    color: rgba(255,255,255,.68);
    text-align:center;
    border-top: 1px solid rgba(255,255,255,.06);
    background: rgba(0,0,0,.10);
  }

  /* ===========================
     TRANSITIONS / OVERLAYS / VIRTUALS demo panes
  =========================== */
  .demoGrid{
    width:100%;
    height:100%;
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 12px;
    overflow:hidden;
  }
  .tile{
    border-radius: var(--control-radius);
    border:1px solid rgba(255,255,255,.10);
    background:
      radial-gradient(120px 80px at 30% 25%, rgba(255,255,255,.14), transparent 65%),
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.32));
    box-shadow:
      0 14px 36px rgba(0,0,0,.38),
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -1px 0 rgba(0,0,0,.62);
    padding: 12px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    overflow:hidden;
  }
  .tile b{
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-size: 12px;
  }
  .tile p{
    margin: 8px 0 0;
    color: rgba(255,255,255,.68);
    font-size: 12px;
    line-height:1.25;
  }
  .tile button{
    margin-top:auto;
    height: 36px;
    border-radius: var(--control-radius);
    border:1px solid rgba(255,255,255,.10);
    background:
      linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.30));
    color: rgba(255,255,255,.92);
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-size: 11px;
    cursor:pointer;
    box-shadow:
      0 12px 30px rgba(0,0,0,.35),
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -1px 0 rgba(0,0,0,.60);
  }
  .tile button:active{ transform: translateY(1px); }

  /* ===========================
     MEDIA pane
  =========================== */
  .mediaWrap{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    min-height:0;
  }
  .mediaTop{
    padding: 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(0,0,0,.14);
  }
  .mediaTop .left{
    display:flex; align-items:center; gap:10px;
    color: rgba(255,255,255,.82);
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
    font-size: 12px;
  }
  .mediaTop input[type="file"]{
    display:none;
  }
  .fileBtn{
    height: 36px;
    padding: 0 12px;
    border-radius: var(--control-radius);
    border:1px solid rgba(255,255,255,.10);
    background:
      linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.30));
    color: rgba(255,255,255,.92);
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-size: 11px;
    cursor:pointer;
    box-shadow:
      0 12px 30px rgba(0,0,0,.35),
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -1px 0 rgba(0,0,0,.60);
    user-select:none;
  }

  /* Mini buttons (Media top actions) */
  .miniBtn{
    height: 34px;
    padding: 0 12px;
    border-radius: 12px;
    border:1px solid rgba(255,255,255,.10);
    background:
      radial-gradient(120px 40px at 30% 20%, rgba(255,255,255,.12), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.35));
    color: rgba(255,255,255,.88);
    font-weight: 900;
    letter-spacing: .10em;
    font-size: 11px;
    cursor: pointer;
    box-shadow:
      0 10px 24px rgba(0,0,0,.36),
      inset 0 1px 0 rgba(255,255,255,.10),
      inset 0 -1px 0 rgba(0,0,0,.70);
  }
  .miniBtn:disabled{
    opacity: .45;
    cursor: not-allowed;
  }
  .miniBtn.danger{
    border-color: rgba(239,68,68,.30);
  }

  /* Thumb remove button */
  .thumb .rm{
    position:absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 10px;
    border:1px solid rgba(255,255,255,.12);
    background:
      radial-gradient(18px 14px at 30% 25%, rgba(255,255,255,.20), transparent 60%),
      linear-gradient(180deg, rgba(239,68,68,.28), rgba(0,0,0,.42));
    color: rgba(255,255,255,.92);
    font-weight: 1000;
    font-size: 16px;
    line-height: 24px;
    text-align:center;
    cursor:pointer;
    box-shadow:
      0 10px 20px rgba(0,0,0,.35),
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 -1px 0 rgba(0,0,0,.75);
  }
  .thumb .rm:active{ transform: translateY(1px); }

  /* Ensure any legacy name overlays are hidden (we removed them from DOM) */
  .tvName{ display:none !important; }
  .fileBtn:active{ transform: translateY(1px); }

  .thumbs{
    flex:1;
    min-height:0;
    overflow:auto;
    padding: 12px;
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--thumb), 1fr));
    gap: 12px;
  }
  .thumb{
    border-radius: var(--control-radius);
    border:1px solid rgba(255,255,255,.10);
    background:
      radial-gradient(120px 80px at 30% 25%, rgba(255,255,255,.14), transparent 65%),
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.32));
    box-shadow:
      0 14px 36px rgba(0,0,0,.38),
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -1px 0 rgba(0,0,0,.62);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    cursor:pointer;
    user-select:none;
  }
  .thumb.active{
    border-color: rgba(245,158,11,.55);
    box-shadow:
      0 0 0 1px rgba(245,158,11,.28),
      0 14px 36px rgba(0,0,0,.38),
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -1px 0 rgba(0,0,0,.62);
  }
  .thumb .pv{
    height: 96px;
    background: rgba(0,0,0,.35);
    display:flex;
    align-items:center;
    justify-content:center;
    color: rgba(255,255,255,.55);
    font-weight:900;
    letter-spacing:.10em;
    text-transform:uppercase;
    position:relative;
  }
  .thumb img{
    width:100%; height:100%;
    object-fit: cover;
    display:block;
  }
  .thumb .meta{
    padding: 10px 10px 12px;
    display:flex;
    flex-direction:column;
    gap: 6px;
  }
  .thumb .name{
    font-weight:900;
    font-size: 12px;
    letter-spacing:.04em;
    color: rgba(255,255,255,.90);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .thumb .kind{
    font-size: 10px;
    letter-spacing:.10em;
    text-transform:uppercase;
    color: rgba(255,255,255,.62);
  }

  /* ===========================
     Skin tuner overlay
  =========================== */
  .overlay{
    position:fixed;
    inset:0;
    background: rgba(0,0,0,.55);
    display:none;
    align-items:center;
    justify-content:center;
    z-index: 999;
    padding: 20px;
  }
  .overlay.show{ display:flex; }
  .tuner{
    width: min(980px, 100%);
    border-radius: var(--panel-radius);
    background:
      radial-gradient(900px 260px at 50% 0%, rgba(255,255,255,.08), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.30)),
      #0a121c;
    border:1px solid rgba(255,255,255,.10);
    box-shadow:
      0 24px 80px rgba(0,0,0,.65),
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -1px 0 rgba(0,0,0,.70);
    overflow:hidden;
  }
  .tHdr{
    padding: 12px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(0,0,0,.14);
  }
  .tHdr b{
    font-weight:900;
    letter-spacing:.10em;
    text-transform:uppercase;
    font-size: 12px;
  }
  .tHdr button{
    height: 34px;
    padding: 0 12px;
    border-radius: var(--control-radius);
    border:1px solid rgba(255,255,255,.10);
    background:
      linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.30));
    color: rgba(255,255,255,.92);
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-size: 11px;
    cursor:pointer;
    box-shadow:
      0 12px 30px rgba(0,0,0,.35),
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -1px 0 rgba(0,0,0,.60);
  }
  .tBody{
    padding: 14px;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .row{
    display:flex;
    gap: 10px;
    align-items:center;
    padding: 10px 12px;
    border-radius: var(--control-radius);
    background: rgba(0,0,0,.22);
    border:1px solid rgba(255,255,255,.08);
  }
  .row label{
    width: 160px;
    font-size: 11px;
    letter-spacing:.10em;
    text-transform:uppercase;
    color: rgba(255,255,255,.72);
    font-weight:900;
  }
  .row input[type="range"]{
    flex:1;
  }
  .row output{
    width: 56px;
    text-align:right;
    font-variant-numeric: tabular-nums;
    font-weight:900;
    color: rgba(255,255,255,.90);
  }


  /* RTM overlay inputs */
  .rtmGrid{ display:grid; grid-template-columns: 140px 1fr; gap:10px 12px; align-items:center; }
  .rtmLbl{ font-size:12px; color:rgba(255,255,255,.78); }
  .rtmInp{
    height:34px; padding:0 10px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.12);
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.12));
    color:rgba(255,255,255,.92);
    outline:none;
  }
  .rtmInp:focus{ border-color: rgba(59,130,246,.55); box-shadow: 0 0 0 2px rgba(59,130,246,.18); }
  .rtmBtns{ grid-column: 1 / -1; display:flex; gap:10px; justify-content:flex-end; padding-top:6px; }
  .rtmBtn{
    height:34px; padding:0 12px; min-width:110px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.14);
    background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(0,0,0,.18));
    color:rgba(255,255,255,.92);
  }
  .rtmBtn:hover{ filter:brightness(1.08); }
  .rtmDbg{ margin-top:14px; }
  .rtmPre{
    margin:8px 0 0;
    padding:10px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(0,0,0,.22);
    color:rgba(255,255,255,.86);
    max-height:240px;
    overflow:auto;
    white-space:pre-wrap;
    word-break:break-word;
    font-size:12px;
    line-height:1.35;
  }

  .takeCol{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    min-height:0;
  }

  .midCol{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-width:0;
    min-height:0;
  }

  .btnTake{
    width: calc(var(--take-w) - 8px);
    height: 44px;
    border-radius: var(--take-radius);
    border:1px solid rgba(245,158,11,.25);
    background:
      radial-gradient(140px 70px at 50% 25%, rgba(245,158,11,.16), transparent 70%),
      linear-gradient(180deg, rgba(245,158,11,.14), rgba(0,0,0,.40));
    box-shadow:
      0 18px 40px rgba(0,0,0,.55),
      inset 0 1px 0 rgba(255,255,255,.10),
      inset 0 -1px 0 rgba(0,0,0,.70);
    color: rgba(255,255,255,.86);
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor:pointer;
  }
  .btnTake:active{
    transform: translateY(1px);
    box-shadow:
      0 12px 26px rgba(0,0,0,.55),
      inset 0 1px 0 rgba(255,255,255,.10),
      inset 0 -1px 0 rgba(0,0,0,.70);
  }
  .btnMon{
    width: calc(var(--take-w) - 8px);
    height: 34px;
    border-radius: calc(var(--take-radius) - 6px);
    border:1px solid rgba(59,130,246,.28);
    background:
      radial-gradient(140px 70px at 50% 25%, rgba(59,130,246,.18), transparent 70%),
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.32));
    color: rgba(255,255,255,.90);
    font-weight: 900;
    letter-spacing:.10em;
    text-transform:uppercase;
    font-size: 10px;
    cursor:pointer;
    box-shadow:
      0 16px 36px rgba(0,0,0,.45),
      inset 0 1px 0 rgba(255,255,255,.08);
  }
  .btnMon:active{ transform: translateY(1px); }

  .iconBtn{
    width: 26px;
    height: 26px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius: 10px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.28);
    box-shadow:
      0 10px 26px rgba(0,0,0,.50),
      inset 0 1px 0 rgba(255,255,255,.08);
    cursor:pointer;
    padding:0;
  }
  .iconBtn svg{ width: 16px; height: 16px; fill: rgba(255,255,255,.75); }
  .iconBtn[aria-pressed="true"]{
    border-color: rgba(245,158,11,.45);
    box-shadow:
      0 0 0 1px rgba(245,158,11,.22),
      0 10px 26px rgba(0,0,0,.50),
      inset 0 1px 0 rgba(255,255,255,.08);
  }

  .fxThumbs .thumb .rm{ display:none; }
  .fxThumbs .thumb .kind{ display:none; }
  .fxThumbs .thumb .pv{ height: 96px; }
  .fxThumbs .thumb .meta{ padding: 10px 10px 12px; }
  .fxThumbs .thumb .name{ font-size: 13px; }

  .mixStage{
    position:absolute;
    inset:0;
    overflow:hidden;
  }
  .mixWin{
    position:absolute;
    overflow:hidden;
    border-radius: calc(var(--panel-radius) - 2px);
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(0,0,0,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  }
  .mixOverlays{
    position:absolute;
    inset:0;
    pointer-events:none;
  }
  .ovBug{
    position:absolute; top:14px; right:14px;
    width: 140px; height: 56px;
    border-radius: 14px;
    background: rgba(0,0,0,.28);
    border:1px solid rgba(255,255,255,.10);
    display:flex; align-items:center; justify-content:center;
    font-weight:900; letter-spacing:.10em; text-transform:uppercase;
    color: rgba(255,255,255,.75);
  }
  .ovLower{
    position:absolute; left:14px; right:14px; bottom:14px;
    height: 70px;
    border-radius: 16px;
    background: rgba(0,0,0,.28);
    border:1px solid rgba(255,255,255,.10);
    padding: 10px 12px;
    display:flex; flex-direction:column; justify-content:center;
    gap: 4px;
    color: rgba(255,255,255,.82);
  }
  .ovLower b{ letter-spacing:.10em; text-transform:uppercase; font-size: 12px; }
  .ovLower span{ color: rgba(255,255,255,.60); font-size: 12px; }
  .ovTicker{
    position:absolute; left:14px; right:14px; bottom:14px;
    height: 44px;
    border-radius: 14px;
    background: rgba(0,0,0,.28);
    border:1px solid rgba(255,255,255,.10);
    display:flex; align-items:center;
    padding: 0 12px;
    color: rgba(255,255,255,.76);
    font-weight: 800;
    letter-spacing:.05em;
    overflow:hidden;
  }

  .ovTicker{ --ticker-speed: 40; }
  .ovTickerInner{
    display:inline-block;
    white-space:nowrap;
    padding-left: 100%;
    animation: tickerScroll linear infinite;
    animation-duration: calc( (1600px) / (var(--ticker-speed) * 1px) * 1s );
  }
  @keyframes tickerScroll{
    0%{ transform: translateX(0); }
    100%{ transform: translateX(-100%); }
  }
  .ovFull{
    position:absolute; inset:14px;
    border-radius: 18px;
    background: rgba(0,0,0,.32);
    border:1px solid rgba(255,255,255,.10);
    display:flex; align-items:center; justify-content:center;
    color: rgba(255,255,255,.62);
    font-weight: 900; letter-spacing:.12em; text-transform:uppercase;
  }
  .guidesLayer{
    position:absolute; inset:0;
    pointer-events:none;
  }
  .guidesCanvas{
    position:absolute; inset:0;
    width:100%; height:100%;
  }

:root{
  --vu-led-shift-x: 3px;
  --media-btn-radius: 12px;
}
.vu-led, .vumeter-led, .meter-led, .ledColumn, .vuLED, .vu-leds{
  transform: translateX(var(--vu-led-shift-x));
}
.mediaBar .btn, .media-controls .btn, .mediaButtons button, .mediaBtns button{
  border-radius: var(--media-btn-radius) !important;
}


/* --- Skin var bindings (strong) --- */
#btnAddMedia, #btnRemoveMedia, #btnClearMedia,
.mediaActions button, .media-actions button, .queueActions button, .queue-actions button,
button[data-media-action], [data-media-btn]{
  border-radius: var(--media-btn-radius) !important;
}
/* LED shift: target common meter LED stacks if class names differ */
[class*="led"], [class*="LED"], [id*="led"], [id*="LED"]{
  transform: translateX(var(--vu-led-shift-x)) !important;
}

/* -------- Media buttons normalize (ADD MEDIA / REMOVE / CLEAR) -------- */
  .mediaActions, .queueActions, .queue-actions, .media-actions { display:flex; gap:10px; align-items:center; }
  .mediaActions button, .queueActions button, .queue-actions button, .media-actions button,
  #btnAddMedia, #btnRemoveMedia, #btnClearMedia {
    min-width: 128px;
    height: 34px;
    padding: 0 14px;
    border-radius: var(--media-btn-radius);
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
  }

  /* Remove noisy words on queue actions canvas (Preview / Record / Stream) */
  .queueActions .label, .queue-actions .label, .queue-actions-title,
  .queueActions .qa-title, .queue-actions .qa-title { display:none !important; }

  /* -------- Meter numbers spacing: bring numbers closer to LED (but not overlapping) -------- */
  .meterScale, .vuScale, .vu-scale, .meter-scale { margin-right: 12px !important; }
  .meterWrap, .vuWrap, .vu-wrap, .meter-wrap { gap: 12px !important; }
  .meterScale .tick, .vuScale .tick, .vu-scale .tick { line-height: 1.1 !important; }


  /* ===== v18: Media 'Add Media' label styled like buttons ===== */
  .fileBtn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width: 128px !important;
    height: 34px !important;
    padding: 0 14px !important;
    border-radius: var(--media-btn-radius) !important;
    font-weight: 700 !important;
    letter-spacing: .6px !important;
    text-transform: uppercase !important;
    cursor: pointer;
    user-select:none;
  }

  /* Keep Add/Remove/Clear exactly same width inside the Local Media header */
  .mediaHeaderActions, .mediaActions, .media-actions{
    gap: 10px !important;
  }
  .mediaHeaderActions > .fileBtn,
  .mediaHeaderActions > button,
  .mediaActions > .fileBtn,
  .mediaActions > button{
    flex: 0 0 128px !important;
  }

  /* ===== v18: Fix VU meter number overlap by reserving space for scale ===== */
  :root{
    --vu-scale-w: 44px;   /* width of the dB labels column */
    --vu-scale-gap: 14px; /* space between labels and LED columns */
  }
  .vuScale{ width: var(--vu-scale-w) !important; left: 8px !important; }
  .vuRow{
    padding-left: calc(var(--vu-scale-w) + var(--vu-scale-gap)) !important;
    justify-content: flex-start !important;
  }


  /* ===== v18: Guides modal form layout ===== */
  .fxForm{ padding:12px; }
  .fxRow{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0; }
  .fxRow label{ color: rgba(255,255,255,.82); font-weight:700; font-size:12px; letter-spacing:.04em; }
  .fxRow select{ background: rgba(0,0,0,.35); color:#fff; border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:6px 8px; }
  .fxChecks{ flex-wrap:wrap; justify-content:flex-start; }
  .fxChecks label{ font-weight:600; opacity:.9; }

  /* -------- STREAM modal clean skin -------- */
  #streamModalCleanV2{ position:fixed; inset:0; display:none; z-index:99999; background:rgba(0,0,0,.64); }
  #streamModalCleanV2 .box{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:min(980px, calc(100vw - 36px));
    max-height: min(720px, calc(100vh - 36px));
    background: radial-gradient(1200px 600px at 50% -40%, rgba(255,255,255,.10), rgba(255,255,255,0)),
                linear-gradient(180deg, rgba(18,22,27,.96), rgba(9,12,16,.96));
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
    overflow:hidden;
  }
  #streamModalCleanV2 .hdr{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px;
    border-bottom:1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  }
  #streamModalCleanV2 .hdr .title{ font-weight:800; letter-spacing:.9px; text-transform:uppercase; font-size:14px; }
  #streamModalCleanV2 .hdr .meta{ opacity:.75; font-size:12px; }
  #streamModalCleanV2 .hdr .close{ height:28px; padding:0 12px; border-radius:6px; font-weight:800; }

  #streamModalCleanV2 .body{ padding:14px; overflow:auto; max-height: calc(min(720px, calc(100vh - 36px)) - 52px); }

  #streamModalCleanV2 .row{ display:grid; grid-template-columns: 1fr; gap:12px; }
  @media (min-width: 900px){
    #streamModalCleanV2 .row{ grid-template-columns: 1.05fr .95fr; }
  }

  .scv2-card{ border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  }
  .scv2-card h3{ margin:0 0 10px; font-size:12px; letter-spacing:.8px; text-transform:uppercase; opacity:.85; }

  .scv2-grid2{ display:grid; grid-template-columns: 1fr; gap:10px; }
  @media (min-width: 560px){ .scv2-grid2{ grid-template-columns: 1fr 1fr; } }

  .scv2-field label{ display:block; font-size:12px; opacity:.78; margin-bottom:6px; }
  .scv2-field input, .scv2-field select{ width:100%; height:32px; border-radius:7px; padding:0 10px;
    background: rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.10); color:#e9eef5;
    outline:none;
  }
  .scv2-field input::placeholder{ color: rgba(233,238,245,.45); }

  .scv2-adv{ margin-top:10px; }
  .scv2-adv summary{ cursor:pointer; user-select:none; font-size:12px; opacity:.78; }
  .scv2-adv .advBody{ margin-top:10px; }

  .scv2-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; margin-top:10px; }
  .scv2-actions button{ height:32px; padding:0 12px; border-radius:7px; font-weight:800; }

  .scv2-chlist{ display:flex; flex-direction:column; gap:10px; }
  .scv2-ch{ display:grid; grid-template-columns: 1fr; gap:10px; padding:10px; border-radius:12px;
    border:1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.18);
  }
  @media (min-width: 560px){
    .scv2-ch{ grid-template-columns: 1.15fr .85fr; align-items:center; }
  }
  .scv2-ch .left{ display:flex; gap:10px; align-items:center; }
  .scv2-ch .badge{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.18); box-shadow:0 0 0 1px rgba(255,255,255,.10) inset; }
  .scv2-ch[data-state="RUNNING"] .badge{ background:#34d399; }
  .scv2-ch[data-state="ERROR"] .badge{ background:#f87171; }
  .scv2-ch .name{ font-weight:800; letter-spacing:.4px; }
  .scv2-ch .sub{ font-size:12px; opacity:.68; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
  .scv2-ch .right{ display:flex; gap:8px; align-items:center; justify-content:flex-end; flex-wrap:wrap; }
  .scv2-ch .right button{ height:30px; padding:0 10px; border-radius:7px; font-weight:800; }
  .scv2-ch .tgl{ display:flex; align-items:center; gap:6px; font-size:12px; opacity:.8; }

  /* STREAM UI — list v3 (toggle style) */
  .scv2-list{ display:flex; flex-direction:column; gap:10px; }
  .scv2-ch{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.20); }
  .scv2-ch .left{ display:flex; align-items:center; gap:12px; min-width:0; }
  .scv2-ico{ width:34px; height:34px; border-radius:10px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; flex:none; }
  .scv2-ico svg{ width:18px; height:18px; fill:rgba(255,255,255,.80); }
  .scv2-ch .name{ font-weight:900; font-size:13px; letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .scv2-ch .sub{ font-size:12px; opacity:.72; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 46vw; }
  .scv2-ch .right{ display:flex; align-items:center; gap:10px; flex:none; }
  .scv2-pill{ padding:3px 10px; border-radius:999px; font-weight:900; font-size:11px; letter-spacing:.10em; text-transform:uppercase; border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.22); }
  .scv2-pill.run{ border-color: rgba(34,197,94,.25); background: rgba(34,197,94,.12); color:#a7f3c0; }
  .scv2-pill.err{ border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.12); color:#ffd1d1; }
  .scv2-pill.idle{ opacity:.8; }
  .scv2-switch{ position:relative; width:46px; height:26px; }
  .scv2-switch input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
  .scv2-switch .track{ position:absolute; inset:0; border-radius:999px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.10); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
  .scv2-switch .knob{ position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:999px; background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(0,0,0,.35)); border:1px solid rgba(255,255,255,.12); box-shadow: 0 10px 18px rgba(0,0,0,.35); transition: transform .14s ease; }
  .scv2-switch input:checked + .track{ background: rgba(34,197,94,.22); border-color: rgba(34,197,94,.28); }
  .scv2-switch input:checked + .track .knob{ transform: translateX(20px); }
  .scv2-more{ height:30px; padding:0 10px; border-radius:10px; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.22); color: var(--txt); font-weight:900; letter-spacing:.12em; text-transform:uppercase; font-size:11px; cursor:pointer; }

  .scv2-log{ height:170px; overflow:auto; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size:12px; background: rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.10);
    border-radius:10px; padding:10px; white-space:pre-wrap;
  }

/* V3 modal shell uses the existing #streamModalCleanV2 styles as baseline if present,
     but we keep it self-contained here to avoid regressions. */
  #streamModalV3{ position:fixed; inset:0; display:none; z-index:100000; background:rgba(0,0,0,.64); }
  #streamModalV3.show{ display:block; }
  #streamModalV3 .box{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:min(1100px, calc(100vw - 36px));
    max-height: min(760px, calc(100vh - 36px));
    background: radial-gradient(1200px 600px at 50% -40%, rgba(255,255,255,.10), rgba(255,255,255,0)),
                linear-gradient(180deg, rgba(18,22,27,.96), rgba(9,12,16,.96));
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  #streamModalV3 .hdr{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  }
  #streamModalV3 .hdr .title{ font-weight:900; letter-spacing:.12em; text-transform:uppercase; font-size:14px; }
  #streamModalV3 .hdr .meta{ opacity:.75; font-size:12px; }
  #streamModalV3 .hdr .close{
    height:30px; padding:0 12px; border-radius:10px;
    border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.22); color:rgba(255,255,255,.92);
    font-weight:900; letter-spacing:.10em; text-transform:uppercase; font-size:11px; cursor:pointer;
  }
  #streamModalV3 .body{ padding:14px; overflow:auto; }
  .stv3Row{ display:grid; grid-template-columns: 1fr; gap:12px; }
  @media (min-width: 980px){ .stv3Row{ grid-template-columns: 1.2fr .8fr; } }

  .stv3Card{
    border:1px solid rgba(255,255,255,.08); border-radius:12px;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
    padding:12px;
  }
  .stv3Head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
  .stv3Head h3{ margin:0; font-size:12px; letter-spacing:.10em; text-transform:uppercase; opacity:.88; }
  .stv3HeadRight{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

  .stv3List{ display:flex; flex-direction:column; gap:10px; }
  .stv3Item{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:12px; border-radius:14px;
    border:1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.20);
  }
  .stv3Left{ display:flex; align-items:center; gap:12px; min-width:0; }
  .stv3Icon{
    width:40px; height:40px; border-radius:12px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    display:flex; align-items:center; justify-content:center;
    flex:none;
  }
  .stv3Icon svg{ width:20px; height:20px; fill: rgba(255,255,255,.86); }
  .stv3Txt{ min-width:0; }
  .stv3Name{ font-weight:900; font-size:13px; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .stv3Sub{ font-size:12px; opacity:.70; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  .stv3Right{ display:flex; align-items:center; gap:10px; flex:none; }
  .stv3Badge{
    padding:3px 10px; border-radius:999px; font-weight:900;
    font-size:11px; letter-spacing:.10em; text-transform:uppercase;
    border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.22);
  }
  .stv3Badge.run{ border-color: rgba(34,197,94,.25); background: rgba(34,197,94,.12); color:#a7f3c0; }
  .stv3Badge.err{ border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.12); color:#ffd1d1; }
  .stv3Badge.idle{ opacity:.82; }

  /* One big toggle like your attachment */
  .stv3Switch{ position:relative; width:54px; height:30px; }
  .stv3Switch input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
  .stv3Switch .track{
    position:absolute; inset:0; border-radius:999px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  }
  .stv3Switch .knob{
    position:absolute; top:4px; left:4px; width:22px; height:22px; border-radius:999px;
    background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(0,0,0,.35));
    border:1px solid rgba(255,255,255,.12);
    box-shadow: 0 10px 18px rgba(0,0,0,.35);
    transition: transform .14s ease;
  }
  .stv3Switch input:checked + .track{ background: rgba(34,197,94,.22); border-color: rgba(34,197,94,.28); }
  .stv3Switch input:checked + .track .knob{ transform: translateX(24px); }

  .stv3More{
    height:32px; padding:0 12px; border-radius:10px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.22);
    color: rgba(255,255,255,.92);
    font-weight:900; letter-spacing:.10em; text-transform:uppercase; font-size:11px; cursor:pointer;
  }

  .stv3Foot{ display:flex; align-items:center; gap:10px; margin-top:10px; }
  .stv3Form{ display:grid; grid-template-columns: 1fr; gap:10px; }
  @media (min-width: 560px){ .stv3Form{ grid-template-columns: 1fr 1fr; } }
  .stv3Field label{ display:block; font-size:12px; opacity:.78; margin-bottom:6px; }
  .stv3Field input{
    width:100%; height:34px; border-radius:10px; padding:0 10px;
    background: rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.10); color:#e9eef5;
    outline:none;
  }
  .stv3Adv summary{ cursor:pointer; user-select:none; font-size:12px; opacity:.78; }

  .stv3Actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; margin-top:4px; }
  .stv3LogWrap{ margin-top:12px; }
  .stv3Log{
    margin:0; height:170px; overflow:auto; padding:10px;
    border-radius:12px; border:1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.28); color: rgba(255,255,255,.82);
    font-size:12px; line-height:1.35; white-space:pre-wrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  }