.tb-wrap{
  --tb-fs:var(--tb-fs-m);
  --tb-sfs:var(--tb-sfs-m);
  --tb-bot:var(--tb-bot-m);
  position:fixed;
  left:0;
  right:0;
  bottom:calc(var(--tb-bot, 12px) + env(safe-area-inset-bottom, 0px));
  z-index:var(--tb-z, 2147483647);
  display:flex;
  justify-content:center;
  align-items:flex-end;
  box-sizing:border-box;
  width:100%;
  max-width:100vw;
  float:none !important;
  text-align:center;
  padding:0 12px;
  pointer-events:none;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  margin:0;
  animation:tb-in .4s ease-out backwards;
}
@media (min-width:769px){
  .tb-wrap{--tb-fs:var(--tb-fs-d);--tb-sfs:var(--tb-sfs-d);--tb-bot:var(--tb-bot-d)}
}
.tb-wrap.tb-force-m{--tb-fs:var(--tb-fs-m);--tb-sfs:var(--tb-sfs-m);--tb-bot:var(--tb-bot-m)}
.tb-wrap.tb-force-d{--tb-fs:var(--tb-fs-d);--tb-sfs:var(--tb-sfs-d);--tb-bot:var(--tb-bot-d)}

.tb-btn{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  box-sizing:border-box;
  width:100%;
  max-width:var(--tb-mw, 560px);
  margin:0 auto !important;
  float:none !important;
  flex:0 1 auto;
  padding:var(--tb-py, 12px) 16px;
  background:var(--tb-bg, #FF6B00);
  background-origin:border-box;
  border:var(--tb-bw, 2px) solid var(--tb-bc, transparent);
  border-radius:var(--tb-r, 14px);
  color:var(--tb-fg, #fff) !important;
  font-family:var(--tb-ff, inherit);
  line-height:1.4;
  text-align:center;
  text-decoration:none !important;
  box-shadow:none !important;
  outline:none;
  cursor:pointer;
  pointer-events:auto;
  -webkit-tap-highlight-color:transparent;
  transition:transform .15s ease, filter .15s ease;
}
.tb-btn:visited,
.tb-btn:hover,
.tb-btn:focus{
  color:var(--tb-fg, #fff) !important;
  text-decoration:none !important;
}
.tb-btn:active{transform:scale(.98)}
.tb-btn:focus-visible{outline:2px solid var(--tb-fg, #fff);outline-offset:2px}
@media (hover:hover){
  .tb-btn:hover{filter:brightness(1.06)}
}

.tb-label,
.tb-sub{
  position:relative;
  z-index:1;
  display:block;
}
.tb-label{
  font-size:var(--tb-fs, 17px);
  font-weight:var(--tb-fw, 700);
  font-family:var(--tb-ff, inherit);
  line-height:1.4;
}
.tb-sub{
  color:var(--tb-sc, #fff) !important;
  font-size:var(--tb-sfs, 12px);
  font-weight:var(--tb-sfw, 400);
  font-family:var(--tb-sff, inherit);
  line-height:1.4;
}

/* Colour cycle layers (cross-fade, works with gradients too) */
.tb-layer{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:-1;
  opacity:0;
  pointer-events:none;
  transition:opacity .9s ease;
}
.tb-layer.is-on{opacity:1}

/* Shine bar (used by the "shine" animation) */
.tb-btn::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  z-index:0;
  width:35%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform:translateX(-160%) skewX(-18deg);
  pointer-events:none;
}

/* Attention animations (class is added by front.js every N seconds) */
.tb-btn.tb-a-pulse{animation:tb-pulse .9s ease-in-out}
.tb-btn.tb-a-heartbeat{animation:tb-heartbeat 1.1s ease-in-out}
.tb-btn.tb-a-shake{animation:tb-shake .7s ease-in-out}
.tb-btn.tb-a-bounce{animation:tb-bounce .9s ease}
.tb-btn.tb-a-wiggle{animation:tb-wiggle .8s ease-in-out}
.tb-btn.tb-a-shine::after{animation:tb-shine 1.1s ease-in-out}

@keyframes tb-in{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes tb-pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.045)}
}
@keyframes tb-heartbeat{
  0%,70%,100%{transform:scale(1)}
  14%,42%{transform:scale(1.05)}
  28%{transform:scale(1)}
}
@keyframes tb-shake{
  0%,100%{transform:translateX(0)}
  15%,45%,75%{transform:translateX(-4px)}
  30%,60%,90%{transform:translateX(4px)}
}
@keyframes tb-bounce{
  0%,100%{transform:translateY(0)}
  30%{transform:translateY(-9px)}
  55%{transform:translateY(0)}
  75%{transform:translateY(-4px)}
}
@keyframes tb-wiggle{
  0%,100%{transform:rotate(0)}
  20%{transform:rotate(-1.6deg)}
  40%{transform:rotate(1.6deg)}
  60%{transform:rotate(-1deg)}
  80%{transform:rotate(1deg)}
}
@keyframes tb-shine{
  from{transform:translateX(-160%) skewX(-18deg)}
  to{transform:translateX(420%) skewX(-18deg)}
}

@media (prefers-reduced-motion:reduce){
  .tb-wrap,
  .tb-btn,
  .tb-btn::after{animation:none !important}
  .tb-layer{transition:none}
}