/* kfp-badge.css — role OR plan badge (staff see only their role pill → admin.html; no glow; pinned like the account chip), top-left on index.html and gold.html (mirrors the account chip on the right).
   OWNER / ADMIN = gold pill · VIEWER = silver pill · FREE = green shimmer text · PLUS = blue shimmer text · PREMIUM = gold pill.
   The plan part links to pricing.html. Rendered by kfp-badge.js from kfpPlan.info() / the "kfp:plan" event. */
#kfpBadge{position:fixed;top:14px;left:24px;z-index:99998;display:flex;align-items:center;gap:8px;height:45px;
  font-family:"Prompt","Noto Sans Thai",system-ui,-apple-system,Arial,sans-serif;pointer-events:none;
  animation:kfb-in .7s cubic-bezier(.34,1.56,.64,1) both}
#kfpBadge[hidden]{display:none!important}
#kfpBadge>*{pointer-events:auto}
@media(max-width:600px){#kfpBadge{top:max(8px,env(safe-area-inset-top));left:18px;gap:6px}}
@keyframes kfb-in{from{opacity:0;transform:translateX(-14px) scale(.9)}}

/* pill (OWNER / ADMIN / VIEWER / PREMIUM) — same look as the OWNER tag in the admin console */
.kfb-pill{position:relative;display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:99px;overflow:hidden;
  font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;line-height:1;white-space:nowrap;text-decoration:none}
.kfb-pill.gold{color:#1a1300;background:linear-gradient(120deg,#fff2b8,#e8be46 50%,#c9962b);
  box-shadow:0 0 0 1px rgba(255,232,160,.55) inset}
.kfb-pill.silver{color:#1d2028;background:linear-gradient(120deg,#ffffff,#d5dae3 45%,#9aa1ae);
  box-shadow:0 0 0 1px rgba(255,255,255,.6) inset}
.kfb-pill::after{content:"";position:absolute;inset:0;transform:translateX(-130%);pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.85) 50%,transparent 70%);animation:kfb-sweep 3.4s ease-in-out 1s infinite}
.kfb-pill span{position:relative;text-shadow:0 1px 0 rgba(255,255,255,.35)}
@keyframes kfb-sweep{to{transform:translateX(130%)}}

/* plan link: big tap area, the visible part stays small */
.kfb-plan{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;margin:0 -4px;border-radius:12px;text-decoration:none;
  -webkit-tap-highlight-color:transparent;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.kfb-plan:active{transform:scale(.94)}
.kfb-plan:focus-visible{outline:2px solid #ffe08a;outline-offset:2px}
@media(hover:hover){.kfb-plan:hover{transform:translateY(-1px)}}

/* FREE / PLUS: shimmer text like "Admin Console" */
.kfb-text{font-size:19px;font-weight:800;letter-spacing:1.6px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.85));text-transform:uppercase;background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:kfb-shine 5s linear infinite}
.kfb-text.free{background-image:linear-gradient(100deg,#c9ffe6 0%,#3ddc97 35%,#c9ffe6 55%,#1fa56e 100%)}
.kfb-text.plus{background-image:linear-gradient(100deg,#dbeaff 0%,#5aa8ff 35%,#dbeaff 55%,#2f6fd6 100%)}
@keyframes kfb-shine{to{background-position:-220% 0}}

@media(prefers-reduced-motion:reduce){
  #kfpBadge,.kfb-pill,.kfb-pill::after,.kfb-text{animation:none!important}
  .kfb-plan{transition:none}
}