/* ════════════════════════════
   TOPBAR — search, metric pill, badge
════════════════════════════ */
#topbar {
  position:   fixed;
  top:        0;
  left:       0;
  right:      0;
  height:     var(--topbar-h);
  z-index:    1000;
  display:    flex;
  align-items: center;
  gap:        10px;
  padding:    0 16px;
  background: rgba(12,13,20,0.97);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.search-box {
  display:    flex;
  align-items: center;
  gap:        8px;
  width:      220px;
  height:     38px;
  padding:    0 10px;
  background: rgba(255,255,255,0.07);
  border:     1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  transition: border-color 0.18s, background 0.18s;
}

.search-box:focus-within {
  border-color: rgba(255,255,255,0.28);
  background:   rgba(255,255,255,0.1);
}

.search-box input {
  flex:       1;
  background: none;
  border:     none;
  outline:    none;
  font-size:  13px;
  color:      #e8e8f0;
  font-family: inherit;
}

.search-box input::placeholder { color: #555; }

#searchDrop {
  position:    absolute;
  top:         44px;
  left:        0;
  width:       220px;
  background:  rgba(14,15,22,0.99);
  border:      1px solid rgba(255,255,255,0.13);
  border-radius: 10px;
  overflow:    hidden;
  max-height:  260px;
  overflow-y:  auto;
  z-index:     2000;
  display:     none;
}

.si {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         9px 13px;
  cursor:          pointer;
  font-size:       13px;
  transition:      background 0.1s;
}

.si:hover { background: rgba(255,255,255,0.07); }

.sc {
  color:       #555;
  font-size:   11px;
  margin-left: 4px;
}

.metric-pill {
  display:     flex;
  align-items: center;
  gap:         6px;
  height:      38px;
  padding:     0 14px;
  background:  rgba(255,255,255,0.07);
  border:      1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  font-size:   13px;
  font-weight: 600;
  cursor:      pointer;
  user-select: none;
  transition:  background 0.15s;
}

.metric-pill:hover { background: rgba(255,255,255,0.11); }

#metricMenu {
  position:     fixed;
  top:          62px;
  left:         260px;
  background:   rgba(14,15,22,0.99);
  border:       1px solid rgba(255,255,255,0.13);
  border-radius: 10px;
  overflow:     hidden;
  z-index:      2000;
  min-width:    120px;
  display:      none;
}

.mi {
  padding:    9px 16px;
  font-size:  13px;
  cursor:     pointer;
  color:      #e8e8f0;
  transition: background 0.1s;
}

.mi:hover          { background: rgba(255,255,255,0.07); }
.mi.active         { color: #4fc3f7; font-weight: 600; }

.climate-badge {
  margin-left:   auto;
  display:       flex;
  align-items:   center;
  gap:           8px;
  height:        38px;
  padding:       0 13px;
  background:    rgba(255,255,255,0.06);
  border:        1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  white-space:   nowrap;
  cursor:        pointer;
  transition:    background 0.15s;
}

.climate-badge:hover { background: rgba(255,255,255,0.1); }

.cb-top { font-size: 10px; color: #666; line-height: 1.3; }
.cb-bot { font-size: 12px; font-weight: 600; color: #e8e8f0; line-height: 1.3; }