.global-edit #hdr-mob-edit-btn {
  color: #4af !important;
}

#backup-browse-breadcrumb .cfg-edit-btn {
  min-height: 30px;
}

#cfg-server-qr img {

min-width: 100%;

}
.cfg-edit-btn.menu-heading:hover {
  background: transparent;
}
.preset-input .preset-name {
  flex:1;background:#141414;border:1px solid #2a2a2a;border-radius:3px;color:#ccc;font-size:11px;padding:3px 8px 4px;outline:none;
  width: 100%;
}

.preset-input input:focus { border-color: #555; }

/* ── Backup Overlay ─────────────────────────────────────────────────── */
  #backup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  #backup-overlay.visible { display: flex; }
  #backup-overlay-card {
    background: #1c1c1c;
    border: 1px solid #333;
    border-radius: 14px;
    padding: 36px 52px;
    text-align: center;
    min-width: 220px;
    max-width: 80vw;
    pointer-events: none;
    transition: border-color 0.2s;
  }
  #backup-overlay.running  #backup-overlay-card { border-color: #555; }
  #backup-overlay.success  #backup-overlay-card { border-color: #4caf50; }
  #backup-overlay.error    #backup-overlay-card { border-color: #f44336; }
  #backup-overlay-icon { font-size: 38px; margin-bottom: 14px; line-height: 1; }
  #backup-overlay-msg  { font-size: 13px; color: #ccc; line-height: 1.5; word-break: break-word; }
  #backup-overlay.success #backup-overlay-msg { color: #81c784; }
  #backup-overlay.error   #backup-overlay-msg { color: #e57373; }

  #backup-dst-list li .cfg-item span {
    padding-left: 20px;
  }

  #backup-status {
    display:none;align-items:center;gap:8px;padding:10px 18px 14px 18px;font-size:12px;word-break:break-all;position:fixed;bottom:0;z-index:1000;height: 45px;background:#040404;width:100%;box-sizing:border-box;border-top:2px solid #2a2a2a;
  }
  /* ── Reset & Base ──────────────────────────────────────────────────── */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; touch-action: manipulation; }

  :root {
    --bg:          #141414;
    --panel-bg:    #000000;
    --panel-border:#2e2e2e;
    --border:      #333;
    --text:        #ccc;
    --text-dim:    #555;
    --accent:      #00e5ff;
    --lq-off:      #aaa;
    --lq-on:       #ffb800;
    --btn-bg:      #242424;
    --btn-hover:   #303030;
    --btn-active:  #1a1a1a;
    --play-green:  #22ff44;
    --mg-orange:   #f3b166;
    --sb-blue:     #5b8dd9;
  }

  html, body {
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 0.04em;
    user-select: none;
  }

  /* ── Layout ────────────────────────────────────────────────────────── */
  .launcher {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding-top: 48px;
    gap: 0;
    height: calc(100% - 60px);
  }

  /* ── Header ─────────────────────────────────────────────────────────── */
  .header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 48px;
    padding: 0 16px 5px;
    background: #040404;
    border-bottom: 2px solid #2a2a2a;
  }
  .header a {
    color: #888;
    text-decoration: none;
    font-size: 6px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    transition: color 0.2s;
  }
  .header a:hover { color: #fff; }
  .header-left   { display: flex; align-items: center; }
  .header-center { text-align: center; }
  .header-right  { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

  /* ── Header hidden ──────────────────────────────────────────────────── */
  body.header-hidden .header {
    background: transparent;
    border-bottom-color: transparent;
    height: 40px;
    pointer-events: none;
  }
  body.header-hidden .header-left,
  body.header-hidden .header-center { display: none; }
  body.header-hidden .header-right  {
    pointer-events: auto;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
  }
  #hdr-hidden-left {
    display: none;
    align-items: center;
    gap: 4px;
  }
  body.header-hidden #hdr-hidden-left {
    display: flex;
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: auto;
  }
  #hdr-hidden-edit-btn {
    padding: 5px 6px;
    font-size: inherit;
    color: #444;
    transition: color 0.15s;
  }
  #hdr-hidden-edit-btn.active { color: rgb(68, 170, 255); }
  #hdr-hidden-title {
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.18em;
    color: #444;
    pointer-events: none;
    white-space: nowrap;
    text-transform: uppercase;
  }
  body.header-hidden.global-edit #hdr-hidden-title {
    color: #888;
    cursor: text;
    pointer-events: auto;
    outline: none;
    min-width: 60px;
  }
  body.header-hidden .launcher {
    padding-top: 0;
    height: 100%;
  }

