/* Temuliquid deals layer (temu.css)
   Styles only what temu.js creates, on both pages. Every rule is scoped to
   .tm so the pages keep their own look and the noise stays inside the deals.
   temu.js keeps the --tm-* offsets below up to date so the floating parts
   stay out of each other's way and off the order ticket. */

:root {
  --tm-coupon: var(--coupon, #FF5A00);
  --tm-coupon-text: #B83F00;
  --tm-coupon-deep: #C84400;
  --tm-hot: var(--hot, #FF1F3D);
  --tm-hot-text: #C20E2C;
  --tm-hot-deep: #E01030;
  --tm-tape: var(--tape, #F7C600);
  --tm-ink: var(--ink, #000000);
  --tm-graphite: var(--graphite, #3B4148);
  --tm-muted: var(--muted, #6B7280);
  --tm-hairline: var(--hairline, #DDE1E5);
  --tm-lab: var(--lab, #F3F5F6);
  --tm-panel: #FFFFFF;
  --tm-pale: #FFF7D1;
  --tm-pale-hot: #FFEFF1;
  --tm-ship: #087A46;
  --tm-night: #151515;
  --tm-ui: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tm-big: 'Big Shoulders Display', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --tm-shadow: 0 12px 32px rgb(0 0 0 / .16), 0 2px 6px rgb(0 0 0 / .08);

  /* Set by temu.js. */
  --tm-bb: 16px;        /* bottom edge: above the terminal's status bar */
  --tm-rg: 16px;        /* right edge: left of the order column on a wide terminal */
  --tm-lift: 0px;       /* above the Place order button on a phone */
  --tm-top: 8px;        /* below the landing's flash sale bar */
  --tm-notify-top: 8px; /* the notification prompt: below the terminal's pair row */
  --tm-dock: 0px;       /* above the cookie banner */
  --tm-cookie-r: 8px;
  --tm-cookie-l: 8px;   /* over the order book's column on a wide terminal */
  --tm-col-b: 16px;     /* the cookie banner's and the chat's bottom edge: on the
                           book column's foot when the account tabs run under it */
  --tm-ckh: 0px;        /* the cookie banner's height, when it is up */
  --tm-dm-top: 12px;    /* below the page's top chrome: DMs, rating card */
  --tm-appbar-h: 0px;   /* the phone app bar */
  --tm-peek: 1;         /* older DM windows peek out below (-1: above) */
}

/* ---------------------------------------------------------------- base */

.tm,
.tm *,
.tm *::before,
.tm *::after { box-sizing: border-box; }

/* Doubled class: outranks page rules like `.topbar span` without !important. */
.tm.tm {
  font-family: var(--tm-ui);
  font-variant-numeric: tabular-nums;
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
}

.tm[hidden],
.tm [hidden] { display: none !important; }

.tm p,
.tm h2,
.tm h3,
.tm ul,
.tm li {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}

.tm ul { list-style: none; }

.tm button,
button.tm {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: none;
  text-align: center;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Same reset again at a higher rank for every button that lives inside a
   page container, so rules like `.topbar button` can't restyle them.
   Component rules below share this rank and come later, so they still win. */
button.tm.tm-gift,
button.tm.tm-calm,
button.tm.tm-sidetab,
button.tm.tm-msgs,
button.tm.tm-tasks-pill,
.tm .tm-ad-btn,
.tm .tm-ad-skip,
.tm .tm-coupon-claim,
.tm .tm-qcoupon-btn,
.tm .tm-toast-x,
.tm .tm-nudge-x,
.tm .tm-btn,
.tm .tm-x,
.tm .tm-wheel-hub,
.tm .tm-flash-x {
  margin: 0;
  border: 0;
  box-shadow: none;
  min-width: 0;
  min-height: 0;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
}

.tm button:focus-visible,
button.tm:focus-visible {
  outline: 2px solid var(--tm-ink);
  outline-offset: 2px;
}

.tm .tm-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------- free gift button */

button.tm.tm-gift {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px 0 9px;
  border-radius: 999px;
  background: var(--tm-hot-deep);
  color: #fff;
  font: 700 12.5px/1 var(--tm-ui);
  white-space: nowrap;
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / .2), 0 0 0 1.5px var(--tm-tape);
  vertical-align: middle;
}

button.tm.tm-gift:hover { background: #C80E2B; }
button.tm.tm-gift:active { transform: translateY(1px); }

.tm.tm-gift svg {
  display: block;
  flex: none;
}

.tm.tm-gift .tm-gift-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tm-tape);
  box-shadow: 0 0 0 2px #fff;
}

.tm.tm-gift .tm-gift-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--tm-tape);
  animation: tm-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite;
}

@keyframes tm-ping {
  75%, 100% { transform: scale(2.4); opacity: 0; }
}

/* landing: a tab on the left edge of wide screens */
button.tm.tm-sidetab {
  position: fixed;
  top: 42%;
  left: 0;
  z-index: 9050;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 14px 8px 14px 7px;
  border-radius: 0 12px 12px 0;
  background: var(--tm-hot-deep);
  color: #fff;
  font: 700 13px/1 var(--tm-ui);
  writing-mode: vertical-rl;
  box-shadow: 0 8px 22px rgb(0 0 0 / .22), inset -2px 0 0 var(--tm-tape);
}

button.tm.tm-sidetab:hover { background: #C80E2B; }
.tm.tm-sidetab svg { display: block; flex: none; }

@media (min-width: 1200px) {
  button.tm.tm-sidetab { display: inline-flex; }
}

/* ------------------------------------------------------------- coupons */

/* #tl-coupons already pads and lays out; the strip fills it and scrolls
   sideways instead of wrapping into three rows on a phone. */
.tm.tm-coupons {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 2px 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.tm.tm-coupons::-webkit-scrollbar { display: none; }

.tm .tm-coupon {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 5px 14px 5px 16px;
  border: 1.5px dashed var(--tm-coupon);
  border-radius: 9px;
  background: var(--tm-pale);
  color: var(--tm-ink);
  font: 700 12px/1.2 var(--tm-ui);
  white-space: nowrap;
  /* ticket notches on both short edges */
  -webkit-mask:
    radial-gradient(circle 5px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 5px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle 5px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 5px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
}

.tm .tm-coupon-val {
  font: 900 17px/1 var(--tm-big);
  color: var(--tm-coupon-text);
  letter-spacing: .01em;
}

.tm .tm-coupon-txt { color: var(--tm-ink); }

.tm .tm-coupon-cut {
  align-self: stretch;
  width: 0;
  margin: -5px 2px;
  border-left: 1.5px dashed var(--tm-coupon);
}

.tm .tm-count {
  display: inline-block;
  min-width: 4.2ch;
  color: var(--tm-hot-text);
  font-variant-numeric: tabular-nums;
}

.tm .tm-coupon-claim {
  height: 24px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--tm-coupon-deep);
  color: #fff;
  font: 700 11.5px/24px var(--tm-ui);
  white-space: nowrap;
}

.tm .tm-coupon-claim:hover { background: #A93A00; }

.tm .tm-coupon-claim[aria-disabled="true"] {
  background: transparent;
  color: var(--tm-coupon-text);
  box-shadow: inset 0 0 0 1.5px var(--tm-coupon);
  cursor: default;
}

/* -------------------------------------------------------- flash sale */

.tm .tm-flash-txt {
  margin: 0;
  text-align: center;
}

.tm .tm-flash-ic { margin-right: 4px; }
.tm .tm-flash-txt b { font-weight: 800; }

.tm .tm-flash-clock {
  display: inline-block;
  min-width: 4.6ch;
  margin-left: 2px;
  padding: 3px 6px 2px;
  border-radius: 6px;
  background: #000;
  color: var(--tm-tape);
  font: 900 17px/1 var(--tm-big);
  letter-spacing: .04em;
  text-align: center;
  vertical-align: -1px;
}

.tm .tm-flash-x {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  border-radius: 50%;
  color: #fff;
  font: 400 22px/30px var(--tm-ui);
}

.tm .tm-flash-x:hover { background: rgb(255 255 255 / .2); }
.tm .tm-flash-x:focus-visible { outline-color: #fff; }

/* landing: a sticky bar at the very top (below the app bar on a phone) */
.tm.tm-flashbar {
  position: sticky;
  top: var(--tm-appbar-h, 0px);
  z-index: 9100;
  background: var(--tm-hot-deep);
  color: #fff;
  box-shadow: 0 2px 0 rgb(0 0 0 / .14);
}

.tm.tm-flashbar .tm-flash-in {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 14px;
  min-height: 40px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 6px 48px 6px 16px;
  font: 600 14px/1.3 var(--tm-ui);
}

.tm.tm-flashbar .tm-flash-calm:empty { display: none; }
.tm.tm-flashbar.is-back { animation: tm-flash-back .45s ease-out; }

@keyframes tm-flash-back {
  0% { transform: translateY(-100%); }
  70% { transform: translateY(3px); }
}

/* terminal: the first item of the coupon row */
.tm .tm-flash-item {
  flex: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 5px 40px 5px 12px;
  border-radius: 9px;
  background: var(--tm-hot-deep);
  color: #fff;
  font: 600 12.5px/1.2 var(--tm-ui);
  white-space: nowrap;
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / .2);
}

.tm .tm-flash-item .tm-flash-clock { font-size: 15px; }

.tm .tm-flash-item .tm-flash-x {
  right: 5px;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  font-size: 19px;
  line-height: 28px;
}

.tm .tm-flash-item.is-back { animation: tm-pop .3s cubic-bezier(.2, .9, .3, 1.4) both; }

/* ----------------------------------------------------- urgency labels */

.tm.tm-urgency {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  max-width: 200px;
  padding: 3px 8px 3px 6px;
  border-radius: 7px;
  background: var(--tm-pale-hot);
  color: var(--tm-hot-text);
  font: 700 10.5px/1.2 var(--tm-ui);
  white-space: normal;
  vertical-align: middle;
}

.tm.tm-urgency .tm-urgency-ic {
  flex: none;
  font-size: 12px;
  line-height: 1;
}

.tm.tm-urgency .tm-urgency-n {
  font: 900 13px/1 var(--tm-big);
  letter-spacing: .01em;
}

.tm.tm-urgency.is-bump .tm-urgency-n { animation: tm-bump .35s ease-out; }

@keyframes tm-bump {
  40% { color: var(--tm-hot); }
}

/* inside the pair picker, after its button */
.tm.tm-urgency--liq {
  max-width: 178px;
  margin-inline-start: 10px;
}

/* last row inside the leverage box */
.tm.tm-urgency--pop {
  display: flex;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 4px 8px;
  border: 1px dashed var(--tm-coupon);
  background: var(--tm-pale);
  color: var(--tm-coupon-text);
}

/* next to the validators item in the status bar */
.tm.tm-urgency--stock {
  max-width: none;
  margin: 0 0 0 -6px;
  padding: 1px 7px;
  white-space: nowrap;
}

/* next to the Withdraw button */
.tm.tm-urgency--ship {
  max-width: none;
  margin: 0;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--tm-ship);
  color: #fff;
  white-space: nowrap;
}

/* landing: under the hero title */
.tm.tm-readers {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 16px 0 0;
  padding: 6px 13px 6px 11px;
  border: 1.5px dashed var(--tm-hot);
  border-radius: 999px;
  background: var(--tm-pale-hot);
  color: var(--tm-hot-text);
  font: 700 13.5px/1.25 var(--tm-ui);
}

.tm.tm-readers .tm-readers-dot {
  position: relative;
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tm-hot);
}

.tm.tm-readers .tm-readers-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--tm-hot);
  animation: tm-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite;
}

.tm.tm-readers .tm-readers-n {
  font: 900 17px/1 var(--tm-big);
  letter-spacing: .01em;
}

/* ------------------------------------------------- stickers (overlay) */

.tm.tm-layer {
  position: fixed;
  inset: 0;
  z-index: 8500;
  overflow: hidden;
  pointer-events: none;
}

.tm .tm-sticker {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.tm .tm-sticker-in {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  color: #fff;
  font: 700 10px/1.25 var(--tm-ui);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgb(0 0 0 / .22);
  transform: rotate(var(--tilt, 0deg));
}

.tm .tm-sticker--hot .tm-sticker-in {
  background: var(--tm-hot-deep);
  letter-spacing: .07em;
  animation: tm-wobble 5s ease-in-out infinite;
}

@keyframes tm-wobble {
  0%, 84%, 100% { transform: rotate(var(--tilt, 0deg)); }
  88% { transform: rotate(calc(var(--tilt, 0deg) - 10deg)) scale(1.08); }
  93% { transform: rotate(calc(var(--tilt, 0deg) + 7deg)) scale(1.08); }
}

/* --------------------------------------------- coupon in the line dialog */

.tm.tm-qcoupon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 20px 20px;
  padding: 8px 8px 8px 12px;
  border: 1.5px dashed var(--tm-coupon);
  border-radius: 10px;
  background: var(--tm-pale);
  color: var(--tm-ink);
  font: 700 12.5px/1.3 var(--tm-ui);
}

.tm.tm-qcoupon .tm-qcoupon-val {
  margin-right: 4px;
  font: 900 15px/1 var(--tm-big);
  color: var(--tm-coupon-text);
}

.tm.tm-qcoupon .tm-qcoupon-btn {
  flex: none;
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--tm-hot-deep);
  color: #fff;
  font: 700 12.5px/30px var(--tm-ui);
}

/* ----------------------------------------------------------- toasts */

/* landing: no #tl-toasts, so temu.js makes this one */
.tm.tm-toasts-fallback {
  position: fixed;
  left: 16px;
  bottom: calc(var(--tm-bb) + var(--tm-lift) + var(--tm-dock));
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}

.tm.tm-toast-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* The toast hooks only catch clicks on a toast itself, never on the space
   the stack keeps clear above the cookie banner or the order button. */
#tl-toasts,
.tm.tm-toast-stack { pointer-events: none; }

.tm .tm-toast {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 26px;
  align-items: start;
  gap: 10px;
  width: min(340px, calc(100vw - 32px));
  padding: 10px 7px 10px 10px;
  border: 1.5px dashed var(--tm-coupon);
  border-radius: 12px;
  background: #fff;
  color: var(--tm-ink);
  box-shadow: var(--tm-shadow);
  font: 600 13px/1.35 var(--tm-ui);
  pointer-events: auto;
  animation: tm-toast-in .24s cubic-bezier(.2, .9, .3, 1.25) both;
  transition: opacity .16s ease, transform .16s ease;
}

.tm .tm-toast.tm-out {
  opacity: 0;
  transform: translateY(6px);
}

@keyframes tm-toast-in {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
}

.tm .tm-toast-ic {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--tm-tape);
  color: #000;
  font: 900 15px/1 var(--tm-big);
}

.tm .tm-toast--alert .tm-toast-ic { background: var(--tm-hot-deep); color: #fff; }
.tm .tm-toast--ok .tm-toast-ic { background: var(--tm-ship); color: #fff; }

.tm .tm-toast-tag {
  display: block;
  margin-bottom: 2px;
  color: var(--tm-coupon-text);
  font: 700 10.5px/1.2 var(--tm-ui);
}

.tm .tm-toast--alert .tm-toast-tag { color: var(--tm-hot-text); }
.tm .tm-toast--ok .tm-toast-tag { color: var(--tm-ship); }

.tm .tm-toast-msg { display: block; overflow-wrap: anywhere; }

.tm .tm-toast-x {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  color: var(--tm-muted);
  font: 400 19px/26px var(--tm-ui);
}

.tm .tm-toast-x:hover {
  background: var(--tm-lab);
  color: var(--tm-ink);
}

/* --------------------------------------------------------- tooltips */

.tm.tm-tip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9600;
  width: max-content;
  max-width: min(280px, calc(100vw - 16px));
  font: 500 12px/1.4 var(--tm-ui);
  animation: tm-fade .12s ease-out;
}

@keyframes tm-fade {
  from { opacity: 0; }
}

.tm.tm-tip .tm-tip-plain {
  padding: 6px 9px;
  border-radius: 6px;
  background: var(--tm-ink);
  color: #fff;
  box-shadow: 0 4px 14px rgb(0 0 0 / .18);
}

.tm.tm-tip .tm-tip-deal {
  margin-top: 4px;
  padding: 6px 9px;
  border: 1.5px dashed var(--tm-coupon);
  border-radius: 6px;
  background: var(--tm-pale);
  color: var(--tm-ink);
  font-weight: 700;
  box-shadow: 0 4px 14px rgb(0 0 0 / .12);
}

.tm.tm-tip .tm-tip-plain[hidden] + .tm-tip-deal { margin-top: 0; }

/* ----------------------------------------------------------- nudges */

.tm.tm-nudge {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9500;
  width: max-content;
  max-width: min(250px, calc(100vw - 16px));
  padding: 8px 32px 9px 11px;
  border: 1.5px dashed var(--tm-coupon);
  border-radius: 10px;
  background: var(--tm-pale);
  color: var(--tm-ink);
  box-shadow: var(--tm-shadow);
  font: 700 12.5px/1.35 var(--tm-ui);
  animation: tm-pop .28s cubic-bezier(.2, .9, .3, 1.4) both, tm-shake .45s .3s ease-in-out 1;
}

@keyframes tm-pop {
  from { opacity: 0; transform: scale(.9); }
}

@keyframes tm-shake {
  25% { transform: rotate(-2.5deg); }
  75% { transform: rotate(2.5deg); }
}

.tm.tm-nudge .tm-nudge-tag {
  display: block;
  margin-bottom: 2px;
  color: var(--tm-coupon-text);
  font: 700 10.5px/1.2 var(--tm-ui);
}

.tm.tm-nudge .tm-nudge-x {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: var(--tm-muted);
  font: 400 17px/24px var(--tm-ui);
}

.tm.tm-nudge .tm-nudge-x:hover {
  background: rgb(0 0 0 / .06);
  color: var(--tm-ink);
}

.tm.tm-nudge .tm-nudge-arrow {
  position: absolute;
  left: 20px;
  width: 11px;
  height: 11px;
  background: var(--tm-pale);
  border: 1.5px dashed var(--tm-coupon);
}

.tm.tm-nudge[data-side="top"] .tm-nudge-arrow {
  bottom: -6.5px;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
}

.tm.tm-nudge[data-side="bottom"] .tm-nudge-arrow {
  top: -6.5px;
  border-bottom: 0;
  border-right: 0;
  transform: rotate(45deg);
}

/* ---------------------------------------------------- fewer deals toggle */

button.tm.tm-calm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px 0 4px;
  border: 1px dashed var(--tm-coupon);
  border-radius: 999px;
  background: var(--tm-panel);
  color: var(--tm-coupon-text);
  font: 700 11px/1 var(--tm-ui);
  white-space: nowrap;
  vertical-align: middle;
}

button.tm.tm-calm:hover { background: var(--tm-pale); }

.tm.tm-calm .tm-calm-sw {
  position: relative;
  flex: none;
  width: 22px;
  height: 13px;
  border-radius: 999px;
  background: var(--tm-hairline);
  transition: background .15s;
}

.tm.tm-calm .tm-calm-sw::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / .3);
  transition: transform .15s;
}

