/* static/css/topbar.css — extracted from index.html (FrameFlow prototype) */
  /* Topbar */
  .topbar {
    grid-area: topbar;
    margin: 14px 14px 0 14px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: slideInDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
    position: relative;
    z-index: 21;
  }

  .crumbs {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
  }

  .crumbs strong { color: var(--text); font-weight: 700; }
  /* 面包屑：组件默认效果——分隔符间距统一，仅当前段（画面名）绿色加粗 */
  .crumbs span { margin: 0 5px; }
  .crumbs strong { margin: 0 5px; }
  .crumbs .crumb-project { color: var(--text); font-weight: 600; }
  .crumbs .crumb-scene { color: var(--neon-bright, #16a34a); font-weight: 800; }
  html[data-theme="light"] .crumbs .crumb-scene { color: #15803d; }

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

  .search-glass {
    position: relative;
  }

  .search-glass input {
    width: 260px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 9px 14px 9px 36px;
    color: var(--text);
    font-size: 13px;
    outline: none;
    transition: all 0.25s ease;
  }

  .search-glass input:focus {
    border-color: rgba(74,222,128,0.45);
    box-shadow: 0 0 0 3px rgba(74,222,128,0.08), 0 0 20px rgba(74,222,128,0.08);
    background: var(--surface-2);
  }
  /* 浅色主题：搜索框用纯白底 + 清晰描边，避免与背景糊在一起 */
  html[data-theme="light"] .search-glass input { background: #ffffff; border-color: rgba(0,0,0,0.14); }
  html[data-theme="light"] .search-glass input:focus { background: #ffffff; border-color: var(--neon); box-shadow: 0 0 0 3px rgba(21,128,61,0.10); }

  .search-glass svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--text-muted);
  }

  .icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-dim);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
  }

  .icon-btn:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
    color: var(--text);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  }
  html[data-theme="light"] .icon-btn:hover { box-shadow: 0 6px 14px rgba(0,0,0,0.10); }

  .icon-btn.active {
    color: var(--neon-bright);
    border-color: rgba(74,222,128,0.45);
    background: rgba(74,222,128,0.10);
    box-shadow: 0 0 20px rgba(74,222,128,0.18);
  }

  .icon-btn svg { width: 18px; height: 18px; }

  .top-actions-left { display: flex; align-items: center; gap: 12px; }
  .sidebar-toggle svg { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
  .app-shell.collapsed .sidebar-toggle svg { transform: rotate(180deg); }

  .icon-btn .dot {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--neon);
    box-shadow: 0 0 10px var(--neon);
    animation: pulse 2s ease-in-out infinite;
  }

  /* 浅色主题：搜索图标与占位文字加深，保证可读性 */
  html[data-theme="light"] .search-glass svg { color: #6b7280; }
  html[data-theme="light"] .search-glass input::placeholder { color: #94a3b8; }
  html[data-theme="light"] .search-glass input { color: #111827; }