/* ==========================================================================
   外观切换（顶栏）
   ==========================================================================
   放在顶栏而不是侧栏底部：侧栏要拉开才看得见，底部那块又和头像、
   退出按钮挤在一起，视觉上很杂。顶栏是所有页面都常驻的位置。

   做成「图标按钮 + 三选面板」而不是三段并列：顶栏在手机上要同时容纳
   菜单、标题、外观、铃铛、头像，三段并列会把标题挤没。
   全部颜色走主题令牌，所以它自己在浅色 / 深色下都是对的。
   ========================================================================== */

.tb-theme { position: relative; display: flex; align-items: center }

#tb-theme-btn { color: var(--ink-500) }
#tb-theme-btn:hover { color: var(--ink-800) }
#tb-theme-btn[aria-expanded="true"] {
  background: var(--sf-hi);
  color: var(--ink-900);
}

.th-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 152px; padding: 5px;
  background: var(--elev-1);
  border: 1px solid var(--bd-2);
  border-radius: 10px;
  box-shadow: var(--sh-lg);
  animation: th-in .16s var(--ease-out);
}
.th-pop[hidden] { display: none }
@keyframes th-in { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }

.th-pop button {
  display: flex; align-items: center; gap: 9px;
  width: 100%; border: none; background: transparent;
  color: var(--ink-600);
  font-size: 13px; font-weight: 500; letter-spacing: -.1px;
  padding: 9px 10px; border-radius: 7px;
  cursor: pointer; text-align: left;
  transition: background .14s var(--ease), color .14s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.th-pop button:hover { background: var(--sf-hi); color: var(--ink-900) }
.th-pop button .ic { display: flex; flex: none; opacity: .75 }
.th-pop button .tx { flex: 1; min-width: 0 }
/* 勾选标记只对当前档显示，未选中时保留占位避免文字左右跳动 */
.th-pop button .mk { display: flex; flex: none; opacity: 0; color: var(--brand-400) }
.th-pop button.on { color: var(--ink-900); font-weight: 600 }
.th-pop button.on .ic { opacity: 1; color: var(--brand-400) }
.th-pop button.on .mk { opacity: 1 }