.tm.tm-calm.is-on .tm-calm-sw { background: var(--tm-coupon); }
.tm.tm-calm.is-on .tm-calm-sw::after { transform: translateX(9px); }

/* in the landing's flash sale bar */
.tm.tm-flashbar button.tm.tm-calm {
  height: 26px;
  border-style: solid;
  border-color: #fff;
  font-size: 12px;
}

/* ------------------------------------------------------ cookie banner */

.tm.tm-cookie {
  position: fixed;
  right: var(--tm-cookie-r);
  bottom: var(--tm-col-b, calc(var(--tm-bb) + var(--tm-lift)));
  left: var(--tm-cookie-l);
  z-index: 9200;
  max-width: 560px;
  margin: 0 auto;
  padding: 14px 16px;
  border: 2px solid var(--tm-tape);
  border-radius: 16px;
  background: var(--tm-night);
  color: #fff;
  box-shadow: 0 18px 48px rgb(0 0 0 / .35);
  font: 500 13px/1.4 var(--tm-ui);
  animation: tm-rise .32s cubic-bezier(.2, .9, .3, 1.2) both;
}

@keyframes tm-rise {
  from { opacity: 0; transform: translateY(16px); }
}

.tm.tm-cookie button:focus-visible { outline-color: var(--tm-tape); }

.tm .tm-cookie-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.tm .tm-cookie-ic {
  flex: none;
  font-size: 28px;
  line-height: 1;
}

.tm .tm-cookie-title {
  color: #fff;
  font: 700 16px/1.3 var(--tm-ui);
}

.tm .tm-cookie-sub {
  margin-top: 3px;
  color: #FFD08A;
  font-weight: 600;
}

.tm .tm-cookie-link {
  margin-top: 4px;
  padding: 2px 0;
  color: #C9CED4;
  font: 500 12.5px/1.3 var(--tm-ui);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tm .tm-cookie-link:hover { color: #fff; }

.tm .tm-cookie-prefs {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.tm .tm-cookie-prefs li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  border-radius: 9px;
  background: rgb(255 255 255 / .08);
  font-weight: 600;
}

.tm .tm-cookie-lock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #C9CED4;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.tm .tm-sw {
  position: relative;
  flex: none;
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: var(--tm-ship);
}

.tm .tm-sw::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
}

.tm .tm-cookie-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.tm .tm-cbtn {
  flex: 1 1 0;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgb(255 255 255 / .12);
  color: #fff;
  font: 700 13.5px/1.2 var(--tm-ui);
}

.tm .tm-cbtn:hover { background: rgb(255 255 255 / .2); }

.tm .tm-cbtn.is-primary {
  background: var(--tm-tape);
  color: #000;
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / .16);
}

