/* ═══════════════════════════════════════════════════════════
   SHELL-CHROME — Topbar + Tab-Nav + Loader Overrides
   GeniusHub v21 — Redesign

   Wirkt auf die bestehende Tab-Nav-Struktur (.top, .nav, .nt, #ld).
   Sidebar/Grid/BottomNav ist separat in shell-sidebar.css (nicht eingebunden,
   für spätere Migration).
   ═══════════════════════════════════════════════════════════ */

/* ══════════ TOPBAR ══════════ */
.top {
  background: var(--bg-0) !important;
  border-bottom: 1px solid var(--line) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  min-height: 52px;
  padding: calc(10px + var(--safe-t)) calc(20px + var(--safe-r)) 10px calc(20px + var(--safe-l)) !important;
  gap: 10px !important;
}

.t-logo {
  font-family: var(--f-sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--fg) !important;
  background: none !important;
  -webkit-text-fill-color: var(--fg) !important;
  letter-spacing: -.01em !important;
}

.t-sep { background: var(--line) !important; }

.t-user {
  background: var(--bg-1) !important;
  border: 1px solid var(--line) !important;
  padding: 4px 10px !important;
  border-radius: var(--r-md) !important;
}
.t-user > div div:first-child { font-size: 11px !important; color: var(--fg); }
.t-user > div div:last-child { font-size: 10px !important; color: var(--fg-dim); }
.t-av { font-size: 9px !important; }

.t-btn {
  background: transparent !important;
  border: 1px solid var(--line) !important;
  color: var(--fg-muted) !important;
  font-size: 11px !important;
  padding: 6px 10px !important;
  border-radius: var(--r-md) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  min-height: 32px;
}
.t-btn:hover {
  background: var(--bg-2) !important;
  color: var(--fg) !important;
  border-color: var(--line-2) !important;
}
.t-btn.lo { color: var(--fg-dim) !important; }
.t-btn.lo:hover { color: var(--err) !important; border-color: var(--err) !important; }

.news-badge {
  background: var(--accent) !important;
  color: #000 !important;
}


/* ══════════ TAB-NAV ══════════ */
.nav {
  background: var(--bg-0) !important;
  border-bottom: 1px solid var(--line) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 calc(20px + var(--safe-r)) 0 calc(20px + var(--safe-l)) !important;
  gap: 2px !important;
}
.nt {
  color: var(--fg-dim) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 12px 10px !important;
  border-bottom: 2px solid transparent !important;
  border-color: transparent !important;
  background: transparent !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
}
.nt:hover { color: var(--fg-muted) !important; }
.nt.on {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
  font-weight: 600 !important;
  background: transparent !important;
}


/* ══════════ LOADER ══════════ */
#ld { background: var(--bg-0) !important; }
#ld .logo {
  font-family: var(--f-sans) !important;
  font-weight: 700 !important;
  background: none !important;
  -webkit-text-fill-color: var(--fg) !important;
  color: var(--fg) !important;
  letter-spacing: -.02em;
}