/* 挂载自包含样式：下拉菜单 + 页脚样式，不侵入 app.css
 * 使用上游已有的 CSS 变量（--bg, --accent 等），亮暗主题自动兼容 */
.dropdown-nav {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.dropdown-nav .dropdown-btn {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: .45rem .9rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  transition: var(--trans);
}
.dropdown-nav .dropdown-btn:hover,
.dropdown-nav .dropdown-btn:focus {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow), 0 4px 10px -2px rgba(0,0,0,.5);
}
.dropdown-nav .dropdown-menu {
  position: absolute;
  top: 105%;
  left: 0;
  z-index: 100;
  display: none;
  min-width: 120px;
  padding: .5rem 0;
  margin: 0;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  list-style: none;
}
.dropdown-nav:hover .dropdown-menu,
.dropdown-nav:focus-within .dropdown-menu {
  display: block;
}
.dropdown-nav .dropdown-item {
  display: block;
  width: 100%;
  padding: .35rem 1rem;
  text-align: left;
  text-decoration: none;
  color: var(--text-dim);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.4;
  transition: var(--trans);
}
.dropdown-nav .dropdown-item:hover,
.dropdown-nav .dropdown-item:focus {
  background: rgba(59,130,246,.12);
  color: var(--accent);
}
/* 移动端下拉菜单靠右以避免溢出 */
@media (max-width:640px) {
  .dropdown-nav .dropdown-menu {
    right: 0;
    left: auto;
  }
}
/* 页脚复用上游 .footer 样式，添加间隙 */
.custom-footer-links {
  display: contents;
}
.custom-footer-links a {
  color: var(--text-dim);
}
.custom-footer-links a:hover {
  color: var(--accent);
}

/* ---- 国旗 flag-icons 的尺寸与对齐兜底 ----
 * 桌面表格「位置」列中较为醒目；卡片 tag 中缩小；避免随行高放大过大。
 * .fi 由 flag-icons.min.css 定义，这里仅做微调与字号自适应。
 */
td .fi,
.node-name + .fi {
  font-size: 1.15em;
  vertical-align: -0.1em;
  margin-right: .15em;
}
.cards .card-header .fi,
.tag .fi {
  font-size: .95em;
  vertical-align: -0.12em;
  margin-right: .1em;
}
.mon-items .fi {
  font-size: 1em;
  vertical-align: -0.1em;
}
@media (max-width:640px) {
  td .fi {
    font-size: 1.05em;
  }
}