/* ═══ Topbar ═══ */

    .topbar {

      position: sticky; top: 0; z-index: 100;

      height: var(--topbar-h);

      display: flex; align-items: center; justify-content: space-between;

      padding: 0 16px;

      background: var(--bg-glass);

      backdrop-filter: blur(var(--glass-blur));

      -webkit-backdrop-filter: blur(var(--glass-blur));

      border-bottom: 1px solid var(--line);

      transition: background 0.3s ease, top 0.35s ease, opacity 0.35s ease;

    }

    .topbar.hidden {

      top: calc(-1 * var(--topbar-h));

      opacity: 0;

      pointer-events: none;

    }

    .topbar-left { display: flex; align-items: center; gap: 10px; }

    .topbar-right { display: flex; align-items: center; gap: 8px; }

    .topbar-brand {

      display: flex; align-items: center; gap: 8px;

      text-decoration: none; color: var(--text);

      font-weight: 700; font-size: 0.95rem;

    }

    .topbar-brand .mark {

      display: grid; place-items: center;

      width: 30px; height: 30px; border-radius: 6px;

      background: linear-gradient(135deg, #e0f2fe, #bae6fd);

      border: 1px solid #7dd3fc;

      color: #0ea5e9; font-weight: 800; font-size: 0.8rem;

    }

    .menu-toggle {

      display: none; background: none; border: none;

      color: var(--text-secondary); font-size: 1.3rem; cursor: pointer;

      padding: 4px 8px; border-radius: var(--radius-sm);

      line-height: 1;

    }

    .menu-toggle:hover { color: var(--text); background: var(--surface-hover); }



    .theme-btn, .sidebar-toggle-btn {

      display: grid; place-items: center;

      width: 34px; height: 34px; border-radius: var(--radius-sm);

      border: 1px solid var(--line); background: transparent;

      color: var(--text-secondary); cursor: pointer; font-size: 0.95rem;

      transition: all 0.15s; flex-shrink: 0;

    }

    .theme-btn:hover, .sidebar-toggle-btn:hover {

      background: var(--surface-hover); color: var(--text);

    }



    /* ── Search Box (topbar) ────────────────────── */

    .search-box {

      position: relative; display: flex; align-items: center;

    }

    .search-box .search-icon {

      position: absolute; left: 10px; top: 50%; transform: translateY(-50%);

      font-size: 0.78rem; color: var(--text-muted); pointer-events: none; z-index: 1;

    }

    .search-box input {

      width: 180px; height: 34px; padding: 6px 12px 6px 32px;

      border: 1px solid var(--line); border-radius: var(--radius-sm);

      background: var(--surface-solid); color: var(--text);

      font: inherit; font-size: 0.82rem; outline: none;

      transition: width 0.2s ease, border-color 0.15s;

    }

    .search-box input:focus { width: 260px; border-color: var(--accent); }

    .search-box input::placeholder { color: var(--text-muted); }

    .search-results {

      display: none; position: absolute; top: calc(100% + 6px); right: 0;

      width: 340px; max-height: 400px; overflow-y: auto;

      background: var(--surface-solid); border: 1px solid var(--line);

      border-radius: var(--radius); box-shadow: var(--shadow);

      z-index: 200; padding: 4px 0;

    }

    .search-results.open { display: block; }

    .search-result-item {

      display: block; padding: 10px 16px; text-decoration: none;

      color: var(--text); font-size: 0.84rem; cursor: pointer;

      transition: background 0.1s; border-left: 2px solid transparent;

    }

    .search-result-item:hover, .search-result-item.active {

      background: var(--surface-hover); border-left-color: var(--accent);

    }

    .search-result-item .sr-title { font-weight: 500; line-height: 1.3; }

    .search-result-item .sr-meta {

      font-size: 0.72rem; color: var(--text-muted); margin-top: 3px;

      line-height: 1.5; white-space: normal; word-break: break-all;

      overflow: hidden; text-overflow: ellipsis; display: -webkit-box;

      -webkit-line-clamp: 2; -webkit-box-orient: vertical;

    }

    .search-result-item .sr-tag {

      display: inline-block; padding: 0 6px; border-radius: 999px;

      background: var(--accent-bg); color: var(--accent-light); font-size: 0.68rem;

    }

    .search-result-item .sr-hl {

      background: rgba(59,130,246,0.22); color: var(--accent-light); font-weight: 700;
      border-radius: 3px; padding: 0 1px;

    }

    .search-result-item .sr-snippet {
      font-size: 0.74rem; color: var(--text-secondary); margin-top: 4px;
      line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2;
      -webkit-box-orient: vertical; overflow: hidden;
    }

    .search-result-item .sr-meta { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }

    .search-result-item .sr-date { font-size: 0.68rem; color: var(--text-muted); }

    .sr-toolbar {
      display: flex; align-items: center; justify-content: space-between;
      padding: 8px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0;
      background: var(--surface-solid); z-index: 2;
    }

    .sr-count { font-size: 0.72rem; color: var(--text-muted); }

    .sr-sort { display: flex; gap: 4px; }

    .sr-sort-btn {
      font-size: 0.7rem; padding: 3px 9px; border-radius: 999px; cursor: pointer;
      background: var(--surface); color: var(--text-secondary); border: 1px solid var(--line);
    }

    .sr-sort-btn.active { background: var(--accent-bg); color: var(--accent-light); border-color: var(--accent); }

    .search-result-list { padding: 2px 0; }

    .sr-loadmore {
      padding: 14px 16px; text-align: center; font-size: 0.76rem;
      color: var(--text-muted); cursor: pointer;
    }

    .sr-loadmore.sr-error { color: #e24b4a; }

    .search-result-empty {

      padding: 20px 16px; text-align: center;

      color: var(--text-muted); font-size: 0.82rem;

    }

    .loading-spinner {
      display: inline-block; width: 14px; height: 14px; margin-right: 8px;
      vertical-align: middle; border: 2px solid var(--line-strong);
      border-top-color: var(--accent); border-radius: 50%;
      animation: sr-spin 0.7s linear infinite;
    }

    @keyframes sr-spin { to { transform: rotate(360deg); } }



    /* ── Topbar Hide ──────────────────────────── */

    .topbar-restore {

      display: none; position: fixed; top: 12px; right: 16px; z-index: 101;

      width: 40px; height: 40px; border-radius: 50%;

      border: 1px solid var(--line); background: var(--bg-glass);

      backdrop-filter: blur(var(--glass-blur));

      -webkit-backdrop-filter: blur(var(--glass-blur));

      color: var(--text-secondary); cursor: pointer; font-size: 1.2rem;

      box-shadow: 0 2px 12px rgba(0,0,0,0.15); transition: all 0.2s;

      align-items: center; justify-content: center;

    }

    .topbar-restore:hover {

      background: var(--surface-hover); color: var(--accent-light);

      transform: scale(1.08); box-shadow: 0 4px 20px rgba(0,0,0,0.25);

    }

    .topbar-restore.visible { display: grid; }

    body.hide-topbar .topbar {

      position: absolute;

      top: calc(-1 * var(--topbar-h));

    }

    body.hide-topbar .layout {

      height: 100vh; height: 100dvh;

    }