.tm .tm-cbtn.is-primary:hover { background: #FFD21F; }

/* On a wide terminal it sits on the order book's column; after 10 s on the
   terminal it shrinks to a slim bar; on the landing it steps aside while the
   footer's small print is on screen. */

.tm.tm-cookie.is-narrow { padding: 10px 12px; }
.tm.tm-cookie.is-narrow .tm-cookie-ic { display: none; }
.tm.tm-cookie.is-narrow .tm-cookie-title { font-size: 14px; }
.tm.tm-cookie.is-narrow .tm-cookie-row { margin-top: 8px; }
.tm.tm-cookie.is-narrow .tm-cbtn.tm-cbtn-harder { min-height: 44px; padding: 6px 8px; font-size: 22px; }

.tm.tm-cookie.is-compact { padding: 8px 10px; }
.tm.tm-cookie.is-compact .tm-cookie-ic,
.tm.tm-cookie.is-compact .tm-cookie-sub,
.tm.tm-cookie.is-compact .tm-cookie-link,
.tm.tm-cookie.is-compact .tm-cookie-prefs { display: none; }
.tm.tm-cookie.is-compact .tm-cookie-title { font-size: 13px; }
.tm.tm-cookie.is-compact .tm-cookie-row { margin-top: 6px; }
.tm.tm-cookie.is-compact .tm-cbtn.tm-cbtn-harder { min-height: 32px; padding: 4px 8px; font-size: 18px; }

.tm.tm-cookie.is-away {
  visibility: hidden;
  pointer-events: none;
}

/* ------------------------------------------------- notification prompt */

.tm.tm-notify {
  position: fixed;
  top: var(--tm-notify-top, var(--tm-top));
  left: 16px;
  z-index: 9400;
  width: min(372px, calc(100vw - 16px));
  padding: 14px 14px 12px 16px;
  border-radius: 10px;
  background: #fff;
  color: #1F2328;
  box-shadow: 0 2px 6px rgb(0 0 0 / .18), 0 14px 34px rgb(0 0 0 / .22);
  font: 400 13.5px/1.4 var(--tm-ui);
  animation: tm-drop .22s ease-out both;
}

@keyframes tm-drop {
  from { opacity: 0; transform: translateY(-8px); }
}

.tm .tm-notify-caret {
  position: absolute;
  top: -6px;
  left: 24px;
  width: 13px;
  height: 13px;
  background: #fff;
  transform: rotate(45deg);
  box-shadow: -2px -2px 3px rgb(0 0 0 / .05);
}

/* Below the terminal's pair row it no longer hangs from the address bar. */
.tm.tm-notify.is-low .tm-notify-caret { display: none; }

/* No room beside the pair button and the order column: it steps aside. */
.tm.tm-notify.tm-shy {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.tm .tm-notify-x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #5F6368;
  font: 400 20px/28px var(--tm-ui);
}

.tm .tm-notify-x:hover { background: #F1F3F4; }

.tm .tm-notify-text { margin-right: 26px; }

.tm .tm-notify-host {
  display: block;
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}

.tm .tm-notify-host b { font-weight: 700; }

.tm .tm-notify-what {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #3C4043;
}

.tm .tm-notify-bell {
  display: inline-flex;
  flex: none;
  padding-top: 1px;
  color: #5F6368;
}

.tm .tm-notify-bell svg { display: block; }

.tm .tm-notify-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.tm .tm-nbtn {
  min-width: 78px;
  height: 34px;
  padding: 0 16px;
  border: 1px solid #DADCE0;
  border-radius: 999px;
  background: #fff;
  color: #1A57C9;
  font: 600 13.5px/32px var(--tm-ui);
}

.tm .tm-nbtn:hover { background: #F4F8FE; }

.tm .tm-nbtn.is-primary {
  border-color: #1A57C9;
  background: #1A57C9;
  color: #fff;
}

.tm .tm-nbtn.is-primary:hover { background: #174EA6; }

/* ------------------------------------------------------- support chat */

.tm.tm-chat {
  position: fixed;
  right: var(--tm-rg);
  bottom: calc(var(--tm-col-b, calc(var(--tm-bb) + var(--tm-lift))) + var(--tm-dock));
  z-index: 9300;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  max-width: calc(100vw - 16px);
  pointer-events: none;
}

.tm.tm-chat > * { pointer-events: auto; }

.tm .tm-chat-row {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 10px;
}

.tm .tm-chat-row.is-pop { animation: tm-pop .3s cubic-bezier(.2, .9, .3, 1.4) both; }

.tm .tm-chat-head {
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 18px rgb(0 0 0 / .25), 0 0 0 3px #fff;
}

.tm .tm-chat-head svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.tm .tm-chat-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--tm-hot-deep);
  color: #fff;
  font: 700 11.5px/21px var(--tm-ui);
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
}

.tm .tm-chat-msg {
  position: relative;
  max-width: min(260px, calc(100vw - 96px));
}

.tm .tm-chat-text {
  display: block;
  width: 100%;
  padding: 9px 30px 10px 12px;
  border-radius: 14px 14px 4px 14px;
  background: #fff;
  color: var(--tm-ink);
  font: 500 13.5px/1.35 var(--tm-ui);
  text-align: left;
  box-shadow: var(--tm-shadow), 0 0 0 1px var(--tm-hairline);
}

.tm .tm-chat-msg.is-dm .tm-chat-text { box-shadow: var(--tm-shadow), 0 0 0 1.5px var(--tm-hot-deep); }

.tm .tm-chat-from {
  display: block;
  margin-bottom: 2px;
  color: var(--tm-muted);
  font: 700 11px/1.2 var(--tm-ui);
}

.tm .tm-chat-msg.is-dm .tm-chat-from { color: var(--tm-hot-text); }

.tm .tm-chat-mx {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--tm-muted);
  font: 400 17px/24px var(--tm-ui);
}

.tm .tm-chat-mx:hover { background: var(--tm-lab); color: var(--tm-ink); }

.tm .tm-chat-hide {
  width: 24px;
  height: 24px;
  margin-right: 14px;
  border-radius: 50%;
  background: #fff;
  color: var(--tm-graphite);
  font: 400 16px/24px var(--tm-ui);
  box-shadow: 0 2px 8px rgb(0 0 0 / .2);
}

.tm .tm-chat-panel {
  width: min(320px, calc(100vw - 24px));
  overflow: hidden;
  border: 1px solid var(--tm-hairline);
  border-radius: 16px;
  background: #fff;
  color: var(--tm-ink);
  box-shadow: 0 18px 50px rgb(0 0 0 / .3);
}

.tm .tm-chat-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px 10px 12px;
  background: var(--tm-night);
  color: #fff;
}

.tm .tm-chat-avatar {
  flex: none;
  width: 32px;
  height: 32px;
}

.tm .tm-chat-avatar svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.tm .tm-chat-who {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  font: 700 14px/1.2 var(--tm-ui);
}

.tm .tm-chat-status {
  color: #9BE22D;
  font: 500 11.5px/1.3 var(--tm-ui);
}

.tm .tm-chat-close {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  font: 400 21px/30px var(--tm-ui);
}

.tm .tm-chat-close:hover { background: rgb(255 255 255 / .16); }
.tm .tm-chat-close:focus-visible { outline-color: #fff; }

.tm .tm-chat-log {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 230px;
  overflow-y: auto;
  padding: 12px;
  background: var(--tm-lab);
}

.tm .tm-chat-line {
  max-width: 86%;
  padding: 8px 10px;
  border-radius: 12px;
  font: 500 13px/1.35 var(--tm-ui);
}

.tm .tm-chat-line.is-them {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--tm-hairline);
}

.tm .tm-chat-line.is-me {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  background: var(--tm-tape);
}

.tm .tm-chat-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px 12px;
}

.tm .tm-chat-reply {
  padding: 6px 11px;
  border: 1.5px solid var(--tm-ink);
  border-radius: 999px;
  background: #fff;
  font: 600 12.5px/1.2 var(--tm-ui);
}

.tm .tm-chat-reply:hover { background: var(--tm-pale); }

/* ---------------------------------------------------------- confetti */

.tm.tm-confetti {
  position: fixed;
  inset: 0;
  z-index: 9900;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------------------------------------------------------- dialogs */

dialog.tm.tm-dialog {
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tm-ink);
  overflow: visible;
}

dialog.tm.tm-dialog:not([open]) { display: none; }

dialog.tm.tm-dialog::backdrop { background: rgb(24 12 0 / .55); }
dialog.tm.tm-upsell::backdrop { background: rgb(0 0 0 / .18); }

.tm .tm-box {
  position: relative;
  width: min(392px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 22px 20px 18px;
  border: 3px solid var(--tm-tape);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 70px rgb(0 0 0 / .35);
  text-align: center;
}

.tm .tm-x {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tm-lab);
  color: var(--tm-graphite);
  font: 400 21px/32px var(--tm-ui);
}

.tm .tm-x:hover {
  background: var(--tm-hairline);
  color: var(--tm-ink);
}

.tm .tm-ribbon {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--tm-hot-deep);
  color: #fff;
  font: 700 11.5px/1.2 var(--tm-ui);
}

.tm .tm-title {
  margin-top: 8px;
  color: var(--tm-ink);
  font: 900 36px/.95 var(--tm-big);
  text-wrap: balance;
}

.tm .tm-sub {
  max-width: 30ch;
  margin: 7px auto 0;
  color: var(--tm-graphite);
  font: 600 13px/1.35 var(--tm-ui);
  text-wrap: balance;
}

.tm .tm-fine {
  max-width: 34ch;
  margin: 10px auto 0;
  color: var(--tm-muted);
  font: 500 11.5px/1.35 var(--tm-ui);
  text-wrap: balance;
}

.tm .tm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: 10px 16px;
  border-radius: 12px;
  font: 700 15px/1.2 var(--tm-ui);
}

.tm .tm-btn-tape {
  background: var(--tm-tape);
  color: #000;
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / .16);
}

.tm .tm-btn-tape:hover { background: #FFD21F; }

.tm .tm-btn-big {
  min-height: 54px;
  font-size: 18px;
}

.tm .tm-btn-ghost {
  margin-top: 8px;
  background: var(--tm-lab);
  color: var(--tm-ink);
}

.tm .tm-btn-ghost:hover { background: var(--tm-hairline); }

.tm .tm-btn-link {
  min-height: 0;
  margin-top: 10px;
  padding: 6px 8px;
  background: none;
  color: var(--tm-muted);
  font: 500 12.5px/1.35 var(--tm-ui);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tm .tm-btn-link:hover { color: var(--tm-ink); }

.tm .tm-btn[aria-disabled="true"] {
  opacity: .55;
  cursor: progress;
}

.tm .tm-btn.is-done,
.tm .tm-btn.is-done[aria-disabled="true"] {
  background: var(--tm-ship);
  color: #fff;
  font-size: 15px;
  opacity: 1;
  cursor: default;
}

/* the welcome gift */

dialog.tm.tm-welcome .tm-box {
  padding-top: 24px;
  border-color: var(--tm-hot-deep);
  background: radial-gradient(120% 55% at 50% 0%, #FFF0B8 0%, #FFFFFF 64%);
}

.tm .tm-burst {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  background: var(--tm-tape);
  color: #000;
  font: 900 13px/.95 var(--tm-big);
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-12deg);
  clip-path: polygon(50% 0%, 60.6% 10.4%, 75% 6.7%, 79% 21%, 93.3% 25%, 89.6% 39.4%, 100% 50%, 89.6% 60.6%, 93.3% 75%, 79% 79%, 75% 93.3%, 60.6% 89.6%, 50% 100%, 39.4% 89.6%, 25% 93.3%, 21% 79%, 6.7% 75%, 10.4% 60.6%, 0% 50%, 10.4% 39.4%, 6.7% 25%, 21% 21%, 25% 6.7%, 39.4% 10.4%);
}

.tm .tm-welcome-lead {
  max-width: 28ch;
  margin: 12px auto 0;
  color: var(--tm-graphite);
  font: 700 14px/1.3 var(--tm-ui);
  text-wrap: balance;
}

.tm .tm-welcome-big {
  margin-top: 8px;
  color: var(--tm-hot-deep);
  font: 900 clamp(84px, 27vw, 128px)/.8 var(--tm-big);
  letter-spacing: -.01em;
  text-shadow: 3px 3px 0 var(--tm-tape);
}

.tm .tm-welcome-sub {
  max-width: 22ch;
  margin: 10px auto 0;
  color: var(--tm-ink);
  font: 800 19px/1.2 var(--tm-ui);
  text-wrap: balance;
}

.tm .tm-offer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 16px 0 14px;
  padding: 10px 12px;
  border: 2px dashed var(--tm-coupon);
  border-radius: 14px;
  background: var(--tm-pale);
}

.tm .tm-offer-label {
  color: var(--tm-ink);
  font: 700 14px/1.2 var(--tm-ui);
}

.tm .tm-offer-clock {
  display: inline-block;
  min-width: 4.4ch;
  padding: 6px 10px 4px;
  border-radius: 9px;
  background: var(--tm-night);
  color: var(--tm-tape);
  font: 900 40px/1 var(--tm-big);
  letter-spacing: .04em;
  text-align: center;
}

/* the newsletter */

.tm .tm-envelope {
  position: relative;
  display: block;
  width: 74px;
  height: 52px;
  margin: 16px auto 2px;
  border: 2px solid var(--tm-coupon);
  border-radius: 7px;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), var(--tm-coupon) 50%, transparent calc(50% + 1px)) left top / 50% 72% no-repeat,
    linear-gradient(to top left, transparent calc(50% - 1px), var(--tm-coupon) 50%, transparent calc(50% + 1px)) right top / 50% 72% no-repeat,
    var(--tm-pale);
}

