@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

  /* ── Design tokens ── */
  :root {
    --bg:        #0a0a0f;
    --surface:   #13131c;
    --surface2:  #1c1c2e;
    --border:    #2a2a40;
    --accent:    #c084fc;
    --accent2:   #818cf8;
    --accent3:   #34d399;
    --danger:    #f87171;
    --text:      #e2e8f0;
    --muted:     #64748b;
    --radius:    14px;
    --glow:      0 0 24px rgba(192,132,252,0.18);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: 'DM Sans', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
  }


  /* ── Background nebula ── */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
      radial-gradient(ellipse 60% 40% at 80% 20%, rgba(192,132,252,0.08) 0%, transparent 60%),
      radial-gradient(ellipse 40% 50% at 10% 80%, rgba(129,140,248,0.06) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
  }

  /* ── Layout ── */
  header {
    position: relative;
    z-index: 1;
    padding: 28px 32px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .logo {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .logo-icon {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    box-shadow: var(--glow);
  }

  .logo h1 {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  .logo .version {
    font-size: 0.65rem;
    color: var(--muted);
    font-family: 'DM Mono', monospace;
    margin-top: 2px;
  }

  .header-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--muted);
  }

  .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--muted);
    transition: background 0.3s, box-shadow 0.3s;
  }
  .dot.active {
    background: var(--accent3);
    box-shadow: 0 0 8px rgba(52,211,153,0.5);
  }

  main {
    position: relative;
    z-index: 1;
    flex: 1;
    padding: 28px 32px;
    display: grid;
    grid-template-columns: 340px 1fr;
    grid-template-rows: auto 1fr;
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
  }

  /* ── Panels ── */
  .panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
  }

  .panel-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .panel-title {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .panel-body {
    padding: 20px;
  }

  /* ── Buttons ── */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 9px;
    border: none;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    font-family: inherit;
    transition: all 0.15s;
    white-space: nowrap;
  }

  .btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff;
    box-shadow: 0 2px 12px rgba(192,132,252,0.25);
  }
  .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(192,132,252,0.4); }
  .btn-primary:active { transform: translateY(0); }

  .btn-ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
  }
  .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

  .btn-danger {
    background: rgba(248,113,113,0.15);
    border: 1px solid rgba(248,113,113,0.3);
    color: var(--danger);
  }
  .btn-danger:hover { background: rgba(248,113,113,0.25); }

  .btn-sm { padding: 6px 12px; font-size: 0.75rem; border-radius: 7px; }

  .btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; }

  /* ── Left column ── */
  .left-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    grid-row: 1 / 3;
  }

  /* Connection methods */
  .connect-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg);
    border-radius: 8px;
    padding: 4px;
    margin-bottom: 16px;
  }

  .tab-btn {
    flex: 1;
    text-align: center;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--muted);
    font-family: inherit;
    transition: all 0.15s;
  }
  .tab-btn.active {
    background: var(--surface2);
    color: var(--accent);
    border: 1px solid var(--border);
  }

  .tab-pane { display: none; }
  .tab-pane.active { display: block; }

  /* Input */
  .field { margin-bottom: 14px; }
  .field label {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--muted);
    margin-bottom: 6px;
    letter-spacing: 0.04em;
  }
  .field input, .field select {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 12px;
    color: var(--text);
    font-size: 0.83rem;
    font-family: 'DM Mono', monospace;
    transition: border-color 0.15s;
  }
  .field input:focus, .field select:focus {
    outline: none;
    border-color: var(--accent);
  }

  /* Device list */
  .device-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 60px;
  }

  .device-card {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
  }
  .device-card:hover { border-color: var(--accent); }
  .device-card.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), inset 0 0 0 1px rgba(192,132,252,0.08);
  }

  .device-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }

  .device-name {
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: -0.01em;
  }

  .device-name-wrap {
    min-width: 0;
  }
  .device-name-wrap .device-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
  }
  .rename-btn {
    flex-shrink: 0;
  }

  .device-protocol {
    font-size: 0.65rem;
    font-family: 'DM Mono', monospace;
    color: var(--accent2);
    background: rgba(129,140,248,0.12);
    border-radius: 4px;
    padding: 2px 7px;
  }

  .device-caps {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  .cap-badge {
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255,255,255,0.05);
    color: var(--muted);
    border: 1px solid var(--border);
  }
  .cap-badge.on { background: rgba(52,211,153,0.12); color: var(--accent3); border-color: rgba(52,211,153,0.25); }

  .battery-bar {
    position: absolute;
    top: 14px; right: 48px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    color: var(--muted);
  }

  .disconnect-btn {
    position: absolute;
    top: 12px; right: 12px;
    width: 22px; height: 22px;
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    transition: color 0.15s;
  }
  .disconnect-btn:hover { color: var(--danger); }

  .empty-state {
    text-align: center;
    padding: 32px 20px;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.6;
  }

  /* ── Right column — control surface ── */
  /* ── Control surface becomes a free-form window canvas ── */
  .control-surface {
    grid-column: 2;
    grid-row: 1 / 3;
    position: relative;
    min-height: 520px;
    overflow: hidden;
  }

  .no-device-msg {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--muted);
    pointer-events: none;
  }
  .no-device-msg .big-icon { font-size: 48px; opacity: 0.3; }

  /* ── Floating control window ── */
  .ctrl-window {
    position: absolute;
    min-width: 260px;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--win-accent, var(--border));
    border-radius: 14px;
    box-shadow:
      0 8px 32px rgba(0,0,0,0.45),
      0 0 0 0 var(--win-accent, transparent);
    overflow: hidden;
    transition: box-shadow 0.2s, border-color 0.2s;
    z-index: 10;
    user-select: none;
  }
  .ctrl-window.focused {
    z-index: 20;
    box-shadow:
      0 16px 48px rgba(0,0,0,0.6),
      0 0 0 1px var(--win-accent, var(--border));
  }

  /* Title bar — drag handle */
  .ctrl-win-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--win-bar-bg, var(--surface2));
    border-bottom: 1px solid var(--win-accent, var(--border));
    cursor: grab;
    gap: 8px;
  }
  .ctrl-win-bar:active { cursor: grabbing; }

  .ctrl-win-title {
    flex: 1;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--win-title-color, var(--muted));
    pointer-events: none;
  }

  /* Traffic-light dots */
  .ctrl-win-dot {
    width: 11px; height: 11px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.15s, transform 0.15s;
  }
  .ctrl-win-dot:hover { opacity: 0.8; transform: scale(1.15); }
  .ctrl-win-dot.close  { background: #ff5f57; }
  .ctrl-win-dot.min    { background: #ffbd2e; }
  .ctrl-win-dot.color  { background: var(--win-accent, #c084fc); }

  /* Window body */
  .ctrl-win-body {
    padding: 16px;
    overflow: auto;
    max-height: 70vh;
  }
  .ctrl-window.minimized .ctrl-win-body { display: none; }
  .ctrl-window.minimized { min-width: 0; }

  /* Resize handle */
  .ctrl-win-resize {
    position: absolute;
    right: 0; bottom: 0;
    width: 16px; height: 16px;
    cursor: se-resize;
    opacity: 0.3;
    background: linear-gradient(-45deg, var(--win-accent, var(--muted)) 3px, transparent 3px) 0 100%/6px 6px,
                linear-gradient(-45deg, var(--win-accent, var(--muted)) 3px, transparent 3px) 4px 96%/6px 6px;
    background-repeat: no-repeat;
  }
  .ctrl-window:hover .ctrl-win-resize { opacity: 0.6; }

  /* ── Window toolbar (above canvas) ── */
  .win-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0 0;
    flex-wrap: wrap;
  }
  .win-toolbar-label {
    font-size: 0.68rem;
    color: var(--muted);
    letter-spacing: 0.05em;
  }

  /* ── Color picker popover ── */
  .color-popover {
    position: absolute;
    z-index: 1000;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    min-width: 200px;
    display: none;
  }
  .color-popover.open { display: block; }
  .color-popover-title {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
  }
  .color-swatches {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-bottom: 10px;
  }
  .color-swatch {
    width: 26px; height: 26px;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
  }
  .color-swatch:hover { transform: scale(1.15); }
  .color-swatch.selected { border-color: white; }
  .color-custom-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
  }
  .color-custom-row label { font-size: 0.7rem; color: var(--muted); }
  .color-custom-row input[type=color] {
    width: 32px; height: 28px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: none;
    cursor: pointer;
    padding: 1px;
  }
  .color-apply-row {
    display: flex;
    gap: 6px;
    margin-top: 10px;
  }
  .color-target-row {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
  }
  .color-target-btn {
    font-size: 0.68rem;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
  }
  .color-target-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(192,132,252,0.1); }

  /* ── Voice chat ── */
  .voice-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
  }
  .voice-btn:hover { border-color: var(--accent3); color: var(--accent3); }
  .voice-btn.active {
    background: rgba(52,211,153,0.12);
    border-color: var(--accent3);
    color: var(--accent3);
    box-shadow: 0 0 12px rgba(52,211,153,0.2);
    animation: voice-pulse 1.6s ease-in-out infinite;
  }
  .voice-btn.muted {
    background: rgba(248,113,113,0.1);
    border-color: var(--danger);
    color: var(--danger);
  }
  @keyframes voice-pulse {
    0%,100% { box-shadow: 0 0 12px rgba(52,211,153,0.2); }
    50%      { box-shadow: 0 0 24px rgba(52,211,153,0.45); }
  }

  .voice-peers {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
  }
  .voice-peer-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.76rem;
    padding: 6px 10px;
    background: var(--surface2);
    border-radius: 8px;
    border: 1px solid var(--border);
  }
  .voice-level {
    flex: 1;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
  }
  .voice-level-fill {
    height: 100%;
    background: var(--accent3);
    width: 0%;
    transition: width 0.08s;
    border-radius: 2px;
  }

  /* ── Video Chat (VDO.Ninja) ── */
  .video-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
  }
  .video-btn:hover { border-color: #60a5fa; color: #60a5fa; }
  .video-btn.active {
    background: rgba(96,165,250,0.12);
    border-color: #60a5fa;
    color: #60a5fa;
    box-shadow: 0 0 12px rgba(96,165,250,0.2);
    animation: video-pulse 2s ease-in-out infinite;
  }
  @keyframes video-pulse {
    0%,100% { box-shadow: 0 0 12px rgba(96,165,250,0.2); }
    50%      { box-shadow: 0 0 28px rgba(96,165,250,0.45); }
  }

  .video-section {
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: 11px;
    overflow: hidden;
    background: #000;
  }

  .video-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    font-size: 0.72rem;
    color: var(--muted);
    font-weight: 500;
  }

  .video-section-header span {
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.65rem;
  }

  .video-frames {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: #000;
  }

  .video-section.video-expanded .video-frames {
    grid-template-columns: 1fr;
  }

  .video-frame-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #111;
    overflow: hidden;
  }

  .video-frame-label {
    position: absolute;
    bottom: 6px;
    left: 8px;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.7);
    background: rgba(0,0,0,0.5);
    border-radius: 4px;
    padding: 2px 6px;
    pointer-events: none;
    z-index: 2;
  }

  .video-controls {
    display: flex;
    gap: 6px;
    padding: 8px 10px;
    background: var(--surface2);
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
  }

  .video-ctrl-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
  }
  .video-ctrl-btn:hover { border-color: var(--accent); color: var(--accent); }
  .video-ctrl-btn.muted { border-color: var(--danger); color: var(--danger); }

  .video-expand-btn {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 0.72rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 5px;
    transition: color 0.15s;
  }
  .video-expand-btn:hover { color: var(--accent); }
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .control-card {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 18px;
  }

  .control-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .control-label .val {
    font-family: 'DM Mono', monospace;
    color: var(--accent);
    font-size: 0.78rem;
    letter-spacing: 0;
    text-transform: none;
  }

  /* ═══════════════════════════════════════════════════════════
     LUXE SLIDER SYSTEM
     Vertical: div-based drag interaction (no writing-mode hacks)
     Horizontal: native input[range] with custom track + fill div
     Palette matches Toy_Slider_Test_Design.html:
       Track gradient: pink-500 (#ec4899) → purple-500 (#a855f7)
       Thumb: white, 3px pink border, pink glow
       Track bg (unfilled): #1f2937 (zinc-800)
     ═══════════════════════════════════════════════════════════ */

  /* ── Shared gradient token ──────────────────────────────── */
  :root {
    --luxe-pink:   #ec4899;
    --luxe-purple: #a855f7;
    --luxe-grad:   linear-gradient(135deg, var(--luxe-pink), var(--luxe-purple));
    --luxe-track:  #1f2937;
    --luxe-thumb-size: 28px;
    --luxe-thumb-border: 3px solid var(--luxe-pink);
    --luxe-glow:   0 0 20px rgba(236,72,153,0.6), 0 10px 15px -3px rgba(0,0,0,0.3);
    --luxe-glow-hover: 0 0 30px rgba(236,72,153,0.9), 0 0 0 6px rgba(236,72,153,0.12);
  }

  /* ─────────────────────────────────────────────────────────
     VERTICAL SLIDER
  ───────────────────────────────────────────────────────── */

  .vslider-wrap {
    display: flex;
    gap: 22px;
    align-items: stretch;
    justify-content: center;
    padding: 10px 8px 6px;
    min-height: 200px;
  }

  .vslider-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 1;
    max-width: 68px;
  }

  /* Live percentage above slider */
  .vslider-val {
    font-family: 'DM Mono', monospace;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--luxe-pink);
    letter-spacing: -0.01em;
    min-height: 22px;
    transition: transform 0.08s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s;
    text-shadow: 0 0 12px rgba(236,72,153,0.5);
  }
  .vslider-val.pop {
    transform: scale(1.2);
  }

  /* Outer capsule — the "track background" */
  .vslider-shell {
    flex: 1;
    width: 38px;
    background: var(--luxe-track);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 9999px;
    position: relative;
    cursor: pointer;
    overflow: visible;
    min-height: 140px;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .vslider-shell:hover {
    border-color: rgba(236,72,153,0.4);
    box-shadow: 0 0 16px rgba(236,72,153,0.12);
  }
  .vslider-shell.dragging {
    border-color: var(--luxe-pink);
    box-shadow: 0 0 20px rgba(236,72,153,0.2);
  }

  /* Inner rail */
  .vslider-rail {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    top: 18px;
    bottom: 18px;
    background: rgba(255,255,255,0.05);
    border-radius: 9999px;
    overflow: hidden;
  }

  /* Gradient fill — pink at bottom, purple at top */
  .vslider-fill {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, var(--luxe-pink), var(--luxe-purple));
    border-radius: 9999px;
    transition: height 0.05s;
    height: 0%;
  }

  /* Tick marks */
  .vslider-ticks {
    position: absolute;
    right: -10px;
    top: 18px;
    bottom: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
  }
  .vslider-tick {
    width: 5px;
    height: 1px;
    background: rgba(255,255,255,0.1);
    border-radius: 1px;
  }
  .vslider-tick.major {
    width: 8px;
    background: rgba(255,255,255,0.2);
  }

  /* Thumb — white with pink border, matching Luxe design */
  .vslider-thumb {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 50%);
    width: var(--luxe-thumb-size);
    height: var(--luxe-thumb-size);
    border-radius: 50%;
    background: white;
    border: var(--luxe-thumb-border);
    box-shadow: var(--luxe-glow);
    cursor: grab;
    transition:
      bottom 0.05s,
      transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    bottom: 0%;
  }
  .vslider-shell.dragging .vslider-thumb,
  .vslider-thumb:hover {
    transform: translate(-50%, 50%) scale(1.15);
    box-shadow: var(--luxe-glow-hover);
    cursor: grabbing;
  }

  /* Outer glow ring when active */
  .vslider-glow {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 50%);
    width: var(--luxe-thumb-size);
    height: var(--luxe-thumb-size);
    border-radius: 50%;
    background: transparent;
    border: 2px solid rgba(236,72,153,0);
    pointer-events: none;
    transition: border-color 0.3s, width 0.3s, height 0.3s;
    z-index: 1;
    bottom: 0%;
  }
  .vslider-shell.active .vslider-glow {
    width: 46px; height: 46px;
    border-color: rgba(236,72,153,0.3);
    transform: translate(-50%, 50%);
    animation: vslider-ring 1.8s ease-in-out infinite;
  }
  @keyframes vslider-ring {
    0%,100% { opacity: 0.4; transform: translate(-50%, 50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, 50%) scale(1.08); }
  }

  /* Motor label below */
  .vslider-label {
    font-size: 0.62rem;
    font-family: 'DM Mono', monospace;
    font-weight: 600;
    color: rgba(255,255,255,0.35);
    text-align: center;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  /* ─────────────────────────────────────────────────────────
     HORIZONTAL SLIDER — Luxe design
     Track: 8px, dark bg (#1f2937), pink→purple gradient fill
     Thumb: white, 28px, 3px pink border, pink glow
  ───────────────────────────────────────────────────────── */

  .hslider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 9999px;
    background: transparent;
    cursor: pointer;
    position: relative;
    z-index: 2;
    margin: 0;
    display: block;
    outline: none;
  }

  .hslider-track {
    position: relative;
    height: 8px;
    background: var(--luxe-track);
    border-radius: 9999px;
    margin: 14px 0 6px;
  }

  .hslider-fill-h {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: linear-gradient(to right, var(--luxe-pink), var(--luxe-purple));
    border-radius: 9999px;
    pointer-events: none;
    width: 0%;
    transition: width 0.05s;
  }

  /* Input sits over the track */
  .hslider-track .hslider {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0; right: 0;
    width: 100%;
    height: 24px;
    background: transparent;
    margin: 0;
  }

  /* Webkit thumb */
  .hslider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: var(--luxe-thumb-size);
    height: var(--luxe-thumb-size);
    border-radius: 50%;
    background: white;
    border: var(--luxe-thumb-border);
    box-shadow: var(--luxe-glow);
    cursor: grab;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .hslider::-webkit-slider-thumb:hover,
  .hslider:active::-webkit-slider-thumb {
    transform: scale(1.15);
    box-shadow: var(--luxe-glow-hover);
    cursor: grabbing;
  }

  /* Firefox thumb */
  .hslider::-moz-range-thumb {
    width: var(--luxe-thumb-size);
    height: var(--luxe-thumb-size);
    border-radius: 50%;
    background: white;
    border: var(--luxe-thumb-border);
    box-shadow: var(--luxe-glow);
    cursor: grab;
  }
  .hslider::-moz-range-track {
    height: 8px;
    background: transparent;
    border-radius: 9999px;
  }

  /* Slider labels (Gentle / Maximum etc.) */
  .hslider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    color: rgba(255,255,255,0.3);
    margin-top: 4px;
    letter-spacing: 0.03em;
  }

  /* Pattern selector */
  .pattern-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  .pattern-btn {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 6px;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--muted);
    font-family: inherit;
    text-align: center;
    transition: all 0.15s;
    line-height: 1.3;
  }
  .pattern-btn:hover { border-color: var(--accent); color: var(--accent); }
  .pattern-btn.active { background: rgba(192,132,252,0.12); border-color: var(--accent); color: var(--accent); }
  .pattern-icon { display: block; font-size: 16px; margin-bottom: 4px; }

  /* Linear position control */
  .linear-display {
    position: relative;
    height: 80px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 9px;
    margin: 12px 0;
    overflow: hidden;
  }
  .linear-indicator {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    box-shadow: 0 0 12px rgba(192,132,252,0.5);
    transition: left 0.3s ease;
    left: 10%;
  }

  /* Stop all button */
  .stop-all-btn {
    width: 100%;
    padding: 14px;
    background: rgba(248,113,113,0.1);
    border: 1px solid rgba(248,113,113,0.25);
    border-radius: 11px;
    color: var(--danger);
    font-size: 0.88rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: all 0.15s;
  }
  .stop-all-btn:hover {
    background: rgba(248,113,113,0.2);
    border-color: rgba(248,113,113,0.5);
    box-shadow: 0 0 20px rgba(248,113,113,0.15);
  }

  /* Emergency stop toggle button */
  .estop-btn {
    width: 100%;
    padding: 15px;
    border-radius: 11px;
    border: 2px solid rgba(248,113,113,0.4);
    background: rgba(248,113,113,0.08);
    color: var(--danger);
    font-size: 0.9rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
  }
  .estop-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(248,113,113,0);
    transition: background 0.2s;
  }
  .estop-btn:hover {
    border-color: rgba(248,113,113,0.7);
    box-shadow: 0 0 24px rgba(248,113,113,0.2);
  }
  .estop-btn:hover::before { background: rgba(248,113,113,0.05); }

  .estop-btn.active {
    background: rgba(248,113,113,0.18);
    border-color: var(--danger);
    box-shadow: 0 0 30px rgba(248,113,113,0.35), inset 0 0 20px rgba(248,113,113,0.08);
    animation: estop-pulse 1.4s ease-in-out infinite;
  }
  @keyframes estop-pulse {
    0%,100% { box-shadow: 0 0 30px rgba(248,113,113,0.35), inset 0 0 20px rgba(248,113,113,0.08); }
    50%      { box-shadow: 0 0 50px rgba(248,113,113,0.6), inset 0 0 30px rgba(248,113,113,0.15); }
  }
  .estop-btn .estop-icon {
    font-size: 1.3rem;
    line-height: 1;
    transition: transform 0.2s;
  }
  .estop-btn.active .estop-icon { animation: estop-spin 3s linear infinite; }
  @keyframes estop-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  /* Edge button — pause without revoking permissions */
  .edge-btn {
    width: 100%;
    padding: 15px;
    border-radius: 11px;
    border: 2px solid rgba(251,191,36,0.4);
    background: rgba(251,191,36,0.07);
    color: #f59e0b;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
  }
  .edge-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(251,191,36,0);
    transition: background 0.2s;
  }
  .edge-btn:hover {
    border-color: rgba(251,191,36,0.7);
    box-shadow: 0 0 24px rgba(251,191,36,0.2);
  }
  .edge-btn:hover::before { background: rgba(251,191,36,0.05); }
  .edge-btn.active {
    background: rgba(251,191,36,0.16);
    border-color: #f59e0b;
    box-shadow: 0 0 30px rgba(251,191,36,0.4), inset 0 0 20px rgba(251,191,36,0.08);
    animation: edge-pulse 1.8s ease-in-out infinite;
  }
  @keyframes edge-pulse {
    0%,100% { box-shadow: 0 0 30px rgba(251,191,36,0.4), inset 0 0 20px rgba(251,191,36,0.08); }
    50%      { box-shadow: 0 0 55px rgba(251,191,36,0.65), inset 0 0 30px rgba(251,191,36,0.14); }
  }
  .edge-btn .edge-icon {
    font-size: 1.3rem;
    line-height: 1;
  }
  .edge-btn.active .edge-icon {
    animation: edge-throb 1.8s ease-in-out infinite;
  }
  @keyframes edge-throb {
    0%,100% { transform: scale(1); }
    50%      { transform: scale(1.25); }
  }
  .estop-status {
    font-size: 0.65rem;
    font-family: 'DM Mono', monospace;
    letter-spacing: 0.08em;
    opacity: 0.7;
    display: block;
    margin-top: 2px;
    font-weight: 400;
    text-transform: uppercase;
  }

  /* Log */
  .log-panel {
    font-family: 'DM Mono', monospace;
    font-size: 0.72rem;
    color: var(--muted);
    height: 110px;
    overflow-y: auto;
    padding: 10px 0 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .log-panel::-webkit-scrollbar { width: 4px; }
  .log-panel::-webkit-scrollbar-track { background: transparent; }
  .log-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

  .log-line { display: flex; gap: 10px; }
  .log-time { color: var(--border); flex-shrink: 0; }
  .log-msg  { word-break: break-all; }
  .log-msg.ok     { color: var(--accent3); }
  .log-msg.warn   { color: #fbbf24; }
  .log-msg.error  { color: var(--danger); }
  .log-msg.info   { color: var(--accent2); }

  /* Info callout */
  .callout {
    border-radius: 9px;
    padding: 12px 14px;
    font-size: 0.78rem;
    line-height: 1.6;
    border: 1px solid;
  }
  .callout-info {
    background: rgba(129,140,248,0.08);
    border-color: rgba(129,140,248,0.2);
    color: var(--accent2);
  }
  .callout-warn {
    background: rgba(251,191,36,0.08);
    border-color: rgba(251,191,36,0.2);
    color: #fbbf24;
  }
  .callout-ok {
    background: rgba(52,211,153,0.08);
    border-color: rgba(52,211,153,0.2);
    color: var(--accent3);
  }

  /* Animation keyframes */
  @keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 8px rgba(192,132,252,0.3); }
    50%       { box-shadow: 0 0 20px rgba(192,132,252,0.6); }
  }
  .scanning { animation: pulse-glow 1.2s ease-in-out infinite; }

  @keyframes slide-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .slide-in { animation: slide-in 0.25s ease; }

  /* Responsive */
  @media (max-width: 900px) {
    main {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      padding: 16px;
    }
    .left-col { grid-row: auto; }
    .control-surface { grid-column: 1; grid-row: auto; }
    .control-grid { grid-template-columns: 1fr; }
  }

  /* Intiface status strip */
  .intiface-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(129,140,248,0.06);
    border: 1px solid rgba(129,140,248,0.15);
    border-radius: 9px;
    padding: 10px 14px;
    font-size: 0.76rem;
  }
  .intiface-strip .label { color: var(--muted); }
  .intiface-strip .status { color: var(--accent2); font-family: 'DM Mono', monospace; }

  /* ── Remote Control ── */
  .remote-tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
  }
  .remote-tab {
    flex: 1; padding: 10px;
    background: transparent; border: none;
    border-bottom: 2px solid transparent;
    color: var(--muted); font-size: 0.78rem; font-weight: 500;
    font-family: inherit; cursor: pointer; transition: all 0.15s; text-align: center;
  }
  .remote-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
  .remote-tab:hover:not(.active) { color: var(--text); }
  .remote-pane { display: none; }
  .remote-pane.active { display: block; }

  .session-code-box {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 10px; padding: 16px; text-align: center; margin: 14px 0;
  }
  .session-code {
    font-family: 'DM Mono', monospace; font-size: 2rem; font-weight: 500;
    letter-spacing: 0.18em; color: var(--accent);
    text-shadow: 0 0 20px rgba(192,132,252,0.3);
  }
  .session-code-label { font-size: 0.68rem; color: var(--muted); margin-top: 4px; letter-spacing: 0.06em; }

  .peer-state {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 20px; font-size: 0.72rem; font-weight: 500;
  }
  .peer-state.waiting    { background: rgba(100,116,139,0.15); color: var(--muted); }
  .peer-state.connecting { background: rgba(251,191,36,0.12);  color: #fbbf24; }
  .peer-state.connected  { background: rgba(52,211,153,0.12);  color: var(--accent3); }
  .peer-state.error      { background: rgba(248,113,113,0.12); color: var(--danger); }
  .peer-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .peer-state.connecting .peer-dot { animation: pulse-glow 0.8s ease-in-out infinite; }

  .latency-pill {
    font-family: 'DM Mono', monospace; font-size: 0.68rem;
    color: var(--accent3); background: rgba(52,211,153,0.1);
    border: 1px solid rgba(52,211,153,0.2); border-radius: 20px; padding: 2px 9px;
  }

  .touch-pad {
    background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
    height: 160px; position: relative; overflow: hidden;
    cursor: crosshair; touch-action: none; user-select: none;
  }
  .touch-pad-label {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%); font-size: 0.75rem;
    color: var(--border); pointer-events: none; text-align: center; line-height: 1.6;
  }
  .touch-pad-cursor {
    position: absolute; width: 32px; height: 32px; border-radius: 50%;
    background: radial-gradient(circle, rgba(192,132,252,0.8), rgba(129,140,248,0.4));
    box-shadow: 0 0 16px rgba(192,132,252,0.5);
    transform: translate(-50%,-50%); transition: opacity 0.15s;
    pointer-events: none; opacity: 0;
  }

  .intensity-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .int-btn {
    background: var(--bg); border: 1px solid var(--border); border-radius: 7px;
    padding: 10px 4px; cursor: pointer; font-size: 0.7rem; font-weight: 600;
    color: var(--muted); font-family: inherit; text-align: center; transition: all 0.12s;
  }
  .int-btn:hover, .int-btn.active {
    background: rgba(192,132,252,0.15); border-color: var(--accent); color: var(--accent);
  }

  .chat-window {
    background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
    height: 120px; overflow-y: auto; padding: 10px 12px;
    display: flex; flex-direction: column; gap: 5px; font-size: 0.75rem;
  }
  .chat-window::-webkit-scrollbar { width: 3px; }
  .chat-window::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
  .chat-msg { display: flex; gap: 8px; line-height: 1.4; }
  .chat-who { font-weight: 600; flex-shrink: 0; }
  .chat-who.me   { color: var(--accent); }
  .chat-who.them { color: var(--accent2); }
  .chat-who.sys  { color: var(--muted); font-weight: 400; font-style: italic; }
  .chat-input-row { display: flex; gap: 6px; margin-top: 8px; }
  .chat-input {
    flex: 1; background: var(--bg); border: 1px solid var(--border);
    border-radius: 7px; padding: 7px 10px; color: var(--text);
    font-size: 0.78rem; font-family: inherit;
  }
  .chat-input:focus { outline: none; border-color: var(--accent); }

  .consent-banner {
    background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.25);
    border-radius: 10px; padding: 14px 16px; font-size: 0.78rem; line-height: 1.6;
    display: flex; flex-direction: column; gap: 10px;
  }
  .consent-banner .title { font-weight: 600; color: #fbbf24; font-size: 0.82rem; }
  .consent-actions { display: flex; gap: 8px; }

  .remote-overlay {
    position: absolute; inset: 0;
    background: rgba(10,10,15,0.88); backdrop-filter: blur(4px);
    border-radius: var(--radius);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 14px;
    z-index: 10; opacity: 0; pointer-events: none; transition: opacity 0.2s;
  }
  .remote-overlay.visible { opacity: 1; pointer-events: all; }
  .remote-overlay .ov-icon { font-size: 40px; }
  .remote-overlay .ov-title { font-weight: 600; font-size: 1rem; }
  .remote-overlay .ov-sub { font-size: 0.78rem; color: var(--muted); text-align: center; max-width: 240px; line-height: 1.6; }

  .waveform-bar { display: flex; align-items: flex-end; gap: 2px; height: 32px; }
  .waveform-bar span {
    flex: 1; background: var(--accent); border-radius: 2px 2px 0 0;
    opacity: 0.7; transition: height 0.1s; min-height: 2px;
  }

  #remote-panel { position: relative; }