#ql-title-input {
  margin-top: 5px;
}
  /* ── Fullscreen button ───────────────────────────────────────────────── */
  .fs-btn {
    background: none;
    border: none;
    color: #444;
    cursor: pointer;
    padding: 0 4px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
  }
  .fs-btn:hover { color: var(--accent); }
  .fs-btn svg { width: 28px; height: 28px; fill: currentColor; }

  /* LED hidden */
  .led { display: none; }

  .led {
    width: 8px; height: 8px; border-radius: 50%;
    background: #333;
    transition: background 0.3s;
  }
  .led.connected { background: var(--play-green); box-shadow: 0 0 6px var(--play-green); }
  .led.error     { background: #ff4444; }

  /* ── Center column ──────────────────────────────────────────────────── */
  .center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 325px;
    min-width: 200px;
    max-width: 800px;
    position: relative;
    top: 10px;
  }


  /* ── Width resize handles (left / right edge of center column) ───────── */
  .center-width-handle {
    position: absolute;
    top: -15px;

    width: 12px;
    cursor: default;
    /* z-index: 20; */
    margin: 0 8px;
    height: calc(100% + 5px);
    touch-action: manipulation;
  }
  body.global-edit .center-width-handle { cursor: ew-resize; }
  .center-width-single {}
  .center-width-left  { left:  -25px; }
  .center-width-right { right: -25px; }
  .center-width-handle::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    background: transparent;
    border-radius: 1px;
    transition: background 0.15s;
  }

  body.global-edit .center-width-handle:hover,
  .center-width-handle.resizing {
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
  }
  body.global-edit .center-width-handle:hover::after,
  .center-width-handle.resizing::after {
    background: rgba(255,255,255,0.28);
  }

  /* ── Panel resize handles ────────────────────────────────────────────── */
  .panel-resize-handle, .panel-resize-handle-dummy {
    width: calc(100% + 19px);
height: 12px;
flex-shrink: 0;
cursor: default;
position: relative;
margin: 5px 0;
transition: background 0.15s;
touch-action: none;
  }
  body.global-edit .panel-resize-handle { cursor: ns-resize; }



  .panel-resize-handle::after, .panel-resize-handle-dummy::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 1px;
    background: transparent;
    border-radius: 1px;
    transition: background 0.15s;
  }
  body.global-edit .panel-resize-handle::after, body.global-edit .center-width-handle::after { background: rgb(68, 170, 255, 0.3); }

  body.global-edit .panel-resize-handle:hover,
  .panel-resize-handle.resizing {
    background: rgba(255,255,255,0.05);
  }
  body.global-edit .panel-resize-handle:hover::after,
  .panel-resize-handle.resizing::after {
    background: rgba(255,255,255,0.28);
  }
    body.global-edit .panel-resize-handle:hover::after, body.global-edit .center-width-handle:hover::after { background: rgb(68, 170, 255, 1); }

  /* ── Block scene/mute/transport buttons in edit mode ────────────────── */
  body.global-edit .sb-btn,
  body.global-edit .mb-btn,
  body.global-edit .t-btn   { pointer-events: none; cursor: default; }
  body.global-edit .scrub-btn { pointer-events: none; cursor: default; }

  /* ── Panel scaled content (when user resizes a panel) ───────────────── */
#panel-mb.panel-scaled {
  overflow: visible !important;
}
  #panel-mb.panel-scaled .mb-buttons,
  #panel-sb.panel-scaled .sb-buttons {
    flex: 1;
    min-height: 0;
    grid-auto-rows: 1fr;
  }
  #panel-mb.panel-scaled .mb-cell,
  #panel-sb.panel-scaled .sb-cell {
    min-height: 44px;

  }
  #panel-mb.panel-scaled .mb-btn,
  #panel-sb.panel-scaled .sb-btn {
    flex: 1;
    height: auto;
    min-height: 44px;
  }
  #panel-fired {
    min-height: 0;
  }
  #panel-fired.panel-scaled .panel-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  #panel-fired.panel-scaled #playing-display {
    flex: 1;
    height: auto;
    min-height: 0;
  }
  #panel-pending {
    min-height: 0;
  }
  #panel-pending.panel-scaled .panel-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  #panel-pending.panel-scaled #ppend-display {
    flex: 1;
    height: auto;
    min-height: 0;
  }
  #panel-selected.panel-scaled .panel-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  #panel-selected.panel-scaled #next-display {
    flex: 1;
    height: auto;
    min-height: 40px;
    aspect-ratio: unset;
    overflow: hidden;
  }
  #panel-transport.panel-scaled .transport-grid {
    flex: 1;
    min-height: 0;
    grid-auto-rows: 1fr;
  }
  #panel-transport.panel-scaled .t-btn {
    height: auto;
    min-height: 44px;
  }
  #panel-transport.panel-scaled .transport-sort-item {
    height: auto;
    min-height: 44px;
  }

  /* ── Scene displays ─────────────────────────────────────────────────── */
  .scene-display {
    width: 100%;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: calc(24px * var(--s, 1));
    font-weight: 700;
    letter-spacing: 0.06em;
    background: var(--accent);
    transition: background 0.4s ease, color 0.4s ease;
    border: 2px solid rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
    /* padding: 8px 14px; */
    word-break: break-word;

  }
  .type-info-hidden .scene-display {
    min-height: 40px;
  }
  .scene-display::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 60%);
    pointer-events: none;
  }
  .scene-display.dark-text  { color: #000; }
  .scene-display.light-text { color: #fff; }
  body.scene-nums-hidden .scene-num-badge { display: none !important; }
  body.panel-headers-hidden .panel-header { display: none !important; }

  .scene-num-badge {
    position: absolute;
    bottom: 3px;
    right: 3px;
    font-size: 10px;
    font-weight: 700;
    opacity: 0.45;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
    font-family: "Helvetica Neue", Arial, sans-serif;
    letter-spacing: 0.04em;
  }

  #next-display    { aspect-ratio: 5 / 1; opacity: 1; }
  #next-name       { font-size: inherit; font-weight: inherit; letter-spacing: inherit; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  #playing-display { height: calc(140px * var(--s, 1)); min-height: 120px; }
  #ppend-display   { height: calc(80px * var(--s, 1)); min-height: 50px; font-size: calc(21px * var(--s, 1)); }

  #ppend-display .playing-inner {flex-direction: unset;}

  /* Next Scene: always same size (aspect-ratio), independent of TYPE/INFO */
  #panel-selected .panel-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  /* launch-blink removed */

  /* ── Pending-Launch Countdown ────────────────────────────────────────── */
  @keyframes pending-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.55; }
  }
  #ppend-play-overlay {
    border: 2px solid var(--bg);
    box-sizing: border-box;
  }
  #playing-display.pending-launch,
  #ppend-display.pending-launch,
  #ppend-play-overlay.pending-launch {
    animation: pending-pulse 0.8s ease-in-out infinite;
  }
  /* Countdown in time display element: italic + slightly dimmed */
  .playing-time.pending-countdown-active {
    font-style: italic;
    opacity: 0.8;
    letter-spacing: 0.04em;
    font-size: 27px;

  }

  /* ── Circle countdown ───────────────────────────────────────────────── */
  #pending-circle-overlay {
    display: none;
    position: absolute;
    top: 67%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: none;
  }
  #pending-circle-overlay.visible { display: none; }
  #pending-circle-svg {
    width: clamp(36px, 40%, 90px);
    height: auto;
    background: rgba(0,0,0,0.55);
    border-radius: 50%;
  }
  .pending-ring-bg {
    fill: none;
    stroke: rgba(255,255,255,0.12);
    stroke-width: 7;
  }
  .pending-ring-arc {
    fill: none;
    stroke: var(--accent);
    stroke-width: 7;
    stroke-linecap: round;
    stroke-dasharray: 251.3;   /* 2π × 40 */
    stroke-dashoffset: 0;
    transform: rotate(-90deg);
    transform-origin: 50px 50px;
    transition: stroke-dashoffset 0.1s linear;
  }
  .pending-ring-bar {
    fill: var(--accent);
    font-size: 26px;
    font-weight: 700;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    text-anchor: middle;
    dominant-baseline: central;
    letter-spacing: -0.02em;
  }
  .pending-ring-sec {
    fill: rgba(255,255,255,0.55);
    font-size: 16px;
    font-weight: 600;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    text-anchor: middle;
    dominant-baseline: central;
    letter-spacing: -0.01em;
  }

  /* ── Bar countdown ──────────────────────────────────────────────────── */
  #pending-bar-overlay {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: clamp(4px, 6%, 10px);
    background: rgba(0,0,0,0.7);
    z-index: 10;
    pointer-events: none;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.8);
    border-radius: 3px;
    margin: 0 5px 5px;
  }
  #pending-bar-overlay.visible { display: none; }
  #pending-bar-fill {
    height: 100%;
    width: 0%;
    background: rgba(255, 255, 255, 0.8);
    transition: width 0.1s linear;
  }

  /* ── Pending panel circle & bar countdown (ppend-*) ────────────────── */
  #ppend-circle-overlay,
  #ppend-ov-circle-overlay {
    display: none;
    position: absolute;
    top: 67%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: none;
  }
  #ppend-circle-overlay.visible,
  #ppend-ov-circle-overlay.visible { display: block; }
  #ppend-circle-svg,
  #ppend-ov-circle-overlay svg {
    width: clamp(36px, 40%, 90px);
    height: auto;
    background: rgba(0,0,0,0.55);
    border-radius: 50%;
  }
  #ppend-bar-overlay,
  #ppend-ov-bar-overlay {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: clamp(4px, 6%, 10px);
    background: rgba(0,0,0,0.7);
    z-index: 10;
    pointer-events: none;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.8);
    border-radius: 3px;
    margin: 0 5px 5px;
  }
  #ppend-bar-overlay.visible,
  #ppend-ov-bar-overlay.visible { display: block; }
  #ppend-bar-fill,
  #ppend-ov-bar-fill {
    height: 100%;
    width: 0%;
    background: rgba(255,255,255,0.8);
    transition: width 0.1s linear;
  }

  /* ── Playing inner ───────────────────────────────────────────────────── */
  .playing-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%; height: 100%;
    /* overflow: hidden; */
    min-height: auto !important;
  }
  .playing-scene-name {
    font-weight: 700;
    letter-spacing: unset;
    text-align: center;
    line-height: 1.1;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
  }