.tm .tm-envelope::after {
  content: '1';
  position: absolute;
  top: -10px;
  right: -10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tm-hot-deep);
  color: #fff;
  font: 700 12px/22px var(--tm-ui);
  text-align: center;
}

dialog.tm.tm-news .tm-btn { margin-top: 16px; }

/* exit intent */

.tm .tm-row-exit { margin-top: 18px; }

/* the wheel */

.tm .tm-wheel-wrap {
  position: relative;
  width: min(312px, 72vw);
  aspect-ratio: 1 / 1;
  margin: 18px auto 16px;
  container-type: inline-size;
}

.tm .tm-wheel-rim {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #151515;
  box-shadow: 0 10px 26px rgb(0 0 0 / .28), inset 0 0 0 .8cqw #2A2A2A;
}

.tm .tm-wheel {
  position: absolute;
  inset: 3.2cqw;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: inset 0 0 0 .7cqw rgb(0 0 0 / .22);
  transform: rotate(0deg);
}

/* Divider lines; temu.js draws them per wheel, off the sliver's edges. */
.tm .tm-wheel-lines {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.tm .tm-wheel-label {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 25cqw;
  height: 13cqw;
  margin: -6.5cqw 0 0 -12.5cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: 800 3.7cqw/1 var(--tm-big);
  letter-spacing: .01em;
  transform: rotate(var(--a)) translateY(-29cqw);
  pointer-events: none;
}

.tm .tm-wheel-label.is-big { font-size: 5.4cqw; line-height: .95; }

.tm .tm-wheel-gloss {
  position: absolute;
  inset: 3.2cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 24%, rgb(255 255 255 / .34), rgb(255 255 255 / 0) 56%);
  pointer-events: none;
}

.tm .tm-wheel-bulbs { position: absolute; inset: 0; pointer-events: none; }

.tm .tm-wheel-bulbs i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2cqw;
  height: 2cqw;
  margin: -1cqw 0 0 -1cqw;
  border-radius: 50%;
  background: #FFE680;
  box-shadow: 0 0 1.6cqw #FFD000;
  transform: rotate(var(--a)) translateY(-48.4cqw);
  animation: tm-bulb 1.2s steps(1, end) infinite;
}

.tm .tm-wheel-bulbs i:nth-child(2n) { animation-delay: -.6s; }
.tm .tm-wheel-wrap.is-spinning .tm-wheel-bulbs i { animation-duration: .3s; }
.tm .tm-wheel-wrap.is-spinning .tm-wheel-bulbs i:nth-child(2n) { animation-delay: -.15s; }

@keyframes tm-bulb {
  50% { background: #6B5200; box-shadow: none; }
}

.tm .tm-wheel-pointer {
  position: absolute;
  left: 50%;
  top: -4cqw;
  z-index: 2;
  width: 10cqw;
  margin-left: -5cqw;
  filter: drop-shadow(0 .7cqw .7cqw rgb(0 0 0 / .45));
}

.tm .tm-wheel-pointer svg { display: block; width: 100%; height: auto; }

.tm .tm-wheel-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 21cqw;
  height: 21cqw;
  margin: -10.5cqw 0 0 -10.5cqw;
  border-radius: 50%;
  background: var(--tm-tape);
  color: #000;
  font: 900 5.6cqw/1 var(--tm-big);
  box-shadow: 0 0 0 1.3cqw #151515, 0 .8cqw 2cqw rgb(0 0 0 / .4);
}

.tm .tm-wheel-hub:hover { background: #FFD21F; }

/* result */

.tm .tm-won {
  margin-top: 2px;
  color: var(--tm-hot-text);
  font: 700 14px/1.2 var(--tm-ui);
}

.tm .tm-prize-card {
  margin: 12px 0 14px;
  padding: 18px 14px 14px;
  border: 2px dashed var(--tm-coupon);
  border-radius: 16px;
  background: var(--tm-pale);
}

.tm .tm-prize {
  color: var(--tm-ink);
  font: 900 clamp(34px, 10.5vw, 48px)/.92 var(--tm-big);
  letter-spacing: .005em;
  text-wrap: balance;
}

.tm .tm-within {
  margin-top: 12px;
  color: var(--tm-graphite);
  font: 700 13px/1.2 var(--tm-ui);
}

.tm .tm-within .tm-clock {
  color: var(--tm-hot-text);
  font: 900 22px/1 var(--tm-big);
  vertical-align: -2px;
}

/* confirmshaming */

.tm .tm-confirm-title {
  margin: 14px 24px 0;
  font: 900 32px/.98 var(--tm-big);
  text-wrap: balance;
}

.tm .tm-confirm-text {
  max-width: 30ch;
  margin: 10px auto 18px;
  color: var(--tm-graphite);
  font: 600 14px/1.4 var(--tm-ui);
  text-wrap: balance;
}

/* pro upsell */

dialog.tm.tm-upsell .tm-box {
  width: min(300px, calc(100vw - 24px));
  padding: 16px 16px 14px;
  border: 2px dashed var(--tm-coupon);
  border-radius: 14px;
  text-align: left;
}

dialog.tm.tm-upsell .tm-x {
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  font-size: 19px;
  line-height: 28px;
}

.tm .tm-pro {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: #000;
  color: var(--tm-tape);
  font: 700 11px/1.35 var(--tm-ui);
}

.tm .tm-upsell-text {
  margin: 10px 30px 14px 0;
  font: 700 14px/1.35 var(--tm-ui);
}

.tm .tm-upsell-text b {
  font: 900 17px/1 var(--tm-big);
  color: var(--tm-coupon-text);
  white-space: nowrap;
}

.tm .tm-row {
  display: flex;
  gap: 8px;
}

.tm .tm-row .tm-btn {
  flex: 1 1 0;
  min-height: 38px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13.5px;
}

.tm .tm-row-exit .tm-btn {
  min-height: 48px;
  font-size: 15px;
  white-space: nowrap;
}

.tm .tm-row-exit .tm-btn-tape { flex-grow: 1.7; }

/* ------------------------------------------------------------ shakes */
/* temu.js adds one of these to a box for a moment; gags.js shakes the page. */

.tm .tm-shake-light { animation: tm-quake-light .45s ease-in-out 1; }
.tm .tm-shake-medium { animation: tm-quake-medium .6s ease-in-out 1; }
.tm .tm-shake-strong { animation: tm-quake-strong .8s ease-in-out 1; }

@keyframes tm-quake-light {
  20% { transform: translate(-4px, 1px) rotate(-.6deg); }
  40% { transform: translate(4px, -1px) rotate(.6deg); }
  60% { transform: translate(-3px, 0); }
  80% { transform: translate(2px, 1px); }
}

@keyframes tm-quake-medium {
  15% { transform: translate(-8px, 2px) rotate(-1.2deg); }
  30% { transform: translate(8px, -2px) rotate(1.2deg); }
  45% { transform: translate(-7px, 1px) rotate(-.8deg); }
  60% { transform: translate(6px, -1px) rotate(.6deg); }
  80% { transform: translate(-3px, 1px); }
}

@keyframes tm-quake-strong {
  10% { transform: translate(-14px, 4px) rotate(-2deg) scale(1.02); }
  20% { transform: translate(14px, -4px) rotate(2deg) scale(1.02); }
  30% { transform: translate(-12px, 3px) rotate(-1.6deg); }
  40% { transform: translate(12px, -3px) rotate(1.6deg); }
  55% { transform: translate(-8px, 2px) rotate(-1deg); }
  70% { transform: translate(6px, -1px) rotate(.6deg); }
  85% { transform: translate(-3px, 1px); }
}

/* ------------------------------------------------- the wheel: extras */

.tm .tm-wheel-box { transition: width .25s ease; }

/* Bigger wheels get a bigger box, a louder frame and a shouted title. */
.tm .tm-box.tm-box--t1 { width: min(424px, calc(100vw - 24px)); border-color: var(--tm-coupon); }
.tm .tm-box.tm-box--t2 { width: min(456px, calc(100vw - 24px)); border-color: var(--tm-hot-deep); border-width: 4px; }
.tm .tm-box.tm-box--t3 {
  width: min(492px, calc(100vw - 24px));
  border: 5px solid var(--tm-night);
  background: radial-gradient(120% 50% at 50% 0%, #FFE27A 0%, #FFFFFF 62%);
  box-shadow: 0 0 0 4px var(--tm-tape), 0 24px 70px rgb(0 0 0 / .4);
}

.tm .tm-wheel-wrap.is-t1 { width: min(340px, 76vw, 46vh); width: min(340px, 76vw, 46dvh); }
.tm .tm-wheel-wrap.is-t2 { width: min(372px, 80vw, 50vh); width: min(372px, 80vw, 50dvh); }
.tm .tm-wheel-wrap.is-t3 { width: min(412px, 84vw, 54vh); width: min(412px, 84vw, 54dvh); }

.tm .tm-wheel-wrap { width: min(312px, 72vw, 44vh); width: min(312px, 72vw, 44dvh); }

.tm .tm-title.is-shout {
  color: var(--tm-hot-deep);
  font-size: 46px;
  letter-spacing: .01em;
  text-shadow: 3px 3px 0 var(--tm-tape);
}

.tm .tm-box--t3 .tm-title.is-shout { font-size: 54px; }

/* Jackpot segments: loud, and readable from across the room. */
.tm .tm-wheel-label.is-jackpot {
  font-weight: 900;
  font-size: 5.6cqw;
  text-shadow: 0 0 .5cqw #fff, 0 .3cqw 0 rgb(255 255 255 / .8);
}

/* Many segments: the labels run along the radius, flush to the rim. */
.tm .tm-wheel-wrap.is-radial .tm-wheel-label {
  width: 31cqw;
  height: var(--lh, 10cqw);
  margin: calc(var(--lh, 10cqw) / -2) 0 0 -15.5cqw;
  justify-content: flex-end;
  padding-right: 1.4cqw;
  text-align: right;
  font-size: 3.2cqw;
  line-height: 1;
  transform: rotate(var(--a)) translateY(-29cqw) rotate(-90deg);
}

.tm .tm-wheel-wrap.is-radial .tm-wheel-label.is-big { font-size: 3.9cqw; }
.tm .tm-wheel-wrap.is-radial .tm-wheel-label.is-jackpot { font-size: 4.8cqw; }

/* Labels on the lower or left half turn around, so they read upright. */
.tm .tm-wheel-label.is-flip { transform: rotate(var(--a)) translateY(-29cqw) rotate(180deg); }

.tm .tm-wheel-wrap.is-radial .tm-wheel-label.is-flip {
  justify-content: flex-start;
  padding: 0 0 0 1.4cqw;
  text-align: left;
  transform: rotate(var(--a)) translateY(-29cqw) rotate(90deg);
}

/* The 1-degree segment. Its name is wider than it is. */
.tm .tm-wheel-sliver {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34cqw;
  height: 2.8cqw;
  margin: -1.4cqw 0 0 -17cqw;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 1cqw;
  color: #fff;
  font: 800 2.2cqw/1 var(--tm-ui);
  letter-spacing: .02em;
  white-space: nowrap;
  text-shadow: 0 0 .5cqw #000, 0 0 .3cqw #000;
  transform: rotate(var(--a)) translateY(-28.6cqw) rotate(-90deg);
  pointer-events: none;
}

/* Shown while the pointer is moved off the jackpot. */
.tm .tm-wheel-stamp {
  position: absolute;
  left: 50%;
  top: 62%;
  z-index: 4;
  padding: 1.6cqw 3.2cqw 1.2cqw;
  border: .9cqw solid var(--tm-hot-deep);
  border-radius: 2cqw;
  background: rgb(255 255 255 / .94);
  color: var(--tm-hot-deep);
  font: 900 7cqw/1 var(--tm-big);
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 1cqw 3cqw rgb(0 0 0 / .3);
  transform: translate(-50%, -50%) rotate(-12deg);
  animation: tm-stamp .25s cubic-bezier(.2, .9, .3, 1.4) both;
  pointer-events: none;
}

@keyframes tm-stamp {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(1.7); }
}

.tm .tm-streak {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px 10px;
  max-width: 34ch;
  margin: 10px auto 0;
  padding: 6px 10px;
  border: 1.5px dashed var(--tm-coupon);
  border-radius: 10px;
  background: var(--tm-pale);
  color: var(--tm-ink);
  font: 600 12px/1.3 var(--tm-ui);
  text-wrap: balance;
}

.tm .tm-streak b { color: var(--tm-hot-text); }

.tm .tm-streak-pips { display: inline-flex; gap: 3px; }

.tm .tm-streak-pips i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--tm-hairline);
}

