/* Reset, top tab bar, panel wrappers, scrollbars. Loaded on every page,
   immediately after theme.css. */

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

body { font-family: var(--font-sans); }

/* ── Top tab bar ── */
#top-tab-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center;
  background: var(--surface); border-bottom: 1px solid var(--border);
  height: 40px; padding: 0 16px; gap: 4px; flex-shrink: 0;
}
#top-tab-bar .app-title {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 600; color: var(--text);
  margin-right: 18px; letter-spacing: 0.01em;
}
.top-tab-btn {
  padding: 6px 16px; font-family: inherit; font-size: 12px; font-weight: 600;
  background: none; border: 1px solid transparent; border-radius: 5px;
  color: var(--muted); cursor: pointer; transition: all 0.15s;
}
.top-tab-btn:hover { color: var(--text); background: var(--surface-2); }
.top-tab-btn.active {
  color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft);
}
.logout-link {
  margin-left: auto; font-size: 11px; color: var(--muted); text-decoration: none;
  padding: 4px 10px; border-radius: 4px; transition: all 0.15s;
}
.logout-link:hover { color: var(--text); background: var(--surface-2); }

/* ── Panel wrappers ── */
.app-panel {
  position: fixed; top: 40px; left: 0; right: 0; bottom: 0;
  display: none; overflow: hidden;
}
.app-panel.active { display: flex; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }