/* ---- Top Bar ---- */
    .topbar {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 16px;
      background: var(--bg-toolbar);
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      min-height: 44px;
    }

    .topbar-title {
      font-weight: 600;
      font-size: 14px;
      margin-right: auto;
      color: var(--text);
    }

    /* ---- Browser download strip (below topbar) ---- */
    .browser-download-panel {
      display: none;
      flex-shrink: 0;
      padding: 12px 18px 14px;
      background: linear-gradient(135deg, rgba(12, 90, 78, 0.2) 0%, rgba(22, 24, 38, 0.95) 45%, #18181f 100%);
      border-bottom: 1px solid rgba(16, 200, 160, 0.22);
      z-index: 400;
      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
    }

    .browser-download-panel.visible {
      display: block;
    }

    .browser-download-panel-inner {
      display: flex;
      align-items: center;
      gap: 16px;
      max-width: 900px;
      margin: 0 auto;
    }

    .browser-download-panel-text {
      flex: 1;
      min-width: 0;
    }

    .browser-download-panel-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 4px;
    }

    .browser-download-panel-sub {
      font-size: 11px;
      color: var(--text-dim);
      line-height: 1.35;
    }

    .browser-download-panel-track {
      flex: 1;
      min-width: 140px;
      max-width: 420px;
      height: 9px;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.35);
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
      overflow: hidden;
    }

    .browser-download-panel-fill {
      height: 100%;
      width: 0%;
      border-radius: 999px;
      background: linear-gradient(90deg, #0b9d82 0%, #1ef0c0 50%, #12c4a0 100%);
      box-shadow: 0 0 16px rgba(20, 240, 200, 0.25);
      transition: width 0.2s ease-out;
    }

    .mode-toggle {
      display: flex;
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid var(--border);
    }

    .tz-wrap {
      position: relative;
      margin-right: 8px;
    }

    .tz-btn {
      height: 30px;
      min-width: 220px;
      max-width: 280px;
      font-size: 12px;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: var(--bg-card);
      color: var(--text);
      padding: 0 12px;
      font-family: inherit;
      outline: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .tz-btn:hover {
      border-color: var(--accent);
    }

    .tz-menu {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      z-index: 350;
      width: 280px;
      max-height: 320px;
      overflow-y: auto;
      background: var(--bg-toolbar);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
      padding: 8px;
    }

    .tz-menu.open {
      display: block;
    }

    .tz-menu-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4px 6px 8px;
      color: var(--text-dim);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .tz-back {
      border: 1px solid var(--border);
      background: var(--bg-card);
      color: var(--text-dim);
      border-radius: 6px;
      padding: 2px 8px;
      font-size: 11px;
      cursor: pointer;
    }

    .tz-option {
      width: 100%;
      border: 1px solid var(--border);
      background: var(--bg-card);
      color: var(--text);
      border-radius: 8px;
      padding: 8px 10px;
      text-align: left;
      cursor: pointer;
      font-size: 12px;
      margin-bottom: 6px;
    }

    .tz-option:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .mode-btn {
      padding: 6px 18px;
      font-size: 13px;
      border: none;
      cursor: pointer;
      background: transparent;
      color: var(--text-dim);
      transition: all 0.2s;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .mode-btn.active-live {
      background: var(--accent);
      color: #fff;
    }

    .mode-btn.active-playback {
      background: var(--danger);
      color: #fff;
    }

    .mode-btn:hover:not(.active-live):not(.active-playback) {
      background: rgba(255, 255, 255, 0.05);
      color: var(--text);
    }

    .live-layout-wrap {
      position: relative;
      display: none;
      align-items: center;
    }

    .live-layout-wrap.visible {
      display: flex;
    }

    .layout-menu-btn {
      padding: 6px 14px;
      font-size: 13px;
      border: 1px solid var(--border);
      border-radius: 20px;
      cursor: pointer;
      background: var(--bg-card);
      color: var(--text);
      transition: background 0.15s, border-color 0.15s;
    }

    .layout-menu-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .layout-menu {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      z-index: 300;
      background: var(--bg-toolbar);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
      min-width: 280px;
      max-height: min(70vh, 420px);
      overflow-y: auto;
    }

    .layout-menu.open {
      display: block;
    }

    .layout-menu-title {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
      padding: 0 4px;
    }

    .layout-menu-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
    }

    .layout-option {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 10px 6px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg-card);
      color: var(--text-dim);
      cursor: pointer;
      font-size: 11px;
      transition: border-color 0.15s, background 0.15s, color 0.15s;
    }

    .layout-option:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .layout-option.active {
      border-color: var(--accent);
      background: var(--accent-dim);
      color: var(--accent);
    }

    .layout-option svg {
      color: var(--accent);
      opacity: 0.85;
    }

    .layout-option.active svg {
      opacity: 1;
    }