/* ============ Top header ============ */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--geist-background);
  border-bottom: 1px solid var(--hairline);
}
.header-main {
  display: flex; align-items: center; gap: 12px;
  height: var(--header-height); padding: 0 24px; max-width: 1400px; margin: 0 auto;
}
.header-logo { display: flex; align-items: center; padding: 6px; border-radius: var(--radius-sm); }
.header-logo svg { transition: transform .15s ease; }
.header-logo:hover svg { transform: scale(1.05); }
.scope-switcher {
  display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 10px 0 6px; border-radius: var(--radius-md);
  transition: background .12s ease; font-weight: 500; font-size: 14px;
  max-width: 260px;
}
.scope-switcher:hover { background: var(--accents-1); }
.scope-switcher .scope-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scope-switcher .scope-chevron { color: var(--accents-3); flex-shrink: 0; }
.header-search {
  display: flex; align-items: center; gap: 8px;
  height: 32px; width: 240px; padding: 0 10px;
  border: 1px solid var(--hairline); border-radius: var(--radius-md);
  color: var(--accents-3); font-size: 14px;
  transition: border-color .15s ease; margin-left: auto; background: var(--geist-background);
}
.header-search:hover { border-color: var(--accents-3); }
.header-search .search-kbd { margin-left: auto; display: flex; gap: 3px; }
.header-actions { display: flex; align-items: center; gap: 6px; }
.header-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-md);
  color: var(--secondary-text); transition: all .12s ease; position: relative;
}
.header-icon-btn:hover { background: var(--accents-1); color: var(--geist-foreground); }
.header-icon-btn .notif-dot {
  position: absolute; top: 5px; right: 6px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--geist-success); border: 1.5px solid var(--geist-background);
}
.header-avatar-btn { border-radius: 50%; margin-left: 2px; transition: box-shadow .12s ease; }
.header-avatar-btn:hover { box-shadow: 0 0 0 3px var(--accents-2); }
.header-burger { display: none; }

/* ============ Tab bar (below header) ============ */
.tabbar { border-bottom: 1px solid var(--hairline); background: var(--geist-background); }
.tabbar-inner { display: flex; align-items: center; max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.tabbar .tabs { border-bottom: none; flex: 1; }

/* ============ Page container ============ */
.page { flex: 1; width: 100%; max-width: 1400px; margin: 0 auto; padding: 32px 24px 96px; }
.page-narrow { max-width: 1024px; }
.page-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.page-title { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; }
.page-header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ============ Command menu ============ */
.cmdk-backdrop {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.35); animation: fadeIn .1s ease-out;
  display: flex; justify-content: center; align-items: flex-start; padding: 14vh 16px 16px;
}
[data-theme="dark"] .cmdk-backdrop { background: rgba(0,0,0,.6); }
.cmdk {
  width: 100%; max-width: 580px;
  background: var(--geist-background);
  border-radius: var(--radius-xl);
  box-shadow: var(--ds-shadow-menu);
  overflow: hidden; animation: scaleIn .12s ease-out;
  display: flex; flex-direction: column; max-height: 60vh;
}
.cmdk-input-row {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid var(--hairline); color: var(--accents-3);
}
.cmdk-input-row input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 15px; color: var(--geist-foreground);
}
.cmdk-input-row input::placeholder { color: var(--accents-3); }
.cmdk-list { overflow-y: auto; padding: 6px; flex: 1; }
.cmdk-group-label { padding: 8px 10px 4px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--accents-3); }
.cmdk-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: var(--radius-sm); font-size: 14px;
  color: var(--geist-foreground); text-align: left; transition: background .08s ease;
}
.cmdk-item.active { background: var(--accents-1); }
.cmdk-item .cmdk-item-icon { color: var(--secondary-text); display: flex; flex-shrink: 0; }
.cmdk-item .cmdk-item-sub { color: var(--accents-3); font-size: 12px; margin-left: auto; display: flex; align-items: center; gap: 6px; }
.cmdk-footer {
  display: flex; align-items: center; gap: 16px; padding: 10px 16px;
  border-top: 1px solid var(--hairline); background: var(--bg-200);
  font-size: 12px; color: var(--secondary-text);
}
.cmdk-footer .hint { display: flex; align-items: center; gap: 5px; }
.cmdk-empty { padding: 32px; text-align: center; color: var(--secondary-text); font-size: 13px; }

/* ============ Scope menu ============ */
.scope-menu { min-width: 280px; }
.scope-menu .menu-item .avatar { width: 20px; height: 20px; }
.scope-search { padding: 6px 8px; border-bottom: 1px solid var(--hairline); margin: -2px -2px 4px; }

/* ============ Mobile nav drawer ============ */
.mobile-drawer-backdrop { position: fixed; inset: 0; z-index: 250; background: rgba(0,0,0,.4); animation: fadeIn .12s ease-out; }
.mobile-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 260; width: 280px;
  background: var(--geist-background); border-right: 1px solid var(--hairline);
  animation: drawerIn .18s ease-out; overflow-y: auto; padding: 12px;
}
@keyframes drawerIn { from { transform: translateX(-100%); } to { transform: none; } }
.mobile-drawer .drawer-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px;
  font-size: 14px; font-weight: 500; border-radius: var(--radius-md); color: var(--secondary-text);
}
.mobile-drawer .drawer-item.active { background: var(--accents-1); color: var(--geist-foreground); }

@media (max-width: 860px) {
  .header-main { padding: 0 16px; gap: 8px; }
  .header-search { display: none; }
  .header-search-icon { display: flex !important; }
  .feedback-btn-label { display: none; }
  .feedback-btn { width: 32px; padding: 0; }
  .tabbar { display: none; }
  .header-burger { display: flex; }
  .page { padding: 20px 16px 80px; }
}
.header-search-icon { display: none; }