/* LQ off: dim the pending panel */
body.lq-off #panel-pending .panel-content {
  background: rgba(0, 0, 0, 1);
  border: none;
}

#panel-pending .playing-scene-name {

    display: block;

  }
  .playing-sep {
    width: 90%;
    height: 1px;
    background: currentColor;
    opacity: 0.22;
    flex-shrink: 0;
  }

  /* ── Time row (time display + scrub buttons) ────────────────────────── */
  .time-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-bottom: -10px;
  }
  .scrub-btn {
    background: none;
    border: none;
    color: currentColor;
    opacity: 0.28;
    cursor: pointer;
    padding: 8px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    line-height: 0;
    transition: opacity 0.15s, background 0.15s;
  }
  .scrub-btn:hover  { opacity: 0.65; }
  .scrub-btn:active { opacity: 1; }
  .scrub-btn svg { width: calc(24px * var(--s, 1)); height: calc(24px * var(--s, 1)); fill: currentColor; }

  .playing-time {
    font-size: calc(32px * var(--s, 1));
    font-weight: 300;
    font-family: 'Courier New', monospace;
    font-variant-numeric: tabular-nums;
    opacity: 0.9;
    transition: opacity 0.3s;
  }
  @keyframes time-blink {
    0%, 100% { opacity: 0.9; }
    50%       { opacity: 0.15; }
  }
  .playing-time.paused { animation: time-blink 1s ease-in-out infinite; }

  /* ── Panel base ──────────────────────────────────────────────────────── */


  .panel-box {
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    /* background: #222;
    border-radius: 5px;
    border: 1px solid #333; */
  }

  .panel-content {

/* overflow-y: scroll; */

  }
