/* 顶条(js/topbar.js 渲染):左城市选择器,右三个入口。
   类名统一 ub- 前缀 —— 注意不要和页面里那条蓝色页头 .topbar 搞混,
   .ub 是它**上面**那条细灰条,两者是不同的东西。
   全部使用 style.css 里的 CSS 变量。 */

.ub {
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-sub);
  line-height: 1.6;
}
.ub-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 6px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ub-space { flex: 1; }

/* ===== 左:城市 ===== */
/* position:relative 是选择面板绝对定位的锚点,别删 */
.ub-city { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.ub-city-icon { font-size: 12px; }
.ub-city-name { color: var(--text); font-weight: 600; text-decoration: none; }
.ub-city-name:hover { color: var(--blue); }
.ub-switch {
  background: none; border: none; padding: 0 2px; cursor: pointer;
  font: inherit; color: var(--blue);
}
.ub-switch:hover { text-decoration: underline; }

/* ===== 右:三个入口 ===== */
.ub-link {
  color: var(--text-sub); text-decoration: none;
  padding: 2px 6px; border-radius: 5px;
}
.ub-link:hover { color: var(--blue); background: var(--blue-light); }
.ub-login { color: var(--blue); font-weight: 600; }
.ub-me { display: inline-flex; align-items: center; gap: 2px; }
/* 用 <button> 保证键盘可聚焦、回车可触发,外观与旁边的 <a> 保持一致 */
.ub-btn { background: none; border: none; cursor: pointer; font: inherit; }

/* ===== 城市选择面板 ===== */
.ub-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  width: min(560px, calc(100vw - 32px));
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
  color: var(--text);
}
.ub-panel-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  font-size: 13.5px; font-weight: 700;
}
.ub-x {
  background: none; border: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--text-sub); padding: 0 2px;
}
.ub-x:hover { color: var(--text); }
/* 392 个城市放不下一屏,面板自己滚,不要把整页顶长 */
.ub-panel-body { padding: 12px 14px; max-height: 60vh; overflow-y: auto; }
.ub-err { color: var(--red); }

.ub-hot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.ub-hot-lb { color: var(--text-sub); margin-right: 2px; }
.ub-chip {
  background: var(--blue-light); color: var(--blue); border: none; border-radius: 999px;
  padding: 4px 12px; font: inherit; font-size: 12.5px; cursor: pointer;
}
.ub-chip:hover { background: var(--blue); color: #fff; }

.ub-prov { display: flex; gap: 10px; padding: 7px 0; border-top: 1px dashed var(--border); }
.ub-prov-name {
  flex: none; width: 84px; color: var(--text); font-size: 12.5px;
  font-weight: 700; padding-top: 3px;
}
.ub-prov-cities { display: flex; flex-wrap: wrap; gap: 3px; }
.ub-city-item {
  background: none; border: none; cursor: pointer; font: inherit; font-size: 12.5px;
  color: var(--text-sub); padding: 3px 7px; border-radius: 5px;
}
.ub-city-item:hover { background: var(--blue-light); color: var(--blue); }

/* ===== 移动端 ===== */
@media (max-width: 560px) {
  .ub-inner { padding: 5px 12px; gap: 6px; }
  /* 窄屏放不下三个入口 + 城市,把"驾校后台"藏掉 —— 它是给驾校运营人员用的,
     那类操作本来也不会在手机上做。入驻和登录是普通用户真正会点的,必须留着。 */
  .ub-inner .ub-link[href="/admin.html"] { display: none; }
  .ub-panel { left: -12px; width: calc(100vw - 24px); }
  .ub-prov { flex-direction: column; gap: 2px; }
  .ub-prov-name { width: auto; }
}