.tm .tm-streak-pips i.is-on { background: var(--tm-hot-deep); }

/* The queue wheel's result: applied, then taken back. */
.tm .tm-note {
  margin-top: 10px;
  color: var(--tm-ship);
  font: 800 14px/1.25 var(--tm-ui);
}

.tm .tm-note.is-bad {
  display: inline-block;
  padding: 5px 10px 3px;
  border: 3px solid var(--tm-hot-deep);
  border-radius: 8px;
  color: var(--tm-hot-deep);
  font: 900 22px/1 var(--tm-big);
  text-transform: uppercase;
  transform: rotate(-3deg);
  animation: tm-stamp-in .22s cubic-bezier(.2, .9, .3, 1.4) both;
}

@keyframes tm-stamp-in {
  from { opacity: 0; transform: rotate(-3deg) scale(1.6); }
}

.tm .tm-prize.is-struck {
  color: var(--tm-muted);
  text-decoration: line-through;
  text-decoration-color: var(--tm-hot-deep);
  text-decoration-thickness: 5px;
}

/* --------------------------------------------- the big win and the catch */

.tm .tm-box.tm-box--win {
  width: min(420px, calc(100vw - 24px));
  padding-top: 26px;
  border: 4px solid var(--tm-hot-deep);
  background: radial-gradient(120% 55% at 50% 0%, #FFE27A 0%, #FFF7D1 40%, #FFFFFF 72%);
  box-shadow: 0 0 0 4px var(--tm-tape), 0 24px 70px rgb(0 0 0 / .4);
}

.tm .tm-win-burst {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  background: var(--tm-hot-deep);
  color: #fff;
  font: 900 17px/.88 var(--tm-big);
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-14deg);
  clip-path: polygon(50% 0%, 60.6% 10.4%, 75% 6.7%, 79% 21%, 93.3% 25%, 89.6% 39.4%, 100% 50%, 89.6% 60.6%, 93.3% 75%, 79% 79%, 75% 93.3%, 60.6% 89.6%, 50% 100%, 39.4% 89.6%, 25% 93.3%, 21% 79%, 6.7% 75%, 10.4% 60.6%, 0% 50%, 10.4% 39.4%, 6.7% 25%, 21% 21%, 25% 6.7%, 39.4% 10.4%);
  animation: tm-spin-slow 9s linear infinite;
}

@keyframes tm-spin-slow {
  to { transform: rotate(346deg); }
}

.tm .tm-win-kicker {
  margin-top: 4px;
  color: var(--tm-ink);
  font: 900 40px/1 var(--tm-big);
  letter-spacing: .03em;
}

.tm .tm-win-prize {
  margin-top: 2px;
  color: var(--tm-hot-deep);
  font: 900 clamp(76px, 24vw, 124px)/.86 var(--tm-big);
  letter-spacing: -.01em;
  text-shadow: 4px 4px 0 var(--tm-tape), 7px 7px 0 rgb(0 0 0 / .12);
  text-wrap: balance;
}

.tm .tm-win-progress {
  margin: 16px 0 14px;
  padding: 10px 12px 12px;
  border: 2px dashed var(--tm-coupon);
  border-radius: 14px;
  background: #fff;
  text-align: left;
}

.tm .tm-win-progress-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: var(--tm-ink);
  font: 800 15px/1.2 var(--tm-ui);
}

.tm .tm-win-progress-row b {
  color: var(--tm-hot-text);
  font: 900 22px/1 var(--tm-big);
}

.tm .tm-win-bar {
  display: block;
  height: 14px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--tm-hairline);
}

.tm .tm-win-bar i {
  display: block;
  width: 99%;
  height: 100%;
  border-radius: inherit;
  background: repeating-linear-gradient(-45deg, var(--tm-coupon) 0 10px, #FF8A3D 10px 20px);
  background-size: 28px 28px;
  animation: tm-stripes .9s linear infinite;
}

@keyframes tm-stripes {
  to { background-position: 28px 0; }
}

.tm .tm-btn.tm-btn-unlock {
  min-height: 66px;
  border-radius: 14px;
  background: var(--tm-coupon);
  color: #fff;
  font: 900 30px/1 var(--tm-big);
  letter-spacing: .02em;
  text-transform: uppercase;
  box-shadow: inset 0 -4px 0 rgb(0 0 0 / .2), 0 5px 0 var(--tm-coupon-deep);
  animation: tm-throb 1.2s ease-in-out infinite;
}

.tm .tm-btn.tm-btn-unlock:hover { background: #FF6A14; }
.tm .tm-btn.tm-btn-unlock:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 rgb(0 0 0 / .2), 0 2px 0 var(--tm-coupon-deep); }

.tm .tm-btn.tm-btn-unlock.is-done {
  min-height: 56px;
  background: var(--tm-graphite);
  font: 700 14.5px/1.3 var(--tm-ui);
  letter-spacing: normal;
  text-transform: none;
  box-shadow: none;
  animation: none;
  opacity: 1;
  cursor: default;
}

@keyframes tm-throb {
  50% { transform: scale(1.03); }
}

.tm .tm-win-expiry {
  margin-top: 14px;
  color: var(--tm-graphite);
  font: 700 13.5px/1.2 var(--tm-ui);
}

.tm .tm-win-clock {
  display: inline-block;
  min-width: 4.4ch;
  padding: 4px 7px 2px;
  border-radius: 7px;
  background: var(--tm-night);
  color: var(--tm-tape);
  font: 900 22px/1 var(--tm-big);
  letter-spacing: .04em;
  text-align: center;
  vertical-align: -3px;
}

/* --------------------------------------------------------- prize pill */

.tm.tm-prizepill {
  position: fixed;
  left: 16px;
  bottom: var(--tm-pill-b, 16px);
  z-index: 9060;
  display: flex;
  align-items: center;
  max-width: calc(100vw - 32px);
  border: 2px solid var(--tm-hot-deep);
  border-radius: 999px;
  background: var(--tm-tape);
  color: #000;
  box-shadow: 0 8px 22px rgb(0 0 0 / .28);
  animation: tm-pop .3s cubic-bezier(.2, .9, .3, 1.4) both, tm-nag 3s 1s ease-in-out infinite;
}

.tm.tm-prizepill .tm-prizepill-open {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 4px 6px 6px;
  font: 800 13.5px/1.2 var(--tm-ui);
  text-align: left;
}

.tm.tm-prizepill .tm-prizepill-ic {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tm-coupon);
  color: #fff;
  font: 900 16px/1 var(--tm-ui);
}

.tm.tm-prizepill .tm-prizepill-x {
  flex: none;
  width: 26px;
  height: 26px;
  margin-right: 5px;
  border-radius: 50%;
  color: rgb(0 0 0 / .62);
  font: 400 17px/26px var(--tm-ui);
}