/*
  ::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 0px;
}

::-webkit-scrollbar-thumb {
  border-radius: 1px;
  background-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
} */

  .panel-label {
    color: #5c5c5c;
    font-size: calc(10px * var(--s, 1));
    letter-spacing: 0.25em;
    text-transform: uppercase;
    cursor: default;
    -webkit-user-select: auto;
    touch-action: manipulation;
    font-weight: 500;

  }
  body.global-edit .panel-label { cursor: grab; color: rgb(68, 170, 255, 0.7)}
  body.global-edit .panel-label:active, body.global-edit .panel-label:hover  { cursor: grabbing; color: rgb(68, 170, 255, 1);}
  .panel-dragging   { opacity: 0.3; }
  .panel-drop-before { box-shadow: 0 -3px 0 var(--accent) !important; }
  .panel-drop-after  { box-shadow: 0  3px 0 var(--accent) !important; }

  /* ── Transport ───────────────────────────────────────────────────────── */
  .transport {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .transport-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
  }

  .t-btn {
    height: calc(50px * var(--s, 1));
    grid-column: span 2;
    border-radius: 4px;
    border: 1px solid #333;
    background: var(--btn-bg);
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, border-color 0.12s, transform 0.08s;
    position: relative;
  }
  .t-btn:hover  { background: var(--btn-hover); border-color: #444; }
  .t-btn:active { background: var(--btn-active); transform: scale(0.94); }
  .t-btn.key-flash { background: var(--btn-hover); border-color: #555; transform: scale(0.94); transition: none; }

  svg { width: auto; height: auto; fill: currentColor; pointer-events: none; }

  /* Pause/Play button */
  .t-btn svg { width: calc(62px * var(--s, 1)); height: calc(62px * var(--s, 1)); }
  .t-btn.pause-btn svg { width: calc(44px * var(--s, 1)); height: calc(44px * var(--s, 1)); }
  .t-btn.play svg { width: calc(56px * var(--s, 1)); height: calc(56px * var(--s, 1)); }
  /* Rec button */
  .t-btn.rec-btn svg { width: calc(42px * var(--s, 1)); height: calc(42px * var(--s, 1)); transition: fill 0.15s, color 0.15s; }
  .t-btn.rec-btn.active-state { background: rgba(255,40,40,0.18); border-color: #ff3333; }
  .t-btn.rec-btn.active-state svg { fill: #ff3333; color: #ff3333; }
  /* Launch button */
  .t-btn.play.launching svg { color: #ff3333; }
  #btn-stop svg { width: calc(42px * var(--s, 1)); height: calc(42px * var(--s, 1)); }

  @keyframes fire-icon-fade {
    0%   { color: #ff3333; }
    100% { color: var(--text); }
  }
  .t-btn.play.fire-flash svg {
    animation: fire-icon-fade 1s ease-out forwards;
  }

  @keyframes nav-icon-fade {
    0%   { color: var(--lq-on); }
    100% { color: var(--text); }
  }
  .t-btn.nav-flash svg {
    animation: nav-icon-fade 1s ease-out forwards;
  }

  /* firing border removed */

  /* Play/Pause button states */
  /* Default state (stopped / paused): green play symbol */
  .t-btn.pause-btn svg { color: var(--text); }

  /* Transport running → grey pause symbol + grey blinking border */
  @keyframes pause-blink {
    0%, 100% { border-color: #666; box-shadow: 0 0 6px rgba(160,160,160,0.25); }
    50%       { border-color: #2a2a2a; box-shadow: none; }
  }
  .t-btn.pause-btn {
    animation: pause-blink 1s ease-in-out infinite;
  }
  .t-btn.pause-btn.is-playing {
    animation: none;
  }
  .t-btn.pause-btn.is-playing svg { color: var(--play-green) !important; }

  /* LQ badge inside Launch button */
  .lq-badge {
    position: absolute;
    bottom: 0; right: 0;
    border-radius: 3px 0 5px 0;
    font-size: calc(11px * var(--s, 1));
    font-weight: 700;
    /* letter-spacing: 0.1em; */
    padding: 2px 2px 3px 4px;
    border: 1px solid #444;
    background: #444;
    color: #1a1a1a;
    transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
    line-height: 1;
  }
#btn-split-lq .lq-badge, .lq-badge.active {
    color: #1a1a1a;
    border-color: rgba(255, 184, 0, 0.6);
    background: rgba(255, 184, 0, 0.6);
    box-shadow: 0 0 6px rgba(255,184,0,0.35);
  }

  /* ── LQ Panel ──────────────────────────────────────────────────────── */
  .lq-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .lq-active-label {
    color: var(--lq-on);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    min-width: 32px;
  }

  /* ── Mute Buttons Panel ─────────────────────────────────────────────── */
  .mb-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .mb-cell { display: flex; flex-direction: column; position: relative; cursor: grab;   overflow: hidden; }
  .mb-cell:nth-child(odd):last-child { grid-column: 1 / -1; }
  .mb-cell.dragging { opacity: 0.35; }
  .mb-cell.drag-over { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 5px; }
  .mb-cell button, .mb-cell select { cursor: pointer; }

  .mb-btn {
    position: relative;
    height: calc(44px * var(--s, 1));
    min-height: 44px;
    border-radius: 4px;
    border: 1px solid var(--mg-orange);
    border-bottom: 1px solid var(--mg-orange);
    background: var(--mg-orange);
    color: #000;
    box-shadow: none;
    font-size: calc(20px * var(--s, 1));
    font-weight: 500;
    letter-spacing: 0.05em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.08s;


  }
  .mb-btn:hover  { background: #f7c98a; border-color: #f7c98a; }
  .mb-btn:active { transform: scale(0.92); }
  .mb-btn.muted {
    background: #2a2a2a;
    border-color: #2a2a2a;
    color: #555;
    box-shadow: none;
  }
  .mb-btn.muted:hover { background: #333; border-color: #444; color: #666; }

  .mb-btn-label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  .mb-sel-trigger {
    position: absolute;
    top: 0; left: 0;
    width: calc(26px * var(--s, 1)); height: calc(22px * var(--s, 1));
    background: rgba(0,0,0,0.5);
    color: #eee;
    border: none;
    border-radius: 4px 0 4px 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #panel-mb.edit-mode .mb-sel-trigger { opacity: 1; pointer-events: auto; }
  .mb-arrow-icon {
    font-size: calc(18px * var(--s, 1));
    color: #eee;
    pointer-events: none;
    line-height: 1;
  }

  .mb-track-sel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    font-family: inherit;
    font-size: 12px;
  }
  .mb-track-sel option { background: #1a1a1a; color: #aaa; }

  /* ── Scene Buttons Panel ────────────────────────────────────────────── */
  .sb-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .sb-cell { display: flex; flex-direction: column; position: relative; cursor: grab;  overflow: hidden; }
  .sb-cell:nth-child(odd):last-child { grid-column: 1 / -1; }
  .sb-cell.dragging { opacity: 0.35; }
  .sb-cell.drag-over { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 5px; }
  .sb-cell button, .sb-cell select { cursor: pointer; }

  .sb-btn {
    position: relative;
    height: calc(44px * var(--s, 1));
    min-height: 44px;
    border-radius: 4px;
    border: 1px solid #2a2a2a;
    color: #555;
    font-size: calc(20px * var(--s, 1));
    font-weight: 500;
    letter-spacing: 0.05em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.08s;
  }
  .sb-btn.assigned {
    background: var(--sb-blue);
    border-color: var(--sb-blue);
    color: #fff;
  }
  .sb-btn.assigned:hover { filter: brightness(1.25); }
  .sb-btn:not(.assigned):hover { background: #333; border-color: #444; color: #666; }
  .sb-btn:active { transform: scale(0.92); }
  .sb-btn.playing {
    border-color: var(--play-green) !important;
  }
  .sb-btn-label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  /* ── Notes panel ────────────────────────────────────────────────────── */
  .notes-display {
    width: 100%;
    min-height: 44px;
    background: #111;
    border-radius: 6px 6px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    box-sizing: border-box;
    overflow: hidden;
  }
  #notes-text, #type-text {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #ccc;
    letter-spacing: 0.03em;
    text-align: center;
    white-space: nowrap;
    line-height: 1.2;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #type-text {
    overflow: visible;
  }
  /* TYPE + INFO row */
  #panel-show {
    display: grid;
    grid-template-columns: 15% 1fr;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  #panel-show-type.panel-scaled { overflow: hidden; }
  #panel-show-type.panel-scaled #panel-show,
  #panel-show-type.panel-scaled #panel-type { min-height: 0; }
  #panel-show-type.panel-scaled .panel-content {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
  }
  #panel-show-type.panel-scaled .notes-display { flex: 1; min-height: 40px; }

  .sb-sel-trigger {
    position: absolute;
    top: 0; left: 0;
    width: calc(26px * var(--s, 1));
    height: calc(22px * var(--s, 1));
    background: rgba(0,0,0,0.5);
    color: #eee;
    border: none;
    border-radius: 4px 0 4px 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #panel-sb.edit-mode .sb-sel-trigger { opacity: 1; pointer-events: auto; }
  .sb-arrow-icon-s {
    font-size: calc(18px * var(--s, 1));
    color: #eee;
    pointer-events: none;
    line-height: 1;
  }

  .sb-scene-sel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    font-family: inherit;
    font-size: 12px;
  }
  .sb-scene-sel option { background: #1a1a1a; color: #aaa; }

  /* ── Panel header ────────────────────────────────────────────────────────── */
  .panel-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 0 10px;
    height: 20px;
  }

  /* Add button – sits in panel header right side, hidden unless edit mode */
  .panel-add-btn {
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(68,170,255,0.12);
    border: 1px solid rgba(68,170,255,0.7);
    border-radius: 3px;
    color: rgba(68,170,255,0.7);
    font-size: calc(9px * var(--s, 1));
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2px 5px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    line-height: 1.2;
  }
  .panel-add-btn:hover { color: #7cf; border-color: #7cf; background: rgba(68,170,255,0.22); }

  /* Type/Info toggle button in Next panel header — only in edit mode */
  #next-type-info-btn {
    display: none;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 3px;
    color: #666;
    font-size: calc(9px * var(--s, 1));
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2px 5px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    line-height: 1.2;
  }
  #next-type-info-btn:hover { color: #ccc; border-color: #555; }
  #next-type-info-btn.checked { color: #4af; border-color: #4af; background: rgba(68,170,255,0.12); }
  body.global-edit #next-type-info-btn { display: flex; align-items: center; }

  /* Select-next toggle button in Transport panel header — only in edit mode */
  #select-next-btn,
  #transport-lq-btn {
    display: none;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 3px;
    color: #666;
    font-size: calc(9px * var(--s, 1));
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2px 5px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    line-height: 1.2;
  }
  #select-next-btn:hover,
  #transport-lq-btn:hover { color: rgba(68,170,255,0.7); border-color: rgba(68,170,255,0.7); }
  #select-next-btn.checked { color: rgba(68,170,255,1); border-color: rgba(68,170,255,1); background: rgba(68,170,255,0.12); }
  #transport-lq-btn.checked { color: rgba(68,170,255,1); border-color: rgba(68,170,255,1); background: rgba(68,170,255,0.12); }
  body.global-edit #select-next-btn,
  body.global-edit #transport-lq-btn { display: flex; align-items: center; }

  /* Sort button in Transport panel header — only in edit mode */
  #transport-sort-btn {
    display: none;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 3px;
    color: #666;
    font-size: calc(9px * var(--s, 1));
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2px 5px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    line-height: 1.2;
  }
  #transport-sort-btn:hover { color: rgba(68,170,255,0.7); border-color: rgba(68,170,255,0.7); }
  #transport-sort-btn.checked { color: rgba(68,170,255,1); border-color: rgba(68,170,255,1); background: rgba(68,170,255,0.12); }
  body.global-edit #transport-sort-btn { display: flex; align-items: center; }

  /* Scrub toggle button in Fired panel header — only in edit mode */
  /* Scrub toggle in transport header wrapper — no absolute positioning needed */
  #fired-scrub-btn {
    display: none;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 3px;
    color: #666;
    font-size: calc(9px * var(--s, 1));
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2px 5px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    line-height: 1.2;
  }
  #fired-scrub-btn:hover { color: #ccc; border-color: #555; }
  #fired-scrub-btn.checked { color: #4af; border-color: #4af; background: rgba(68,170,255,0.12); }
  body.global-edit #fired-scrub-btn { display: flex; align-items: center; }


  .countdown-btns {
    display: none;
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    flex-direction: row; gap: 2px;
  }
  body.global-edit .countdown-btns { display: flex; }
  #pending-launch-btn, #countdown-toggle-btn, #time-countdown-btn, #countdown-bar-btn, #countdown-sec-btn,
  #ppend-flash-btn, #ppend-bar-btn, #ppend-ring-btn {
    background: #1a1a1a; border: 1px solid #333; border-radius: 3px;
    color: #666; font-size: calc(9px * var(--s, 1)); font-weight: 600;
    padding: 1px 5px; cursor: pointer; white-space: nowrap;
    transition: color 0.15s, border-color 0.15s, background 0.15s; line-height: 1.2;
  }
  #pending-launch-btn:hover, #countdown-toggle-btn:hover, #time-countdown-btn:hover, #countdown-bar-btn:hover, #countdown-sec-btn:hover,
  #ppend-flash-btn:hover, #ppend-bar-btn:hover, #ppend-ring-btn:hover { color: #ccc; border-color: #555; }
  #pending-launch-btn.checked, #countdown-toggle-btn.checked, #time-countdown-btn.checked, #countdown-bar-btn.checked, #countdown-sec-btn.checked,
  #ppend-flash-btn.checked, #ppend-bar-btn.checked, #ppend-ring-btn.checked { color: #4af; border-color: #4af; background: rgba(68,170,255,0.12); }

  /* Left-side header button groups — edit mode only */
  .panel-left-btns {
    display: none;
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    flex-direction: row; gap: 2px; align-items: center;
  }
  body.global-edit .panel-left-btns { display: flex; }

  /* Right-side header button groups — edit mode only */
  .panel-right-btns {
    display: none;
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    flex-direction: row; gap: 2px; align-items: center;
  }
  body.global-edit .panel-right-btns { display: flex; }

  /* Pending header right: select always visible, Time button edit-mode only */
  .ppend-header-right {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: row; gap: 2px; align-items: center;
  }
  #ppend-time-btn { display: none; }
  body.global-edit #ppend-time-btn { display: flex; align-items: center; }

  #lq-value-select {
    display: none;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 3px;
    color: #666;
    font-size: calc(9px * var(--s, 1));
    font-weight: 600;
    padding: 1.5px 1px 1.5px 3px;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    line-height: 1.2;
  }
  #lq-value-select:hover { color: rgba(68,170,255,0.7); border-color: rgba(68,170,255,0.7); }
  #lq-value-select.lq-active:hover { border-color: rgba(68,170,255,1); color: rgba(68,170,255,1); }
  body.global-edit #lq-value-select { display: block; }
  #lq-value-select.lq-active { color: rgba(68,170,255,1); border-color: rgba(68,170,255,1); background: rgba(68,170,255,0.12); }

  #fired-time-btn, #fired-pending-btn, #ppend-time-btn, #pend-overlay-btn,
  #pov-flash-btn, #pov-bar-btn, #pov-ring-btn, #pov-time-btn {
    background: #1a1a1a; border: 1px solid #333; border-radius: 3px;
    color: #666; font-size: calc(9px * var(--s, 1)); font-weight: 600;
    padding: 2px 5px; cursor: pointer; white-space: nowrap;
    transition: color 0.15s, border-color 0.15s, background 0.15s; line-height: 1.2;
  }
  #fired-time-btn:hover, #fired-pending-btn:hover, #ppend-time-btn:hover, #pend-overlay-btn:hover,
  #pov-flash-btn:hover, #pov-bar-btn:hover, #pov-ring-btn:hover, #pov-time-btn:hover { color: rgba(68,170,255,0.7); border-color: rgba(68,170,255,0.7); }
  #fired-time-btn.checked, #fired-pending-btn.checked, #ppend-time-btn.checked, #pend-overlay-btn.checked,
  #pov-flash-btn.checked, #pov-bar-btn.checked, #pov-ring-btn.checked, #pov-time-btn.checked { color: rgba(68,170,255,1); border-color: rgba(68,170,255,1); background: rgba(68,170,255,0.12); }

  /* Playing-Header Pending-Overlay Buttons */
  #playing-ppend-btns {
    display: none;
    flex-direction: row;
    gap: 2px;
    align-items: center;
  }
  #playing-ppend-btns.visible { display: flex; }

  /* Scrub row im Transport-Panel */
  #fired-scrub-row {
    display: none;
  }


  #fired-scrub-row .t-btn svg {

    width: calc(42px * var(--s, 1));
height: calc(42px * var(--s, 1));
  }

  /* Show add button only in panel edit mode */
  #panel-mb.edit-mode .panel-add-btn,
  #panel-sb.edit-mode .panel-add-btn {
    display: flex;
  }
  .mb-remove-btn, .sb-remove-btn {
    position: absolute;
top: 0;
right: 0;
width: calc(22px * var(--s, 1));
height: calc(22px * var(--s, 1));
font-size: calc(18px * var(--s, 1));
background: rgba(0,0,0,0.5);
color: #eee;
border: none;
border-radius: 0 4px 0 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s;
z-index: 5;
padding: 9px 10px 12px 12px;
  }
  #panel-mb.edit-mode .mb-remove-btn,
  #panel-sb.edit-mode .sb-remove-btn { opacity: 1; pointer-events: auto; }

  /* ── Config Menu ─────────────────────────────────────────────────────── */
  .mb-util {
    display: flex;
    align-items: center;
    position: relative;
  }
  .cfg-btn {
    background: none;
    border: none;
    border-radius: 8px;
    color: #555;
    cursor: pointer;
    padding: 6px 8px;
    font-size: 28px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s;
  }
  .cfg-btn:hover { color: #888; }
  /* body.header-hidden .cfg-btn {
    background: var(--bg);
  padding: 0px 2px 4px;

  border-radius: 10px;
  height: 15px;
  width: 15px;

  } */
  .cfg-menu {
    position: absolute;
    top: calc(100% + 0px);
    right: -5px;
    background: #1e1e1e;
    border: 2px solid #333;
    border-radius: 6px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    min-width: 300px;
    max-width: 96vw;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    z-index: 50;
    opacity: 0;
    transform: translateX(20px);
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .cfg-menu.open {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
  }
  .cfg-item {
    background: none;
    border: none;
    color: #aaa;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 0.12em;

    text-align: left;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    width: 100%;
  }
  .cfg-item:hover  { background: #2a2a2a; color: #eee; }
  .cfg-item:active { background: #222; }
  .cfg-item + .cfg-item { border-top: 1px solid #2a2a2a; }
  .cfg-acc-header {
    background: #141414;
    border: none;
    border-top: 1px solid #222;
    color: #555;
    padding: 10px;
    width: 100%;
    text-align: left;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 0.25em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 0.1s;
  }
  .cfg-acc-header:first-child { border-top: none; }
  .cfg-acc-header:hover { color: #888; }
  .cfg-acc-header:has(+ .cfg-acc-body:not(.closed)) { color: #4af; }
  .cfg-acc-arrow { display: inline-block;}
  .cfg-acc-body { overflow-y: scroll; }
  #cfg-acc-keys { overflow-y: auto; max-height: 60vh; }
  .cfg-acc-body.closed { display: none; }
  .cfg-acc-body .cfg-item:first-child,
  .cfg-acc-body .cfg-link-item:first-child { border-top: none; }
  .cfg-vis-item { padding-right: 30px; position: relative; }
  .cfg-vis-item::before { content: '✓'; position: absolute; right: 12px; opacity: 0; }
  .cfg-vis-item.checked::before { opacity: 1; color: #00b4ff; }
  /* Checkmark item that is NOT moved by syncVisOrder */
  .cfg-check-item { padding-right: 30px; position: relative; }
  .cfg-check-item::before { content: '✓'; position: absolute; right: 12px; opacity: 0; }
  .cfg-check-item.checked::before { opacity: 1; color: #00b4ff;}
  .cfg-link-item { display: flex; align-items: stretch; border-top: 1px solid #2a2a2a; }
  .cfg-link-item:first-of-type { border-top: none; }
  .cfg-link-btn  { flex: 1; min-width: 0; border-top: none !important; text-align: left; overflow: hidden; display: flex; align-items: center; }
  .cfg-link-btn span { margin-left: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
  .cfg-edit-btn  {
    background: none; border: none; border-left: 1px solid #2a2a2a;
    color: #444; cursor: pointer; padding: 0 11px; font-size: 13px; line-height: 1;
    transition: color 0.1s, background 0.1s;
  }
  .cfg-edit-btn:hover { color: #aaa; background: #2a2a2a; }
  .cfg-icon {
    width: 13px; height: 13px;
    fill: currentColor;
    vertical-align: middle;
    margin-right: 2px;
    margin-top: -2px;
    display: inline-block;
  }

  /* ── Key-Shortcut Tooltip ───────────────────────────────────────────── */
  body:not(.tooltips-enabled) #key-tip { display: none !important; }
  #key-tip {
    position: fixed;
    z-index: 9999;
    background: #111;
    border: 1px solid #2a2a2a;
    color: #666;
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-family: inherit;
    padding: 4px 10px;
    border-radius: 4px;
    text-align: center;
    line-height: 1.4;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    white-space: nowrap;
  }

  /* ── iOS Fullscreen Hint ──────────────────────────────────────────────── */
  #ios-hint {
    position: fixed;
    bottom: 60px; left: 50%;
    transform: translateX(-50%);
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 12px 18px;
    font-size: 12px;
    color: #aaa;
    line-height: 1.7;
    text-align: center;
    z-index: 200;
    display: none;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
  }
  #ios-hint .hint-icon { color: var(--accent); font-size: 18px; display: block; margin-bottom: 4px; }
  #ios-hint .hint-close {
    display: block;
    margin-top: 8px;
    color: #555;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
  }
  #ios-hint .hint-close:hover { color: #888; }

  /* ── Connection banner ──────────────────────────────────────────────── */
  #conn-banner {
    position: fixed;
    bottom: 40px; left: 50%;
    transform: translateX(-50%);
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 12px;
    color: #888;
    display: none;
    z-index: 10;
  }

  /* ── Templates list ─────────────────────────────────────────────────── */
  .cfg-template-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 4px 6px;
    border-bottom: 1px solid #1e1e1e;
  }
  #cfg-acc-templates {
/* margin: 12px 7px 16px 12px; */
}
  .cfg-template-item:last-child { border-bottom: none; }
  .cfg-template-name {
    flex: 1;
    font-size: 11px;
    color: #bbb;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 2px 0;
  }
  .cfg-template-name:hover { color: #4af; }
  .cfg-template-btn {
    background: none;
    border: 1px solid #333;
    border-radius: 3px;
    color: #666;
    font-size: 10px;
    padding: 1px 5px;
    cursor: pointer;
    flex-shrink: 0;
  }
  .cfg-template-btn:hover { color: #aaa; border-color: #555; }
  .cfg-template-del:hover { color: #f66; border-color: #f66; }
  .cfg-row-btn {
    background: #1a1a1a;
border: 1px solid #2a2a2a;
border-radius: 3px;
color: #888;
font-size: 10px;
padding: 2px 10px 2px 10px;
cursor: pointer;
  }
  .cfg-row-btn:hover { color: #ccc; border-color: #555; }

  /* ── Key Mapping Rows ────────────────────────────────────────────────── */
  .km-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 10px 4px 18px;
    border-bottom: 1px solid #1e1e1e;
    gap: 6px;
  }
  .km-row:last-child { border-bottom: none; }
  .km-label {
    font-size: 10px;
    color: #888;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .km-key {
    min-width: 32px;
    padding: 2px 6px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 3px;
    color: #aaa;
    font-size: 10px;
    font-weight: 600;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
  }
  .km-key:hover { color: #fff; border-color: #555; background: #252525; }
  .km-key.capturing { color: var(--accent); border-color: var(--accent); background: rgba(0,229,255,0.08); animation: km-blink 0.6s step-end infinite; }
  @keyframes km-blink { 50% { opacity: 0.4; } }

  /* ── Black overlay ──────────────────────────────────────────────────── */
  #black-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
  }
  #black-overlay.visible {
    opacity: 1;
    pointer-events: auto;
  }
  body.black-mode { cursor: none !important; }

  /* ── Universal button hover fade ────────────────────────────────────── */
  button { transition-duration: 2ms !important; }


  /* ── Responsive ─────────────────────────────────────────────────────── */

    /* Split Fire Button removed – all Launch buttons are standalone in the sort system */
  #cfg-split-fire-btn { display: none !important; }

  /* ── Transport Sort System ───────────────────────────────────────────── */
  .transport-sort-item {
    position: relative !important;
    cursor: grab !important;
    display: flex !important;
    align-items: stretch;
    height: calc(50px * var(--s, 1));
  }
  .transport-sort-item > .t-btn {
    flex: 1;
    min-width: 0;
    height: 100% !important;
    cursor: inherit;
  }
  .transport-sort-item:active { cursor: grabbing !important; }
  .transport-sort-item.dragging { opacity: 0.4; }
  .transport-sort-item.drag-over {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px var(--accent);
  }
  .transport-rm-btn {
    position: absolute;
    top: 3px;
    right: 5px;
    font-size: 15px;
    line-height: 1;
    color: #f55;
    cursor: pointer;
    pointer-events: auto !important;
    z-index: 10;
    user-select: none;
  }

  .transport-add-item {
    background: #1a1a1a;
    border: 1px dashed #444;
    border-radius: 3px;
    color: #888;
    font-size: calc(10px * var(--s,1));
    padding: 3px 10px;
    cursor: pointer;
    height: auto !important;
    grid-column: unset !important;
    transition: color 0.15s, border-color 0.15s;
  }
  .transport-add-item:hover { color: #ccc; border-color: #666; }

/* ── Transport Layouts Bar ──────────────────────────────────────────────── */

#transport-add-bar {
  display: none;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0px 10px 10px;
  align-items: center;
}

.transport-layouts-bar {
  display: none;
  flex-direction: column;
  gap: 3px;
  padding: 5px 0px 0px;
  width: 100%;
  border-top: 1px solid rgb(42, 42, 42);
}
#key-presets-list, #cfg-templates-list {
  border-top: 1px solid rgb(42, 42, 42);
}
body.global-edit .transport-layouts-bar { display: flex; }
#show-items-presets-bar { display: flex; }

.transport-layouts-save-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 5px 10px 7px;
}

.transport-layouts-save-row button {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 3px;
  color: #888;
  font-size: 11px;
  padding: 3px 8px;
  cursor: pointer;
  white-space: nowrap;
}
.transport-layouts-save-row button:hover { color: #ccc; border-color: #555; }

#transport-layouts-list .cfg-item-row {
  display: flex;
  align-items: stretch;
  gap: 2px;
  border-top: 1px solid rgb(42, 42, 42);
}
#transport-layouts-list {
  border-top: 1px solid rgb(42, 42, 42);
}
#transport-layouts-list .cfg-link-btn {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#key-presets-bar { display: flex !important; }
#key-presets-list .cfg-item-row {
  display: flex;
  align-items: center;
  gap: 2px;
}
#key-presets-list .cfg-link-btn {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

  /* ── Config Menu Button icon toggle ─────────────────────────────────── */
  .cfg-btn .icon-close { display: none; }
  #cfg-menu.open ~ .cfg-btn .icon-menu { display: none; }
  #cfg-menu.open ~ .cfg-btn .icon-close { display: flex; color: #4af; }

  /* ── Mobile Phone View ──────────────────────────────────────────────── */
  @media (max-width: 600px) {
    #hdr-logo     { display: none !important; }
    #hdr-fs-btn   { display: none !important; }
    #hdr-edit-btn { display: none !important; }
    #hdr-mob-edit-btn { display: flex !important; }
    body.global-edit #hdr-mob-edit-btn { color: #ccc; }
  }

#cfg-server-url,
#cfg-server-url:link,
#cfg-server-url:visited,
#cfg-server-url:hover,
#cfg-server-url:active {
  color: #888;
  text-decoration: none;
  cursor: pointer;
}