/* Copyright (c) 2026 晓夜 (xiaoye). All rights reserved.
 * Licensed for non-commercial use only.
 */
/* layout.css — 顶栏、页面切换、整体布局
 * 作者：晓夜
 */

/* ===== TOP BAR ===== */
.topbar {
  display: flex; align-items: center;
  height: 52px; background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  padding: 0 16px; gap: 14px; flex-shrink: 0;
  position: relative; z-index: 100;
}
.topbar-logo {
  font-family: 'Playfair Display','Noto Serif SC',serif;
  font-size: 15px; font-weight: 600; color: var(--accent-gold);
  letter-spacing: 0.5px; white-space: nowrap;
}
.topbar-logo span { color: var(--text-sub); font-size: 13px; font-weight: 300; margin-left: 6px; font-family: 'Noto Sans SC',sans-serif; }

.market-temp {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-sub);
  background: var(--bg-hover); border: 1px solid var(--border);
  border-radius: 20px; padding: 3px 10px; cursor: default;
}
.market-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 5px var(--success); animation: pulse 2s infinite; }
.market-dot.osc { background: #8B949E; box-shadow: 0 0 5px #8B949E; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
@keyframes pulse-red { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.7;transform:scale(1.15)} }

.topbar-spacer { flex: 1; }

.theme-toggle {
  background: none; border: 1px solid var(--border); color: var(--text-sub);
  border-radius: 6px; padding: 4px 8px; font-size: 15px; cursor: pointer; transition: all 200ms;
}
.theme-toggle:hover { border-color: var(--accent-gold); color: var(--accent-gold); }

/* ===== PAGE TAB BAR (top nav, main switch) ===== */
.page-tab-bar {
  display: flex; align-items: center; gap: 2px;
  background: var(--bg-hover); border: 1px solid var(--border);
  border-radius: 24px; padding: 3px;
}
.page-tab-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 16px; border-radius: 20px; border: none;
  background: none; color: var(--text-sub);
  font-size: 13px; font-family: 'Noto Sans SC',sans-serif;
  cursor: pointer; transition: all 180ms; white-space: nowrap;
}
.page-tab-btn:hover { color: var(--text-main); }
.page-tab-btn.active { background: var(--bg-panel); color: var(--text-main); font-weight: 500; box-shadow: 0 1px 4px rgba(0,0,0,0.25); }

/* ===== APP ROOT ===== */
#app-root { display: flex; flex-direction: column; height: calc(100vh - 52px); overflow: hidden; }

/* ===== PAGE CONTAINERS ===== */
.page { display: none; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.page.active { display: flex; }