.tm.tm-prizepill .tm-prizepill-x:hover { background: rgb(0 0 0 / .1); color: #000; }
.tm.tm-prizepill.is-rolled { border-color: var(--tm-graphite); background: #fff; }
.tm.tm-prizepill.is-rolled .tm-prizepill-ic { background: var(--tm-graphite); }

@keyframes tm-nag {
  0%, 84%, 100% { transform: none; }
  88% { transform: rotate(-3deg) scale(1.05); }
  92% { transform: rotate(3deg) scale(1.05); }
  96% { transform: rotate(-1deg); }
}

/* ------------------------------------------------- the special gift box */

.tm .tm-mbox-stage {
  display: grid;
  place-items: center;
  height: 168px;
  margin: 10px 0 2px;
}

.tm .tm-mbox {
  position: relative;
  width: 120px;
  height: 112px;
  transform: scale(var(--s, 1));
  transition: transform .35s cubic-bezier(.2, .9, .3, 1.2);
}

.tm .tm-mbox-body {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 74px;
  border-radius: 6px;
  background: linear-gradient(90deg, transparent 43%, var(--tm-tape) 43% 57%, transparent 57%), var(--tm-hot-deep);
  box-shadow: inset 0 -6px 0 rgb(0 0 0 / .18);
}

.tm .tm-mbox-lid {
  position: absolute;
  left: 0;
  right: 0;
  top: 22px;
  height: 26px;
  border-radius: 6px;
  background: linear-gradient(90deg, transparent 42%, var(--tm-tape) 42% 58%, transparent 58%), #FF3A55;
  box-shadow: 0 3px 0 rgb(0 0 0 / .18);
  transform-origin: 10% 100%;
  transition: transform .35s ease;
}

.tm .tm-mbox-bow {
  position: absolute;
  left: 50%;
  top: 2px;
  width: 52px;
  height: 26px;
  margin-left: -26px;
  border: 7px solid var(--tm-tape);
  border-radius: 50% 50% 8px 8px;
  transform-origin: 10% 100%;
  transition: transform .35s ease;
}

.tm .tm-mbox.is-shaking { animation: tm-box-shake .2s ease-in-out infinite; }
.tm .tm-mbox.is-open .tm-mbox-lid,
.tm .tm-mbox.is-open .tm-mbox-bow { transform: translate(-10px, -26px) rotate(-28deg); }

@keyframes tm-box-shake {
  25% { transform: scale(var(--s, 1)) rotate(-6deg); }
  75% { transform: scale(var(--s, 1)) rotate(6deg); }
}

.tm .tm-mbox-note {
  color: var(--tm-graphite);
  font: 700 14px/1.3 var(--tm-ui);
}

.tm .tm-mbox-prize {
  margin: 8px 0 14px;
  padding: 14px 10px;
  border: 2px dashed var(--tm-coupon);
  border-radius: 14px;
  background: var(--tm-pale);
}

/* ------------------------------------------------------- cookie buttons */

.tm.tm-cookie .tm-cookie-row { align-items: center; }

.tm.tm-cookie .tm-cbtn.tm-cbtn-meek {
  flex: none;
  min-height: 0;
  padding: 4px 6px;
  background: none;
  color: #9AA0A6;
  font: 500 11.5px/1.2 var(--tm-ui);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tm.tm-cookie .tm-cbtn.tm-cbtn-harder {
  flex: 1 1 auto;
  min-height: 62px;
  background: var(--tm-tape);
  color: #000;
  font: 900 32px/1 var(--tm-big);
  letter-spacing: .03em;
  box-shadow: inset 0 -4px 0 rgb(0 0 0 / .18);
}

.tm.tm-cookie .tm-cbtn.tm-cbtn-harder:hover { background: #FFD21F; }

/* --------------------------------------------------- click reactions */

.tm.tm-pop {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9950;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--tm-hot-deep);
  color: #fff;
  font: 800 12.5px/1.25 var(--tm-ui);
  white-space: nowrap;
  box-shadow: 0 4px 12px rgb(0 0 0 / .25);
  pointer-events: none;
  animation: tm-float-up 1.3s ease-out both;
}

@keyframes tm-float-up {
  0% { opacity: 0; transform: translateY(6px) scale(.9); }
  14% { opacity: 1; transform: none; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-28px); }
}

/* ---------------------------------------------------- achievements */

.tm.tm-ach {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--tm-bb) + 12px);
  z-index: 9700;
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: calc(100vw - 24px);
  margin: 0 auto;
  padding: 7px 8px 7px 7px;
  border-radius: 999px;
  background: #1B1B1B;
  color: #fff;
  box-shadow: 0 12px 32px rgb(0 0 0 / .35), inset 0 0 0 2px #333;
  animation: tm-ach-in .35s cubic-bezier(.2, .9, .3, 1.2) both;
  transition: opacity .2s ease, transform .2s ease;
}

.tm.tm-ach.is-pinned {
  right: auto;
  bottom: auto;
  margin: 0;
}

.tm.tm-ach.tm-out { opacity: 0; transform: translateY(8px); }

@keyframes tm-ach-in {
  from { opacity: 0; transform: translateY(14px) scale(.92); }
}

.tm.tm-ach .tm-ach-ic {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1FB44B;
  font-size: 21px;
  line-height: 1;
}

.tm.tm-ach .tm-ach-txt { display: flex; flex-direction: column; min-width: 0; }
.tm.tm-ach .tm-ach-tag { color: #9BE22D; font: 700 11px/1.2 var(--tm-ui); }
.tm.tm-ach .tm-ach-title { font: 800 14.5px/1.25 var(--tm-ui); }

.tm.tm-ach .tm-ach-pts {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  background: #333;
  color: var(--tm-tape);
  font: 700 11px/1.3 var(--tm-ui);
  white-space: nowrap;
}

.tm.tm-ach .tm-ach-x {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #9AA0A6;
  font: 400 17px/26px var(--tm-ui);
}

.tm.tm-ach .tm-ach-x:hover { background: #333; color: #fff; }

/* ------------------------------------------------- seen by market maker */

.tm.tm-seen {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9650;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #fff;
  color: var(--tm-graphite);
  box-shadow: var(--tm-shadow);
  font: 700 12px/1.2 var(--tm-ui);
  white-space: nowrap;
  animation: tm-pop .2s ease-out both;
  transition: opacity .2s ease;
}

.tm.tm-seen .tm-seen-ticks { color: #2D8CFF; font-weight: 900; letter-spacing: -.14em; }
.tm.tm-seen.tm-out { opacity: 0; }

/* ------------------------------------------------- notification badges */

.tm .tm-badge-in {
  display: inline-block;
  min-width: 18px;
  padding: 2px 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--tm-hot-deep);
  color: #fff;
  font: 800 10px/1.1 var(--tm-ui);
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgb(0 0 0 / .25);
}

button.tm.tm-msgs {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 30px;
  margin-left: 6px;
  border-radius: 999px;
  background: #fff;
  color: var(--tm-ink);
  box-shadow: inset 0 0 0 1.5px var(--tm-hairline);
  vertical-align: middle;
}

button.tm.tm-msgs:hover { box-shadow: inset 0 0 0 1.5px var(--tm-graphite); }
.tm.tm-msgs svg { display: block; }

.tm.tm-msgs .tm-msgs-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  padding: 1px 4px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--tm-hot-deep);
  color: #fff;
  font: 800 10px/1.2 var(--tm-ui);
  text-align: center;
}

/* ------------------------------------------------------ BD DM storm */

.tm.tm-dms {
  position: fixed;
  top: var(--tm-dm-top);
  right: var(--tm-rg);
  z-index: 9350;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  width: min(330px, calc(100vw - 24px));
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.tm.tm-dms > * { pointer-events: auto; }

/* The DMs step aside with a fade only: a slide to the right would pass
   over the order column, and BD.guard measures them in place. */
.tm.tm-dms.tm-shy {
  opacity: 0;
  visibility: hidden;
}

.tm.tm-rate.tm-shy {
  opacity: 0;
  visibility: hidden;
  transform: translateX(24px);
}

.tm .tm-dmpill {
  display: flex;
  align-items: center;
  max-width: 100%;
  border-radius: 999px;
  background: #7B2CFF;
  color: #fff;
  box-shadow: 0 8px 22px rgb(0 0 0 / .25);
  animation: tm-pop .3s cubic-bezier(.2, .9, .3, 1.4) both;
}

.tm .tm-dmpill-open {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 4px 8px 12px;
  font: 700 13px/1.25 var(--tm-ui);
  text-align: left;
}

.tm .tm-dmpill-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tm-tape);
  animation: tm-blink 1s steps(1, end) infinite;
}

@keyframes tm-blink {
  50% { opacity: .2; }
}

.tm .tm-dmpill-x {
  flex: none;
  width: 26px;
  height: 26px;
  margin-right: 5px;
  border-radius: 50%;
  color: rgb(255 255 255 / .8);
  font: 400 17px/26px var(--tm-ui);
}

.tm .tm-dmpill-x:hover { background: rgb(255 255 255 / .16); color: #fff; }

.tm .tm-dm-deck {
  display: grid;
  width: 100%;
}

.tm .tm-dm {
  grid-area: 1 / 1;
  align-self: start;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--tm-hairline);
  border-radius: 14px;
  background: #fff;
  color: var(--tm-ink);
  box-shadow: 0 14px 36px rgb(0 0 0 / .22);
  transform: translateY(calc(var(--k, 0) * 10px * var(--tm-peek))) scale(calc(1 - var(--k, 0) * .04));
  transform-origin: 50% 100%;
  animation: tm-dm-in .28s cubic-bezier(.2, .9, .3, 1.2) both;
  transition: transform .2s ease;
}

/* A new DM drops in from above: from the right it would slide in over the
   order column. */
@keyframes tm-dm-in {
  from { opacity: 0; transform: translateY(-14px); }
}

.tm .tm-dm-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px 8px 12px;
  border-bottom: 1px solid var(--tm-hairline);
}

.tm .tm-dm-av {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  font: 800 13px/1 var(--tm-ui);
}

.tm .tm-dm-who { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.tm .tm-dm-who b { overflow: hidden; font: 800 13.5px/1.25 var(--tm-ui); text-overflow: ellipsis; white-space: nowrap; }

.tm .tm-dm-sub {
  color: var(--tm-ship);
  font: 600 11.5px/1.25 var(--tm-ui);
}

.tm .tm-dm-sub::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: #1FB44B;
  vertical-align: 1px;
}

.tm .tm-dm-x {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--tm-muted);
  font: 400 19px/28px var(--tm-ui);
}

.tm .tm-dm-x:hover { background: var(--tm-lab); color: var(--tm-ink); }

.tm .tm-dm-body { padding: 10px 12px 4px; }

.tm .tm-dm-msg {
  display: inline-block;
  padding: 8px 11px;
  border-radius: 14px 14px 14px 4px;
  background: var(--tm-lab);
  font: 500 13px/1.35 var(--tm-ui);
}

.tm .tm-dm-deal {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1.5px dashed var(--tm-coupon);
  border-radius: 10px;
  background: var(--tm-pale);
  font: 700 13px/1.35 var(--tm-ui);
}

.tm .tm-dm-tag {
  display: block;
  margin-bottom: 2px;
  color: var(--tm-coupon-text);
  font: 800 10.5px/1.2 var(--tm-ui);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.tm .tm-dm-row {
  display: flex;
  gap: 8px;
  padding: 8px 12px 12px;
}

.tm .tm-dm-accept,
.tm .tm-dm-decline {
  flex: 1 1 0;
  min-height: 36px;
  border-radius: 10px;
  font: 800 13px/1.2 var(--tm-ui);
}

.tm .tm-dm-accept {
  background: var(--tm-tape);
  color: #000;
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / .14);
}

.tm .tm-dm-accept:hover { background: #FFD21F; }
.tm .tm-dm-decline { background: var(--tm-lab); color: var(--tm-ink); }
.tm .tm-dm-decline:hover { background: var(--tm-hairline); }

/* ---------------------------------------------------- rate us, then NPS */

.tm.tm-rate {
  position: fixed;
  top: var(--tm-dm-top);
  left: 8px;
  z-index: 9340;
  width: min(340px, calc(100vw - 16px));
  padding: 14px 16px 16px;
  border: 2px solid var(--tm-tape);
  border-radius: 16px;
  background: #fff;
  color: var(--tm-ink);
  box-shadow: 0 16px 40px rgb(0 0 0 / .25);
  text-align: center;
  animation: tm-drop .25s ease-out both;
  transition: opacity .2s ease, transform .2s ease;
}

.tm .tm-rate-x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--tm-muted);
  font: 400 19px/28px var(--tm-ui);
}

.tm .tm-rate-x:hover { background: var(--tm-lab); color: var(--tm-ink); }

