/* ---------- Top bar ---------- */
  #topbar {
    position: absolute; top: 0; left: 0; right: 0; height: 74px; z-index: 30;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 0 18px; background: var(--panel); border-bottom: 1px solid var(--panel-line);
  }
  #topbarLeft { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
  #logo { font-size: 20px; font-weight: 800; letter-spacing: -0.4px; white-space: nowrap; }
  #logo .logo-dark { color: var(--text); }
  #logo .logo-accent { color: var(--accent-strong); }

  #sectionSelector {
    position: relative; display: inline-flex; align-items: center; gap: 6px;
    background: var(--pill-bg); color: #fff; padding: 9px 16px; border-radius: 20px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; cursor: pointer;
  }
  #sectionSelector .caret { font-size: 10px; }
  #sectionDropdown {
    position: absolute; top: 44px; left: 0; width: 220px; background: var(--panel);
    border: 1px solid var(--panel-line); border-radius: 10px; overflow: hidden; display: none; z-index: 40;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  }
  #sectionDropdown.show { display: block; }
  #sectionDropdown .opt { padding: 12px 14px; font-size: 13px; color: var(--text-dim); border-bottom: 1px solid var(--panel-line); text-transform: none; letter-spacing: 0; font-weight: 500; }
  #sectionDropdown .opt:last-child { border-bottom: none; }
  #sectionDropdown .opt.active { color: var(--accent-strong); background: rgba(193,127,63,0.1); }

  #topbarCenter { display: flex; align-items: center; gap: 6px; flex: 1; justify-content: center; overflow-x: auto; }
  #topbarRight { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

  .tool-group { display: flex; gap: 6px; }
  .toolbar-divider { width: 1px; height: 36px; background: var(--panel-line); margin: 0 4px; flex-shrink: 0; }
  .toolbtn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    width: 58px; height: 58px; border-radius: 12px; border: 1px solid transparent; background: transparent;
    color: var(--text-dim); font-size: 11px; font-weight: 600; cursor: pointer; flex-shrink: 0;
  }
  .toolbtn svg { width: 20px; height: 20px; }
  .toolbtn.active { color: var(--accent-strong); background: rgba(193,127,63,0.12); border-color: var(--accent); }
  .toolbtn:disabled { opacity: 0.35; cursor: default; }

  #themeToggle {
    width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--panel-line);
    background: var(--panel); color: var(--text-dim); display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
  }
  #themeToggle svg { width: 18px; height: 18px; }