/* nav-balance.css — 登录后的余额 pill。
   双重换算：美元 + 等效工时（按 $1/hr 助理 + $5/hr 文案）。
   点击跳 /billing，焦虑时随时查。
   静态 mock 数据；接 Stripe 后由 SSR/JS 注入真实余额。 */

.nav-balance {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  transition: all 0.2s;
  white-space: nowrap;
  margin-left: 8px;
}

.nav-balance:hover {
  border-color: var(--accent);
  box-shadow: 0 1px 4px rgba(217, 98, 74, 0.15);
}

.balance-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2EB872;
  box-shadow: 0 0 0 3px rgba(46, 184, 114, 0.18);
  flex-shrink: 0;
}

.nav-balance.low .balance-dot {
  background: #E0A23A;
  box-shadow: 0 0 0 3px rgba(224, 162, 58, 0.18);
}

.nav-balance.empty .balance-dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(217, 98, 74, 0.18);
}

.balance-amount {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.balance-detail {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0;
}

/* 余额低时整个 pill 染色提醒充值 */
.nav-balance.empty {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.nav-balance.empty .balance-amount,
.nav-balance.empty .balance-detail {
  color: var(--accent);
}

@media (max-width: 768px) {
  .balance-detail { display: none; }
  .nav-balance { padding: 6px 12px; margin-left: 4px; }
  .balance-amount { font-size: 14px; }
}