.tm .tm-rate-tag {
  color: var(--tm-coupon-text);
  font: 800 11px/1.2 var(--tm-ui);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.tm .tm-rate-title {
  margin: 4px 22px 0;
  font: 900 26px/1 var(--tm-big);
  text-wrap: balance;
}

.tm .tm-stars {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 10px;
}

.tm .tm-star {
  width: 44px;
  height: 44px;
  color: var(--tm-hairline);
  font: 400 36px/44px var(--tm-ui);
  cursor: not-allowed;
}

.tm .tm-star.is-five {
  color: var(--tm-tape);
  text-shadow: 0 0 0 #C99A00, 0 2px 0 #C99A00;
  cursor: pointer;
  animation: tm-throb 1s ease-in-out infinite;
}

.tm .tm-star.is-no { animation: tm-quake-light .35s ease-in-out 1; }

.tm .tm-rate-note {
  margin-top: 6px;
  color: var(--tm-muted);
  font: 600 12px/1.3 var(--tm-ui);
}

.tm .tm-nps {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 3px;
  margin-top: 12px;
}

.tm .tm-nps-n {
  min-height: 34px;
  border-radius: 7px;
  background: var(--tm-lab);
  font: 800 13px/34px var(--tm-ui);
}

.tm .tm-nps-n:hover { background: var(--tm-tape); }

/* ------------------------------------------------------------ paywall */

.tm.tm-paywall {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9550;
  width: min(280px, calc(100vw - 16px));
  padding: 14px 14px 12px;
  border: 2px dashed var(--tm-coupon);
  border-radius: 14px;
  background: #fff;
  color: var(--tm-ink);
  box-shadow: var(--tm-shadow);
  animation: tm-pop .2s ease-out both;
}

.tm.tm-paywall .tm-pw-x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--tm-muted);
  font: 400 18px/26px var(--tm-ui);
}

/* Closing it is a Pro feature. The real close is very small. */
.tm.tm-paywall.is-close .tm-pw-x {
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  font-size: 12px;
  line-height: 16px;
}

.tm.tm-paywall .tm-pw-x:hover { background: var(--tm-lab); color: var(--tm-ink); }

.tm.tm-paywall .tm-pw-text {
  margin: 8px 22px 0 0;
  font: 800 15px/1.25 var(--tm-ui);
}

.tm.tm-paywall .tm-pw-sub {
  margin-top: 4px;
  color: var(--tm-graphite);
  font: 500 12.5px/1.35 var(--tm-ui);
}

.tm.tm-paywall .tm-pw-price {
  margin-top: 8px;
  color: var(--tm-graphite);
  font: 600 12.5px/1.2 var(--tm-ui);
}

.tm.tm-paywall .tm-pw-price b {
  color: var(--tm-coupon-text);
  font: 900 20px/1 var(--tm-big);
}

.tm.tm-paywall .tm-pw-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.tm.tm-paywall .tm-pw-up,
.tm.tm-paywall .tm-pw-later {
  flex: 1 1 0;
  min-height: 36px;
  border-radius: 10px;
  font: 800 13.5px/1.2 var(--tm-ui);
}

.tm.tm-paywall .tm-pw-up { background: #000; color: var(--tm-tape); }
.tm.tm-paywall .tm-pw-later { background: var(--tm-lab); color: var(--tm-ink); }

/* -------------------------------------------------------- product tour */

.tm.tm-coach-ring {
  position: fixed;
  z-index: 9580;
  border: 3px solid var(--tm-hot-deep);
  border-radius: 14px;
  box-shadow: 0 0 0 4px rgb(224 16 48 / .25);
  pointer-events: none;
  animation: tm-ring 1.2s ease-in-out infinite;
}

@keyframes tm-ring {
  50% { box-shadow: 0 0 0 10px rgb(224 16 48 / .12); }
}

.tm.tm-coach {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9590;
  width: min(300px, calc(100vw - 16px));
  padding: 14px 14px 12px;
  border-radius: 14px;
  background: var(--tm-night);
  color: #fff;
  box-shadow: 0 14px 40px rgb(0 0 0 / .35);
  animation: tm-pop .2s ease-out both;
}

.tm.tm-coach button:focus-visible { outline-color: var(--tm-tape); }

.tm .tm-coach-tag { color: var(--tm-tape); font: 700 11px/1.2 var(--tm-ui); }

.tm .tm-coach-text {
  margin: 6px 22px 0 0;
  font: 700 15px/1.3 var(--tm-ui);
}

.tm .tm-coach-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.tm .tm-coach-next {
  min-height: 36px;
  padding: 0 18px;
  border-radius: 10px;
  background: var(--tm-tape);
  color: #000;
  font: 800 14px/1 var(--tm-ui);
}

.tm .tm-coach-skip {
  padding: 6px 2px;
  color: #C9CED4;
  font: 500 12.5px/1.2 var(--tm-ui);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tm .tm-coach-x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #9AA0A6;
  font: 400 15px/22px var(--tm-ui);
}

.tm .tm-coach-x:hover { background: rgb(255 255 255 / .12); color: #fff; }

.tm .tm-coach-arrow {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--tm-night);
  transform: rotate(45deg);
}

.tm.tm-coach[data-side="bottom"] .tm-coach-arrow { top: -7px; }
.tm.tm-coach[data-side="top"] .tm-coach-arrow { bottom: -7px; }
.tm.tm-coach[data-side="left"] .tm-coach-arrow { right: -7px; }

/* ------------------------------------------------------------- captcha */

dialog.tm.tm-captcha .tm-box {
  width: min(360px, calc(100vw - 24px));
  padding: 10px 10px 12px;
  border: 1px solid #DADCE0;
  border-radius: 6px;
  text-align: left;
}

dialog.tm.tm-captcha .tm-x { top: 14px; right: 14px; background: rgb(255 255 255 / .2); color: #fff; }

.tm .tm-captcha-head {
  margin-bottom: 8px;
  padding: 14px 52px 14px 16px;
  border-radius: 3px;
  background: #1A73E8;
  color: #fff;
}

.tm .tm-captcha-kicker { display: block; font: 500 13px/1.3 var(--tm-ui); }
.tm .tm-captcha-ask { display: block; font: 800 21px/1.2 var(--tm-ui); }

.tm .tm-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.tm .tm-tile {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  aspect-ratio: 1;
  padding: 6px;
  border-radius: 2px;
  background: #E8EAED;
}

.tm .tm-tile svg { width: 54%; height: auto; }
.tm .tm-tile-name { color: var(--tm-graphite); font: 700 10.5px/1.1 var(--tm-ui); }

.tm .tm-tile[aria-pressed="true"] {
  background: #D2E3FC;
  box-shadow: inset 0 0 0 4px #1A73E8;
}

.tm .tm-tile[aria-pressed="true"]::after {
  content: '✓';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1A73E8;
  color: #fff;
  font: 800 12px/20px var(--tm-ui);
  text-align: center;
}

.tm .tm-captcha-msg {
  min-height: 18px;
  margin-top: 8px;
  color: var(--tm-hot-text);
  font: 600 13px/1.3 var(--tm-ui);
}

.tm .tm-captcha-msg.is-ok { color: var(--tm-ship); }

.tm .tm-captcha-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid #DADCE0;
}

.tm .tm-captcha-foot .tm-btn {
  width: auto;
  min-height: 40px;
  padding: 8px 22px;
  border-radius: 4px;
  background: #1A73E8;
  color: #fff;
  box-shadow: none;
}

.tm .tm-captcha-foot .tm-btn.tm-btn-link {
  margin: 0;
  padding: 6px 0;
  background: none;
  color: var(--tm-muted);
}

.tm .tm-captcha-foot .tm-btn.is-done { background: var(--tm-ship); }
dialog.tm.tm-captcha .tm-fine { text-align: center; }

/* ----------------------------------------------------------- app promo */

.tm .tm-phone {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px;
  height: 164px;
  margin: 14px auto 8px;
  border: 5px solid var(--tm-night);
  border-radius: 22px;
  background: linear-gradient(180deg, #FFF0B8, #FFFFFF);
  box-shadow: 0 12px 26px rgb(0 0 0 / .22);
}

.tm .tm-phone-notch {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 34px;
  height: 8px;
  margin-left: -17px;
  border-radius: 999px;
  background: var(--tm-night);
}

.tm .tm-phone-mark svg { display: block; width: 44px; height: 44px; }

.tm .tm-phone-speed {
  position: absolute;
  bottom: 14px;
  left: 50%;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--tm-hot-deep);
  color: #fff;
  font: 800 11px/1.3 var(--tm-ui);
  white-space: nowrap;
  transform: translateX(-50%);
}

dialog.tm.tm-app .tm-btn-big { margin-top: 14px; }
dialog.tm.tm-idle .tm-btn-big,
dialog.tm.tm-claim .tm-btn-big { margin-top: 2px; }

/* ------------------------------------------------- phones: open in app */

.tm.tm-appbar {
  position: sticky;
  top: 0;
  z-index: 9150;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 6px 7px 12px;
  border-bottom: 1px solid var(--tm-hairline);
  background: #fff;
  color: var(--tm-ink);
  box-shadow: 0 2px 8px rgb(0 0 0 / .08);
}

.tm .tm-appbar-ic svg { display: block; width: 30px; height: 30px; }

.tm .tm-appbar-txt {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  font: 500 11.5px/1.25 var(--tm-ui);
}

.tm .tm-appbar-txt b { font: 800 13px/1.25 var(--tm-ui); }
.tm .tm-appbar-txt span { color: var(--tm-muted); }

.tm .tm-appbar-open {
  flex: none;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: #1A73E8;
  color: #fff;
  font: 800 12.5px/32px var(--tm-ui);
}

.tm .tm-appbar-x {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--tm-muted);
  font: 400 19px/28px var(--tm-ui);
}

/* ----------------------------------------- the coupon that follows you */

.tm.tm-chaser {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9450;
  display: flex;
  align-items: center;
  border: 2px dashed #fff;
  border-radius: 10px;
  background: var(--tm-hot-deep);
  color: #fff;
  box-shadow: 0 8px 20px rgb(0 0 0 / .3);
  transition: opacity .2s ease;
  will-change: transform;
}

/* Over the order column, a dialog or the tour it fades and lets clicks through. */
.tm.tm-chaser.is-away { opacity: .3; pointer-events: none; }

.tm.tm-chaser .tm-chaser-claim {
  padding: 8px 6px 7px 12px;
  font: 900 17px/1 var(--tm-big);
  letter-spacing: .02em;
  white-space: nowrap;
}

.tm.tm-chaser .tm-chaser-x {
  width: 24px;
  height: 24px;
  margin-right: 5px;
  border-radius: 50%;
  background: rgb(0 0 0 / .2);
  font: 400 16px/24px var(--tm-ui);
}

.tm.tm-chaser button:focus-visible { outline-color: #fff; }

/* ------------------------------------------------------ new user tasks */

/* The pill in the terminal's top bar. The count sits on its corner, so a
   number that changes never moves anything. */
button.tm.tm-tasks-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  background: var(--tm-pale);
  color: var(--tm-ink);
  box-shadow: inset 0 0 0 1.5px var(--tm-coupon);
  font: 700 12.5px/1 var(--tm-ui);
  white-space: nowrap;
  vertical-align: middle;
}

button.tm.tm-tasks-pill:hover,
button.tm.tm-tasks-pill[aria-expanded="true"] { background: #FFEBA3; }
button.tm.tm-tasks-pill:active { transform: translateY(1px); }

.tm.tm-tasks-pill svg {
  display: block;
  flex: none;
  color: var(--tm-coupon-text);
}

.tm.tm-tasks-pill .tm-tasks-badge {
  position: absolute;
  top: -7px;
  right: -6px;
  min-width: 18px;
  padding: 1px 4px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--tm-hot-deep);
  color: #fff;
  font: 800 10px/1.2 var(--tm-ui);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

.tm.tm-tasks-pill .tm-tasks-badge.is-reward {
  background: var(--tm-tape);
  color: #000;
}

/* Red dots on controls nobody has opened yet. Each is a child of its
   control, which the page positions, so nothing moves; temu.js sets top and
   right so the dot sits on the corner, or on the edge of a round button. */
.tm.tm-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  z-index: 3;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tm-hot-deep);
  box-shadow: 0 0 0 2px #fff;
  pointer-events: none;
}

