/* SpendWatch mark: navy trend line on a gold tile (the same drawing as /icon.svg) */
@keyframes brandShine { 0%, 62% { transform: translateX(-140%) skewX(-20deg); } 86%, 100% { transform: translateX(140%) skewX(-20deg); } }
.mark { position: relative; flex: none; width: 36px; height: 36px; border-radius: 25%; overflow: hidden; isolation: isolate;
  background: url("/icon.svg?v=2") center / 100% 100% no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 250, 232, .7), 0 1px 0 #9a7731, 0 6px 12px -5px rgba(10, 12, 20, .45); }
.mark::after { content: ""; position: absolute; top: -12%; bottom: -12%; left: 0; width: 42%; background: linear-gradient(90deg, transparent 0%, rgba(255, 250, 232, .75) 50%, transparent 100%);
  mix-blend-mode: soft-light; z-index: 2; pointer-events: none; transform: translateX(-140%) skewX(-20deg); animation: brandShine 4.5s ease-in-out infinite; }
.mark.md { width: 44px; height: 44px; }
.mark.lg { width: 64px; height: 64px; box-shadow: inset 0 1.5px 0 rgba(255, 250, 232, .7), 0 2px 0 #9a7731, 0 18px 28px -12px rgba(10, 12, 20, .55); }
@media (prefers-reduced-motion: reduce) { .mark::after { animation: none; opacity: 0; } }
:root[data-theme="dark"] .mark { box-shadow: inset 0 1px 0 rgba(255, 250, 232, .6), 0 1px 0 #7a5a1f, 0 8px 16px -6px rgba(0, 0, 0, .85), 0 0 14px -2px rgba(226, 196, 126, .25); }