/* Header credits chip — sits next to the account link. Colors are explicit
   (the theme header is outside the .fld-app scope). */
.fld-credits {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1.5px solid #d9cdb5;
  background: #fbf6ec;
  color: #3c4a26;
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .18s, background .18s, transform .18s;
  vertical-align: middle;
}
.fld-credits:hover { border-color: #586b34; transform: translateY(-1px); }
.fld-credits__ico { display: inline-flex; color: #cf6f43; }
.fld-credits__val { display: inline-flex; align-items: baseline; gap: 2px; }
.fld-credits__val strong { font-weight: 800; }
.fld-credits__sep { opacity: .5; margin: 0 1px; }

.fld-credits--loading { opacity: .6; }
.fld-credits--unlimited { color: #586b34; }
.fld-credits--unlimited .fld-credits__ico { color: #586b34; }

/* Running low → warm amber; empty → terracotta alert. */
.fld-credits--low { border-color: #e0a94b; background: #fbf1dd; color: #9a6a12; }
.fld-credits--low .fld-credits__ico { color: #d08a1e; }
.fld-credits--empty { border-color: #e0864f; background: #fbe9e0; color: #b23b1e; }
.fld-credits--empty .fld-credits__ico { color: #cf6f43; }

@media (max-width: 640px) {
  .fld-credits { padding: 6px 10px; font-size: 13px; }
}