/* More: how many of its items nobody has opened yet. */
.tm.tm-dot.tm-dot--count {
  width: auto;
  min-width: 18px;
  height: auto;
  padding: 1px 4px;
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow: none;
  color: #fff;
  font: 800 10px/1.2 var(--tm-ui);
  text-align: center;
  white-space: nowrap;
}

/* One of those items, inside the open More menu. */
.tm.tm-dot.tm-dot--item {
  top: 50%;
  right: 8px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  box-shadow: none;
}

/* The panel: a popover under the pill, kept off the order column. */
.tm.tm-tasks {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9460;
  display: flex;
  flex-direction: column;
  width: min(340px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  border-radius: 16px;
  background: #fff;
  color: var(--tm-ink);
  box-shadow: 0 18px 44px rgb(0 0 0 / .24), 0 2px 6px rgb(0 0 0 / .1);
  animation: tm-pop .2s ease-out both;
}

.tm .tm-tasks-arrow {
  position: absolute;
  top: -6px;
  left: 20px;
  width: 14px;
  height: 14px;
  background: var(--tm-coupon);
  transform: rotate(45deg);
}

.tm .tm-tasks-head {
  position: relative;
  flex: none;
  padding: 14px 46px 13px 16px;
  border-radius: 16px 16px 0 0;
  background: var(--tm-coupon);
  color: #fff;
}

.tm .tm-tasks-title {
  font: 900 26px/1 var(--tm-big);
  letter-spacing: .01em;
}

.tm .tm-tasks-sub {
  margin-top: 4px;
  font: 600 13px/1.3 var(--tm-ui);
}

.tm .tm-tasks-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.tm .tm-tasks-bar {
  position: relative;
  flex: 1 1 auto;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(255 255 255 / .35);
}

.tm .tm-tasks-bar i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  border-radius: inherit;
  background: var(--tm-tape);
  transition: width .3s ease;
}

.tm .tm-tasks-count {
  flex: none;
  font: 800 13px/1 var(--tm-ui);
  white-space: nowrap;
}

.tm .tm-tasks-x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  font: 400 21px/30px var(--tm-ui);
}

.tm .tm-tasks-x:hover { background: rgb(0 0 0 / .16); }
.tm.tm-tasks button:focus-visible { outline-color: var(--tm-ink); }
.tm .tm-tasks-x:focus-visible { outline-color: #fff; }

.tm .tm-tasks-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 0 6px;
}

.tm .tm-task {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 6px 12px 6px 14px;
  border-bottom: 1px solid var(--tm-hairline);
}

.tm .tm-task:last-child { border-bottom: 0; }

.tm .tm-task-check {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #C9CED4;
}

.tm .tm-task.is-done .tm-task-check {
  background: var(--tm-ship);
  box-shadow: none;
}

.tm .tm-task.is-done .tm-task-check::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 7px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.tm .tm-task-text { font: 700 13.5px/1.3 var(--tm-ui); }
.tm .tm-task.is-done .tm-task-text { color: var(--tm-muted); }

.tm .tm-task-pts {
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--tm-pale);
  color: var(--tm-coupon-text);
  font: 800 11px/1.25 var(--tm-ui);
  white-space: nowrap;
}

.tm .tm-task.is-done .tm-task-pts {
  grid-column: 3 / 5;
  justify-self: end;
  background: var(--tm-lab);
  color: var(--tm-muted);
}

.tm .tm-task-go {
  min-width: 48px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--tm-coupon);
  color: #fff;
  font: 800 13px/1 var(--tm-ui);
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / .18);
}

.tm .tm-task-go:hover { background: #FF6A14; }

.tm .tm-tasks-reward {
  margin: 10px 12px 6px;
  padding: 12px 12px 14px;
  border: 1.5px dashed var(--tm-coupon);
  border-radius: 12px;
  background: var(--tm-pale);
  text-align: center;
}

.tm .tm-tasks-reward-text { font: 800 15px/1.3 var(--tm-ui); }

.tm .tm-tasks-reward .tm-btn.tm-btn-unlock {
  min-height: 54px;
  margin-top: 10px;
  font-size: 24px;
}

.tm .tm-tasks-reward .tm-btn.tm-btn-unlock.is-done {
  font-size: 14px;
}

/* -------------------------------------------------- ads in every line */

/* The button temu.js puts in every live line: the loudest thing in it. */
.tm.tm-adline {
  display: block;
  width: 100%;
  margin: 12px 0 2px;
}

.tm.tm-adline.is-queue { margin: 0 0 14px; }

.tm .tm-ad-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 8px 18px 8px 10px;
  border-radius: 999px;
  background: var(--tm-coupon);
  color: #fff;
  font: 800 15px/1.15 var(--tm-ui);
  text-align: center;
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / .18), 0 0 0 3px rgb(255 90 0 / .28);
  animation: tm-ad-glow 1.6s ease-in-out infinite;
}

.tm .tm-ad-btn:hover { background: #FF6A14; }
.tm .tm-ad-btn:active { transform: translateY(1px); }

@keyframes tm-ad-glow {
  50% { box-shadow: inset 0 -3px 0 rgb(0 0 0 / .18), 0 0 0 7px rgb(255 90 0 / .16); }
}

.tm .tm-ad-play {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  color: var(--tm-coupon);
}

.tm .tm-ad-play svg {
  display: block;
  margin-left: 2px;
}

.tm .tm-ad-msg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 14px;
  border-radius: 12px;
  background: #E7F7EE;
  color: var(--tm-ship);
  font: 800 14px/1.3 var(--tm-ui);
  text-align: center;
}

/* The player: a cheap, loud ad card in the line itself. */
.tm.tm-ad {
  overflow: hidden;
  border: 2px solid #000;
  border-radius: 12px;
  background: #fff;
  color: #000;
  box-shadow: 0 5px 0 rgb(0 0 0 / .14);
}

.tm .tm-ad-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: #000;
  color: #fff;
  font: 800 11.5px/1.2 var(--tm-ui);
}

.tm .tm-ad-tag { color: var(--tm-tape); }
.tm .tm-ad-spon { color: #9AA0A6; font-weight: 600; }

.tm .tm-ad-time {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--tm-hot-deep);
  color: #fff;
}

.tm .tm-ad-body {
  padding: 12px 12px 10px;
  background: repeating-linear-gradient(-45deg, #F7C600 0 16px, #FFD84D 16px 32px);
  text-align: center;
}

.tm .tm-ad-name {
  color: var(--tm-hot-text);
  font: 900 12.5px/1.2 var(--tm-ui);
  letter-spacing: .04em;
}

.tm .tm-ad-line {
  margin-top: 4px;
  font: 900 27px/1 var(--tm-big);
  text-wrap: balance;
}

.tm .tm-ad-fine {
  margin-top: 6px;
  color: var(--tm-graphite);
  font: 500 10.5px/1.3 var(--tm-ui);
}

.tm .tm-ad-bar {
  height: 6px;
  background: #FFE68A;
}

.tm .tm-ad-bar i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--tm-hot-deep);
  transition: width 1s linear;
}

.tm .tm-ad-foot {
  display: flex;
  justify-content: flex-end;
  padding: 6px 8px;
  background: #fff;
}

.tm .tm-ad-skip {
  padding: 6px 12px;
  border-radius: 8px;
  background: #000;
  color: #fff;
  font: 700 12.5px/1.2 var(--tm-ui);
}

.tm .tm-ad-skip:hover { background: var(--tm-graphite); }

/* Phones: the pill shares its row with the stats, so it keeps its icon
   and count and drops the word, like the gift button. The panel takes the
   width of the screen. */
@media (max-width: 560px) {
  button.tm.tm-tasks-pill {
    width: 34px;
    padding: 0;
    justify-content: center;
  }

  .tm.tm-tasks-pill .tm-tasks-pill-txt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tm.tm-tasks { width: calc(100vw - 16px); }
  .tm .tm-task { padding-left: 12px; padding-right: 10px; }
}

/* ------------------------------------------------- small screens, new parts */

@media (max-width: 560px) {
  .tm .tm-title.is-shout { font-size: 38px; }
  .tm .tm-box--t3 .tm-title.is-shout { font-size: 42px; }
  .tm .tm-win-kicker { font-size: 34px; }
  .tm .tm-btn.tm-btn-unlock { min-height: 60px; font-size: 26px; }
  .tm .tm-win-burst { width: 68px; height: 68px; font-size: 14px; }
  .tm.tm-cookie .tm-cbtn.tm-cbtn-harder { min-height: 54px; font-size: 26px; }

  .tm.tm-prizepill { left: 12px; max-width: calc(100vw - 24px); }
  .tm.tm-prizepill .tm-prizepill-open { font-size: 12.5px; }

  .tm.tm-rate {
    left: 8px;
    right: 8px;
    width: auto;
  }

  .tm.tm-dms { right: 12px; }

  .tm.tm-ach .tm-ach-pts { display: none; }
}

@media (max-height: 720px) {
  .tm .tm-wheel-wrap { margin: 12px auto 10px; }
  .tm .tm-wheel-box .tm-title { font-size: 30px; }
  .tm .tm-wheel-box .tm-title.is-shout { font-size: 38px; }
  .tm .tm-streak { margin-top: 6px; }
}

/* -------------------------------------------------------- small screens */

@media (max-width: 560px) {
  button.tm.tm-gift { padding: 0 9px; }

  .tm.tm-gift .tm-gift-txt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tm.tm-urgency--ship {
    max-width: 62px;
    padding: 3px 7px;
    border-radius: 8px;
    line-height: 1.05;
    text-align: center;
    white-space: normal;
  }

  .tm .tm-box { padding: 20px 16px 16px; }
  .tm .tm-title { font-size: 32px; }

  .tm.tm-flashbar .tm-flash-in {
    gap: 4px 10px;
    padding: 5px 42px 6px 10px;
    font-size: 12.5px;
  }

  .tm .tm-flash-clock { font-size: 15px; }

  .tm.tm-notify {
    left: 8px;
    width: calc(100vw - 16px);
  }

  .tm.tm-toasts-fallback {
    left: 12px;
    max-width: calc(100vw - 24px);
  }

  .tm .tm-chat-head {
    width: 46px;
    height: 46px;
  }

  .tm .tm-chat-text { font-size: 13px; }

  .tm.tm-cookie { padding: 12px 12px 12px 14px; }
  .tm .tm-cookie-title { font-size: 15px; }
  .tm .tm-cbtn { font-size: 13px; }

  .tm .tm-offer-clock { font-size: 34px; }
  .tm .tm-welcome-sub { font-size: 17px; }
}

/* The terminal stacks its top bar below 700px: the pair label drops under
   the picker button and uses the full column, two lines instead of four. */
@media (max-width: 699px) {
  .tm.tm-urgency--liq {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin: 6px 0 0;
    font-size: 10px;
  }
}

/* -------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .tm,
  .tm *,
  .tm *::before,
  .tm *::after {
    animation: none !important;
    transition: none !important;
  }
}