@import "https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;
500;
750;
800;
900&family=JetBrains+Mono:wght@400;
500;
600&display=swap";
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    :before,
    :after,
    ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
    }
  }
}
@layer theme {
  :root,
  :host {
    --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
    --color-red-50: oklch(97.1% 0.013 17.38);
    --color-red-100: oklch(93.6% 0.032 17.717);
    --color-red-200: oklch(88.5% 0.062 18.334);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-red-700: oklch(50.5% 0.213 27.518);
    --color-red-800: oklch(44.4% 0.177 26.899);
    --color-amber-50: oklch(98.7% 0.022 95.277);
    --color-amber-200: oklch(92.4% 0.12 95.746);
    --color-amber-400: oklch(82.8% 0.189 84.429);
    --color-amber-600: oklch(66.6% 0.179 58.318);
    --color-amber-800: oklch(47.3% 0.137 46.201);
    --color-yellow-400: oklch(85.2% 0.199 91.936);
    --color-green-400: oklch(79.2% 0.209 151.711);
    --color-emerald-50: oklch(97.9% 0.021 166.113);
    --color-emerald-100: oklch(95% 0.052 163.051);
    --color-emerald-200: oklch(90.5% 0.093 164.15);
    --color-emerald-400: oklch(76.5% 0.177 163.223);
    --color-emerald-500: oklch(69.6% 0.17 162.48);
    --color-emerald-600: oklch(59.6% 0.145 163.225);
    --color-emerald-700: oklch(50.8% 0.118 165.612);
    --color-emerald-800: oklch(43.2% 0.095 166.913);
    --color-sky-50: oklch(97.7% 0.013 236.62);
    --color-sky-200: oklch(90.1% 0.058 230.902);
    --color-sky-400: oklch(74.6% 0.16 232.661);
    --color-sky-500: oklch(68.5% 0.169 237.323);
    --color-sky-800: oklch(44.3% 0.11 240.79);
    --color-blue-500: oklch(62.3% 0.214 259.815);
    --color-indigo-50: oklch(96.2% 0.018 272.314);
    --color-indigo-100: oklch(93% 0.034 272.788);
    --color-indigo-200: oklch(87% 0.065 274.039);
    --color-indigo-300: oklch(78.5% 0.115 274.713);
    --color-indigo-400: oklch(67.3% 0.182 276.935);
    --color-indigo-500: oklch(58.5% 0.233 277.117);
    --color-indigo-600: oklch(51.1% 0.262 276.966);
    --color-indigo-700: oklch(45.7% 0.24 277.023);
    --color-indigo-800: oklch(39.8% 0.195 277.366);
    --color-indigo-900: oklch(35.9% 0.144 278.697);
    --color-indigo-950: oklch(25.7% 0.09 281.288);
    --color-pink-400: oklch(71.8% 0.202 349.761);
    --color-rose-50: oklch(96.9% 0.015 12.422);
    --color-rose-200: oklch(89.2% 0.058 10.001);
    --color-rose-500: oklch(64.5% 0.246 16.439);
    --color-rose-600: oklch(58.6% 0.253 17.585);
    --color-rose-800: oklch(45.5% 0.188 13.697);
    --color-slate-50: oklch(98.4% 0.003 247.858);
    --color-slate-100: oklch(96.8% 0.007 247.896);
    --color-slate-200: oklch(92.9% 0.013 255.508);
    --color-slate-300: oklch(86.9% 0.022 252.894);
    --color-slate-400: oklch(70.4% 0.04 256.788);
    --color-slate-500: oklch(55.4% 0.046 257.417);
    --color-slate-600: oklch(44.6% 0.043 257.281);
    --color-slate-700: oklch(37.2% 0.044 257.287);
    --color-slate-800: oklch(27.9% 0.041 260.031);
    --color-slate-900: oklch(20.8% 0.042 265.755);
    --color-slate-950: oklch(12.9% 0.042 264.695);
    --color-zinc-100: oklch(96.7% 0.001 286.375);
    --color-zinc-200: oklch(92% 0.004 286.32);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-sm: 24rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-3xl: 48rem;
    --container-7xl: 80rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: 1.5;
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: 1.2;
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    --tracking-tight: -0.025em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --animate-bounce: bounce 1s infinite;
    --blur-xs: 4px;
    --aspect-video: 16 / 9;
    --default-transition-duration: 0.15s;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --font-display: "Inherit", sans-serif;
    --color-primary: #bb0016;
    --color-primary-container: #e1272b;
    --color-secondary-container: #fea121;
    --color-brand-bg: #fcf9f8;
    --color-on-background: #1c1b1b;
    --color-on-primary: #fff;
    --color-surface-container-low: #f6f3f2;
    --color-surface-variant: #e5e2e1;
    --color-on-surface: #1c1b1b;
    --color-on-surface-variant: #5c3f3d;
    --color-outline-variant: #e6bdb9;
    --animate-pulse-glow: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
}
@layer base {
  *,
  :after,
  :before,
  ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }
  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }
  html,
  :host {
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(
      --default-font-family,
      ui-sans-serif,
      system-ui,
      sans-serif,
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol",
      "Noto Color Emoji"
    );
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  h3 {
    line-height: 0.75 !important;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b,
  strong {
    font-weight: bolder;
  }
  code,
  kbd,
  samp,
  pre {
    font-family: var(
      --default-mono-font-family,
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      "Courier New",
      monospace
    );
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(
      --default-mono-font-variation-settings,
      normal
    );
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub,
  sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol,
  ul,
  menu {
    list-style: none;
  }
  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    vertical-align: middle;
    display: block;
  }
  img,
  video {
    max-width: 100%;
    height: auto;
  }
  button,
  input,
  select,
  optgroup,
  textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }
  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not ((-webkit-appearance: -apple-pay-button))) or
    (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }
    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button,
  input:where([type="button"], [type="reset"], [type="submit"]) {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
  }
  ::file-selector-button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
  }
  ::-webkit-inner-spin-button {
    height: auto;
  }
  ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer components;
@layer utilities {
  .pointer-events-none {
    pointer-events: none;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .inset-x-0 {
    inset-inline: calc(var(--spacing) * 0);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-1 {
    top: calc(var(--spacing) * 1);
  }
  .top-1\/2 {
    top: 50%;
  }
  .top-2\.5 {
    top: calc(var(--spacing) * 2.5);
  }
  .top-3 {
    top: calc(var(--spacing) * 3);
  }
  .top-16 {
    top: calc(var(--spacing) * 16);
  }
  .top-24 {
    top: calc(var(--spacing) * 24);
  }
  .right-2 {
    right: calc(var(--spacing) * 2);
  }
  .right-4 {
    right: calc(var(--spacing) * 4);
  }
  .right-6 {
    right: calc(var(--spacing) * 6);
  }
  .bottom-1 {
    bottom: calc(var(--spacing) * 1);
  }
  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }
  .bottom-6 {
    bottom: calc(var(--spacing) * 6);
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .left-1 {
    left: calc(var(--spacing) * 1);
  }
  .right-1 {
    right: calc(var(--spacing) * 1);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .left-1\/2 {
    left: 50%;
  }
  .left-3 {
    left: calc(var(--spacing) * 3);
  }
  .z-10 {
    z-index: 10;
  }
  .z-20 {
    z-index: 20;
  }
  .z-50 {
    z-index: 50;
  }
  .z-\[60\] {
    z-index: 60;
  }
  .z-\[70\] {
    z-index: 70;
  }
  .z-\[100\] {
    z-index: 100;
  }
  .z-\[9999\] {
    z-index: 9999;
  }
  .container {
    width: 100%;
  }
  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }
  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }
  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }
  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }
  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }
  .mx-auto {
    margin-inline: auto;
  }
  .-mt-10 {
    margin-top: calc(var(--spacing) * -10);
  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-2\.5 {
    margin-top: calc(var(--spacing) * 2.5);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-3\.5 {
    margin-top: calc(var(--spacing) * 3.5);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .line-clamp-1 {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }
  .line-clamp-2 {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-flex {
    display: inline-flex;
  }
  .aspect-square {
    aspect-ratio: 1;
  }
  .aspect-video {
    aspect-ratio: var(--aspect-video);
  }
  .h-1 {
    height: calc(var(--spacing) * 1);
  }
  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }
  .h-2 {
    height: calc(var(--spacing) * 2);
  }
  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-9 {
    height: calc(var(--spacing) * 9);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-11 {
    height: calc(var(--spacing) * 11);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-20 {
    height: calc(var(--spacing) * 20);
  }
  .h-56 {
    height: calc(var(--spacing) * 56);
  }
  .h-full {
    height: 100%;
  }
  .max-h-40 {
    max-height: calc(var(--spacing) * 40);
  }
  .max-h-\[280px\] {
    max-height: 280px;
  }
  .max-h-\[290px\] {
    max-height: 290px;
  }
  .max-h-\[320px\] {
    max-height: 320px;
  }
  .min-h-\[1rem\] {
    min-height: 1rem;
  }
  .min-h-\[180px\] {
    min-height: 180px;
  }
  .min-h-\[220px\] {
    min-height: 220px;
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-1 {
    width: calc(var(--spacing) * 1);
  }
  .w-1\.5 {
    width: calc(var(--spacing) * 1.5);
  }
  .w-2 {
    width: calc(var(--spacing) * 2);
  }
  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-9 {
    width: calc(var(--spacing) * 9);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-11 {
    width: calc(var(--spacing) * 11);
  }
  .w-12 {
    width: calc(var(--spacing) * 12);
  }
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .w-20 {
    width: calc(var(--spacing) * 20);
  }
  .w-24 {
    width: calc(var(--spacing) * 24);
  }
  .w-64 {
    width: calc(var(--spacing) * 64);
  }
  .w-80 {
    width: calc(var(--spacing) * 80);
  }
  .w-full {
    width: 100%;
  }
  .max-w-3xl {
    max-width: var(--container-3xl);
  }
  .max-w-7xl {
    max-width: var(--container-7xl);
  }
  .max-w-lg {
    max-width: var(--container-lg);
  }
  .max-w-sm {
    max-width: var(--container-sm);
  }
  .max-w-xl {
    max-width: var(--container-xl);
  }
  .flex-1 {
    flex: 1;
  }
  .flex-shrink {
    flex-shrink: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .flex-grow {
    flex-grow: 1;
  }
  .-translate-x-1\/2 {
    --tw-translate-x: -50%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-1\/2 {
    --tw-translate-y: -50%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-0 {
    --tw-translate-y: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .scale-98 {
    --tw-scale-x: 98%;
    --tw-scale-y: 98%;
    --tw-scale-z: 98%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-102 {
    --tw-scale-x: 102%;
    --tw-scale-y: 102%;
    --tw-scale-z: 102%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,)
      var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .animate-bounce {
    animation: var(--animate-bounce);
  }
  .animate-ping {
    animation: var(--animate-ping);
  }
  .animate-pulse {
    animation: var(--animate-pulse);
  }
  .animate-pulse-glow {
    animation: var(--animate-pulse-glow);
  }
  .animate-spin {
    animation: var(--animate-spin);
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .cursor-not-allowed {
    cursor: not-allowed;
  }
  .resize {
    resize: both;
  }
  .resize-none {
    resize: none;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .gap-0\.5 {
    gap: calc(var(--spacing) * 0.5);
  }
  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-3\.5 {
    gap: calc(var(--spacing) * 3.5);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .text-center {
    text-align: center;
  }
  :where(.space-y-1 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(
      calc(var(--spacing) * 1) * var(--tw-space-y-reverse)
    );
    margin-block-end: calc(
      calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse))
    );
  }
  :where(.space-y-1\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(
      calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse)
    );
    margin-block-end: calc(
      calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse))
    );
  }
  :where(.space-y-2 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(
      calc(var(--spacing) * 2) * var(--tw-space-y-reverse)
    );
    margin-block-end: calc(
      calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))
    );
  }
  :where(.space-y-2\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(
      calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse)
    );
    margin-block-end: calc(
      calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse))
    );
  }
  :where(.space-y-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(
      calc(var(--spacing) * 3) * var(--tw-space-y-reverse)
    );
    margin-block-end: calc(
      calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse))
    );
  }
  :where(.space-y-4 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(
      calc(var(--spacing) * 4) * var(--tw-space-y-reverse)
    );
    margin-block-end: calc(
      calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))
    );
  }
  :where(.space-y-5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(
      calc(var(--spacing) * 5) * var(--tw-space-y-reverse)
    );
    margin-block-end: calc(
      calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse))
    );
  }
  :where(.space-y-6 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(
      calc(var(--spacing) * 6) * var(--tw-space-y-reverse)
    );
    margin-block-end: calc(
      calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))
    );
  }
  :where(.space-y-8 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(
      calc(var(--spacing) * 8) * var(--tw-space-y-reverse)
    );
    margin-block-end: calc(
      calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse))
    );
  }
  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-\[1\.8rem\] {
    border-radius: 1.8rem;
  }
  .rounded-\[2rem\] {
    border-radius: 2rem;
  }
  .rounded-full {
    border-radius: 3.40282e38px;
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .rounded-sm {
    border-radius: var(--radius-sm);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .rounded-r-full {
    border-top-right-radius: 3.40282e38px;
    border-bottom-right-radius: 3.40282e38px;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-none {
    --tw-border-style: none;
    border-style: none;
  }
  .border-\[\#0a66c2\]\/20 {
    border-color: #0a66c233;
  }
  .border-\[\#1877f2\]\/20 {
    border-color: #1877f233;
  }
  .border-\[\#e1306c\]\/20 {
    border-color: #e1306c33;
  }
  .border-amber-200 {
    border-color: var(--color-amber-200);
  }
  .border-amber-200\/80 {
    border-color: #fee685cc;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-amber-200\/80 {
      border-color: color-mix(
        in oklab,
        var(--color-amber-200) 80%,
        transparent
      );
    }
  }
  .border-emerald-100 {
    border-color: var(--color-emerald-100);
  }
  .border-emerald-200 {
    border-color: var(--color-emerald-200);
  }
  .border-indigo-100 {
    border-color: var(--color-indigo-100);
  }
  .border-indigo-600 {
    border-color: var(--color-indigo-600);
  }
  .border-indigo-700 {
    border-color: var(--color-indigo-700);
  }
  .border-outline-variant {
    border-color: var(--color-outline-variant);
  }
  .border-outline-variant\/30 {
    border-color: #e6bdb94d;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-outline-variant\/30 {
      border-color: color-mix(
        in oklab,
        var(--color-outline-variant) 30%,
        transparent
      );
    }
  }
  .border-outline-variant\/35 {
    border-color: #e6bdb959;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-outline-variant\/35 {
      border-color: color-mix(
        in oklab,
        var(--color-outline-variant) 35%,
        transparent
      );
    }
  }
  .border-outline-variant\/40 {
    border-color: #e6bdb966;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-outline-variant\/40 {
      border-color: color-mix(
        in oklab,
        var(--color-outline-variant) 40%,
        transparent
      );
    }
  }
  .border-outline-variant\/50 {
    border-color: #e6bdb980;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-outline-variant\/50 {
      border-color: color-mix(
        in oklab,
        var(--color-outline-variant) 50%,
        transparent
      );
    }
  }
  .border-outline-variant\/60 {
    border-color: #e6bdb999;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-outline-variant\/60 {
      border-color: color-mix(
        in oklab,
        var(--color-outline-variant) 60%,
        transparent
      );
    }
  }
  .border-primary {
    border-color: #fea121;
  }
  .border-primary-container {
    border-color: var(--color-primary-container);
  }
  .border-primary\/20 {
    border-color: #bb001633;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/20 {
      border-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
    }
  }
  .border-red-100 {
    border-color: var(--color-red-100);
  }
  .border-rose-200 {
    border-color: var(--color-rose-200);
  }
  .border-sky-200 {
    border-color: var(--color-sky-200);
  }
  .border-slate-100 {
    border-color: var(--color-slate-100);
  }
  .border-slate-200 {
    border-color: var(--color-slate-200);
  }
  .border-slate-200\/60 {
    border-color: #e2e8f099;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-slate-200\/60 {
      border-color: color-mix(
        in oklab,
        var(--color-slate-200) 60%,
        transparent
      );
    }
  }
  .border-slate-200\/80 {
    border-color: #e2e8f0cc;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-slate-200\/80 {
      border-color: color-mix(
        in oklab,
        var(--color-slate-200) 80%,
        transparent
      );
    }
  }
  .border-slate-800 {
    border-color: var(--color-slate-800);
  }
  .border-white {
    border-color: var(--color-white);
  }
  .border-white\/10 {
    border-color: #ffffff1a;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/10 {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }
  .border-white\/15 {
    border-color: #ffffff26;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/15 {
      border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
  }
  .border-white\/20 {
    border-color: #fff3;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/20 {
      border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }
  .border-zinc-200 {
    border-color: var(--color-zinc-200);
  }
  .bg-\[\#0a66c2\]\/10 {
    background-color: #0a66c21a;
  }
  .bg-\[\#1d9bf0\] {
    background-color: #1d9bf0;
  }
  .bg-\[\#1877f2\]\/10 {
    background-color: #1877f21a;
  }
  .bg-\[\#e1306c\]\/10 {
    background-color: #e1306c1a;
  }
  .bg-amber-50 {
    background-color: var(--color-amber-50);
  }
  .bg-amber-400 {
    background-color: var(--color-amber-400);
  }
  .bg-black\/20 {
    background-color: #0003;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/20 {
      background-color: color-mix(
        in oklab,
        var(--color-black) 20%,
        transparent
      );
    }
  }
  .bg-black\/60 {
    background-color: #0009;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/60 {
      background-color: color-mix(
        in oklab,
        var(--color-black) 60%,
        transparent
      );
    }
  }
  .bg-black\/65 {
    background-color: #000000a6;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/65 {
      background-color: color-mix(
        in oklab,
        var(--color-black) 65%,
        transparent
      );
    }
  }
  .hover\:bg-black\/80:hover {
    background-color: #000c;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-black\/80:hover {
      background-color: color-mix(
        in oklab,
        var(--color-black) 80%,
        transparent
      );
    }
  }
  .bg-blue-500 {
    background-color: var(--color-blue-500);
  }
  .bg-brand-bg {
    background-color: var(--color-brand-bg);
  }
  .bg-emerald-50 {
    background-color: var(--color-emerald-50);
  }
  .bg-emerald-400 {
    background-color: var(--color-emerald-400);
  }
  .bg-emerald-500 {
    background-color: var(--color-emerald-500);
  }
  .bg-green-400 {
    background-color: var(--color-green-400);
  }
  .bg-indigo-50 {
    background-color: var(--color-indigo-50);
  }
  .bg-indigo-50\/50 {
    background-color: #eef2ff80;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-indigo-50\/50 {
      background-color: color-mix(
        in oklab,
        var(--color-indigo-50) 50%,
        transparent
      );
    }
  }
  .bg-indigo-200\/50 {
    background-color: #c7d2ff80;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-indigo-200\/50 {
      background-color: color-mix(
        in oklab,
        var(--color-indigo-200) 50%,
        transparent
      );
    }
  }
  .bg-indigo-500\/5 {
    background-color: #625fff0d;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-indigo-500\/5 {
      background-color: color-mix(
        in oklab,
        var(--color-indigo-500) 5%,
        transparent
      );
    }
  }
  .bg-indigo-600 {
    background-color: var(--color-indigo-600);
  }
  .bg-indigo-700 {
    background-color: var(--color-indigo-700);
  }
  .bg-indigo-900 {
    background-color: var(--color-indigo-900);
  }
  .bg-indigo-900\/20 {
    background-color: #312c8533;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-indigo-900\/20 {
      background-color: color-mix(
        in oklab,
        var(--color-indigo-900) 20%,
        transparent
      );
    }
  }
  .bg-indigo-900\/40 {
    background-color: #312c8566;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-indigo-900\/40 {
      background-color: color-mix(
        in oklab,
        var(--color-indigo-900) 40%,
        transparent
      );
    }
  }
  .bg-on-background {
    background-color: var(--color-on-background);
  }
  .bg-primary {
    background-color: var(--color-primary);
  }
  .bg-primary\/10 {
    background-color: #bb00161a;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/10 {
      background-color: color-mix(
        in oklab,
        var(--color-primary) 10%,
        transparent
      );
    }
  }
  .bg-primary\/20 {
    background-color: #bb001633;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/20 {
      background-color: color-mix(
        in oklab,
        var(--color-primary) 20%,
        transparent
      );
    }
  }
  .bg-red-50 {
    background-color: var(--color-red-50);
  }
  .bg-red-600 {
    background-color: var(--color-red-600);
  }
  .bg-rose-50 {
    background-color: var(--color-rose-50);
  }
  .bg-rose-500 {
    background-color: var(--color-rose-500);
  }
  .bg-secondary-container {
    background-color: var(--color-secondary-container);
  }
  .bg-sky-50 {
    background-color: var(--color-sky-50);
  }
  .bg-sky-400 {
    background-color: var(--color-sky-400);
  }
  .bg-sky-500 {
    background-color: var(--color-sky-500);
  }
  .bg-slate-50 {
    background-color: var(--color-slate-50);
  }
  .bg-\[\#fbe9e5\] {
    background-color: #fbe9e5;
  }
  .bg-slate-50\/50 {
    background-color: #f8fafc80;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-slate-50\/50 {
      background-color: color-mix(
        in oklab,
        var(--color-slate-50) 50%,
        transparent
      );
    }
  }
  .bg-slate-50\/70 {
    background-color: #f8fafcb3;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-slate-50\/70 {
      background-color: color-mix(
        in oklab,
        var(--color-slate-50) 70%,
        transparent
      );
    }
  }
  .bg-slate-100 {
    background-color: var(--color-slate-100);
  }
  .bg-slate-100\/60 {
    background-color: #f1f5f999;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-slate-100\/60 {
      background-color: color-mix(
        in oklab,
        var(--color-slate-100) 60%,
        transparent
      );
    }
  }
  .bg-slate-100\/70 {
    background-color: #f1f5f9b3;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-slate-100\/70 {
      background-color: color-mix(
        in oklab,
        var(--color-slate-100) 70%,
        transparent
      );
    }
  }
  .bg-slate-200 {
    background-color: var(--color-slate-200);
  }
  .bg-slate-200\/50 {
    background-color: #e2e8f080;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-slate-200\/50 {
      background-color: color-mix(
        in oklab,
        var(--color-slate-200) 50%,
        transparent
      );
    }
  }
  .bg-slate-900 {
    background-color: var(--color-slate-900);
  }
  .bg-surface-container-low {
    background-color: var(--color-surface-container-low);
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-white\/5 {
    background-color: #ffffff0d;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/5 {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }
  .bg-white\/10 {
    background-color: #ffffff1a;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/10 {
      background-color: color-mix(
        in oklab,
        var(--color-white) 10%,
        transparent
      );
    }
  }
  .bg-white\/15 {
    background-color: #ffffff26;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/15 {
      background-color: color-mix(
        in oklab,
        var(--color-white) 15%,
        transparent
      );
    }
  }
  .bg-white\/90 {
    background-color: #ffffffe6;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/90 {
      background-color: color-mix(
        in oklab,
        var(--color-white) 90%,
        transparent
      );
    }
  }
  .bg-white\/95 {
    background-color: #fffffff2;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/95 {
      background-color: color-mix(
        in oklab,
        var(--color-white) 95%,
        transparent
      );
    }
  }
  .bg-zinc-100 {
    background-color: var(--color-zinc-100);
  }
  .bg-linear-to-tr {
    --tw-gradient-position: to top right;
  }
  @supports (background-image: linear-gradient(in lab, red, red)) {
    .bg-linear-to-tr {
      --tw-gradient-position: to top right in oklab;
    }
  }
  .bg-linear-to-tr {
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-br {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .from-primary {
    --tw-gradient-from: var(--color-primary);
    --tw-gradient-stops: var(
      --tw-gradient-via-stops,
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
  }
  .from-yellow-400 {
    --tw-gradient-from: var(--color-yellow-400);
    --tw-gradient-stops: var(
      --tw-gradient-via-stops,
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
  }
  .via-pink-400 {
    --tw-gradient-via: var(--color-pink-400);
    --tw-gradient-via-stops:
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-via) var(--tw-gradient-via-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-primary-container {
    --tw-gradient-via: var(--color-primary-container);
    --tw-gradient-via-stops:
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-via) var(--tw-gradient-via-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .to-indigo-500 {
    --tw-gradient-to: var(--color-indigo-500);
    --tw-gradient-stops: var(
      --tw-gradient-via-stops,
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
  }
  .to-secondary-container {
    --tw-gradient-to: var(--color-secondary-container);
    --tw-gradient-stops: var(
      --tw-gradient-via-stops,
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
  }
  .stroke-3 {
    stroke-width: 3px;
  }
  .object-cover {
    object-fit: cover;
  }
  .p-0\.5 {
    padding: calc(var(--spacing) * 0.5);
  }
  .p-1 {
    padding: calc(var(--spacing) * 1);
  }
  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-3\.5 {
    padding: calc(var(--spacing) * 3.5);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-8 {
    padding: calc(var(--spacing) * 8);
  }
  .p-12 {
    padding: calc(var(--spacing) * 12);
  }
  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }
  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
    padding-left: 0px !important;
  }
  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }
  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }
  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }
  .pt-3\.5 {
    padding-top: calc(var(--spacing) * 3.5);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pt-16 {
    padding-top: calc(var(--spacing) * 16);
  }
  .pr-3 {
    padding-right: calc(var(--spacing) * 3);
  }
  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }
  .pr-20 {
    padding-right: calc(var(--spacing) * 20);
  }
  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }
  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }
  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }
  .pb-20 {
    padding-bottom: calc(var(--spacing) * 20);
  }
  .pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }
  .pl-8 {
    padding-left: calc(var(--spacing) * 8);
  }
  .pl-22 {
    padding-left: calc(var(--spacing) * 22);
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .font-display {
    font-family: "Dongle", Sans-Serif !important;
  }
  #root .font-display {
    font-family: "Dongle", Sans-Serif !important;
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .font-sans {
    font-family: var(--font-sans);
  }
  .font-serif {
    font-family: var(--font-serif);
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-\[7px\] {
    font-size: 7px;
  }
  .text-\[8px\] {
    font-size: 8px;
  }
  .text-\[9px\] {
    font-size: 9px;
  }
  .text-\[10\.5px\] {
    font-size: 10.5px;
  }
  .text-\[10px\] {
    font-size: 10px;
  }
  .text-\[11px\] {
    font-size: 11px;
  }
  .text-\[12\.5px\] {
    font-size: 12.5px;
  }
  .text-\[12px\] {
    font-size: 12px;
  }
  .text-\[13\.5px\] {
    font-size: 13.5px;
  }
  .text-\[13px\] {
    font-size: 13px;
  }
  .text-\[15px\] {
    font-size: 15px;
  }
  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .font-black {
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-extrabold {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }
  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }
  .break-all {
    word-break: break-all;
  }
  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }
  .text-\[\#0a66c2\] {
    color: #0a66c2;
  }
  .text-\[\#0f1419\] {
    color: #0f1419;
  }
  .text-\[\#1c1b1b\] {
    color: #1c1b1b;
  }
  .text-\[\#5c3f3d\] {
    color: #5c3f3d;
  }
  .text-\[\#1877f2\] {
    color: #1877f2;
  }
  .text-\[\#191919\] {
    color: #191919;
  }
  .text-\[\#e1306c\] {
    color: #e1306c;
  }
  .text-amber-600 {
    color: var(--color-amber-600);
  }
  .text-amber-800 {
    color: var(--color-amber-800);
  }
  .text-emerald-400 {
    color: var(--color-emerald-400);
  }
  .text-emerald-600 {
    color: var(--color-emerald-600);
  }
  .text-emerald-700 {
    color: var(--color-emerald-700);
  }
  .text-emerald-800 {
    color: var(--color-emerald-800);
  }
  .text-indigo-500 {
    color: var(--color-indigo-500);
  }
  .text-indigo-600 {
    color: var(--color-indigo-600);
  }
  .text-indigo-700 {
    color: var(--color-indigo-700);
  }
  .text-indigo-900 {
    color: var(--color-indigo-900);
  }
  .text-indigo-950 {
    color: var(--color-indigo-950);
  }
  .text-on-background {
    color: var(--color-on-background);
  }
  .text-on-primary {
    color: var(--color-on-primary);
  }
  .text-on-surface {
    color: var(--color-on-surface);
  }
  .text-on-surface-variant {
    color: var(--color-on-surface-variant);
  }
  .text-primary {
    color: var(--color-primary);
  }
  .text-red-600 {
    color: var(--color-red-600);
  }
  .text-rose-500 {
    color: var(--color-rose-500);
  }
  .text-rose-600 {
    color: var(--color-rose-600);
  }
  .text-rose-800 {
    color: var(--color-rose-800);
  }
  .text-secondary-container {
    color: var(--color-secondary-container);
  }
  .text-sky-800 {
    color: var(--color-sky-800);
  }
  .text-slate-400 {
    color: var(--color-slate-400);
  }
  .text-slate-500 {
    color: var(--color-slate-500);
  }
  .text-slate-600 {
    color: var(--color-slate-600);
  }
  .text-slate-700 {
    color: var(--color-slate-700);
  }
  .text-slate-800 {
    color: var(--color-slate-800);
  }
  .text-slate-900 {
    color: var(--color-slate-900);
  }
  .text-slate-950 {
    color: var(--color-slate-950);
  }
  .text-white {
    color: var(--color-white);
  }
  .text-black {
    color: var(--color-black);
  }
  .text-white\/50 {
    color: #ffffff80;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/50 {
      color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }
  .text-white\/70 {
    color: #ffffffb3;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/70 {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }
  .text-white\/85 {
    color: #ffffffd9;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/85 {
      color: color-mix(in oklab, var(--color-white) 85%, transparent);
    }
  }
  .lowercase {
    text-transform: lowercase;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .line-through {
    text-decoration-line: line-through;
  }
  .decoration-slate-300 {
    -webkit-text-decoration-color: var(--color-slate-300);
    text-decoration-color: var(--color-slate-300);
  }
  .opacity-0 {
    opacity: 0;
  }
  .opacity-25 {
    opacity: 0.25;
  }
  .opacity-50 {
    opacity: 0.5;
  }
  .opacity-75 {
    opacity: 0.75;
  }
  .opacity-100 {
    opacity: 1;
  }
  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-2xs {
    --tw-shadow: 0 1px var(--tw-shadow-color, #0000000d);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_0_8px_\#4ade80\] {
    --tw-shadow: 0 0 8px var(--tw-shadow-color, #4ade80);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-inner {
    --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, #0000000d);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-lg {
    --tw-shadow:
      0 10px 15px -3px var(--tw-shadow-color, #0000001a),
      0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-md {
    --tw-shadow:
      0 4px 6px -1px var(--tw-shadow-color, #0000001a),
      0 2px 4px -2px var(--tw-shadow-color, #0000001a);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-sm {
    --tw-shadow:
      0 1px 3px 0 var(--tw-shadow-color, #0000001a),
      0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xl {
    --tw-shadow:
      0 20px 25px -5px var(--tw-shadow-color, #0000001a),
      0 8px 10px -6px var(--tw-shadow-color, #0000001a);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xs {
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
      calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-4 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
      calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-indigo-100 {
    --tw-shadow-color: oklch(93% 0.034 272.788);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .shadow-indigo-100 {
      --tw-shadow-color: color-mix(
        in oklab,
        var(--color-indigo-100) var(--tw-shadow-alpha),
        transparent
      );
    }
  }
  .shadow-primary\/10 {
    --tw-shadow-color: #bb00161a;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .shadow-primary\/10 {
      --tw-shadow-color: color-mix(
        in oklab,
        color-mix(in oklab, var(--color-primary) 10%, transparent)
          var(--tw-shadow-alpha),
        transparent
      );
    }
  }
  .shadow-red-200 {
    --tw-shadow-color: oklch(88.5% 0.062 18.334);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .shadow-red-200 {
      --tw-shadow-color: color-mix(
        in oklab,
        var(--color-red-200) var(--tw-shadow-alpha),
        transparent
      );
    }
  }
  .ring-indigo-500\/10 {
    --tw-ring-color: #625fff1a;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .ring-indigo-500\/10 {
      --tw-ring-color: color-mix(
        in oklab,
        var(--color-indigo-500) 10%,
        transparent
      );
    }
  }
  .ring-primary {
    --tw-ring-color: var(--color-primary);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,)
      var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,)
      var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,)
      var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,)
      var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,)
      var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,)
      var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,)
      var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,)
      var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,)
      var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,)
      var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-xs {
    --tw-backdrop-blur: blur(var(--blur-xs));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,)
      var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,)
      var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,)
      var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,)
      var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,)
      var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,)
      var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,)
      var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,)
      var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property:
      color,
      background-color,
      border-color,
      outline-color,
      text-decoration-color,
      fill,
      stroke,
      --tw-gradient-from,
      --tw-gradient-via,
      --tw-gradient-to,
      opacity,
      box-shadow,
      transform,
      translate,
      scale,
      rotate,
      filter,
      -webkit-backdrop-filter,
      backdrop-filter,
      display,
      content-visibility,
      overlay,
      pointer-events;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function)
    );
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function)
    );
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property:
      color, background-color, border-color, outline-color,
      text-decoration-color, fill, stroke, --tw-gradient-from,
      --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function)
    );
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function)
    );
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-150 {
    --tw-duration: 0.15s;
    transition-duration: 0.15s;
  }
  .duration-200 {
    --tw-duration: 0.2s;
    transition-duration: 0.2s;
  }
  .duration-300 {
    --tw-duration: 0.3s;
    transition-duration: 0.3s;
  }
  .duration-500 {
    --tw-duration: 0.5s;
    transition-duration: 0.5s;
  }
  .duration-700 {
    --tw-duration: 0.7s;
    transition-duration: 0.7s;
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .select-all {
    -webkit-user-select: all;
    user-select: all;
  }
  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }
  @media (hover: hover) {
    .group-hover\:bg-primary:is(:where(.group):hover *) {
      background-color: var(--color-primary);
    }
    .group-hover\:text-primary:is(:where(.group):hover *) {
      color: var(--color-primary);
    }
    .group-hover\:text-white:is(:where(.group):hover *) {
      color: var(--color-white);
    }
    .group-hover\:opacity-100:is(:where(.group):hover *) {
      opacity: 1;
    }
  }
  .selection\:bg-secondary-container ::selection {
    background-color: var(--color-secondary-container);
  }
  .selection\:bg-secondary-container::selection {
    background-color: var(--color-secondary-container);
  }
  @media (hover: hover) {
    .hover\:scale-97:hover {
      --tw-scale-x: 97%;
      --tw-scale-y: 97%;
      --tw-scale-z: 97%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
    .hover\:scale-102:hover {
      --tw-scale-x: 102%;
      --tw-scale-y: 102%;
      --tw-scale-z: 102%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
    .hover\:scale-105:hover {
      --tw-scale-x: 105%;
      --tw-scale-y: 105%;
      --tw-scale-z: 105%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
    .hover\:scale-\[1\.01\]:hover {
      scale: 1.01;
    }
    .hover\:scale-\[1\.03\]:hover {
      scale: 1.03;
    }
    .hover\:border-indigo-300:hover {
      border-color: var(--color-indigo-300);
    }
    .hover\:border-indigo-400:hover {
      border-color: var(--color-indigo-400);
    }
    .hover\:border-primary\/20:hover {
      border-color: #bb001633;
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-primary\/20:hover {
        border-color: color-mix(
          in oklab,
          var(--color-primary) 20%,
          transparent
        );
      }
    }
    .hover\:border-slate-300:hover {
      border-color: var(--color-slate-300);
    }
    .hover\:bg-indigo-100:hover {
      background-color: var(--color-indigo-100);
    }
    .hover\:bg-indigo-700:hover {
      background-color: var(--color-indigo-700);
    }
    .hover\:bg-primary-container:hover {
      background-color: var(--color-primary-container);
    }
    .hover\:bg-red-50:hover {
      background-color: var(--color-red-50);
    }
    .hover\:bg-red-700:hover {
      background-color: var(--color-red-700);
    }
    .hover\:bg-slate-50:hover {
      background-color: var(--color-slate-50);
    }
    .hover\:bg-\[\#fbe9e5\]:hover {
      background-color: #fbe9e5;
    }
    .hover\:bg-slate-100:hover {
      background-color: var(--color-slate-100);
    }
    .hover\:bg-slate-100\/50:hover {
      background-color: #f1f5f980;
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-slate-100\/50:hover {
        background-color: color-mix(
          in oklab,
          var(--color-slate-100) 50%,
          transparent
        );
      }
    }
    .hover\:bg-slate-200:hover {
      background-color: var(--color-slate-200);
    }
    .hover\:bg-surface-variant\/50:hover {
      background-color: #e5e2e180;
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-surface-variant\/50:hover {
        background-color: color-mix(
          in oklab,
          var(--color-surface-variant) 50%,
          transparent
        );
      }
    }
    .hover\:bg-white\/10:hover {
      background-color: #ffffff1a;
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/10:hover {
        background-color: color-mix(
          in oklab,
          var(--color-white) 10%,
          transparent
        );
      }
    }
    .hover\:bg-white\/25:hover {
      background-color: #ffffff40;
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/25:hover {
        background-color: color-mix(
          in oklab,
          var(--color-white) 25%,
          transparent
        );
      }
    }
    .hover\:text-black:hover {
      color: var(--color-black);
    }
    .hover\:text-blue-500:hover {
      color: var(--color-blue-500);
    }
    .hover\:text-emerald-500:hover {
      color: var(--color-emerald-500);
    }
    .hover\:text-indigo-600:hover {
      color: var(--color-indigo-600);
    }
    .hover\:text-indigo-800:hover {
      color: var(--color-indigo-800);
    }
    .hover\:text-red-500:hover {
      color: var(--color-red-500);
    }
    .hover\:text-red-800:hover {
      color: var(--color-red-800);
    }
    .hover\:text-rose-500:hover {
      color: var(--color-rose-500);
    }
    .hover\:text-slate-500:hover {
      color: var(--color-slate-500);
    }
    .hover\:text-slate-600:hover {
      color: var(--color-slate-600);
    }
    .hover\:text-slate-800:hover {
      color: var(--color-slate-800);
    }
    .hover\:text-slate-900:hover {
      color: var(--color-slate-900);
    }
    .hover\:underline:hover {
      text-decoration-line: underline;
    }
    .hover\:opacity-85:hover {
      opacity: 0.85;
    }
    .hover\:shadow-md:hover {
      --tw-shadow:
        0 4px 6px -1px var(--tw-shadow-color, #0000001a),
        0 2px 4px -2px var(--tw-shadow-color, #0000001a);
      box-shadow:
        var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
        var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    .hover\:shadow-xs:hover {
      --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
      box-shadow:
        var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
        var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    .hover\:ring-2:hover {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
        calc(2px + var(--tw-ring-offset-width))
        var(--tw-ring-color, currentcolor);
      box-shadow:
        var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
        var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    .hover\:ring-primary\/40:hover {
      --tw-ring-color: #bb001666;
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:ring-primary\/40:hover {
        --tw-ring-color: color-mix(
          in oklab,
          var(--color-primary) 40%,
          transparent
        );
      }
    }
  }
  .focus\:bg-white:focus {
    background-color: var(--color-white);
  }
  .focus\:ring-2:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
      calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .focus\:ring-indigo-500:focus {
    --tw-ring-color: var(--color-indigo-500);
  }
  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }
  .active\:scale-95:active {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .active\:scale-97:active {
    --tw-scale-x: 97%;
    --tw-scale-y: 97%;
    --tw-scale-z: 97%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .disabled\:pointer-events-none:disabled {
    pointer-events: none;
  }
  .disabled\:opacity-45:disabled {
    opacity: 0.45;
  }
  .disabled\:opacity-50:disabled {
    opacity: 0.5;
  }
  .disabled\:opacity-55:disabled {
    opacity: 0.55;
  }
  @media (min-width: 40rem) {
    .sm\:block {
      display: block;
    }
    .sm\:w-36 {
      width: calc(var(--spacing) * 36);
    }
    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sm\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .sm\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .sm\:flex-row {
      flex-direction: row;
    }
    .sm\:items-center {
      align-items: center;
    }
    .sm\:text-xs {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }
  }
  @media (min-width: 48rem) {
    .md\:flex {
      display: flex;
    }
    .md\:hidden {
      display: none;
    }
    .md\:h-full {
      height: 100%;
    }
    .md\:h-screen {
      height: 100vh;
    }
    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .md\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .md\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .md\:flex-row {
      flex-direction: row;
    }
    .md\:overflow-hidden {
      overflow: hidden;
    }
    .md\:overflow-y-auto {
      overflow-y: auto;
    }
  }
  @media (min-width: 64rem) {
    .lg\:w-\[420px\] {
      width: 420px;
    }
    .lg\:flex-none {
      flex: none;
    }
    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .lg\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .lg\:grid-cols-8 {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }
  }
  @media (prefers-color-scheme: dark) {
    .dark\:text-\[\#ffffff\] {
      color: #fff;
    }
  }
}
@keyframes pulse-glow {
  0%,
  to {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.15);
  }
}
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  to {
    background-position: 200% 0;
  }
}
.tag-shape {
  border-bottom-right-radius: 2rem;
}
.flow-line {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000px;
  animation: 10s ease-in-out alternate infinite dash;
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
.glass-card {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #fffffff2;
}
.input-focus-ring {
  transition: all 0.3s;
}
.input-focus-ring:focus {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 4px #fea1214d,
    0 20px 25px -5px #bb00161a;
}
#scraper-log::-webkit-scrollbar {
  width: 4px;
}
#scraper-log::-webkit-scrollbar-thumb {
  background: #e5e2e1;
  border-radius: 10px;
}
.animate-shimmer {
  background: linear-gradient(90deg, #bb0016 25%, #fea121, #bb0016 75%) 0 0/200%
    100%;
  animation: 2s linear infinite shimmer;
}
.result-fade-in {
  animation: 0.5s ease-out fadeIn;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.typing:after {
  content: "|";
  animation: 1s infinite blink;
}
@keyframes blink {
  0%,
  to {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.nav-link-active {
  transform: translate(4px);
  color: #fffbff !important;
  background-color: #e1272b !important;
}
.nav-link-inactive {
  color: #5c3f3d;
}
.nav-link-inactive:hover {
  background-color: #e5e2e1;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ping {
  75%,
  to {
    opacity: 0;
    transform: scale(2);
  }
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@keyframes bounce {
  0%,
  to {
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    transform: translateY(-25%);
  }
  50% {
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    transform: none;
  }
}

/* ── RetailFix Auth Layout ──────────────────────────────────────────────────── */
.rf-auth-wrap {
  display: flex;
  flex-direction: row;
  min-height: 100vh;
  background: #fcf9f8;
  font-family: inherit;
}
.rf-auth-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 160px 64px 65px;
  min-height: 100vh;
  box-sizing: border-box;
}
.rf-auth-right {
  width: 50%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 40px;
  background: #fff;
  border-left: 1px solid #f0ebe8;
  box-sizing: border-box;
  min-height: 100vh;
}
.rf-auth-logo {
  display: none;
  visibility: hidden;
  align-items: center;
  gap: 10px;
  margin-bottom: 40px;
}
.rf-auth-logo-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #bb0016, #fea121);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rf-auth-logo-text {
  font-weight: 900;
  font-size: 20px;
  color: #1c1917;
}
.rf-auth-headline {
  margin-bottom: 48px;
}
.rf-auth-h1 {
  font-weight: 900;
  font-size: clamp(3rem, 3.5vw, 4rem);
  color: #e1272b;
  line-height: 0.5;
  margin: 0 0 16px;
  max-width: 520px;
  font-family: "Dongle";
  text-wrap: balance;
}
.rf-auth-sub {
  color: #78716c;
  font-size: 18px;
  line-height: 1.6;
  max-width: 440px;
  margin: 0;
}
.rf-auth-img-placeholder {
  border-radius: 16px;
  overflow: hidden;
  max-width: 480px;
  min-height: 260px;
  background: linear-gradient(135deg, #f5f0ee, #ebe4e0);
  border: 1px solid #e5ddd9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  color: #a8a29e;
}
.rf-auth-img-placeholder span {
  font-size: 13px;
  font-weight: 500;
}
.rf-auth-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.rf-auth-panel-title {
  font-weight: 900;
  font-size: 24px;
  color: #1c1917;
  margin: 0 0 6px;
}
.rf-auth-panel-sub {
  color: #78716c;
  font-size: 14px;
  margin: 0;
}
.rf-auth-link {
  color: #bb0016;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rf-auth-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rf-auth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.rf-auth-input {
  display: block;
  width: 100%;
  background: #fff;
  border: 1px solid #e2d9d4;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  color: #1c1917;
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color 0.15s;
}
.rf-auth-input:focus {
  border-color: #bb0016;
  box-shadow: 0 0 0 3px rgba(187, 0, 22, 0.1);
}
.rf-auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #bb0016, #e1272b);
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  margin-top: 4px;
  transition: opacity 0.15s;
}
.rf-auth-btn:hover {
  opacity: 0.9;
}
.rf-auth-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.rf-auth-fine {
  color: #a8a29e;
  font-size: 12px;
  text-align: center;
  margin: 0;
}
.rf-auth-center {
  text-align: center;
}
.rf-auth-err {
  background: #fff1f1;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 12px 16px;
  color: #b91c1c;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rf-auth-ok {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 12px 16px;
  color: #15803d;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rf-auth-reset-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fcf9f8;
  padding: 24px;
  box-sizing: border-box;
}
.rf-auth-reset-card {
  width: 100%;
  max-width: 420px;
}
.rf-auth-reset-hd {
  text-align: center;
  margin-bottom: 32px;
}
.rf-auth-reset-title {
  font-weight: 900;
  font-size: clamp(3rem, 3.5vw, 4rem);
  line-height: 0.5;
  color: #e1272b;
  margin: 0 0 8px;
  font-family: "Dongle";
  text-wrap: balance;
}
.rf-auth-reset-sub {
  color: #78716c;
  font-size: 14px;
  margin: 0;
}
.rf-auth-reset-box {
  background: #fff;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0ebe8;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 768px) {
  .rf-auth-wrap {
    flex-direction: column;
  }
  .rf-auth-left {
    padding: 100px 24px 25px;
    min-height: auto;
  }
  .rf-auth-right {
    width: 100%;
    min-height: auto;
    padding: 32px 24px;
    border-left: none;
    border-top: 1px solid #f0ebe8;
  }
}

/*CUSTOM VARIABLES*/

h1.font-display.font-black.text-3xl.tracking-tight.text-primary.select-none.flex.items-center.gap-2 {
  font-family: "Dongle" !important;
  font-size: 65px !important;
  line-height: 0.5 !important;
}

h2.font-display.text-4xl.font-extrabold.text-white.tracking-tight.leading-tight {
  font-family: "Dongle" !important;
  font-size: 65px !important;
  line-height: 0.5 !important;
  color: #fff !important;
}

svg.absolute.top-0.left-0.w-full.h-full.opacity-25.pointer-events-none {
  padding-left: 0px !important;
  margin-left: 0px !important;
  width: 100vw !important;
}

section.relative.bg-gradient-to-br.from-primary.via-primary-container.to-secondary-container.pt-14.pb-20.px-8.overflow-hidden.border-b.border-primary\/20 {
  padding-top: 65px;
}

.w-12.h-12.rounded-2xl.flex.items-center.justify-center.shrink-0.bg-black {
  background: black !important;
}

button.w-full.py-3.rounded-xl.font-bold.text-sm.text-white.bg-black.transition-all.hover\:opacity-80.cursor-pointer {
  background: black !important;
}

button.flex-1.bg-on-background.hover\:opacity-90.text-white.font-sans.font-black.text-xs.py-3\.5.rounded-xl.transition-all.flex.items-center.justify-center.gap-2.cursor-pointer.shadow-md {
  background: #f9a316 !important;
  color: #ffffff !important;
}

button.w-full.bg-secondary-container.hover\:scale-\[1\.01\].text-on-secondary-container.font-sans.font-black.text-xs.py-3\.5.rounded-full.transition-all.shadow-md.active\:scale-97.flex.items-center.justify-center.gap-2.cursor-pointer.mt-2 {
  visibility: hidden !important;
  display: none !important;
}

.w-5.h-5.rounded-md.border-2.flex.items-center.justify-center.shadow-sm.bg-white\/90.border-white\/80 {
  width: 20px;
  height: 20px;
}

@media (max-width: 620px) {
  .flex.items-center.gap-4 {
    display: grid !important;
  }
}

@media (max-width: 620px) {
  section.relative.bg-gradient-to-br.from-primary.via-primary-container.to-secondary-container.pt-14.pb-20.px-8.overflow-hidden.border-b.border-primary\/20 {
    padding-inline: 15px !important;
  }
}

@media (max-width: 1000px) {
  .flex.flex-col.md\:flex-row.gap-4 {
    display: grid !important;
  }
}

span.text-primary.font-mono.select-all.text-sm {
  word-break: break-all !important;
}

/* Editable Suggested Post — 350px floor on mobile only; no min-height on desktop */
@media (max-width: 767.99px) {
  .bg-white\/10.border.border-white\/15.rounded-2xl.p-5.relative.text-left.flex-1.flex.flex-col.justify-between {
    min-height: 350px !important;
  }
}

section.max-w-7xl.mx-auto.px-8.py-10.w-full.space-y-6.result-fade-in.flex-1 {
  padding: 35px !important;
}

p.text-on-surface-variant.text-sm.text-center {
  text-wrap: balance !important;
}

.oxel_back_to_top_icon {
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
  border-top-width: 0px !important;
  border-right-width: 0px !important;
  border-bottom-width: 0px !important;
  border-left-width: 0px !important;
}

/* Hides the back-to-top button while the post preview is open. It lives
   outside the React tree, so body.rf-preview-open is toggled from state. */
@media (max-width: 767px) {
  /* Prefix match: Oxygen wraps the glyph in its own container, so this
     catches the wrapper as well as the icon. */
  body.rf-preview-open [class*="oxel_back_to_top"] {
    display: none !important;
  }
}

@media (min-width: 1000px) {
  .rf-auth-left {
    padding-left: 15%;
  }
  .rf-auth-right {
    padding-right: 15%;
  }
}

span.text-on-surface-variant {
  color: #bb0016;
  font-weight: 500;
}

/* mobile post variant options */
@media (max-width: 485px) {
  .grid.grid-cols-3.gap-2:not(.rf-post-target-grid) {
    display: flex;
    flex-direction: column;
  }
  /* container padding */
  .bg-primary.rounded-\[2rem\].p-8.text-on-primary.shadow-xl.border.border-primary-container.space-y-6 {
    padding: 30px 15px;
  }
  /* submit buttons */
  .flex.gap-2.pt-1 {
    display: grid;
  }
  h4 {
    line-height: 0.75;
  }
}

img.rf-auth-landing-img {
  filter: drop-shadow(10px 0px 10px rgba(0, 0, 0, 0.25));
}
/* asset library grid */
.grid.grid-cols-2.sm\:grid-cols-3.md\:grid-cols-4.lg\:grid-cols-6.gap-6 {
  margin-top: 15px;
}

/*social media choice buttons */
button.flex-1.flex.items-center.justify-center.gap-2.py-3.px-4.rounded-xl.border.text-sm.font-black.transition-all.cursor-pointer.border-white\/20.text-white.hover\:bg-white\/10 {
  font-size: 18px;
}

button.flex-1.flex.items-center.justify-center.gap-2.py-3.px-4.rounded-xl.border.text-sm.font-black.transition-all.cursor-pointer.bg-white.text-primary.border-white.shadow-sm {
  font-size: 18px;
}

/* Social Media Connection Cards */
.flex.flex-col.md\:flex-row.gap-4 {
  justify-self: center;
}

.bg-white.rounded-2xl.p-6.border.border-outline-variant\/40.shadow-xs.space-y-4.flex-1 {
  max-width: 400px;
}

/* add images to scrape button */
button.bg-primary.text-white.font-sans.font-bold.text-xs.px-5.py-3.rounded-full.flex.items-center.gap-2.cursor-pointer.shadow-md.shadow-primary\/10.active\:scale-97.transition-all {
  text-wrap: balance;
}
/*targeting details mobile */
.flex.flex-col.sm\:flex-row.items-start.sm\:items-center {
  flex-direction: row;
}
@media (max-width: 450px) {
  .flex.flex-col.sm\:flex-row.items-start.sm\:items-center {
    flex-direction: column;
  }
}
/* Beats Tailwind's sm:items-center, so the cover image and the AI Creator
   Options sliders both sit at the top of the row rather than centring
   against each other. Desktop only, matching the cover sizing above. */
@media (min-width: 768px) {
  .flex.flex-col.sm\:flex-row.items-start.sm\:items-center {
    align-items: flex-start;
  }
}

/* link to Visual Assests Extracted on Live Scraper */
a.text-white {
  color: var(--color-white) !important;
  text-decoration: underline !important;
}

/* Asset Library button mobile */
@media (max-width: 710px) {
  .flex.flex-col.sm\:flex-row.justify-between.items-start.sm\:items-center.gap-4 {
    flex-direction: column;
  }
}

/* TOS */

.retailfix-tos-checkbox {
  box-sizing: border-box;
  padding: 0;
  margin-right: 10px;
  height: 18px;
  width: 18px;
  accent-color: #f9a316;
}

label.retailfix-tos-label {
  line-height: 1;
  font-size: 14px;
  color: #a8a29e;
  text-wrap: balance;
}

/* connected */
.bg-green-100 {
  color: #e21f26;
  font-size: 14px;
}

/* text-area */
.bg-white\/10.border.border-white\/15.rounded-2xl.p-5.relative.text-left.flex-1.flex.flex-col.justify-between {
  background-color: #ffffff;
}

textarea.text-xs.text-white.leading-relaxed.whitespace-pre-wrap.font-sans.w-full.h-full.min-h-\[180px\].bg-transparent.border-none.outline-none.resize-none.placeholder-white\/40 {
  color: #000000;
}

div#rf-tab-nav {
  font-size: 14px;
}

.absolute.top-1.right-1.bg-secondary-container.text-on-secondary-container.text-\[9px\].font-black.uppercase.px-1\.5.py-0\.5.rounded-full {
  color: #fff;
  font-weight: 500;
}

.text-ai-var {
  font-size: 14px;
}

.cover-w {
  width: calc(var(--spacing) * 25);
}

.cover-h {
  height: calc(var(--spacing) * 25);
}

/* Live Scraper cover image — larger on desktop only. 768px is this app's
   own desktop threshold, same as the search bar uses. */
@media (min-width: 768px) {
  .cover-w {
    width: 135px;
  }
  .cover-h {
    height: 135px;
  }
}

/* CUSTOM VARIABLES */

/* ── RetailFix Top Nav ───────────────────────────────────────────────────── */
.rf-topnav-logo {
  --rf-topnav-logo-img: url("https://retailfix.com/wp-content/uploads/2025/02/RF-Logo.webp");
}

.rf-topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: #f9a316;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15%;
  height: 65px;
  box-sizing: border-box;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@media (max-width: 768px) {
  .rf-topnav {
    padding: 0 1.25rem;
  }
}

.rf-topnav-logo {
  width: 65px;
  height: 65px;
  background-image: var(--rf-topnav-logo-img, none);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center left;
  flex-shrink: 0;
}

.rf-topnav-user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}

.rf-topnav-logout {
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  color: #fff;
  white-space: nowrap;
}

.rf-topnav-logout:hover {
  text-decoration: underline;
}

.rf-topnav-email {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

.bg-brand-bg {
  padding-top: 56px;
}

/* Password visibility toggle */
.rf-pw-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.rf-pw-wrap .rf-auth-input {
  flex: 1;
  padding-right: 2.5rem;
}
.rf-pw-eye {
  position: absolute;
  right: 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
  line-height: 1;
  color: #888;
  display: flex;
  align-items: center;
}

/* Targeting Details: Variant/Tone/Length open a small floating menu, same
   behaviour as the connected-scrapes dropdown. Each trigger gets its own
   position:relative wrapper so its menu anchors under itself. */
.rf-target-panel {
  position: relative;
}
.rf-target-trigger-wrap {
  position: relative;
  display: block;
}
.rf-target-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
}
.rf-target-chevron {
  flex-shrink: 0;
}
.rf-target-flyout {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 2px;
  width: max-content;
  min-width: 170px;
  max-width: 320px;
  max-height: 60vh;
  overflow-y: auto;
  z-index: 30;
}
/* Pill-triggered History flyout only — the other rf-target-flyout uses
   (Variant/Tone/Length) stay left-aligned to their own trigger as
   before; this one centers under the pill specifically. */
.rf-target-flyout-centered {
  left: 50%;
  transform: translateX(-50%);
}
.rf-draft-bar .rf-target-flyout-centered {
  left: 0;
  right: auto;
  transform: none;
  margin-top: 8px;
}

/* AI Creator Options icon — pulsing glow up to solid white. Plain CSS, not
   Tailwind, layered on top of the existing animate-pulse opacity animation. */
@keyframes rf-icon-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0));
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 1));
  }
}
.rf-icon-glow {
  animation: rf-icon-glow 2s ease-in-out infinite;
}

/* Desktop: two independent-height columns, the left setting the row height
   and the right stretching to match. Mobile: the column wrappers become
   display:contents so their children fall into one ordered flex column. */
.rf-cols-wrap {
  display: grid;
  /* Photos narrower, so the caption panel keeps its one-row layout. */
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  gap: 2rem;
}
.rf-col-left {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}
.rf-col-right {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}
/* Let the Visual Assets card shrink with its column: "Add from library"
   drops under the post strip instead of holding the column wide. */
#rf-visual-assets {
  min-width: 0;
}
#rf-visual-assets .border-b.pb-3.flex {
  flex-wrap: wrap;
}
/* Beside the post strip, "Add from library" sits at the right end of the
   row; once it wraps under the strip it sits on the left, as on a phone. */
@media (min-width: 640px) {
  #rf-visual-assets .border-b.pb-3.flex > .rf-post-strip {
    margin-right: auto;
  }
  #rf-visual-assets .border-b.pb-3.flex > .rf-post-strip-add {
    margin-left: 0;
  }
}
@media (max-width: 767px) {
  .rf-tab-panel-mobile-px {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}
/* One column below 900px; two columns are too narrow there. */
@media (max-width: 899.98px) {
  .rf-cols-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  .rf-col-left,
  .rf-col-right {
    display: contents;
  }
  .rf-order-1 {
    order: 1;
  }
  .rf-order-2 {
    order: 2;
  }
  .rf-order-3 {
    order: 3;
  }
  .rf-order-4 {
    order: 4;
  }
  .rf-order-5 {
    order: 5;
  }
  .rf-post-textarea {
    height: auto !important;
    flex: 1 1 auto !important;
  }
}

/* Load More tab — desktop's fixed "calc(50% - 335px)" left offset can
   go negative or push off-screen on a narrow mobile width. Mobile pins
   it to the actual left edge instead, always. */
@media (max-width: 767px) {
  .rf-load-more-tab {
    left: 12px !important;
  }
}

/* Room under the shared footer so the Load More tab doesn't cover it. */
body .rf-footer {
  padding-bottom: 72px;
}

/* Search bar row. Only the middle strip scrolls horizontally, via
   .rf-search-scroll-area, not the row itself: overflow-x on the row forces
   overflow-y to compute as auto, which clips anything overflowing.
   Unconditional rather than mobile-only — a tablet in landscape is wider
   than any sensible breakpoint yet still narrow enough for the chips to
   overflow, and on a wide screen there is nothing to scroll, so it costs
   nothing there. */
.rf-search-scroll-area {
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rf-search-scroll-area::-webkit-scrollbar {
  display: none;
}

/* Search bar container — px-6 (24px) is the desktop side padding;
   mobile gets roughly half that. */
@media (max-width: 767px) {
  .rf-search-bar-row {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ── Image Lightbox — full-size popup for gallery thumbnails ─────────────
   Safe-area aware for iOS. Closes on backdrop click, the X, or Escape. */
.rf-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  box-sizing: border-box;
  cursor: pointer;
  animation: rf-lightbox-fade 0.15s ease-out;
}
@keyframes rf-lightbox-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.rf-lightbox-img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  cursor: default;
}
.rf-lightbox-close {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 301;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.rf-lightbox-close:hover {
  background: rgba(0, 0, 0, 0.8);
}
.rf-lightbox-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 301;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.rf-lightbox-arrow:hover {
  background: rgba(0, 0, 0, 0.75);
}
.rf-lightbox-arrow-prev {
  left: max(16px, env(safe-area-inset-left));
}
.rf-lightbox-arrow-next {
  right: max(16px, env(safe-area-inset-right));
}

/* Lightbox action buttons. Same look as the thumbnail-corner buttons but
 * sized to the lightbox's own controls. Bottom-center, clear of Close and
 * the arrows. */
.rf-lightbox-actions {
  position: fixed;
  bottom: max(56px, calc(env(safe-area-inset-bottom) + 40px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 301;
  display: flex;
  gap: 12px;
}
.rf-lightbox-action {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.rf-lightbox-action:hover {
  background: rgba(0, 0, 0, 0.8);
}
.rf-lightbox-action-danger:hover {
  background: #b91c1c;
}
.rf-lightbox-action-active {
  background: var(--color-primary, #bb0016);
}
.rf-lightbox-action-active:hover {
  background: var(--color-primary, #bb0016);
}
.rf-lightbox-conn-wrap {
  position: relative;
  display: inline-flex;
}
.rf-lightbox-conn-menu {
  position: absolute;
  top: auto;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0;
  margin-bottom: 10px;
  min-width: 220px;
  max-width: min(360px, calc(100vw - 32px));
}

/* Search box placeholders. The `placeholder:` variant isn't in the Tailwind
 * build, so this is a plain rule. */
.rf-search-input {
  outline: none;
}
.rf-search-input::placeholder {
  color: var(--color-on-surface-variant);
}

/* flex-shrink-0 — not in the Tailwind build (only .flex-shrink was
 * compiled). Matches Tailwind's own output, so a rebuild is a no-op. */
.flex-shrink-0 {
  flex-shrink: 0;
}

/* min-w-0 — a flex item's default min-width is its intrinsic content width,
 * which flex-1 doesn't override, so a long placeholder pushed the clear
 * button off-card on mobile. Not in the Tailwind build. */
.min-w-0 {
  min-width: 0;
}

/* Recent Scrapes card — posting history badge, summary, and flip-to-back
 * view. Hand-written; none of it exists in the Tailwind build. */

/* Replaces transition-all. Must not include min-height or transform:
 * flipping locks min-height to the front's measured height, and
 * transitioning it shoves the card below up and back down. */
.rf-card-transition {
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

/* Star badge — top-right corner of the cover image, only shown at 5+ posts */
.rf-star-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #f9a316;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

/* "Draft" pill — shown on the favicon row when a scrape has never been posted */
.rf-post-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 9px;
  border-radius: 999px;
}
.rf-post-pill-draft {
  background: var(--color-surface-container-low, #f5f0ee);
  color: var(--color-on-surface-variant, #5c3f3d);
}

/* Front-of-card post summary — date + platform icon row, clickable */
.rf-post-summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--color-surface-container-low, #f5f0ee);
  transition: background 0.15s;
}
.rf-post-summary:hover {
  background: var(--color-outline-variant, #e6bdb9);
}
.rf-post-date {
  font-size: 11px;
  font-weight: 800;
  color: var(--color-on-surface-variant, #5c3f3d);
  white-space: nowrap;
}
.rf-post-icons {
  display: flex;
  align-items: center;
  gap: 4px;
}
.rf-post-icon {
  display: flex;
  color: var(--color-primary, #bb0016);
}
.rf-post-viewall {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  color: var(--color-primary, #bb0016);
  cursor: pointer;
  background: none;
  border: none;
  padding: 2px 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Flip-back button on the card's back face */
.rf-flip-back-btn {
  position: relative;
  color: var(--color-on-surface-variant, #5c3f3d);
  cursor: pointer;
  background: var(--color-surface-container-low, #f5f0ee);
  border: none;
  border-radius: 999px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background 0.15s,
    color 0.15s;
}
.rf-flip-back-btn:hover {
  background: var(--color-outline-variant, #e6bdb9);
  color: var(--color-primary, #bb0016);
}

/* Back-face posting history list */
.rf-post-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 380px;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #e6bdb9 transparent;
}
/* Chrome/Safari/Edge — thin, rounded, subtle, matching the app's own
   outline-variant color rather than the default chunky OS scrollbar. */
.rf-post-history-list::-webkit-scrollbar {
  width: 6px;
}
.rf-post-history-list::-webkit-scrollbar-track {
  background: transparent;
}
.rf-post-history-list::-webkit-scrollbar-thumb {
  background-color: #e6bdb9;
  border-radius: 999px;
}
.rf-post-history-list::-webkit-scrollbar-thumb:hover {
  background-color: #bb0016;
}
.rf-post-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--color-surface-container-low, #f5f0ee);
  cursor: pointer;
  transition: background 0.15s;
}
.rf-post-history-row:hover {
  background: var(--color-outline-variant, #e6bdb9);
}

/* Flip flourish: an opacity dip through a Y-axis tilt rather than a true
 * 3D transform, which would need a fixed card height. Two class names so
 * the animation replays on every flip. */
@keyframes rf-card-flip-flourish {
  0% {
    transform: perspective(1000px) rotateY(0deg);
    opacity: 1;
  }
  50% {
    transform: perspective(1000px) rotateY(-5deg);
    opacity: 0.65;
  }
  100% {
    transform: perspective(1000px) rotateY(0deg);
    opacity: 1;
  }
}
.rf-flip-anim-front,
.rf-flip-anim-back {
  animation: rf-card-flip-flourish 0.45s ease-in-out;
}

/* Post To buttons: 3x2 up to 768px, then a row of 6. Tailwind's lg: is
 * 1024px, which would leave 768-1023px at 3x2. */
.rf-post-target-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .rf-post-target-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .rf-post-target-grid > button {
    padding-left: 6px;
    padding-right: 6px;
  }
}

/* Editable Suggested Post textarea scrollbar, matching the Visual Assets
 * grid's. Unscoped by media query — the min-height applies everywhere. */
.rf-suggested-scroll {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-outline-variant, #e6bdb9) transparent;
  -webkit-appearance: none;
  appearance: none;
  /* .rf-topnav is position:fixed at 65px. Without this, native
   * scroll-into-view on focus puts the textarea's top edge under it. */
  scroll-margin-top: 65px;
}
.rf-suggested-scroll:focus {
  outline: none;
  box-shadow: none;
  border: none;
}
.rf-suggested-scroll::-webkit-scrollbar {
  width: 6px;
}
.rf-suggested-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.rf-suggested-scroll::-webkit-scrollbar-thumb {
  background: var(--color-outline-variant, #e6bdb9);
  border-radius: 999px;
}
.rf-suggested-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary, #bb0016);
}

/* Visual Assets Extracted — floor height at all breakpoints, matching
 * the Editable Suggested Post container alongside it. */
#rf-visual-assets {
  min-height: 450px;
}

/* Visual Assets Extracted: capped height with internal scroll. Only the
 * grid scrolls, via a flex chain, so image tooltips aren't clipped. */
#rf-visual-assets {
  max-height: 350px;
}
#rf-visual-assets > div {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
#rf-visual-assets .rf-scraper-grid {
  flex: 1;
  min-height: 0;
  align-content: start;
  overflow-y: auto;
  padding: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-outline-variant, #e6bdb9) transparent;
}
#rf-visual-assets .rf-scraper-grid::-webkit-scrollbar {
  width: 6px;
}
/* Above the photos of a post from someone else's website. */
#rf-visual-assets .rf-photo-rights {
  flex: none;
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-on-surface-variant);
  text-wrap: balance;
}
#rf-visual-assets .rf-scraper-grid::-webkit-scrollbar-track {
  background: transparent;
}
#rf-visual-assets .rf-scraper-grid::-webkit-scrollbar-thumb {
  background: var(--color-outline-variant, #e6bdb9);
  border-radius: 999px;
}
#rf-visual-assets .rf-scraper-grid::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary, #bb0016);
}

/* Connected-scrapes icon and menu. Both share a position:relative wrapper
 * and the menu is absolute against that. Still clips at the grid's edge. */
.rf-grid-conn-wrap {
  display: inline-flex;
}
.rf-grid-conn-menu {
  position: absolute;
  top: 100%;
  margin-top: 4px;
  width: max-content;
  max-width: 400px;
}
.rf-grid-conn-menu-left {
  left: 0;
}
.rf-grid-conn-menu-right {
  right: 0;
}
.rf-grid-conn-menu-center {
  left: 50%;
  transform: translateX(-50%);
}

/* lucide's calendar glyph sits low in its viewBox; nudged up to align with
 * the "Post To" text. Scoped so the other calendar icons stay as they are. */
.rf-target-trigger svg.lucide.lucide-calendar {
  margin-top: -5px;
}
.flagship {
  background: linear-gradient(
    110deg,
    #bb0016 0%,
    #e1272b 55%,
    #fea121 100%
  );
  cursor: pointer;
  color: #fff;
  border-radius: 24px;
  padding: 48px 44px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}
/* Hovering either flagship-left or flagship-right lifts the whole box
   together — this is one unified card visually, not two — since :hover on
   a child element also matches its ancestors, no split-side logic needed. */
.flagship:hover {
  box-shadow: 0 14px 34px #bb001640;
}
/* Click zones covering all of .flagship including its padding, which the
 * inner content boxes don't reach. z-index:0 keeps them behind the real
 * content, so they only catch clicks falling through empty space. */
.flagship-click-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
}
.flagship-click-zone-left {
  left: 0;
  right: 50%;
}
.flagship-click-zone-right {
  left: 50%;
  right: 0;
}
.flagship svg.waves {
  opacity: 0.3;
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.flagship-inner {
  z-index: 1;
  justify-content: center;
  align-items: center;
  gap: 56px;
  display: flex;
  position: relative;
}
.flagship-left {
  max-width: 600px;
}
.flagship-badge {
  background: #ffffff2e;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 84px;
  height: 84px;
  margin-bottom: 20px;
  font-size: 36px;
  display: flex;
}
.eyebrow-tag {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: #fff3;
  border-radius: 999px;
  margin-bottom: 16px;
  padding: 5px 14px;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-block;
}
.flagship h2 {
  font-family: "Dongle", sans-serif;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 20px;
  padding-top: 14px;
  font-size: 52px;
  font-weight: 700;
  line-height: 0.5;
}
.flagship p.desc {
  color: #ffffffeb;
  max-width: 500px;
  margin-bottom: 26px;
  font-size: 15px;
  line-height: 1.6;
}
.flagship-right {
  text-align: center;
  flex-shrink: 0;
  max-width: 375px;
}
.flagship-price {
  font-family: var(--font-mono);
  color: #ffffffbf;
  margin-top: 14px;
  font-size: 13px;
}
.flagship-price-list {
  min-width: 220px;
}
.fp-row {
  color: #ffffffd9;
  border-bottom: 1px solid #ffffff26;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 0;
  font-size: 13.5px;
  display: flex;
}
.fp-row span:last-child {
  font-family: var(--font-mono);
  color: #fff;
  font-weight: 700;
}
.fp-bundle {
  color: #fff;
  border-top: 1.5px solid #fff6;
  border-bottom: none;
  margin-top: 4px;
  padding-top: 12px;
  font-size: 15px;
  font-weight: 800;
}
.fp-bundle span:last-child {
  font-size: 17px;
}
.fp-save {
  text-align: right;
  font-family: var(--font-mono);
  color: #ffffffbf;
  margin-top: 2px;
  font-size: 11.5px;
}
/* Two uneven gusts per 13s cycle rather than a steady tick, so the loop is
 * hard to spot. transform-origin sits at the tag's point. Rotation only;
 * the shadow animation lives on .discount-sticker-anchor. */
/* Wind. Each property is a sine at its own frequency under a Hann envelope,
   sampled every 1%, so a gust eases in from stillness and back out. The
   differing frequencies keep the four properties out of step. */
@keyframes rf-sticker-sway {
  0% {
    transform: perspective(700px) translate(0.00px, 0.00px) rotate(55.00deg) rotateX(0.00deg) rotateY(0.00deg);
  }
  1% {
    transform: perspective(700px) translate(0.01px, 0.01px) rotate(55.03deg) rotateX(0.08deg) rotateY(0.04deg);
  }
  2% {
    transform: perspective(700px) translate(0.08px, 0.09px) rotate(55.23deg) rotateX(0.59deg) rotateY(0.32deg);
  }
  3% {
    transform: perspective(700px) translate(0.25px, 0.24px) rotate(55.67deg) rotateX(1.78deg) rotateY(1.00deg);
  }
  4% {
    transform: perspective(700px) translate(0.50px, 0.43px) rotate(56.29deg) rotateX(3.63deg) rotateY(2.13deg);
  }
  5% {
    transform: perspective(700px) translate(0.77px, 0.55px) rotate(56.88deg) rotateX(5.80deg) rotateY(3.62deg);
  }
  6% {
    transform: perspective(700px) translate(0.98px, 0.50px) rotate(57.17deg) rotateX(7.69deg) rotateY(5.24deg);
  }
  7% {
    transform: perspective(700px) translate(1.02px, 0.20px) rotate(56.91deg) rotateX(8.63deg) rotateY(6.67deg);
  }
  8% {
    transform: perspective(700px) translate(0.82px, -0.32px) rotate(55.97deg) rotateX(8.08deg) rotateY(7.60deg);
  }
  9% {
    transform: perspective(700px) translate(0.38px, -0.97px) rotate(54.43deg) rotateX(5.79deg) rotateY(7.74deg);
  }
  10% {
    transform: perspective(700px) translate(-0.25px, -1.55px) rotate(52.56deg) rotateX(1.90deg) rotateY(6.96deg);
  }
  11% {
    transform: perspective(700px) translate(-0.98px, -1.88px) rotate(50.77deg) rotateX(-3.06deg) rotateY(5.26deg);
  }
  12% {
    transform: perspective(700px) translate(-1.65px, -1.84px) rotate(49.47deg) rotateX(-8.24deg) rotateY(2.83deg);
  }
  13% {
    transform: perspective(700px) translate(-2.14px, -1.41px) rotate(49.00deg) rotateX(-12.73deg) rotateY(0.00deg);
  }
  14% {
    transform: perspective(700px) translate(-2.34px, -0.70px) rotate(49.47deg) rotateX(-15.71deg) rotateY(-2.83deg);
  }
  15% {
    transform: perspective(700px) translate(-2.23px, 0.11px) rotate(50.77deg) rotateX(-16.69deg) rotateY(-5.26deg);
  }
  16% {
    transform: perspective(700px) translate(-1.83px, 0.81px) rotate(52.56deg) rotateX(-15.62deg) rotateY(-6.96deg);
  }
  17% {
    transform: perspective(700px) translate(-1.26px, 1.23px) rotate(54.43deg) rotateX(-12.87deg) rotateY(-7.74deg);
  }
  18% {
    transform: perspective(700px) translate(-0.65px, 1.32px) rotate(55.97deg) rotateX(-9.13deg) rotateY(-7.60deg);
  }
  19% {
    transform: perspective(700px) translate(-0.11px, 1.10px) rotate(56.91deg) rotateX(-5.22deg) rotateY(-6.67deg);
  }
  20% {
    transform: perspective(700px) translate(0.25px, 0.72px) rotate(57.17deg) rotateX(-1.89deg) rotateY(-5.24deg);
  }
  21% {
    transform: perspective(700px) translate(0.42px, 0.33px) rotate(56.88deg) rotateX(0.35deg) rotateY(-3.62deg);
  }
  22% {
    transform: perspective(700px) translate(0.40px, 0.05px) rotate(56.29deg) rotateX(1.38deg) rotateY(-2.13deg);
  }
  23% {
    transform: perspective(700px) translate(0.28px, -0.07px) rotate(55.67deg) rotateX(1.40deg) rotateY(-1.00deg);
  }
  24% {
    transform: perspective(700px) translate(0.14px, -0.08px) rotate(55.23deg) rotateX(0.85deg) rotateY(-0.32deg);
  }
  25% {
    transform: perspective(700px) translate(0.03px, -0.03px) rotate(55.03deg) rotateX(0.25deg) rotateY(-0.04deg);
  }
  26% {
    transform: perspective(700px) translate(0.00px, -0.00px) rotate(55.00deg) rotateX(0.00deg) rotateY(-0.00deg);
  }
  56% {
    transform: perspective(700px) translate(-0.00px, 0.00px) rotate(55.00deg) rotateX(-0.00deg) rotateY(-0.00deg);
  }
  57% {
    transform: perspective(700px) translate(-0.01px, 0.01px) rotate(54.98deg) rotateX(-0.04deg) rotateY(-0.02deg);
  }
  58% {
    transform: perspective(700px) translate(-0.05px, 0.05px) rotate(54.87deg) rotateX(-0.32deg) rotateY(-0.17deg);
  }
  59% {
    transform: perspective(700px) translate(-0.14px, 0.14px) rotate(54.61deg) rotateX(-1.02deg) rotateY(-0.56deg);
  }
  60% {
    transform: perspective(700px) translate(-0.31px, 0.29px) rotate(54.19deg) rotateX(-2.19deg) rotateY(-1.24deg);
  }
  61% {
    transform: perspective(700px) translate(-0.52px, 0.44px) rotate(53.67deg) rotateX(-3.77deg) rotateY(-2.22deg);
  }
  62% {
    transform: perspective(700px) translate(-0.74px, 0.54px) rotate(53.18deg) rotateX(-5.53deg) rotateY(-3.42deg);
  }
  63% {
    transform: perspective(700px) translate(-0.93px, 0.54px) rotate(52.87deg) rotateX(-7.17deg) rotateY(-4.74deg);
  }
  64% {
    transform: perspective(700px) translate(-1.02px, 0.38px) rotate(52.88deg) rotateX(-8.31deg) rotateY(-6.00deg);
  }
  65% {
    transform: perspective(700px) translate(-0.98px, 0.06px) rotate(53.31deg) rotateX(-8.64deg) rotateY(-7.03deg);
  }
  66% {
    transform: perspective(700px) translate(-0.78px, -0.40px) rotate(54.19deg) rotateX(-7.89deg) rotateY(-7.66deg);
  }
  67% {
    transform: perspective(700px) translate(-0.42px, -0.93px) rotate(55.46deg) rotateX(-5.99deg) rotateY(-7.76deg);
  }
  68% {
    transform: perspective(700px) translate(0.08px, -1.42px) rotate(56.96deg) rotateX(-3.00deg) rotateY(-7.24deg);
  }
  69% {
    transform: perspective(700px) translate(0.66px, -1.78px) rotate(58.49deg) rotateX(0.81deg) rotateY(-6.11deg);
  }
  70% {
    transform: perspective(700px) translate(1.24px, -1.91px) rotate(59.80deg) rotateX(5.03deg) rotateY(-4.42deg);
  }
  71% {
    transform: perspective(700px) translate(1.76px, -1.79px) rotate(60.69deg) rotateX(9.16deg) rotateY(-2.32deg);
  }
  72% {
    transform: perspective(700px) translate(2.14px, -1.41px) rotate(61.00deg) rotateX(12.73deg) rotateY(-0.00deg);
  }
  73% {
    transform: perspective(700px) translate(2.33px, -0.85px) rotate(60.69deg) rotateX(15.29deg) rotateY(2.32deg);
  }
  74% {
    transform: perspective(700px) translate(2.30px, -0.19px) rotate(59.80deg) rotateX(16.57deg) rotateY(4.42deg);
  }
  75% {
    transform: perspective(700px) translate(2.08px, 0.45px) rotate(58.49deg) rotateX(16.46deg) rotateY(6.11deg);
  }
  76% {
    transform: perspective(700px) translate(1.70px, 0.95px) rotate(56.96deg) rotateX(15.07deg) rotateY(7.24deg);
  }
  77% {
    transform: perspective(700px) translate(1.23px, 1.25px) rotate(55.46deg) rotateX(12.66deg) rotateY(7.76deg);
  }
  78% {
    transform: perspective(700px) translate(0.72px, 1.32px) rotate(54.19deg) rotateX(9.62deg) rotateY(7.66deg);
  }
  79% {
    transform: perspective(700px) translate(0.27px, 1.19px) rotate(53.31deg) rotateX(6.41deg) rotateY(7.03deg);
  }
  80% {
    transform: perspective(700px) translate(-0.09px, 0.92px) rotate(52.88deg) rotateX(3.44deg) rotateY(6.00deg);
  }
  81% {
    transform: perspective(700px) translate(-0.33px, 0.60px) rotate(52.87deg) rotateX(1.06deg) rotateY(4.74deg);
  }
  82% {
    transform: perspective(700px) translate(-0.42px, 0.29px) rotate(53.18deg) rotateX(-0.54deg) rotateY(3.42deg);
  }
  83% {
    transform: perspective(700px) translate(-0.41px, 0.07px) rotate(53.67deg) rotateX(-1.35deg) rotateY(2.22deg);
  }
  84% {
    transform: perspective(700px) translate(-0.32px, -0.06px) rotate(54.19deg) rotateX(-1.46deg) rotateY(1.24deg);
  }
  85% {
    transform: perspective(700px) translate(-0.20px, -0.09px) rotate(54.61deg) rotateX(-1.12deg) rotateY(0.56deg);
  }
  86% {
    transform: perspective(700px) translate(-0.09px, -0.06px) rotate(54.87deg) rotateX(-0.60deg) rotateY(0.17deg);
  }
  87% {
    transform: perspective(700px) translate(-0.02px, -0.02px) rotate(54.98deg) rotateX(-0.17deg) rotateY(0.02deg);
  }
  88% {
    transform: perspective(700px) translate(-0.00px, -0.00px) rotate(55.00deg) rotateX(-0.00deg) rotateY(0.00deg);
  }
  100% {
    transform: perspective(700px) translate(0.00px, 0.00px) rotate(55.00deg) rotateX(0.00deg) rotateY(0.00deg);
  }
}

@keyframes rf-sticker-shadow-sway {
  0% {
    filter: drop-shadow(0 6px 10px #00000085);
  }
  3% {
    filter: drop-shadow(-2px 7px 11px #00000085);
  }
  7% {
    filter: drop-shadow(3px 8px 12px #00000085);
  }
  11% {
    filter: drop-shadow(-1px 6px 10px #00000085);
  }
  15%,
  62% {
    filter: drop-shadow(0 6px 10px #00000085);
  }
  68% {
    filter: drop-shadow(4px 9px 13px #00000085);
  }
  74% {
    filter: drop-shadow(-2px 7px 11px #00000085);
  }
  79% {
    filter: drop-shadow(2px 8px 11px #00000085);
  }
  85%,
  100% {
    filter: drop-shadow(0 6px 10px #00000085);
  }
}
/* ── Advanced Search (Scheduled/Failed/Cancelled status, TM picker, date
   range) — Recent Scrapes and Asset Library both use these same classes. */
.rf-advanced-search-icon-btn {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  border: none;
  background: none;
  color: var(--color-on-surface-variant);
  cursor: pointer;
  transition: all 0.15s ease;
}
.rf-advanced-search-icon-btn:hover {
  background: var(--color-surface-container-low);
  color: var(--color-on-surface);
}
.rf-advanced-search-icon-btn-active {
  background: color-mix(in oklab, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
}
.rf-advanced-search-icon-btn-active:hover {
  background: color-mix(in oklab, var(--color-primary) 20%, transparent);
}
.rf-search-bar-row {
  margin-bottom: 20px !important;
}
.rf-advanced-search-panel {
  /* Two columns on desktop, filled down each column: Team Member / Date Range
     on the left, Platform / Post Status on the right. DOM order is the
     mobile order and grid-auto-flow: column reflows it. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  align-items: start;
  gap: 20px 32px;
  /* Floats over the page, so opening it never moves what's below. Its top
     stays where it would sit in the page, 20px under the bar, pulled up
     40px so it tucks under the bar and hangs from it. */
  position: absolute;
  z-index: 24;
  left: 2rem;
  right: 2rem;
  margin: -40px 0 0;
  background: rgb(255 255 255 / 90%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0 24px;
  border-radius: 0 0 16px 16px;
  border: 1px solid transparent;
  border-top: none;
  box-shadow: none;
  /* Closed by default, always mounted, so the transition has something to
     animate between. Every animated property shares one duration and easing. */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition:
    max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.rf-advanced-search-panel-open {
  /* Kept close to the panel's real height: an oversized cap finishes the clip
     early and then sits still. Mobile has its own taller value below. */
  max-height: min(70vh, 420px);
  overflow-y: auto;
  padding: 35px 24px 20px;
  border-color: var(--color-outline-variant);
  box-shadow:
    0 1px 2px rgb(0 0 0 / 5%),
    0 4px 14px #bb001612;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Under the filters once any is picked: how many match, and Clear all. It
   takes the row under the columns, the full width. */
.rf-adv-foot {
  grid-column: 1 / -1;
  grid-row-start: -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in oklab, var(--color-outline-variant) 60%, transparent);
  font-family: var(--font-sans, sans-serif);
  font-size: 13px;
  color: var(--color-on-surface-variant);
}
.rf-adv-foot button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--color-primary);
  cursor: pointer;
}
.rf-adv-foot button:hover {
  text-decoration: underline;
}
.rf-advanced-search-label {
  font-family: var(--font-sans, sans-serif);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-on-surface-variant);
  margin-bottom: 8px;
}
.rf-filter-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rf-filter-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans, sans-serif);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 9999px;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container-low);
  color: var(--color-on-surface-variant);
}
.rf-filter-toggle-btn:hover {
  border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
}
.rf-filter-tm-avatar {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  aspect-ratio: 1;
  border-radius: 9999px;
  font-family: var(--font-sans, sans-serif);
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: color-mix(in oklab, var(--color-primary) 20%, transparent);
  color: var(--color-primary);
}
.rf-filter-toggle-btn-active .rf-filter-tm-avatar {
  background: rgb(255 255 255 / 20%);
  color: inherit;
}
.rf-filter-tm-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.rf-include-mine-pill .rf-switch {
  margin-left: 4px;
  background: var(--color-outline-variant);
}
.rf-filter-toggle-btn-active.rf-include-mine-pill .rf-switch {
  background: rgb(255 255 255 / 35%);
}
.rf-filter-toggle-btn-active.rf-include-mine-pill .rf-switch:checked {
  background: #fff;
}
.rf-filter-toggle-btn-active.rf-include-mine-pill .rf-switch::after {
  background: var(--color-primary);
}

.rf-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in oklab, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
  font-family: var(--font-sans, sans-serif);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px 4px 14px !important;
  border-radius: 9999px;
  flex-shrink: 0;
}
.rf-filter-chip-remove {
  margin-right: 5px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
}
.rf-filter-chip-remove:hover {
  opacity: 0.7;
}
.rf-date-range-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rf-date-input {
  font-family: var(--font-sans, sans-serif);
  font-size: 12px;
  background: var(--color-surface-container-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: 9999px;
  padding: 6px 12px;
  color: var(--color-on-surface);
}
.rf-date-input-wrap {
  position: relative;
  display: inline-flex;
}
/* Stands in for native placeholder text on date inputs, which some mobile
   engines don't render. Hidden by default; a media query alone would leave
   the element rendering inline. */
.rf-date-input-label,
.rf-schedule-date-placeholder {
  display: none;
}
/* pointer:coarse rather than a width breakpoint: a large iPad in landscape
   exceeds any sensible cutoff while having the same placeholder gap. */
@media (pointer: coarse) {
  .rf-date-input-label {
    display: block;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-family: var(--font-sans, sans-serif);
    font-size: 12px;
    color: var(--color-on-surface-variant);
  }
  .rf-schedule-date-placeholder {
    display: block;
    position: absolute;
    left: 16px;
    top: 12px;
    pointer-events: none;
    font-family: var(--font-sans, sans-serif);
    font-size: 14px;
    color: var(--color-on-surface-variant);
  }
}
.rf-date-range-separator {
  font-family: var(--font-sans, sans-serif);
  font-size: 12px;
  color: var(--color-on-surface-variant);
}
.rf-date-range-clear {
  font-family: var(--font-sans, sans-serif);
  font-size: 12px;
  color: var(--color-on-surface-variant);
  cursor: pointer;
  background: none;
  border: none;
}
.rf-date-range-clear:hover {
  color: var(--color-on-surface);
}

/* Status dot on the Post Status filter pills. Only the dot is coloured;
   the pill itself is unchanged. */
.rf-filter-toggle-dot {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  flex-shrink: 0;
}
.rf-filter-toggle-dot-success {
  background: var(--color-emerald-600);
}
.rf-filter-toggle-dot-scheduled {
  background: var(--color-amber-600);
}
.rf-filter-toggle-dot-failed {
  background: var(--color-red-600);
}
.rf-filter-toggle-dot-cancelled {
  background: var(--color-on-surface-variant);
}
/* Hollow: Draft means nothing has been posted yet. */
.rf-filter-toggle-dot-draft {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--color-on-surface-variant);
}
.rf-filter-toggle-btn-active .rf-filter-toggle-dot-draft {
  box-shadow: inset 0 0 0 2px currentColor;
}
/* An active pill fills solid primary; the ring keeps the red and neutral
   dots legible against it. */
.rf-filter-toggle-btn-active .rf-filter-toggle-dot {
  box-shadow: 0 0 0 1.5px rgb(255 255 255 / 90%);
}

/* Badge marking an Asset Library card as a direct upload. Explicit rule
   rather than Tailwind utilities — this is a purged build. */
.rf-lib-badge {
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-on-background, #1c1b1b);
  background: var(--color-secondary-container, #fea121);
  border-radius: 9999px;
  padding: 2px 6px;
  white-space: nowrap;
}

.rf-adv-field {
  min-width: 0;
}
@media (max-width: 767px) {
  /* Single column, straight down in DOM order. */
  .rf-advanced-search-panel {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
  .rf-adv-foot {
    grid-row-start: auto;
  }
  /* Column placement is desktop-only — mobile stacks in DOM order exactly
     as it did before the Uploads column existed. */
  .rf-adv-col-a,
  .rf-adv-col-b,
  .rf-adv-col-c {
    grid-column: auto;
    grid-row: auto;
  }
  .rf-advanced-search-panel {
    left: 15px;
    right: 15px;
  }
  /* Taller here because the fields stack. */
  .rf-advanced-search-panel-open {
    max-height: min(70vh, 760px);
  }
}

/* Images tab only. Uploads gets its own middle column, sized to content, so
   the filter columns either side keep splitting the rest 1fr/1fr. */
@media (min-width: 768px) {
  .rf-advanced-search-panel:has(.rf-adv-col-b) {
    /* First two columns size to their content, so Uploads sits right
       beside Team Member / Date Range and gets pushed right on its own as
       the team grows. Platform / Post Status takes the remainder. */
    grid-template-columns: auto auto 1fr;
    /* dense, because these items have a definite column but an automatic
       row: without it the placement cursor has already passed row 1 by the
       time it reaches column 3, dropping Platform and Post Status a row. */
    grid-auto-flow: row dense;
  }
  .rf-adv-col-a {
    grid-column: 1;
  }
  .rf-adv-col-b {
    grid-column: 2;
    /* Spans both rows and pins to the top of the panel. */
    grid-row: 1 / span 2;
    align-self: start;
  }
  .rf-adv-col-c {
    grid-column: 3;
  }
}

/* Your posts. Team member down the left; beside it Date range then Post
   status, and Platform then Made from. Everything stays in place as the
   screen narrows: each part's buttons wrap onto more lines instead. On a
   phone it stacks: Team member, Date range, Platform, Made from, Post
   status. */
.rf-adv-posts .rf-adv-row {
  display: contents;
}
.rf-adv-posts .rf-adv-p-team { order: 1; }
.rf-adv-posts .rf-adv-p-date { order: 2; }
.rf-adv-posts .rf-adv-p-plat { order: 3; }
.rf-adv-posts .rf-adv-p-made { order: 4; }
.rf-adv-posts .rf-adv-p-status { order: 5; }
.rf-adv-posts .rf-adv-foot { order: 6; }
@media (min-width: 768px) {
  .rf-advanced-search-panel.rf-adv-posts {
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-auto-flow: row;
    gap: 20px 32px;
  }
  .rf-adv-posts .rf-adv-p-team {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .rf-adv-posts .rf-adv-p-team .rf-filter-toggle-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .rf-adv-posts .rf-adv-row {
    grid-column: -2;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 40px;
  }
  .rf-adv-posts .rf-adv-row > .rf-adv-field {
    flex: 0 1 auto;
  }
  /* The dates keep to one line; the buttons beside them wrap instead, down
     to two a line. */
  .rf-adv-posts .rf-adv-row > .rf-adv-p-date {
    flex-shrink: 0;
  }
  .rf-adv-posts .rf-adv-p-date .rf-date-range-row {
    flex-wrap: nowrap;
  }
  .rf-adv-posts .rf-adv-row > .rf-adv-p-status { min-width: 205px; }
  .rf-adv-posts .rf-adv-row > .rf-adv-p-plat { min-width: 295px; }
  .rf-adv-posts .rf-adv-row > .rf-adv-p-made { min-width: 160px; }
  .rf-advanced-search-panel.rf-adv-posts:not(:has(.rf-adv-p-team)) {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Only when a part can't fit beside the one before does it go under it. */
@media (min-width: 768px) and (max-width: 879px) {
  .rf-adv-posts .rf-adv-row {
    flex-wrap: wrap;
    row-gap: 20px;
  }
  .rf-adv-posts .rf-adv-row > .rf-adv-p-status { flex: 1 1 205px; }
  .rf-adv-posts .rf-adv-row > .rf-adv-p-plat { flex: 1 1 295px; }
  .rf-adv-posts .rf-adv-row > .rf-adv-p-made { flex: 1 1 160px; }
}
.rf-filter-made-icon {
  color: var(--color-primary);
}

/* Platform pills — same base as the status pills, with the platform's own
   glyph in place of the status dot. */
.rf-filter-platform-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.rf-filter-platform-icon-facebook {
  color: #1877f2;
}
.rf-filter-platform-icon-instagram {
  color: #e4405f;
}
.rf-filter-platform-icon-tiktok {
  color: #010101;
}
.rf-filter-platform-icon-geo {
  color: var(--color-primary);
}
/* Super Scrape star — same wrapper class as the platform glyphs, so it
   picks up their sizing, chip spacing and active-pill colour swap. */
.rf-filter-platform-icon-super {
  color: var(--color-amber-600);
}
/* On an active pill the fill is solid primary, so the brand colours would
   disappear into it — the glyph takes the pill's own text colour instead. */
.rf-filter-toggle-btn-active .rf-filter-platform-icon {
  color: inherit;
}
.rf-filter-chip .rf-filter-platform-icon {
  margin-right: 1px;
}

/* Shared pill toggle, ported from suite-styles.css — Suite and Content
   Studio are separate builds sharing no code. Styles the checkbox itself,
   so it stays focusable and accessible. */
.rf-switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 24px;
  margin: 0;
  border: none;
  border-radius: 9999px;
  background: var(--color-outline-variant);
  cursor: pointer;
  transition:
    background 0.18s ease,
    opacity 0.18s ease;
}
.rf-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px #00000040;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rf-switch:checked {
  background: var(--color-primary);
}
.rf-switch:checked::after {
  transform: translateX(18px);
}
.rf-switch:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.rf-switch-sm {
  width: 32px;
  height: 18px;
}
.rf-switch-sm::after {
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
}
.rf-switch-sm:checked::after {
  transform: translateX(14px);
}

/* One grid cell holding Post Status with the Uploads toggle beneath it, so
   the panel stays a 2x2 of filter fields. Placing the toggle as its own
   grid item added a third row and repacked the columns. */
.rf-adv-cell {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
/* Two fields side by side within one grid cell (Date Range + Uploads).
   Stacks on mobile, where there isn't room for both across. */
.rf-adv-cell-row {
  flex-direction: row;
  align-items: flex-start;
  gap: 28px;
  flex-wrap: wrap;
}
@media (max-width: 767px) {
  .rf-adv-cell-row {
    flex-direction: column;
    gap: 20px;
  }
}
.rf-adv-toggle-row {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-sans, sans-serif);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-on-surface-variant);
  cursor: pointer;
  padding: 4px 0;
}

/* Disabled action buttons. They carry cursor-pointer from their utility
   classes, so this overrides it; pointer-events:none also stops hover. */
.rf-action-btn:disabled {
  cursor: default;
  pointer-events: none;
}
/* Schedule and Post now sit in a span that carries the tooltip saying why
   they're greyed out, since a disabled button takes no hover. */
.rf-action-tip {
  position: relative;
  flex: 1 1 0%;
  display: flex;
  min-width: 0;
}

/* Remaining slots on the Asset Library upload tile. */
.rf-lib-tile-count {
  font-family: var(--font-mono, monospace);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-on-surface-variant);
  opacity: 0.75;
}
.rf-lib-tile-count-full {
  color: var(--color-primary);
  opacity: 1;
}

/* "Open Draft" on the Recent Scrape card. The class was on the button but
   had no rule, so the label wrapped to two lines when the row got tight. */
.rf-open-draft-btn {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Sales modal scrollbar — same treatment as the Visual Assets Extracted
   grid, so the two scrollable panels in the app match. */
/* Firefox only. Chrome ignores ::-webkit-scrollbar rules when
   scrollbar-width or scrollbar-color is set on the same element. */
@supports not selector(::-webkit-scrollbar) {
  .modal {
    scrollbar-width: thin;
    scrollbar-color: var(--color-outline-variant, #e6bdb9) transparent;
  }
}
@keyframes rf-scroll-hint-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* One stroke is 230ms down + 300ms back = 530ms, and the arrow only shows
   while the strokes are running, so the bob simply matches one stroke and
   repeats. Same easing as the JS, so the two move together. */
@keyframes rf-scroll-hint-bob {
  0% { transform: translateY(0); }
  43% { transform: translateY(7px); }
  100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .rf-scroll-hint,
  .rf-scroll-hint svg {
    animation: none;
  }
}

/* Wider on desktop — there's room, and the comparison table reads better
   with it. Mobile keeps the full-width behaviour above. */
@media (min-width: 620px) {
  .modal {
    max-width: 540px;
  }
}
/* ── AI Creator controls ──────────────────────────────────────────────────
   The sliders browse the variants already returned with the scrape. The two
   below the divider are generation settings; Regenerate spends a call. */
/* Second child of the flex row that starts with the 80px cover image. With
   no rule of its own it had no width, so the sliders' absolutely-positioned
   stops spilled back over the image. */
.rf-target-group {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  /* Clear of the 80px cover image on its left. */
  padding-left: 18px;
}
@media (max-width: 640px) {
  .rf-target-group {
    padding-left: 0;
  }
  .rf-ai-controls,
  .rf-ai-generate {
    grid-template-columns: minmax(0, 1fr);
  }

}

/* Slider, matching the toggles: recessed track, raised knob, same spring.
   Compact, so the label and value share one line above a short rail. */
.rf-ai-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Each side is one item now — its own legend plus its sliders — so the
     two rows the sliders used to occupy are gone. */
  grid-template-rows: min-content min-content min-content;
  gap: 0 38px;
  padding: 0;
  min-width: 0;
}
/* One rule across both columns, each half labelled — the same information
   as two separate legends at half the vertical cost. */
.rf-ai-legends {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 38px;
  margin-bottom: 6px;
}

/* The two sliders that browse what's already written. */
.rf-ai-browse {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-content: start;
  min-width: 0;
}
/* Thin rule with the instruction sitting under it. Deliberately small —
   this has to earn its place without pushing the textarea down. */
.rf-ai-legend {
  font-family: var(--font-sans, sans-serif);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  color: rgb(255 255 255 / 55%);
  border-top: 1px solid rgb(255 255 255 / 22%);
  padding-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The regenerate side, in the accent its own control uses. */
.rf-ai-legend-regen {
  color: #ffd9a0;
  border-top-color: rgb(255 217 160 / 45%);
}
/* Direct children only — the generation box below has .rf-ai-slider children
   of its own, and they belong to its grid, not this one. */
.rf-ai-controls > .rf-ai-slider {
  grid-column: 1;
  align-self: start;
}
/* Mobile keeps both columns, just tighter. Placed after the base rule
   rather than in the max-width:640px block, which sits earlier in the file
   where same-specificity rules after it would win. */
@media (max-width: 767px) {
  .rf-ai-controls {
    column-gap: 16px;
    padding-top: 17px;
  }
}
/* Desktop only: the numbered sliders carry the longer labels and are the
   ones people reach for first, so they get more of the width. Mobile is
   tight enough already and keeps the even split. */
@media (min-width: 768px) {
  .rf-ai-controls,
  .rf-ai-legends {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  }
}
/* Two columns but narrow ones. The image tiles go three to a row so they
   keep their size, and the cover sits above the sliders, which take the
   full width with the even split, as on a phone. */
/* Three photos to a row whenever the page has two columns. */
@media (min-width: 900px) {
  #rf-visual-assets .rf-scraper-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 900px) and (max-width: 1199.98px) {
  .rf-target-panel > .flex.flex-col.sm\:flex-row.items-start.sm\:items-center {
    flex-direction: column;
    align-items: flex-start;
  }
  .rf-target-group {
    padding-left: 0;
  }
  .rf-ai-controls,
  .rf-ai-legends {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.rf-ai-slider {
  min-width: 0;
}
.rf-ai-slider-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 5px;
}
/* Names the control, pushed to the right so the current value still reads
   first at the left edge. */
/* The control's name, set into the track behind the knob. */
.rf-ai-slider-name {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans, sans-serif);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  text-shadow: 0 1px 0 rgb(255 255 255 / 40%);
}
.rf-ai-slider-value {
  font-family: var(--font-sans, sans-serif);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rf-ai-slider-rail {
  position: relative;
  height: 26px;
  cursor: pointer;
  touch-action: none;
}
/* The whole track is a pill, like a toggle — not a line with dots on it. */
.rf-ai-slider-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgb(0 0 0 / 24%);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 28%);
}
/* Slides between left, middle and right inside the pill. */
.rf-ai-slider-knob {
  z-index: 2;
  position: absolute;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 2px 5px rgb(0 0 0 / 35%),
    inset 0 -1px 0 rgb(0 0 0 / 8%);
  /* Only a touch of overshoot. The 1.56 spring was fine over one stop but
     overshot noticeably across the full width. */
  transition: left 0.26s cubic-bezier(0.32, 1.12, 0.5, 1);
  pointer-events: none;
}
/* Faint markers showing where the positions are, under the knob. */
.rf-ai-slider-stop {
  z-index: 1;
  position: absolute;
  top: 3px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  pointer-events: none;
}
.rf-ai-slider-stop::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgb(255 255 255 / 38%);
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 20%);
  transition: opacity 0.2s ease;
}
/* The middle stop only. The rail's children are the track, the name, the
   knob, then the stops — so the middle of three is the fifth child, and
   :not(:last-child) keeps it off a two-stop slider where the fifth is the
   last one. */
.rf-ai-slider-stop:nth-child(5):not(:last-child)::before {
  border: 1px solid #000;
  box-sizing: border-box;
}
.rf-ai-slider-stop.is-active::before {
  opacity: 0;
}

/* Staged but not generated — the fill and knob warm up, nothing moves. */
.rf-ai-slider.is-staged .rf-ai-slider-knob {
  background: #ffd9a0;
}
.rf-ai-slider.is-staged .rf-ai-slider-value {
  color: #ffd9a0;
}

/* The two generation sliders, stacked in the right column. Marked by the
   coloured outline on their tracks in the same #ffd9a0 as the Regenerate
   link, rather than a box, so all four sliders are the same width. */
.rf-ai-generate {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* A little tighter than the 14px it was, to help pay for the legend. */
  gap: 10px;
}

/* Tone and Length only. The track is absolutely positioned with inset:0, so
   its border-box already fills the 26px rail — adding a border eats inward
   rather than growing the element, leaving every slider the same size. */
.rf-ai-generate .rf-ai-slider-track {
  border: 2px solid #ffd9a0;
}

/* Now a sibling of the box, not a child of it, so the box shrinks to just
   the two sliders. Height stays reserved here instead, so the link
   appearing doesn't push the rest of the panel down. */
.rf-ai-regen-slot {
  grid-column: 2;
  grid-row: 3;
  height: 16px;
  display: flex;
  align-items: center;
  /* Belongs to the box above it, so it sits tight against it. */
  margin-top: 0;
}
.rf-ai-regen {
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-sans, sans-serif);
  font-size: 12px;
  font-weight: 800;
  color: #ffd9a0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.rf-ai-regen.is-ready {
  opacity: 1;
  pointer-events: auto;
}
.rf-ai-regen:hover {
  color: #fff;
}
.rf-ai-regen:disabled {
  cursor: default;
  opacity: 0;
  pointer-events: none;
}

/* ── RetailFix Nearby price panel ────────────────────────────────────────────
   Opens under the Post To grid when Geo is selected. Same white-on-red
   treatment as the AI Creator controls it sits beside. */
/* A popover hanging off the button row rather than a block that pushes the
   rest of the panel down. Solid rather than translucent so it reads as
   sitting above the content. */
/* ── Product details ──────────────────────────────────────────────────────
   A modal, not a popover. The details are a small form and a popover hanging
   off a button never had the room for one — half of it was cut off on a
   laptop and the fields had to stack single file. */
/* ── What the shopper gets ────────────────────────────────────────────────
   Beside the modal, on the overlay — so nothing inside has to move to make
   room, and the modal keeps its own scrolling. It arrives when there's an
   offer to show and leaves when there isn't. */
.rf-offer-preview {
  flex-shrink: 0;
  width: 320px;
  opacity: 0;
  transform: translateX(24px) scale(0.96);
  pointer-events: none;
  /* Out of the layout while hidden, so the modal stays centred until there
     is something to sit beside it. */
  margin-right: -320px;
  transition:
    opacity 0.24s ease,
    transform 0.28s cubic-bezier(0.34, 1.3, 0.64, 1),
    margin-right 0.28s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.rf-offer-preview.is-shown {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
  margin-right: 22px;
}
.rf-offer-preview-cap {
  margin-bottom: 11px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
}
/* The scratch card as it looks once it has been scratched. */
.rf-offer-card {
  padding: 24px 22px;
  border-radius: 18px;
  text-align: center;
  color: #fff;
  background: linear-gradient(150deg, #8f0011, #d4001a);
  box-shadow: 0 14px 34px rgb(0 0 0 / 28%);
}
.rf-offer-eyebrow {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
}
.rf-offer-big {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  font-family: var(--font-display, inherit);
  font-size: 32px;
  font-weight: 800;
  line-height: 0.95;
}
/* Sized against the reward beside it, like the shopper's card. */
.rf-offer-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
}

.rf-offer-small {
  margin-top: 9px;
  font-size: 13px;
  font-weight: 700;
  opacity: 0.92;
}
.rf-offer-code {
  display: inline-block;
  margin-top: 15px;
  padding: 9px 16px;
  border-radius: 10px;
  background: #7a000c;
  border: 1px dashed rgb(255 255 255 / 45%);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.14em;
}
.rf-offer-note {
  margin-top: 11px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.72;
}
.rf-offer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.rf-offer-meta span {
  padding: 5px 12px;
  border-radius: 999px;
  background: #7a000c;
  font-size: 11.5px;
  font-weight: 800;
  color: #fff;
}
.rf-offer-foot {
  /* Above the card now, under the caption — it sets up what follows rather
     than explaining it after the fact. */
  margin: -4px 0 11px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
}

/* Two placements, one shown at a time. Beside the modal where there's room;
   at the foot of its own scroll where there isn't — stacking the overlay
   itself meant the modal and the card fought over the same scroll. */
.rf-offer-preview-inline {
  display: none;
}
@media (max-width: 900px) {
  .rf-offer-preview-beside {
    display: none;
  }
  .rf-offer-preview-inline {
    display: block;
    width: auto;
    margin: 0 0 4px;
    transform: translateY(-10px) scale(0.98);
    transition:
      opacity 0.24s ease,
      transform 0.28s cubic-bezier(0.34, 1.3, 0.64, 1),
      max-height 0.28s ease,
      margin 0.28s ease;
    max-height: 0;
    overflow: hidden;
  }
  .rf-offer-preview-inline.is-shown {
    transform: translateY(0) scale(1);
    max-height: 520px;
    margin: 22px 0 4px;
  }
  /* On the cream, so its two lines can't stay white. */
  .rf-offer-preview-inline .rf-offer-preview-cap,
  .rf-offer-preview-inline .rf-offer-foot {
    color: var(--color-on-background, #1c1b1b) !important;
  }
  /* No shadow inline: it lifts off the overlay's dark backdrop, but inside
     the modal it just smudges the cream under it. */
  .rf-offer-preview-inline .rf-offer-card {
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rf-offer-preview {
    transition: opacity 0.2s ease, margin-right 0.2s ease;
    transform: none;
  }
  .rf-offer-preview.is-shown {
    transform: none;
  }
}

.rf-geo-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  gap: 0;
  background: rgb(28 25 23 / 55%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: rf-geo-overlay-in 0.16s ease-out;
}
@keyframes rf-geo-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Stated outright, not scoped to an ancestor: this renders inside a red
   panel whose utility classes set white, and every attempt to beat that by
   nesting depended on where in the tree the modal happens to sit. */
.rf-geo-overlay,
.rf-geo-overlay
  *:not(.is-on):not(.is-on *):not(.rf-geo-price-save):not(.rf-offer-preview):not(
    .rf-offer-preview *
  ):not(.rf-sq-pick-note):not(.rf-sq-pick-name.is-empty):not(.rf-sq-pick-empty):not(.rf-sq-pick-clear) {
  color: var(--color-on-background, #1c1b1b) !important;
}
/* The preview is a red card sitting on the overlay, so it keeps its own
   white — the modal's ink rule would flatten it. */
.rf-offer-preview,
.rf-offer-preview * {
  color: #fff;
}
.rf-offer-preview .rf-offer-preview-cap,
.rf-offer-preview .rf-offer-foot {
  color: #fff;
}
.rf-geo-overlay .rf-geo-price-note,
.rf-geo-overlay label span,
.rf-geo-overlay .rf-geo-coupon-sub,
.rf-geo-overlay .rf-geo-coupon-label {
  color: var(--color-on-surface-variant, #5c3f3d) !important;
}
/* Anything filled with the brand red carries white type — the offer chips,
   the date chips, and the save button. Named together so a new one can't be
   missed the way the date chips were. */
.rf-geo-overlay .is-on,
.rf-geo-overlay .is-on *,
.rf-geo-overlay .rf-geo-price-save {
  color: #fff !important;
}
/* Except the mode toggle, which reads its selection as red on cream. */
.rf-geo-overlay .rf-geo-mode-opt.is-on,
.rf-geo-overlay .rf-geo-mode-opt.is-on * {
  color: var(--color-primary, #bb0016) !important;
}
.rf-geo-overlay input::placeholder {
  color: #a8a29e !important;
}

.rf-geo-price {
  /* The close button positions against this. */
  position: relative;
  /* Fallback for anything without dvh; the rule below wins where it's
     supported. */
  max-height: min(84vh, 760px);
  width: min(620px, 100%);
  max-height: min(84dvh, 760px);
  overflow-y: auto;
  padding: 26px 28px 28px;
  border-radius: 22px;
  background: var(--color-brand-bg, #fcf9f8);
  box-shadow: 0 24px 60px rgb(28 25 23 / 32%);
  animation: rf-geo-price-in 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Firefox has no ::-webkit-scrollbar, so it takes the thin bar instead. */
@supports not selector(::-webkit-scrollbar) {
  .rf-geo-price {
    scrollbar-width: thin;
    scrollbar-color: var(--color-outline-variant, #e6bdb9) transparent;
  }
}
/* The same treatment the sales modal uses. Padding can't do this — a
   scrollbar sits on the container's outer edge, outside the padding box —
   so the track is given a margin instead and stops short of both corners. */
.rf-geo-price::-webkit-scrollbar {
  width: 6px;
}
.rf-geo-price::-webkit-scrollbar-track {
  background: transparent;
  margin: 26px 0;
}
.rf-geo-price::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}
.rf-geo-price::-webkit-scrollbar-thumb {
  background: var(--color-outline-variant, #e6bdb9);
  border-radius: 999px;
}
.rf-geo-price::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary, #bb0016);
}
/* The toggle hangs off the RetailFix button, so it's measured from the grid
   that button sits in — its own wrapper, not the panel, whose padding made
   every offset a guess. The toggle is the grid's sibling, so right:0 is the
   grid's right edge and 100% is the grid's width. */
div:has(> .rf-post-target-grid) {
  position: relative;
}

@media (width<=560px) {
  .rf-geo-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .rf-geo-price {
    width: 100%;
    max-height: 88dvh;
    border-radius: 22px 22px 0 0;
    padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
    /* Rises rather than scaling from a point. */
    animation: rf-geo-price-up 0.24s cubic-bezier(0.32, 0.72, 0, 1);
  }
}
@keyframes rf-geo-price-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Little arrow pointing back up at the RetailFix button. */
@keyframes rf-geo-price-in {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rf-geo-price {
    animation: none;
  }
}

/* The price is scraped and can be wrong, so the note leads. */



/* Message | Product, sitting either side of the switch. The active side is
   solid, the other recedes, so the switch reads as picking between two
   things rather than turning one thing on. */
.rf-geo-posttype-opt {
  font-size: 12.5px;
  font-weight: 700;
  color: rgb(255 255 255 / 55%);
  transition: color 0.15s ease;
}
.rf-geo-posttype-opt.is-on {
  color: #fff;
  font-weight: 800;
}
/* Price and sale price share a row; brand takes the full width below. */
.rf-geo-price-fields label.rf-geo-price-wide {
  flex: 1 1 100%;
}
.rf-geo-price-fields label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-sans, sans-serif);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-on-surface-variant, #5c3f3d);
}
.rf-geo-price-fields input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #e6d8d5;
  border-radius: 12px;
  background: #fff;
  font-family: var(--font-mono, monospace);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-on-background, #1c1b1b);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.rf-geo-price-fields input::placeholder {
  color: #a8a29e;
  font-weight: 400;
}
.rf-geo-price-fields input:focus {
  outline: none;
  border-color: var(--color-primary, #bb0016);
  box-shadow: 0 0 0 3px rgb(187 0 22 / 10%);
}


/* "Added in the Library" / "Added to a post", under "Show your uploads". Inert
   and dimmed while the section itself is switched off. */
.rf-adv-subtoggles {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  margin-left: 4px;
  padding-left: 14px;
  border-left: 2px solid #f0dcd8;
  transition: opacity 0.2s ease;
}
.rf-adv-subtoggles.is-off {
  opacity: 0.4;
  pointer-events: none;
}
.rf-adv-subtoggles .rf-adv-toggle-row {
  gap: 8px;
}
/* The three Uploads switches line up on the right. */
.rf-adv-col-b > .rf-adv-toggle-row {
  max-width: 260px;
}
.rf-adv-col-b .rf-adv-subtoggles {
  box-sizing: border-box;
  max-width: 256px;
}
.rf-adv-col-b .rf-adv-toggle-row {
  justify-content: space-between;
}

/**
 * Camera button on the upload tiles. A dedicated capture="environment"
 * input sits behind it: one input can't offer both, since capture drops the
 * library and the plain accept="image/*" sheet doesn't reliably list a
 * camera. Sits in the tile's top-right corner.
 */
/* Wraps an upload tile so the camera button sits over its corner while
   being a sibling of the tile rather than a child. */
.rf-upload-tile-wrap {
  position: relative;
}

.rf-camera-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: var(--color-surface-container-low, #f5f0ee);
  color: var(--color-on-surface-variant, #78716c);
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.rf-camera-btn:hover {
  background: var(--color-primary, #bb0016);
  color: #fff;
}

/* Bigger on mobile — it's the primary way a phone user gets a photo in,
   so it needs to read as a control rather than a detail. The SVG carries
   width/height attributes, so both are overridden here. */
@media (max-width: 767px) {
  .rf-camera-btn {
    top: 8px;
    right: 8px;
    width: 38px;
    height: 38px;
  }
  .rf-camera-btn svg {
    width: 20px;
    height: 20px;
  }
}

/* Camera button tooltip, flipped below and right-aligned because the tiles
   are overflow-hidden and the button sits near the tile's right edge. */
.rf-camera-btn[data-tooltip]:hover::after {
  left: auto;
  right: 0;
  transform: none;
}

/* Draft pill and its History flyout, above the panel that follows it. */
/* A tab centred on the card's top edge. Closed it is a handle; open it
   pulls a panel down over the card. */
/* The handle: the icon and nothing else, inside the card's top-right. */
.rf-draft-tab-layer {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 60;
}
.rf-draft-tab {
  display: block;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--color-primary, #bb0016);
  cursor: pointer;
  line-height: 0;
}
.rf-draft-tab:hover {
  opacity: 0.75;
}
.rf-draft-grip {
  display: block;
  width: 24px;
  height: 18px;
  transition: transform 0.22s ease;
}
.rf-draft-grip-open {
  transform: rotate(180deg);
}

/* History — the site's standard modal (.overlay / .modal / .modal-head from
   sales-modal.css). Selectors are doubled up so they hold whichever of the
   two stylesheets loads last. */
.overlay.rf-history-overlay {
  z-index: 10000;
}
.modal.rf-history-modal {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 20px;
  animation: rf-history-modal-in 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes rf-history-modal-in {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
}
@media (prefers-reduced-motion: reduce) {
  .modal.rf-history-modal {
    animation: none;
  }
}
/* "Posting History" — Recent Scrape card back and the History modal.
   !important because the site's global heading styles also reach the h4. */
.rf-posting-history-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: "Dongle", sans-serif !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  line-height: 0.6 !important;
  color: #e94826 !important;
}
.rf-posting-history-title svg {
  flex-shrink: 0;
}
/* The title's Dongle would otherwise carry into its icon's tooltip. */
.rf-posting-history-title [data-tooltip]::after {
  font-family: var(--font-sans, "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif);
}
.rf-history-modal .rf-posting-history-title {
  font-size: 44px !important;
  margin-right: auto;
}
.rf-history-modal .modal-head {
  flex: none;
  margin-bottom: 14px;
}
/* The 3-line triangle takes the close button's place, as it looks on the card. */
.rf-history-modal .rf-history-grip {
  align-self: center;
}
.rf-history-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.rf-history-panel .rf-post-history-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  max-height: none;
  padding: 0 18px;
}
.rf-history-panel > .text-xs {
  padding: 0 18px;
  font-size: 13px;
}
@supports not selector(::-webkit-scrollbar) {
  .rf-history-panel .rf-post-history-list {
    scrollbar-width: thin;
    scrollbar-color: var(--color-outline-variant, #e6bdb9) transparent;
  }
}
.rf-history-panel .rf-post-history-list::-webkit-scrollbar {
  width: 6px;
}
.rf-history-panel .rf-post-history-list::-webkit-scrollbar-track {
  background: transparent;
}
.rf-history-panel .rf-post-history-list::-webkit-scrollbar-button {
  display: none;
  height: 0;
}
.rf-history-panel .rf-post-history-list::-webkit-scrollbar-thumb {
  background: var(--color-outline-variant, #e6bdb9);
  border-radius: 999px;
}
.rf-history-panel .rf-post-history-list::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary, #bb0016);
}
/* Larger rows on desktop only. On a phone the rows keep the Recent Scrape
   card's sizes so a full row fits on one line. */
@media (min-width: 768px) {
  .rf-history-panel .rf-post-history-row {
    padding: 16px 16px;
    border-radius: 12px;
    font-size: 15px;
  }
  .rf-history-panel .rf-post-date {
    font-size: 15px;
  }
  .rf-history-panel .rf-post-views {
    font-size: 13px;
  }
  .rf-history-panel .rf-post-history-row .font-bold {
    font-size: 15px;
  }
  .rf-history-panel .rf-post-icon {
    width: 22px;
    height: 22px;
  }
  .rf-history-panel .rf-post-icon svg,
  .rf-history-panel .rf-post-icon img {
    width: 18px;
    height: 18px;
  }
}
.rf-history-panel .rf-post-history-row:hover {
  background: #faf7f6;
}

/* Studio layers. Page chrome (top bar 1000, preview 1050-1060) sits below
   every modal; full-screen viewers sit above a modal they're opened from;
   toasts above both. Menus and hover tips keep their own higher values. */
.rf-modal-layer {
  z-index: 10000;
}
.rf-toast-layer {
  z-index: 10200;
}

/* Full screen on a phone. */
@media (max-width: 767px) {
  .overlay.rf-history-overlay {
    padding: 0;
  }
  .modal.rf-history-modal {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    padding: calc(24px + env(safe-area-inset-top)) 14px
      calc(20px + env(safe-area-inset-bottom));
  }
  /* The handle and the stamp beside it, 5px higher on a phone. */
  .rf-draft-tab-layer {
    top: 9px;
  }
}

/* Content Studio's own classes, applied through template literals. */
.rf-filter-toggle-btn-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

.rf-include-mine-pill {
  margin-top: 10px;
  padding-right: 5px;
  gap: 8px;
}

/**
 * Any / All match mode. Sits top-right of the advanced search panel on
 * desktop; first in the flow on mobile, where a corner position has nothing
 * to sit against.
 */
.rf-match-mode {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rf-match-mode-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-on-surface-variant, #78716c);
}
.rf-match-mode-pills {
  /* No taller than the sliders button beside it, so the search bar keeps
     its height when Match appears. */
  display: inline-flex;
  gap: 3px;
  padding: 2px;
  border-radius: 999px;
  background: var(--color-surface-container-low, #f5f0ee);
  border: 1px solid var(--color-outline-variant, #e7e0dd);
}
.rf-match-mode-btn {
  padding: 3px 13px;
  border: none;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-on-surface-variant, #78716c);
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.rf-match-mode-btn:hover {
  color: var(--color-on-surface, #1c1917);
}
.rf-match-mode-btn.is-active {
  background: var(--color-primary, #bb0016);
  color: var(--color-on-primary, #fff);
}

/* In the search bar beside the advanced-search button, and only while the
   panel is open. The bar is already a flex row, so no positioning is
   needed and it can't shift any filter field. */
.rf-search-bar-row .rf-match-mode {
  flex-shrink: 0;
  margin-left: auto;
}
@media (max-width: 767px) {
  /* Label drops on narrow screens; the pills still read on their own. */
  .rf-search-bar-row .rf-match-mode-label {
    display: none;
  }
}

/**
 * Scrape skeleton. Mirrors the workspace layout — same panel, same two
 * columns — so the content appears to arrive rather than replace it.
 */
.rf-scrape-skeleton .rf-skel-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
/* Overrides the panel's bg-primary: keeps the shape, lets the page through. */
.rf-scrape-skeleton {
  background: rgb(187 0 22 / 5%) !important;
  border-color: rgb(187 0 22 / 12%) !important;
  box-shadow: none !important;
}
.rf-scrape-skeleton .rf-skel-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 14px;
  background: none;
  border: 1px solid rgb(187 0 22 / 10%);
}

/* Fades in the same way the real content does, then pulses slowly. */
.rf-scrape-skeleton {
  animation: fadeIn 0.4s ease-out;
}
/* The border breathes and a soft highlight travels across each shape. */
.rf-skel {
  position: relative;
  overflow: hidden;
  animation: rf-skel-breathe 2.2s ease-in-out infinite;
}
@keyframes rf-skel-breathe {
  0%, 100% {
    border-color: rgb(187 0 22 / 10%);
  }
  50% {
    border-color: rgb(187 0 22 / 24%);
  }
}
.rf-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgb(187 0 22 / 7%) 50%,
    transparent 80%
  );
  background-size: 220% 100%;
  animation: rf-skel-sweep 2.2s ease-in-out infinite;
}
@keyframes rf-skel-sweep {
  0% {
    background-position: 140% 0;
  }
  100% {
    background-position: -60% 0;
  }
}
/* Staggered so the panel doesn't move as one block. */
.rf-skel-tile:nth-child(even)::after,
.rf-skel-slider:nth-child(even)::after,
.rf-skel-target:nth-child(even)::after,
.rf-skel-capcard:nth-child(even)::after,
.rf-skel-slot:nth-child(even)::after,
.rf-skel-btn:nth-child(even)::after {
  animation-delay: 0.35s;
}
.rf-skel-editor::after,
.rf-skel-cover::after {
  animation-delay: 0.5s;
}

/* One outline colour throughout. */
.rf-skel {
  border: 1px solid rgb(187 0 22 / 13%);
  border-radius: 8px;
  background: none;
}

.rf-skel-line {
  height: 12px;
}
/* The live dot on the Parsed URL bar. */
.rf-skel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rf-skel-lg {
  height: 18px;
}
.rf-skel-w30 { width: 30%; }
.rf-skel-w40 { width: 40%; }
.rf-skel-w50 { width: 50%; }
.rf-skel-w70 { width: 70%; }
.rf-skel-w90 { width: 90%; }

/* Sizes and gaps are the editor's own, so every piece sits where the real
   one will appear. */
.rf-skel-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rf-skel-left,
.rf-skel-right {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rf-skel-left {
  gap: 20px;
}
.rf-skel-right {
  gap: 12px;
}
.rf-skel-title,
.rf-skel-photos,
.rf-skel-panel {
  display: flex;
  flex-direction: column;
  border: 1px solid rgb(187 0 22 / 10%);
  border-radius: 16px;
}
.rf-skel-rule {
  flex-shrink: 0;
  height: 1px;
  background: rgb(187 0 22 / 10%);
}

/* Post title */
.rf-skel-title {
  justify-content: space-between;
  height: 80px;
  padding: 16px;
}
.rf-skel-title .rf-skel-label {
  width: 90px;
  height: 10px;
}
.rf-skel-names {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.rf-skel-name {
  width: 85%;
  height: 14px;
}
.rf-skel-name2 {
  display: none;
  width: 50%;
  height: 14px;
}
.rf-skel-edit {
  flex-shrink: 0;
  width: 90px;
  height: 34px;
  margin-left: 16px;
  border-radius: 999px;
}
/* Where the left column is narrow, a title takes two lines. */
@media (min-width: 900px) and (max-width: 1199.98px), (max-width: 639.98px) {
  .rf-skel-title {
    height: 87px;
  }
  .rf-skel-name2 {
    display: block;
  }
}

/* Your post with Add from library: beside it when it fits, under it when
   it doesn't, as in the editor. */
.rf-skel-photos {
  flex: 1;
  min-height: 450px;
  padding: 24px;
}
.rf-skel-phead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgb(187 0 22 / 10%);
}
.rf-skel-strip {
  margin-right: auto;
}
.rf-skel-strip .rf-skel-label {
  width: 80px;
  height: 12px;
  margin: 2px 0 13px;
}
.rf-skel-slot {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 11px;
}
.rf-skel-count {
  flex-shrink: 0;
  width: 34px;
  margin-left: 8px;
}
.rf-skel-add {
  flex-shrink: 0;
  width: 149px;
  height: 36px;
  border-radius: 999px;
}
.rf-scrape-skeleton .rf-skel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 12px;
  padding: 4px;
}
.rf-skel-tile {
  aspect-ratio: 1;
  border-radius: 16px;
}
/* One column: the photo card is its fixed height. */
@media (max-width: 899.98px) {
  .rf-skel-photos {
    flex: none;
    height: 450px;
    overflow: hidden;
  }
}
@media (max-width: 639.98px) {
  .rf-skel-phead {
    row-gap: 1px;
  }
}
/* Phones: the five slots share the room beside "1 of 5". */
@media (max-width: 480px) {
  .rf-skel-strip {
    flex: 1 1 100%;
    min-width: 0;
  }
  .rf-skel-slot {
    flex: 0 1 42px;
    width: auto;
    min-width: 28px;
    height: auto;
    aspect-ratio: 1;
  }
}
/* Phones: the editor's own narrower padding, and the buttons stacked. */
@media (max-width: 485px) {
  .rf-scrape-skeleton.p-8 {
    padding: 30px 15px;
  }
}
@media (max-width: 639.98px) {
  .rf-scrape-skeleton .rf-skel-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* One column: the editor leaves a little more room above the buttons. */
@media (max-width: 899.98px) {
  .rf-scrape-skeleton .rf-skel-right {
    gap: 20px;
  }
}

/* Caption and cover: the editor's own grid, wide and narrow. */
.rf-skel-panel {
  container: rf-skel-cap / inline-size;
  padding: 12px 16px 24px;
}
.rf-skel-caps {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 108px;
  grid-template-rows: auto auto 132px;
  grid-template-areas:
    "head head head"
    "cover pickh regenh"
    "cover pick regen";
  column-gap: 18px;
  row-gap: 8px;
}
.rf-skel-c-head {
  grid-area: head;
  height: 20px;
  margin-bottom: 10px;
  padding: 4px 0 0 28px;
}
.rf-skel-c-head .rf-skel-line {
  width: 105px;
}
.rf-skel-c-pickh,
.rf-skel-c-regenh {
  align-self: end;
  height: 16px;
  padding-top: 6px;
}
.rf-skel-c-pickh { grid-area: pickh; }
.rf-skel-c-regenh { grid-area: regenh; }
.rf-skel-c-pickh .rf-skel-line,
.rf-skel-c-regenh .rf-skel-line {
  width: 55%;
  height: 10px;
}
.rf-skel-cover {
  grid-area: cover;
  align-self: end;
  width: 120px;
  height: 120px;
  margin-bottom: 12px;
  border-radius: 12px;
}
.rf-skel-pick {
  grid-area: pick;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rf-skel-cardrow {
  display: flex;
  flex: 1;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
}
.rf-skel-capcard {
  flex: 0 0 118px;
  border-radius: 12px;
}
.rf-skel-dots {
  flex-shrink: 0;
  width: 90px;
  height: 5px;
  margin: 7px auto 0;
}
.rf-skel-regen {
  grid-area: regen;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rf-skel-sl-head {
  width: 60%;
  height: 10px;
  margin-top: 4px;
}
.rf-skel-sl-head + .rf-skel-slider {
  margin-top: 8px;
}
.rf-skel-slider + .rf-skel-sl-head {
  margin-top: 11px;
}
.rf-skel-slider {
  flex-shrink: 0;
  height: 26px;
  border-radius: 999px;
}
.rf-skel-regen-link {
  width: 68px;
  margin-top: 6px;
}
@container rf-skel-cap (max-width: 520px) {
  .rf-skel-caps {
    grid-template-columns: 120px minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 116px;
    grid-template-areas:
      "head head"
      "cover regenh"
      "cover regen"
      "pickh pickh"
      "pick pick";
    column-gap: 14px;
  }
  .rf-skel-c-head {
    margin-bottom: 4px;
  }
  .rf-skel-cover {
    align-self: center;
    margin-bottom: 0;
  }
  .rf-skel-c-regenh,
  .rf-skel-regen {
    max-width: 280px;
  }
  .rf-skel-c-pickh {
    margin-top: 12px;
  }
  .rf-skel-capcard {
    flex-basis: 132px;
  }
}

/* Your caption */
.rf-skel-rule-cap {
  margin-top: 12px;
}
.rf-skel-cap-h {
  width: 90px;
  margin-top: 16px;
}
.rf-skel-cap-sub {
  width: 45%;
  margin-top: 6px;
}
.rf-skel-editor {
  height: 220px;
  margin-top: 11px;
  border-radius: 16px;
}
.rf-skel-report {
  width: 110px;
  margin: 10px 0 0 auto;
}

/* Post to */
.rf-skel-rule-post {
  margin-top: 15px;
}
.rf-skel-targets {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.rf-skel-target {
  height: 58px;
  border-radius: 12px;
}

/* Save draft, Schedule, Post now */
.rf-skel-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.rf-skel-btn {
  height: 48px;
  border-radius: 12px;
}

/* The real Post to buttons are three to a row below 768px. */
@media (max-width: 767.98px) {
  .rf-skel-targets {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* The photo grid's columns follow the real one at each width. */
@media (min-width: 640px) and (max-width: 899.98px) {
  .rf-scrape-skeleton .rf-skel-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .rf-scrape-skeleton .rf-skel-tile:nth-child(n + 5) {
    display: none;
  }
}
@media (max-width: 639.98px) {
  .rf-scrape-skeleton .rf-skel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rf-scrape-skeleton .rf-skel-tile:nth-child(n + 5) {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rf-scrape-skeleton,
  .rf-skel,
  .rf-skel::after {
    animation: none;
  }
}


.rf-geo-coupon-row label {
  flex: 1;
}



/* Viewing a post that has already gone out. The workspace shows what was
   sent, so nothing in it responds and anything that looks like a control
   reads as disabled — otherwise people edit a record and expect it to
   change something. The preview panel and the scrape list stay live. */
/* The whole workspace stops hit-testing. Naming element types missed the
   image tiles and anything else built from a div with a click handler —
   there is no list of those worth maintaining. Scrolling still works,
   since a wheel over an inert element scrolls its ancestor. */
body.rf-viewing-post main {
  pointer-events: none;
}
/* The way back out. Everything else is locked while viewing a post; this
   is not. */
body.rf-viewing-post main .rf-draft-tab-layer,
body.rf-viewing-post main .rf-draft-tab {
  pointer-events: auto !important;
  opacity: 1 !important;
  filter: none !important;
  cursor: pointer !important;
}
/* Which post is on screen, beside the handle. */
.rf-draft-when {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary, #bb0016);
  white-space: nowrap;
}
.rf-draft-when-icons {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 2px;
}
.rf-draft-when-icons .rf-post-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
}
.rf-draft-tab-layer {
  display: flex;
  align-items: center;
  gap: 10px;
}
body.rf-viewing-post main button:not(#rf-scraper-header *):not(.rf-draft-tab):not(:is(.rf-upload-tile-wrap, [data-imgcard], .rf-cap-cover) *),
body.rf-viewing-post main input:not(#rf-scraper-header *):not(:is(.rf-upload-tile-wrap, [data-imgcard], .rf-cap-cover) *),
body.rf-viewing-post main textarea,
body.rf-viewing-post main select,
body.rf-viewing-post main [contenteditable] {
  cursor: default !important;
  opacity: 0.5;
  filter: grayscale(1);
}
/* The upload tile, the photo and video cards and the cover beside the
   captions are greyed the same way, each as one piece so their buttons
   aren't dimmed twice. */
body.rf-viewing-post main :is(.rf-upload-tile-wrap, [data-imgcard], .rf-cap-cover) {
  cursor: default !important;
  opacity: 0.5;
  filter: grayscale(1);
}
body.rf-viewing-post main img,
body.rf-viewing-post main label,
body.rf-viewing-post main [role="button"] {
  cursor: default !important;
}
/* The sliders are divs, not inputs, so the rule above doesn't reach them —
   and they're the most obviously draggable thing on the screen. */
body.rf-viewing-post main .rf-ai-slider {
  pointer-events: none !important;
  opacity: 0.5;
  filter: grayscale(1);
}
/* Images stay legible — they're the point of the record — but nothing
   about them invites a click or a drag. */
body.rf-viewing-post main img {
  pointer-events: none !important;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
body.rf-viewing-post main {
  user-select: none;
  -webkit-user-select: none;
}
/* The panel and its trigger keep working: that's how they look at it and
   how they get back out. */
/* Everything that gets someone out of a viewed post stays live: the
   header's URL bar and tabs, and the preview panel. */
body.rf-viewing-post .rf-target-flyout,
body.rf-viewing-post .rf-target-flyout *,
body.rf-viewing-post #rf-scraper-header,
body.rf-viewing-post #rf-preview-panel,
body.rf-viewing-post #rf-preview-panel *,
body.rf-viewing-post #rf-preview-trigger {
  pointer-events: auto !important;
  cursor: revert !important;
  user-select: auto;
  -webkit-user-select: auto;
}
/* The controls only. A blanket rule on every descendant also hit the
   decorative squiggle, which is deliberately faint and click-through. */
body.rf-viewing-post #rf-scraper-header button,
body.rf-viewing-post #rf-scraper-header input,
body.rf-viewing-post #rf-scraper-header a,
body.rf-viewing-post #rf-scraper-header [role="button"] {
  pointer-events: auto !important;
  opacity: 1 !important;
  filter: none !important;
  cursor: pointer !important;
}
body.rf-viewing-post #rf-scraper-header input {
  cursor: text !important;
}
/* The Preview tab is a button in the workspace, so the rule that stops the
   cursor on the workspace's buttons outranks its own; this outranks that. */
body.rf-viewing-post #rf-preview-trigger#rf-preview-trigger,
body.rf-viewing-post #rf-preview-trigger#rf-preview-trigger * {
  cursor: pointer !important;
}
body.rf-viewing-post .rf-target-flyout,
body.rf-viewing-post .rf-target-flyout *,
body.rf-viewing-post #rf-preview-panel,
body.rf-viewing-post #rf-preview-panel *,
body.rf-viewing-post #rf-preview-trigger {
  opacity: 1 !important;
  filter: none !important;
}


/* ── The details, on a light modal ────────────────────────────────────────
   Three sections — what it is, what it costs, what they get in store — in
   the same cards and inputs as the rest of the Studio. */

.rf-geo-price-note {
  margin: 0 0 20px;
  padding-right: 34px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-on-surface-variant, #5c3f3d);
}

/* The site's modal close, copied from .rf-store-close so every dialog shuts
   the same way — top right, cream circle, red glyph. It was inheriting an
   old popover's rule and sitting on the left. */
.rf-geo-price-close {
  position: absolute;
  top: 16px;
  right: 16px;
  left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fbe9e5;
  color: var(--color-primary, #bb0016) !important;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}


.rf-geo-price-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.rf-geo-price-fields > .rf-geo-price-wide,
.rf-geo-price-fields > .rf-geo-coupon {
  grid-column: 1 / -1;
}

.rf-geo-price label span,
.rf-geo-price .rf-geo-coupon-label {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant, #5c3f3d);
}
.rf-geo-price input:not(.rf-switch):not([type="checkbox"]),
.rf-geo-price select {
  width: 100%;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid #e6d8d5;
  background: #fff;
  color: var(--color-on-background, #1c1b1b);
  font-family: inherit;
  font-size: 13.5px;
}
.rf-geo-price input::placeholder {
  color: #a8a29e;
}
.rf-geo-price input:focus {
  outline: none;
  border-color: var(--color-primary, #bb0016);
  box-shadow: 0 0 0 3px rgb(187 0 22 / 10%);
}

/* The offer, set apart — it's the part that reaches a shopper. */
.rf-geo-coupon,
.rf-geo-coupon-expiry {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #efe2df;
}
.rf-geo-coupon-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 11px;
  font-size: 13px;
  font-weight: 800;
  color: var(--color-on-background, #1c1b1b);
}
.rf-geo-coupon-sub {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-on-surface-variant, #5c3f3d);
}
.rf-geo-coupon-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
.rf-geo-coupon-body > .rf-geo-coupon-types,
.rf-geo-coupon-body > .rf-geo-price-wide,
.rf-geo-coupon-body > .rf-geo-coupon-expiry {
  grid-column: 1 / -1;
}
.rf-geo-coupon-row {
  display: contents;
}
/* A row of chips is followed by the field it configures, so it needs real
   room under it — without this the next label sat against the chips and
   read as belonging to them. */
.rf-geo-coupon-types {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 14px;
}
.rf-geo-coupon-types:last-child {
  margin-bottom: 0;
}

/* One statement of the chip, so there's nothing to lose an ordering fight
   with — the last set of these ended up white on white. */
.rf-geo-price .rf-geo-coupon-chip {
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid #e6d8d5;
  background: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--color-on-background, #1c1b1b);
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.rf-geo-price .rf-geo-coupon-chip:hover {
  border-color: var(--color-primary, #bb0016);
}
.rf-geo-price .rf-geo-coupon-chip.is-on,
.rf-geo-price .rf-geo-coupon-chip.is-on:hover {
  background: var(--color-primary, #bb0016);
  border-color: var(--color-primary, #bb0016);
  color: #fff;
}

/* Two rows on a phone, and every button is position:relative with no
   z-index — so the second row paints over a tooltip hanging below the
   first. Lifting whichever is being touched puts its own tooltip on top of
   its siblings. */
@media (max-width: 767px) {
  .rf-post-target-grid button:hover,
  .rf-post-target-grid button:focus,
  .rf-post-target-grid button:active {
    z-index: 20;
  }
}

/* The RetailFix button has the Message / Product toggle directly beneath
   it, so its tooltip goes above instead — below, the two sit on top of
   each other. */
.rf-post-target-grid .rf-geo-trigger[data-tooltip]:hover::after {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 6px;
}

/* Most expiry dates are a few days out, so the calendar becomes the
   fallback rather than the way in. */
.rf-date-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
/* The chips are part of the field, so the label sits above both of them
   rather than between the two. */
.rf-geo-overlay label:has(.rf-date-chips) > span {
  margin-bottom: 8px;
}
.rf-date-chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #e6d8d5;
  background: #fff;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--color-on-background, #1c1b1b);
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.rf-date-chip:hover {
  border-color: var(--color-primary, #bb0016);
}
.rf-date-chip.is-on {
  background: var(--color-primary, #bb0016);
  border-color: var(--color-primary, #bb0016);
  color: #fff !important;
}

/* Closing keeps everything either way, but the word says so — an X alone
   reads as discarding. */
.rf-geo-price-save {
  width: 100%;
  margin-top: 26px;
  padding: 13px 20px;
  border: none;
  border-radius: 999px;
  background: var(--color-primary, #bb0016);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  color: #fff !important;
  cursor: pointer;
  transition: background 0.15s ease;
}
.rf-geo-price-save:hover {
  background: #a1000f;
}

/* ── The Message / Product toggle ─────────────────────────────────────────
   Belongs to the RetailFix button, so it only appears while that button is
   being looked at. */
.rf-geo-mode {
  /* Centred under the RetailFix button, the last one, against the row's
     right edge. */
  position: absolute;
  right: 0;
  /* One column of the button grid: three columns below 768px, six above,
     with an 8px gap either way. */
  width: calc((100% - 16px) / 3);
  top: calc(100% - 4px);
  z-index: 3;
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 8px;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
/* Six columns from 768px. Follows the rule above, so it wins. */
@media (min-width: 768px) {
  .rf-geo-mode {
    width: calc((100% - 40px) / 6);
  }
}
.rf-geo-mode.is-shown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* At id strength, twice over: this sits inside #rf-ai-panel, whose rule
   paints every button without .bg-white white — which put white text on a
   white chip. */
/* Both chips are red on white — the selection is carried by the fill and
   the dot, not by two different text colours. The panel's own "everything
   is white" rule excludes them by name now, rather than this trying to
   outscore it: the two selectors tied, and a tie is decided by whichever
   happens to sit later in the file. */
#rf-ai-panel button.rf-geo-mode-opt,
#rf-ai-panel button.rf-geo-mode-opt span,
#rf-ai-panel button.rf-geo-mode-opt svg {
  color: var(--color-primary, #bb0016);
}

/* These hang below the panel, onto the cream — so they're light chips like
   everything else on that surface, not red ones floating on it. */
.rf-geo-mode-opt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid #e6d8d5;
  background: #fff;
  box-shadow: 0 2px 8px rgb(187 0 22 / 8%);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--color-primary, #bb0016);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.14s ease,
    border-color 0.14s ease,
    color 0.14s ease;
}
.rf-geo-mode-opt:hover {
  border-color: var(--color-primary, #bb0016);
}

/* Product, before anyone has tried it. Nearby is new and the whole point of
   it sits behind this one chip, so it asks rather than waits — a slow ring
   that breathes, and stops the moment it's chosen. */
.rf-geo-mode-opt:last-child:not(.is-on) {
  border-color: var(--color-primary, #bb0016);
  animation: rf-geo-mode-invite 2.4s ease-in-out infinite;
}
@keyframes rf-geo-mode-invite {
  0%,
  100% {
    box-shadow:
      0 2px 8px rgb(187 0 22 / 8%),
      0 0 0 0 rgb(187 0 22 / 26%);
  }
  55% {
    box-shadow:
      0 2px 8px rgb(187 0 22 / 8%),
      0 0 0 5px rgb(187 0 22 / 0%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rf-geo-mode-opt:last-child:not(.is-on) {
    animation: none;
    box-shadow: 0 0 0 3px rgb(187 0 22 / 14%);
  }
}
/* At id strength: the toggle sits inside #rf-ai-panel, whose rule forces
   white onto any button without .bg-white — which put white text on this
   one's white chip. */
/* Chosen: cream fill, red rule, red type — the same way the QR paper sizes
   and the offer chips read a selection on a light surface. Plus a dot, so
   it isn't carried by colour alone. */
#rf-ai-panel button.rf-geo-mode-opt.is-on,
.rf-geo-mode-opt.is-on {
  position: relative;
  background: #fbe9e5;
  border-color: var(--color-primary, #bb0016);
  color: var(--color-primary, #bb0016);
  box-shadow: 0 2px 10px rgb(187 0 22 / 16%);
}
#rf-ai-panel button.rf-geo-mode-opt.is-on,
#rf-ai-panel button.rf-geo-mode-opt.is-on span,
#rf-ai-panel button.rf-geo-mode-opt.is-on svg,
.rf-geo-mode-opt.is-on svg {
  color: var(--color-primary, #bb0016);
}
.rf-geo-mode-opt.is-on::before {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary, #bb0016);
  box-shadow: 0 0 0 2px #fcf9f8;
}
.rf-geo-mode-pencil {
  opacity: 0.75;
}

/* A product page title can run to a whole sentence of variants and sizes.
   Two lines names the thing; past that it's just pushing the card down. */
.rf-scrape-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Some shops write a paragraph, some write an essay. Four lines is enough
   to know what was scraped; the rest is in the post itself. */
.rf-scrape-desc {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── The sunrise ──────────────────────────────────────────────────────────
   One warm light low on the header and on the AI panel, climbing as the
   page scrolls. The resting positions are here so every surface is right
   before the script runs and stays right if it never does — sunrise.js only
   moves the light from where these put it. */

#rf-scraper-header {
  background-color: #bb0016 !important;
  background-image: radial-gradient(
    150% 150% at 30% 118%,
    #fea121 0%,
    #fea121 15%,
    #e1272b 47%,
    #bb0016 80%
  ) !important;
}

/* ── The workspace ────────────────────────────────────────────────────────
   The page's own cream rather than a wall of red, so the cards lead instead
   of every surface competing at the same volume. The one red field left is
   the AI panel, which is why it can carry the stronger light. */

#rf-ai-creator-options > .bg-primary,
.rf-scrape-skeleton.bg-primary {
  background-color: var(--color-brand-bg, #fcf9f8) !important;
  background-image: none !important;
  border-color: #f0dcd9 !important;
  color: var(--color-on-background, #1c1b1b) !important;
  box-shadow: 0 3px 18px rgb(187 0 22 / 7%) !important;
}

/* On cream, anything that was white-on-red has to come back to ink, and
   the hairlines that were white have to become warm. */
#rf-ai-creator-options > .bg-primary > *:not(.rf-order-3):not(#rf-ai-panel) {
  color: var(--color-on-background, #1c1b1b);
}
#rf-ai-creator-options > .bg-primary .rf-scraper-card,
#rf-ai-creator-options > .bg-primary .bg-white {
  border: 1px solid #efe2df;
}

/* The suggested post sits on cream now, so it takes the same white card
   and warm hairline as the ones on the left. */
.rf-suggested-box {
  border-color: #efe2df !important;
  box-shadow: 0 2px 12px rgb(187 0 22 / 5%);
}

/* Selected, without a solid white slab. A filled chip cut a hard hole in the
   gradient behind it; frosted glass reads as chosen while still letting the
   light through, which is the whole point of the surface moving. */
.rf-post-target-grid button.bg-white {
  background: rgb(255 255 255 / 24%) !important;
  border-color: rgb(255 255 255 / 85%) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 45%),
    0 4px 14px rgb(0 0 0 / 12%) !important;
  backdrop-filter: blur(3px) saturate(130%);
  -webkit-backdrop-filter: blur(3px) saturate(130%);
}
.rf-post-target-grid button.bg-white,
.rf-post-target-grid button.bg-white svg {
  color: #fff !important;
}
/* A small mark in the corner, so selection doesn't rest on brightness
   alone — that's a hard read for anyone who doesn't see contrast well.
   On ::before, because the tooltip owns ::after: sharing it meant this dot
   was repositioned below the button whenever one was hovered. */
.rf-post-target-grid button.bg-white::before {
  content: "";
  position: absolute;
  top: 7px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgb(255 255 255 / 30%);
}

/* Inside the panel: headings, labels and the small print all on the same
   white, with the muted ones stepped down by opacity rather than a colour
   that would drift against a moving gradient. */
/* Everything on the panel is white — except a selected button, which is a
   white chip and keeps its own red. */
#rf-ai-panel,
#rf-ai-panel h1,
#rf-ai-panel h2,
#rf-ai-panel h3,
#rf-ai-panel span:not(.bg-white *):not(.rf-geo-mode-opt *),
#rf-ai-panel div:not(.bg-white):not(.bg-white *),
#rf-ai-panel label,
#rf-ai-panel button:not(.bg-white):not(.rf-geo-mode-opt):not(.rf-cap-card):not(.rf-nbp-nav):not(.rf-cap-dot),
#rf-ai-panel button:not(.bg-white):not(.rf-geo-mode-opt):not(.rf-cap-card):not(.rf-nbp-nav) svg {
  color: #fff;
}
/* Over the panel's blanket white on every span. */
.rf-ai-slider-name {
  color: #ffffff66 !important;
}

#rf-ai-panel .text-on-primary\/70,
#rf-ai-panel .opacity-80,
#rf-ai-panel .opacity-70 {
  color: rgb(255 255 255 / 82%);
}
#rf-ai-panel .border-white\/20,
#rf-ai-panel .border-white\/10 {
  border-color: rgb(255 255 255 / 26%);
}

/* ── The AI panel ─────────────────────────────────────────────────────────
   The one surface that stays red, and it gets the bolder light: a small
   panel needs a stronger wash than a header, or the gradient reads as
   nothing at all. Its own contents stay white on it. */

#rf-ai-panel {
  /* Tighter, and the Message / Product toggle is allowed to hang below its
     edge — the panel doesn't have to grow to contain something that belongs
     to the button at its foot. */
  /* Positioned and unclipped, so the toggle can hang off its bottom edge
     without the panel growing to hold it. Padding is left alone — p-4 from
     the markup, as it always was. */
  position: relative;
  overflow: visible;
  background-color: #bb0016 !important;
  background-image: radial-gradient(
    170% 170% at 30% 122%,
    #fea121 0%,
    #fea121 4%,
    #e1272b 34%,
    #bb0016 68%
  ) !important;
  border-color: rgb(255 255 255 / 22%) !important;
  color: #fff;
  box-shadow: 0 8px 28px rgb(187 0 22 / 22%);
}
/* Everything in the panel takes its colour from the panel — except the
   Message / Product chips, which sit below it on the cream and carry their
   own. This is the last rule that touches them, so it has to say so. */
#rf-ai-panel *:not(.rf-geo-mode-opt):not(.rf-geo-mode-opt *) {
  color: inherit;
}


/* ── The in-store offer, laid out ─────────────────────────────────────────
   It was a single column of twelve controls in a 320px box. Same fields,
   arranged so the related ones sit together and the whole thing can be
   read at a glance. */

/**
 * Video on the upload tiles and the video cards. Compiled Tailwind has no
 * build step here, so these are written out rather than composed from
 * utilities. The cards themselves reuse the image cards' classes; only
 * these overlays are new.
 */

/* Progress across the foot of an upload tile. The tile is already
   position:relative and overflow-hidden. */
.rf-video-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-outline-variant, #e6bdb9);
}
.rf-video-progress-fill {
  height: 100%;
  background: var(--color-primary, #bb0016);
  transition: width 0.15s ease;
}

.rf-video-card-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: rgb(0 0 0 / 45%);
  color: #fff;
  pointer-events: none;
}
.rf-video-card-time {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 3px 7px;
  border-radius: 9999px;
  background: rgb(0 0 0 / 62%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Full-screen preview. Its own overlay rather than the lightbox's: that one
   steps through a list of image URLs, which a video isn't part of. */
.rf-video-preview {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgb(0 0 0 / 88%);
}
.rf-video-preview-el {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  background: #000;
}
.rf-video-preview-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: rgb(255 255 255 / 16%);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.rf-video-preview-close:hover {
  background: rgb(255 255 255 / 28%);
}

/* The pre-post summary in the confirm dialog — one line per platform, with
   the reason underneath when something they chose isn't going there. */
.rf-plan {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  text-align: left;
}
.rf-plan-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--color-outline-variant, #e6bdb9);
}
.rf-plan-row:last-child {
  border-bottom: none;
}
.rf-plan-mark {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #f6f2f1;
}
.rf-plan-icon {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 4px;
}
.rf-plan-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.rf-plan-name {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--color-on-surface, #1c1917);
}
.rf-plan-gets {
  font-size: 13px;
  line-height: 1.35;
  color: var(--color-on-surface-variant, #6b6461);
}
.rf-plan-note {
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-primary, #bb0016);
}

/* Times a post's video was watched, beside its date in Posting History. */
.rf-post-views {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--color-primary, #bb0016);
  white-space: nowrap;
}

/* ── TikTok post settings ─────────────────────────────────────────────────
   Same shell and chip as the Nearby details, with TikTok's own controls
   inside. The overlay's ink rule is six classes deep, so the colours that
   differ from it carry :not(#rf-tt) to outrank it. */
.rf-tt-mode {
  position: absolute;
  /* Under the TikTok button, the third column. */
  left: calc((100% - 16px) / 3 * 2 + 16px);
  width: calc((100% - 16px) / 3);
  top: calc(100% - 4px);
  z-index: 3;
  display: flex;
  justify-content: center;
  margin-top: 8px;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
@media (min-width: 768px) {
  .rf-tt-mode {
    left: calc((100% - 40px) / 6 * 2 + 16px);
    width: calc((100% - 40px) / 6);
  }
  /* Under the Pinterest button, the fifth column. */
  .rf-tt-mode.rf-pin-mode {
    left: calc((100% - 40px) / 6 * 4 + 32px);
  }
}
.rf-tt-mode.is-shown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.rf-post-target-grid .rf-tt-trigger[data-tooltip]:hover::after,
.rf-post-target-grid .rf-pin-trigger[data-tooltip]:hover::after {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 6px;
}

@media (min-width: 561px) {
  .rf-tt-panel {
    width: min(520px, 100%);
  }
}

.rf-tt-account {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  padding-right: 40px;
}
.rf-tt-avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: #f3e7e4;
}
.rf-tt-avatar.is-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary, #bb0016);
  font-size: 17px;
  font-weight: 800;
}
.rf-tt-account-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rf-tt-account-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.rf-tt-account-name {
  overflow: hidden;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rf-tt-account-handle {
  font-size: 12.5px;
  font-weight: 600;
}

.rf-tt-field {
  display: block;
}
.rf-tt-panel select {
  font-weight: 700;
  cursor: pointer;
}

.rf-tt-section {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #efe2df;
}
.rf-tt-label {
  margin-bottom: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.rf-tt-label-strong {
  font-size: 13px;
  font-weight: 800;
}
.rf-tt-help {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
}
.rf-tt-section > .rf-tt-help {
  margin-top: 10px;
}

.rf-tt-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rf-tt-brands {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.rf-tt-panel label.rf-tt-check {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid #e6d8d5;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.rf-tt-checks label.rf-tt-check {
  align-items: center;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
}
.rf-tt-panel label.rf-tt-check:hover {
  border-color: var(--color-primary, #bb0016);
}
.rf-tt-panel label.rf-tt-check.is-checked {
  border-color: var(--color-primary, #bb0016);
  background: #fbe9e5;
}
.rf-tt-panel label.rf-tt-check.is-disabled,
.rf-tt-panel label.rf-tt-check.is-disabled:hover {
  border-color: #e6d8d5;
  background: #f7f2f1;
  opacity: 0.5;
  cursor: not-allowed;
}
.rf-tt-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.rf-tt-panel label.rf-tt-check span {
  display: block;
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}
.rf-tt-panel label.rf-tt-check .rf-tt-check-box {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1.5px solid #cdb8b4;
  border-radius: 5px;
  background: #fff;
  transition: background 0.14s ease, border-color 0.14s ease;
}
.rf-tt-checks label.rf-tt-check .rf-tt-check-box {
  margin-top: 0;
}
.rf-tt-panel label.rf-tt-check.is-checked .rf-tt-check-box {
  border-color: var(--color-primary, #bb0016);
  background: var(--color-primary, #bb0016);
}
.rf-tt-panel label.rf-tt-check.is-checked .rf-tt-check-box::after {
  content: "";
  position: absolute;
  top: 1.5px;
  left: 5px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.rf-tt-panel label.rf-tt-check input:focus-visible + .rf-tt-check-box {
  box-shadow: 0 0 0 3px rgb(187 0 22 / 18%);
}
.rf-tt-panel label.rf-tt-check .rf-tt-check-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.rf-tt-panel label.rf-tt-check .rf-tt-check-help {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

.rf-tt-disclose {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.rf-tt-switch {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 26px;
  margin-top: 1px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #e6d8d5;
  cursor: pointer;
  transition:
    background 0.18s ease,
    opacity 0.18s ease;
}
.rf-tt-switch.is-checked {
  background: var(--color-primary, #bb0016);
}
.rf-tt-switch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(187 0 22 / 18%);
}
.rf-tt-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(28 25 23 / 25%);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rf-tt-switch.is-checked .rf-tt-switch-knob {
  transform: translateX(18px);
}

.rf-tt-note,
.rf-tt-need {
  margin: 6px 2px 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}
.rf-tt-warn {
  margin: 0 0 20px;
  padding: 11px 14px;
  border-radius: 12px;
  background: #fbe9e5;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
}
.rf-tt-consent {
  margin: 22px 0 0;
  font-size: 12px;
  line-height: 1.5;
}
.rf-tt-consent a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rf-tt-status {
  margin: 4px 40px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
}
.rf-tt-retry {
  margin-top: 14px;
  padding: 8px 16px;
  border: 1px solid #e6d8d5;
  border-radius: 999px;
  background: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}
.rf-tt-retry:hover {
  border-color: var(--color-primary, #bb0016);
}
.rf-tt-panel .rf-geo-price-save:disabled,
.rf-tt-panel .rf-geo-price-save:disabled:hover {
  background: var(--color-primary, #bb0016);
  opacity: 0.4;
  cursor: not-allowed;
}

.rf-tt-panel .rf-tt-account-label:not(#rf-tt),
.rf-tt-panel .rf-tt-account-handle:not(#rf-tt),
.rf-tt-panel .rf-tt-label:not(#rf-tt),
.rf-tt-panel .rf-tt-help:not(#rf-tt),
.rf-tt-panel .rf-tt-check-help:not(#rf-tt),
.rf-tt-panel .rf-tt-consent:not(#rf-tt),
.rf-tt-panel .rf-tt-status:not(#rf-tt) {
  color: var(--color-on-surface-variant, #5c3f3d) !important;
}
.rf-tt-panel .rf-tt-consent a:not(#rf-tt),
.rf-tt-panel .rf-tt-need:not(#rf-tt),
.rf-tt-panel .rf-tt-status.is-error:not(#rf-tt) {
  color: var(--color-primary, #bb0016) !important;
}
.rf-tt-panel .rf-tt-warn:not(#rf-tt) {
  color: #8f0011 !important;
}
.rf-tt-panel .rf-tt-avatar.is-blank:not(#rf-tt) {
  color: #fff !important;
}

/* Phones have no hover, so a selected TikTok or RetailFix button carries a
   pencil in place of its dot: TikTok's opens its settings, RetailFix's shows
   the Message / Product choice. The tap area is larger than the dot. Some
   touch phones report hover, so a touch pointer or a phone-width screen
   counts as well. */
.rf-plat-edit {
  display: none;
}
@media (hover: none), (pointer: coarse), (max-width: 767px) {
  .rf-post-target-grid button.bg-white.rf-geo-trigger::before,
  .rf-post-target-grid button.bg-white.rf-tt-trigger::before,
  .rf-post-target-grid button.bg-white.rf-pin-trigger::before {
    display: none;
  }
  .rf-plat-edit {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 42px;
    height: 42px;
  }
  .rf-plat-edit-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgb(0 0 0 / 18%);
  }
  .rf-post-target-grid button.bg-white .rf-plat-edit svg {
    color: var(--color-primary, #bb0016) !important;
  }
  .rf-tt-mode {
    display: none;
  }
}

/* ── Your post: the order the media goes out in ───────────────────────────
   The video, when ticked, is always the cover. */
.rf-post-strip-title {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--color-on-background, #1c1b1b);
}
.rf-post-strip-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rf-post-slot {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border: 1.5px dashed #e6d8d5;
  border-radius: 11px;
  background: #fcf9f8;
}
.rf-post-slot.is-filled {
  border: 2px solid var(--color-primary, #bb0016);
  background: #f3e7e4;
}
.rf-post-slot.is-video {
  background: #4a3d40;
}
.rf-post-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rf-post-slot.is-video::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  margin-left: -4px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #fff;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 45%));
}
.rf-post-slot-label {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--color-primary, #bb0016);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 8.5px;
  font-weight: 800;
  line-height: 1.6;
  text-align: center;
  color: #fff;
}
.rf-post-strip-count {
  margin-left: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-on-surface-variant, #5c3f3d);
  white-space: nowrap;
}
.rf-post-strip-add {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  align-self: flex-start;
  padding: 7px 14px;
  border: 1px solid #f1cfc9;
  border-radius: 999px;
  background: #fbe9e5;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  color: var(--color-primary, #bb0016);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
@media (min-width: 640px) {
  .rf-post-strip-add {
    align-self: center;
    margin-left: auto;
  }
}
.rf-post-strip-add:hover {
  border-color: var(--color-primary, #bb0016);
  background: #f9dcd6;
}

/* The AI Creator box's cover thumbnail, for a video with no poster frame. */
.rf-cover-video-blank {
  position: relative;
  width: 100%;
  height: 100%;
  background: #4a3d40;
}
.rf-cover-video-blank::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -10px 0 0 -6px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid #fff;
}
button.rf-post-slot {
  padding: 0;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
button.rf-post-slot:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgb(187 0 22 / 22%);
}
button.rf-post-slot:focus-visible {
  outline: 2px solid var(--color-primary, #bb0016);
  outline-offset: 2px;
}
/* The tile a strip slot points to, picked out for a moment. */
.rf-media-flash {
  animation: rf-media-flash 1.6s ease-out;
}
@keyframes rf-media-flash {
  0%,
  45% {
    outline: 4px solid #f9a01b;
    outline-offset: 3px;
  }
  100% {
    outline: 4px solid rgb(249 160 27 / 0%);
    outline-offset: 3px;
  }
}
@media (prefers-reduced-motion: reduce) {
  button.rf-post-slot:hover {
    transform: none;
  }
}
/* Sits above the chain link when a video is also on other scrapes. */
.rf-video-card-time.has-conn {
  bottom: 34px;
}

/* ── Post preview ──────────────────────────────────────────────────────────
   The Nearby card is Nearby's own post styling, copied here under its own
   prefix so it can't reach anything else in the Studio. */
.rf-pv-switch {
  display: flex;
  gap: 4px;
  width: 390px;
  max-width: 100%;
  margin-bottom: 14px;
  padding: 3px;
  border: 1px solid #e2d9d4;
  border-radius: 999px;
  background: #fff;
}
.rf-pv-tab {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  border: none;
  border-radius: 999px;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: #78716c;
  cursor: pointer;
}
.rf-pv-tab.is-on {
  background: #fbe9e5;
  color: #bb0016;
}
.rf-pv-tab-icon {
  display: inline-flex;
}

.rf-nbp {
  --red-deep: #bb0016;
  --ink: #1c1917;
  --paper: #fcf9f8;
  --cream: #fbe9e5;
  --stone: #78716c;
  --line: #e2d9d4;
  --white: #fff;
  width: 390px;
  max-width: 100%;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  color: var(--ink);
  text-align: left;
}
.rf-nbp-post {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--white);
}
.rf-nbp-store {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.rf-nbp-store-logo {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
}
.rf-nbp-store-logo img,
.rf-nbp-by-logo img,
.rf-nbp-by-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rf-nbp-by-avatars {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 44px;
  height: 38px;
}
.rf-nbp-by-logo,
.rf-nbp-by-face {
  position: absolute;
  top: 0;
  overflow: hidden;
  border-radius: 50%;
  background: var(--white);
}
.rf-nbp-by-logo {
  top: -15px;
  left: -30px;
  z-index: 2;
  width: 75px;
  height: 75px;
  border: 1px solid var(--line);
}
.rf-nbp-by-face {
  left: 12px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border: 2px solid var(--white);
  box-shadow: 0 1px 5px #00000026;
}
.rf-nbp-by-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  font-size: 16px;
  font-weight: 800;
  color: var(--red-deep);
}
.rf-nbp-store-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rf-nbp-store-name {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
}
.rf-nbp-at {
  font-weight: 700;
  color: var(--stone);
}
.rf-nbp-store-where {
  overflow: hidden;
  font-size: 11.5px;
  color: var(--stone);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rf-nbp-image,
.rf-nbp-slide {
  aspect-ratio: 4 / 5;
  background: var(--cream);
}
.rf-nbp-image img,
.rf-nbp-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.rf-nbp-carousel {
  position: relative;
  overflow: hidden;
  background: var(--paper);
}
/* Sideways swipes are handled by the preview; up and down still scroll. */
.rf-nbp-carousel {
  touch-action: pan-y;
}
.rf-nbp-track {
  display: flex;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.rf-nbp-slide {
  flex: 0 0 100%;
}
.rf-nbp-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: #ffffffe8;
  box-shadow: 0 2px 8px #00000026;
  font-size: 20px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 0.15s ease;
}
.rf-nbp-carousel:hover .rf-nbp-nav {
  opacity: 1;
}
.rf-nbp-nav:disabled {
  opacity: 0 !important;
  pointer-events: none;
}
@media (hover: none) {
  .rf-nbp-nav {
    opacity: 1;
  }
}
.rf-nbp-prev {
  left: 8px;
}
.rf-nbp-next {
  right: 8px;
}
.rf-nbp-dots {
  position: absolute;
  right: 0;
  bottom: 10px;
  left: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.rf-nbp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffffb3;
  box-shadow: 0 1px 3px #0000004d;
  cursor: pointer;
  transition: width 0.15s ease, background 0.15s ease;
}
.rf-nbp-dot.is-on {
  width: 18px;
  border-radius: 999px;
  background: var(--white);
}
.rf-nbp-video {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
}
.rf-nbp-video.has-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--rf-nbp-fill);
  background-position: center;
  background-size: cover;
  filter: blur(26px) saturate(1.25) brightness(0.92);
  transform: scale(1.35);
  pointer-events: none;
}
.rf-nbp-video video {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.rf-nbp-video:not(.has-fill) video {
  object-fit: cover;
  object-position: center top;
}

/* Nearby's own video controls (nearby.css .rfn-video-*). */
.rf-nbp-video:has(.rf-nbp-video-ui) {
  cursor: pointer;
}
.rf-nbp-video-bar,
.rf-nbp-video-start {
  z-index: 2;
}
.rf-nbp-video-bar {
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border-radius: 999px;
  background: #000000a6;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .rf-nbp-video:hover .rf-nbp-video-bar {
    opacity: 1;
    pointer-events: auto;
  }
}
.rf-nbp-video.is-controls .rf-nbp-video-bar,
.rf-nbp-video.is-full .rf-nbp-video-bar {
  opacity: 1;
  pointer-events: auto;
}
/* In a carousel the bar sits above the dots. Full screen has no dots. */
.rf-nbp-carousel .rf-nbp-video-bar {
  bottom: 26px;
}
.rf-nbp-carousel .rf-nbp-video.is-full .rf-nbp-video-bar {
  bottom: 8px;
}
.rf-nbp-video-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: none;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rf-nbp-video-btn:hover {
  background: #ffffff2e;
}
.rf-nbp-video-time {
  flex: none;
  min-width: 34px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.rf-nbp-video-seek {
  flex: 1 1 auto;
  min-width: 40px;
  height: 4px;
  margin: 0 4px;
  padding: 0;
  border-radius: 999px;
  background: #ffffff3d;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.rf-nbp-video-seek::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.rf-nbp-video-seek::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
}
.rf-nbp-video-ico-on,
.rf-nbp-video-ico-play,
.rf-nbp-video-ico-shrink {
  display: none;
}
.rf-nbp-video.is-unmuted .rf-nbp-video-ico-off,
.rf-nbp-video.is-paused .rf-nbp-video-ico-pause,
.rf-nbp-video.is-full .rf-nbp-video-ico-expand {
  display: none;
}
.rf-nbp-video.is-unmuted .rf-nbp-video-ico-on,
.rf-nbp-video.is-paused .rf-nbp-video-ico-play,
.rf-nbp-video.is-full .rf-nbp-video-ico-shrink {
  display: block;
}
.rf-nbp-video-start {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  background: #00000073;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.rf-nbp-video.is-paused .rf-nbp-video-start {
  opacity: 1;
  pointer-events: auto;
}
.rf-nbp-video-start:hover {
  background: #0000008f;
}
.rf-nbp-video:fullscreen {
  width: 100vw;
  height: 100vh;
  background: #000;
}
.rf-nbp-video:fullscreen video {
  object-fit: contain;
}
.rf-nbp-video:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  background: #000;
}
.rf-nbp-video:-webkit-full-screen video {
  object-fit: contain;
}
@media (max-width: 560px) {
  .rf-nbp-video-btn:not(.rf-nbp-video-start) {
    width: 32px;
    height: 32px;
  }
}

.rf-nbp-body {
  padding: 14px 16px 16px;
}
.rf-nbp-brand {
  margin-bottom: 5px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
}
.rf-nbp-title {
  margin: 2px 0 6px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink);
}
.rf-nbp-caption {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.rf-nbp-caption-wrap.is-open .rf-nbp-caption {
  overflow: visible;
  -webkit-line-clamp: unset;
}
.rf-nbp-more {
  margin-top: 6px;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--red-deep);
  cursor: pointer;
}
.rf-nbp-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 12px;
}
.rf-nbp-price-now {
  font-family: "Dongle", sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 0.8;
  color: var(--red-deep);
}
.rf-nbp-price-was {
  font-size: 13px;
  font-weight: 700;
  color: var(--stone);
  text-decoration: line-through;
}

.rf-nbp-coupon {
  position: relative;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(150deg, #2a1013 0%, var(--red-deep) 55%, #8e0011 100%);
}
.rf-nbp-coupon-inner {
  padding: 22px 16px 20px;
}
.rf-nbp-coupon-foil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* The band of light that drifts across the foil. */
.rf-nbp-coupon.has-foil::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgb(255 214 245 / 45%) 36%,
    rgb(214 240 255 / 55%) 44%,
    rgb(255 255 255 / 65%) 50%,
    rgb(214 255 231 / 55%) 56%,
    rgb(255 236 199 / 45%) 64%,
    transparent 80%
  );
  background-size: 260% 100%;
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: rf-nbp-foil-shift 5.5s ease-in-out infinite alternate;
}
@keyframes rf-nbp-foil-shift {
  from {
    background-position: 0% 0;
  }
  to {
    background-position: 100% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rf-nbp-coupon.has-foil::before {
    animation: none;
    background-position: 50% 0;
  }
}
.rf-nbp-coupon-hint {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: #6c747f;
  text-shadow: 0 1px 0 #ffffffcc, 0 -1px 0 #00000014;
  pointer-events: none;
}

.rf-nbp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.rf-nbp-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: 12px;
  font-weight: 800;
  color: var(--stone);
}
/* The preview panel scrolls with the same thin bar as the assets box. */
#rf-preview-scroll-area {
  scrollbar-width: thin;
  scrollbar-color: var(--color-outline-variant, #e6bdb9) transparent;
}
#rf-preview-scroll-area::-webkit-scrollbar {
  width: 6px;
}
#rf-preview-scroll-area::-webkit-scrollbar-track {
  background: transparent;
}
#rf-preview-scroll-area::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}
#rf-preview-scroll-area::-webkit-scrollbar-thumb {
  background: var(--color-outline-variant, #e6bdb9);
  border-radius: 999px;
}
#rf-preview-scroll-area::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary, #bb0016);
}

/* ── RetailFix Nearby post settings ──────────────────────────────────────
   Message / Product and Include phone sit at the top of the same popup,
   using the offer chips and TikTok's switch. */
.rf-geo-posttype {
  margin-bottom: 0;
}
.rf-geo-phone + .rf-geo-price-fields {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #efe2df;
}
.rf-geo-price .rf-geo-phone .rf-tt-help:not(#rf-tt) {
  color: var(--color-on-surface-variant, #5c3f3d) !important;
}
.rf-tt-switch:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Marks a cropped Live Scraper photo; tapping it offers Restore original.
   Round and small, so it fits beside the COVER label on a narrow tile. */
.rf-crop-tag {
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 11;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--color-secondary-container, #fea121);
  color: #1c1b1b;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.rf-crop-tag:focus-visible {
  outline: 2px solid var(--color-primary, #bb0016);
  outline-offset: 1px;
}

/* The Square item an offer is on, picked by name and photo. */
.rf-sq-pick {
  margin-bottom: 16px;
}
.rf-sq-pick-field {
  position: relative;
}
.rf-sq-pick .rf-geo-coupon-label {
  margin-bottom: 7px;
}
.rf-sq-pick-box {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 8px;
  border: 1px solid #e6d8d5;
  border-radius: 14px;
  background: #fff;
  font-family: var(--font-sans, sans-serif);
  text-align: left;
  cursor: pointer;
}
.rf-sq-pick-box:hover,
.rf-sq-pick-box.is-open {
  border-color: var(--color-primary, #bb0016);
}
.rf-sq-pick-box:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(187 0 22 / 10%);
}
.rf-sq-thumb {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  background: #f3e9e7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9b4b0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") no-repeat center / 20px;
}
.rf-sq-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rf-sq-pick-name {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rf-sq-pick-name.is-empty {
  font-weight: 500;
  color: #a8a29e;
}
.rf-sq-pick-chev {
  flex: none;
  width: 12px;
  height: 8px;
  color: #5c3f3d;
}
.rf-sq-pick-box.is-open .rf-sq-pick-chev {
  transform: rotate(180deg);
}
.rf-sq-pick-list {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid #e6d8d5;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 30px rgb(28 27 27 / 14%);
}
.rf-sq-pick-search {
  width: 100%;
  margin-bottom: 6px;
  padding: 10px 12px;
  border: 1px solid #e6d8d5;
  border-radius: 10px;
  font-family: var(--font-sans, sans-serif);
  font-size: 14px;
}
.rf-sq-pick-search:focus {
  outline: none;
  border-color: var(--color-primary, #bb0016);
}
.rf-sq-pick-opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px;
  border: 0;
  border-radius: 10px;
  background: none;
  font-family: var(--font-sans, sans-serif);
  font-size: 14.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.rf-sq-pick-opt .rf-sq-thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
}
.rf-sq-pick-opt:hover {
  background: #fcf3f1;
}
.rf-sq-pick-opt.is-picked {
  background: #fdeceb;
  font-weight: 800;
}
.rf-sq-pick-empty {
  padding: 14px 10px;
  font-size: 14px;
  color: #78716c;
}
.rf-sq-pick-clear {
  position: sticky;
  bottom: -6px;
  width: 100%;
  margin-top: 4px;
  padding: 9px;
  border: 0;
  border-top: 1px solid #f0e4e1;
  background: #fff;
  font-family: var(--font-sans, sans-serif);
  font-size: 13px;
  font-weight: 700;
  color: #78716c;
  cursor: pointer;
}
.rf-sq-pick-note {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #78716c;
}

/* A posted row's offer, on its own line under the date and platforms. */
.rf-post-offer {
  flex: 1 1 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  color: var(--color-on-surface-variant, #5c3f3d);
}
.rf-post-offer svg {
  flex: none;
  color: var(--color-primary, #bb0016);
}
.rf-post-offer b {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-primary, #bb0016);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
}
.rf-post-offer span {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The preview's QR code, as on a perk in Nearby: white so it reads. */
.rf-offer-qr {
  width: 132px;
  margin: 14px auto 0;
  padding: 9px;
  border-radius: 12px;
  background: #fff;
}
.rf-offer-qr svg {
  display: block;
  width: 100%;
  height: auto;
}
.rf-offer-qr + .rf-offer-code {
  margin-top: 10px;
}

/* This item | Whole purchase, under the Square item. */
.rf-sq-scope {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 10px;
}
.rf-sq-scope .rf-sq-scope-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
.rf-sq-scope .rf-geo-coupon-types {
  margin: 0;
}
.rf-geo-coupon-body > .rf-sq-pick {
  grid-column: 1 / -1;
  margin-bottom: 0;
}
.rf-sq-pick .rf-sq-pick-note + .rf-sq-scope {
  margin-top: 12px;
}

/* Not in my Square: set apart at the foot of the items. */
.rf-sq-pick-opt.rf-sq-pick-outside {
  margin-bottom: 4px;
  border-bottom: 1px solid #f0e4e1;
  border-radius: 10px 10px 0 0;
}
.rf-sq-thumb.rf-sq-thumb-gift {
  background: #fdeceb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bb0016' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12v8a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-8'/%3E%3Crect x='2' y='7' width='20' height='5' rx='1'/%3E%3Cpath d='M12 21V7'/%3E%3Cpath d='M12 7S10.7 3 8.4 3a2.4 2.4 0 0 0 0 4z'/%3E%3Cpath d='M12 7s1.3-4 3.6-4a2.4 2.4 0 0 1 0 4z'/%3E%3C/svg%3E") no-repeat center / 20px;
}

/* A video still processing, or one that couldn't be used */
.rf-video-state {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* Clear of the Cover label along the bottom and the remove button. */
  padding: 24px 8px 32px;
  text-align: center;
  line-height: 1.2;
  text-wrap: balance;
  container-type: size;
}
.rf-video-state b { font-size: 12px; font-weight: 800; }
.rf-video-state small { font-size: 10.5px; opacity: 0.85; }
.rf-video-state-proc { background: #3a302c; color: #fff; }
.rf-video-state-fail { background: #fde8e8; color: #a1121f; border: 1.5px solid #f3c2c2; }
.rf-video-spin {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  border: 3px solid rgb(255 255 255 / 25%);
  border-top-color: #fff;
  animation: rf-video-spin 0.9s linear infinite;
  margin-bottom: 2px;
}
@keyframes rf-video-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rf-video-spin { animation: none; } }
/* Smaller tiles keep to the heading, sized to fit between the buttons. */
@container (max-height: 70px) {
  .rf-video-state-proc small { display: none; }
}
@container (max-height: 45px) {
  .rf-video-state small { display: none; }
  .rf-video-state b { font-size: 10.5px; line-height: 1.15; }
  .rf-video-state .rf-video-spin { width: 16px; height: 16px; border-width: 2.5px; margin-bottom: 0; }
}
.rf-video-trimming {
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 6;
  background: rgb(0 0 0 / 65%);
  color: #fff;
  border-radius: 9999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 800;
}
.rf-video-wait-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff2dc;
  color: #9a5b00;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-wrap: pretty;
}

/* Library: the Your Videos heading with Join videos beside it */
.rf-lib-videos-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.rf-lib-join-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 16px; border-radius: 9999px; border: 1.5px solid #f0d2cb; background: #fff; color: #bb0016; font: inherit; font-size: 14px; font-weight: 800; white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.rf-lib-join-btn:hover { background: #bb0016; border-color: #bb0016; color: #fff; }
.rf-lib-join-btn:focus-visible { outline: 2px solid #bb0016; outline-offset: 2px; }

/* ── Start from a photo ──────────────────────────────────────────────────────
   The picture icon inside the link box, on the left of the placeholder, and
   the phone's Take a photo / Choose pop-up, in the cropper's own look. */
.rf-photo-url-input {
  padding-left: 58px;
}
.rf-photo-icon-btn {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: var(--color-on-surface-variant, #78716c);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.rf-photo-icon-btn:hover {
  background: rgba(187, 0, 22, 0.08);
  color: var(--color-primary, #bb0016);
}
.rf-photo-icon-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.rf-photo-icon-btn[data-tooltip]:hover::after {
  margin-top: 10px;
}
.rf-photo-sheet .rf-crop-modal {
  max-width: 400px;
}
.rf-photo-opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rf-photo-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px;
  border: 1.5px solid var(--color-outline-variant, #e6bdb9);
  border-radius: 16px;
  background: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  color: #1c1b1b;
  text-align: left;
  cursor: pointer;
}
.rf-photo-opt:hover {
  border-color: var(--color-primary, #bb0016);
}
.rf-photo-opt small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 500;
  color: #78716c;
}
.rf-photo-opt-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(187, 0, 22, 0.08);
  color: var(--color-primary, #bb0016);
}

/* A photo post's product name, and editing it. */
.rf-photo-name {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rf-photo-name-edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid var(--color-outline-variant, #e6bdb9);
  border-radius: 9999px;
  background: #fff;
  color: var(--color-primary, #bb0016);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.rf-photo-name-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.rf-photo-name-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1.5px solid var(--color-primary, #bb0016);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #1c1b1b;
}
.rf-photo-name-save {
  flex: none;
  height: 40px;
  padding: 0 16px;
  border: none;
  border-radius: 10px;
  background: var(--color-primary, #bb0016);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

/* A photo post's mark in Recent, where a link post shows its site icon. */
.rf-recent-photo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(187, 0, 22, 0.08);
  color: var(--color-primary, #bb0016);
}

/* Start a post from this photo: a gradient button in the photo's lower-left
   corner. On hover the gradient turns toward the side the pointer comes
   from; --rf-a is set as the pointer moves. */
@property --rf-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 135deg;
}
.rf-start-post {
  --rf-a: 135deg;
  position: absolute;
  left: 4px;
  bottom: 4px;
  z-index: 12;
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(var(--rf-a), #bb0016 0%, #e1272b 45%, #fea121 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: --rf-a 0.35s ease, opacity 0.15s ease;
}
.rf-start-post-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
}
.rf-start-post:disabled {
  cursor: default;
  filter: grayscale(0.4);
}
/* Full size: the same button, at the size of the other actions there. */
.rf-start-post.rf-start-post-lg {
  position: relative;
  left: auto;
  bottom: auto;
  width: 44px;
  height: 44px;
}
.rf-start-post.rf-start-post-lg:hover:not(:disabled) {
  background: linear-gradient(var(--rf-a), #bb0016 0%, #e1272b 45%, #fea121 100%);
}
@media (prefers-reduced-motion: reduce) {
  .rf-start-post { transition: opacity 0.15s ease; }
}
/* The button sits at the photo's left edge: its label opens to the right,
   over the photo, instead of hanging off the card. */
.rf-start-post[data-tooltip]:hover::after {
  left: 0;
  transform: none;
}

/* "+N" after a search bar's filter chips when some are cut off, and a fade
   on the chips at that edge. Shared with On Cue. */
.rf-chips-more {
  flex-shrink: 0;
  height: 28px;
  min-width: 34px;
  padding: 0 10px;
  margin-left: 6px;
  border: 0;
  border-radius: 9999px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-sans, sans-serif);
  font-size: 13px;
  font-weight: 800;
  line-height: 28px;
  cursor: pointer;
}
.rf-chips-more[hidden] {
  display: none;
}
.rf-search-scroll-area:has(+ .rf-chips-more:not([hidden])) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}

/* Your caption, inside the AI panel between its choices and Post to. */
#rf-ai-panel .rf-caption-sec {
  padding-top: 14px;
  border-top: 1px solid rgb(255 255 255 / 26%);
}
#rf-ai-panel .rf-caption-head h2 {
  margin: 0;
}
#rf-ai-panel .rf-caption-sub {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: rgb(255 255 255 / 85%);
}
#rf-ai-panel .rf-suggested-box {
  border: 0 !important;
  box-shadow: 0 4px 14px rgb(0 0 0 / 10%);
}
/* Dark text on the white box, over the panel's rule that makes everything
   in it white. */
#rf-ai-panel .rf-suggested-box,
#rf-ai-panel .rf-suggested-box textarea {
  color: #1c1917 !important;
}
#rf-ai-panel .rf-suggested-box textarea {
  font-size: 14px;
  line-height: 1.55;
}
#rf-ai-panel .rf-report-ai,
#rf-ai-panel .rf-report-ai span,
#rf-ai-panel .rf-report-ai button {
  color: rgb(255 255 255 / 85%) !important;
}
#rf-ai-panel .rf-report-ai button:first-of-type:not(:only-child) {
  color: #fff !important;
  font-weight: 800 !important;
}

/* On Cue, as a tile beside "Image or video" in Your post. */
.rf-cue-tile {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px;
  border: 1.5px solid #f4c7c0;
  background: linear-gradient(160deg, #fff5f2, #ffe9e3);
  text-align: center;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rf-cue-tile:hover {
  border-color: var(--color-primary, #bb0016);
  box-shadow: 0 0 0 2px rgb(187 0 22 / 25%);
}
.rf-cue-tile:focus-visible {
  outline: 2px solid var(--color-primary, #bb0016);
  outline-offset: 2px;
}
.rf-cue-tile-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: linear-gradient(90deg, #bb0016, #e1272b);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.rf-cue-tile-icon svg {
  width: 25px;
  height: 25px;
}
.rf-cue-tile-text {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-primary, #bb0016);
}
@media (max-width: 400px) {
  .rf-cue-tile-text {
    font-size: 14px;
  }
}

/* Two columns: Your post fills the left column down to the bottom of the
   right one. Its own height counts as zero, so the image grid scrolls inside
   it rather than making the row taller. */
@media (min-width: 900px) {
  #rf-visual-assets {
    flex: 1 1 0;
    height: 0;
    min-height: 450px;
    max-height: none;
  }
}

/* Phones: a little smaller so five slots and the count fit on one line. */
@media (max-width: 480px) {
  .rf-post-slot {
    width: 42px;
    height: 42px;
  }
  .rf-post-slot.is-video::after {
    top: 10px;
  }
}
/* The title opens for editing when tapped, same as Edit. */
.rf-scrape-title.is-editable {
  cursor: pointer;
}
.rf-scrape-title.is-editable:hover {
  color: var(--color-primary, #bb0016);
}

/* ── Split upload tiles ───────────────────────────────────────────────────
   Upload in the top-left half, the camera in the bottom-right half, cut
   corner to corner. Sizes follow the tile, so a small Your post tile and a
   large Library tile both fit. */
.rf-upload-tile-wrap.rf-diag {
  container-type: inline-size;
}
.rf-upload-tile-wrap:not(.rf-diag) .rf-diag-up {
  display: none;
}
.rf-upload-tile-wrap.rf-diag > div:first-child > :not(input):not(.rf-diag-up) {
  display: none;
}
.rf-diag-up,
.rf-diag-cam-in {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5cqw;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
}
.rf-diag-up {
  left: 30%;
  top: 28%;
}
.rf-diag-cam-in {
  left: 70%;
  top: 72%;
}
.rf-diag-icon {
  display: inline-flex;
  height: 18cqw;
  color: var(--color-on-surface-variant, #5c3f3d);
}
.rf-diag-icon svg {
  width: auto;
  height: 100%;
}
.rf-diag-label {
  font-size: 8cqw;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-primary, #bb0016);
}
.rf-diag-count {
  font-size: 7.5cqw;
  font-weight: 700;
  line-height: 1;
  color: var(--color-on-surface-variant, #5c3f3d);
}
/* The camera half: a button over the tile's bottom-right triangle, inside
   its dashed border, with the dividing line drawn over both. */
.rf-diag-cam {
  position: absolute;
  /* Sized from the tile's width: the wrap can be taller than the square
     tile when a taller tile shares its row. */
  top: 2px;
  left: 2px;
  width: calc(100% - 4px);
  aspect-ratio: 1;
  z-index: 2;
  padding: 0;
  border: 0;
  border-radius: calc(1rem - 2px);
  background: #fbecea;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  font: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.rf-diag-cam:hover {
  background: #f7dcd8;
}
.rf-diag-cam:focus-visible {
  outline: 2px solid var(--color-primary, #bb0016);
  outline-offset: -4px;
}
.rf-upload-tile-wrap.rf-diag::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(100% - 4px);
  aspect-ratio: 1;
  z-index: 3;
  border-radius: calc(1rem - 2px);
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 1px),
    #ead6d2 calc(50% - 1px),
    #ead6d2 calc(50% + 1px),
    transparent calc(50% + 1px)
  );
  pointer-events: none;
}

/* On Cue tile: stays square like the photos beside it, with its icon and
   text sized from the tile. */
.rf-cue-tile {
  container-type: inline-size;
  min-height: 0;
  overflow: hidden;
  gap: 0;
  padding: 5%;
}
.rf-cue-tile-icon {
  width: 44cqw;
  height: 44cqw;
  border-radius: 12cqw;
  margin-bottom: 6cqw;
}
.rf-cue-tile-icon svg {
  width: 74%;
  height: 74%;
}
.rf-cue-tile .rf-cue-tile-text {
  font-size: 13cqw;
  font-weight: 700;
}

/* Phones: the five slots share the room left beside "1 of 5". */
@media (max-width: 480px) {
  .rf-post-strip {
    min-width: 0;
    flex: 1 1 100%;
  }
  .rf-post-strip-row {
    min-width: 0;
  }
  .rf-post-slot {
    flex: 0 1 42px;
    width: auto;
    min-width: 28px;
    height: auto;
    aspect-ratio: 1;
  }
  .rf-post-strip-count {
    flex: none;
  }
}

/* Post to: a platform that isn't open yet. Greyed out; its tooltip says
   Coming soon. */
.rf-post-target-grid .rf-plat-soon {
  cursor: default;
  border-color: rgb(255 255 255 / 18%);
}
.rf-post-target-grid .rf-plat-soon:hover {
  background: transparent;
}
.rf-post-target-grid .rf-plat-soon > * {
  opacity: 0.4;
}

/* ── Caption and cover ─────────────────────────────────────────────────────
   Wide: the heading over the cover, "Pick a caption" over the caption cards,
   "Get new captions" over Tone and Length, with the cover, the cards and the
   sliders all the same height. The cards pass under the Get new captions
   column, which casts a shadow on them. Narrow: the heading on its own line,
   the cover beside the cards, Get new captions under them. */
#rf-ai-panel:has(.rf-cap-panel) {
  container: rf-cap / inline-size;
}
.rf-cap-panel {
  --cap-h: 120px;
  display: grid;
  grid-template-columns: var(--cap-h) minmax(0, 1fr) 108px;
  grid-template-rows: auto auto var(--cap-h);
  grid-template-areas:
    "head head head"
    "cover pickh regenh"
    "cover pick regen";
  column-gap: 18px;
  row-gap: 8px;
  align-items: stretch;
}
#rf-ai-panel:has(.rf-cap-panel) {
  padding-top: 12px;
}
.rf-cap-head {
  grid-area: head;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}
.rf-cap-head h2 {
  margin: 0;
  line-height: 1;
}
/* Keeps its size beside a heading wider than its column. */
.rf-cap-head svg {
  flex-shrink: 0;
}
.rf-cap-panel .rf-ai-legend {
  align-self: end;
}
.rf-cap-pick-h { grid-area: pickh; }
.rf-cap-regen-h { grid-area: regenh; white-space: nowrap; }
.rf-cap-cover {
  grid-area: cover;
  display: block;
  width: var(--cap-h);
  height: var(--cap-h);
}
.rf-cap-cover > div {
  width: 100% !important;
  height: 100% !important;
}
.rf-cap-cover .absolute {
  white-space: nowrap;
}
.rf-cap-pick {
  grid-area: pick;
  min-width: 0;
  display: flex;
}
.rf-cap-regen {
  grid-area: regen;
  min-width: 0;
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Starts where the cards are cut off. */
  margin-left: -18px;
  padding-left: 18px;
}
.rf-cap-regen .rf-ai-generate {
  width: 100%;
  gap: 6px;
}
.rf-cap-regen .rf-ai-regen-slot {
  height: 16px;
}

/* The strip of caption cards. */
.rf-cap-stripwrap {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.rf-cap-strip {
  flex: 1;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  min-height: 0;
}
.rf-cap-strip::-webkit-scrollbar {
  display: none;
}
.rf-cap-card {
  flex: 0 0 118px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 12px;
  background: rgb(255 255 255 / 10%);
  color: #fff;
  text-align: left;
  font-family: var(--font-sans, sans-serif);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.rf-cap-card:hover {
  background: rgb(255 255 255 / 16%);
}
.rf-cap-card.is-on {
  background: #fff;
  border-color: #fff;
  cursor: default;
}
.rf-cap-name {
  font-size: 12.5px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rf-cap-text {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
  color: rgb(255 255 255 / 90%);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Over the panel's blanket white on every span and button. */
#rf-ai-panel .rf-cap-card.is-on .rf-cap-name {
  color: var(--color-primary, #bb0016);
}
#rf-ai-panel .rf-cap-card.is-on .rf-cap-text {
  color: #1c1917;
}
#rf-ai-panel .rf-cap-card .rf-cap-text {
  color: rgb(255 255 255 / 90%);
}
.rf-cap-card.is-empty {
  cursor: default;
  background: rgb(255 255 255 / 8%);
  border-color: rgb(255 255 255 / 18%);
}
.rf-cap-card.is-wait {
  align-items: center;
  justify-content: center;
  cursor: default;
}
.rf-cap-card.is-busy {
  animation: rf-cap-pulse 1.2s ease-in-out infinite;
}
@keyframes rf-cap-pulse {
  50% { background: rgb(255 255 255 / 16%); }
}
/* The Nearby preview's arrows, always shown here. */
#rf-ai-panel .rf-cap-stripwrap .rf-nbp-nav {
  padding: 0;
  opacity: 1;
  top: calc(50% - 6px);
  z-index: 4;
}
.rf-cap-prev { left: -14px; }
.rf-cap-next { right: -14px; }
.rf-cap-dots {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 4px;
  height: 5px;
  margin-top: 7px;
}
.rf-cap-dot {
  position: relative;
  width: 5px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: rgb(255 255 255 / 40%);
  cursor: pointer;
  transition: width 0.2s ease, background 0.15s ease;
}
/* A bigger area to tap than the dot itself. */
.rf-cap-dot::after {
  content: "";
  position: absolute;
  inset: -6px -3px;
}
.rf-cap-dot:hover {
  background: rgb(255 255 255 / 75%);
}
.rf-cap-dot.is-on {
  width: 14px;
  background: #fff;
}
/* The outline behind the dots of the cards on screen. */
.rf-cap-win {
  position: absolute;
  top: -4px;
  left: 0;
  height: 13px;
  border-radius: 9px;
  background: rgb(255 255 255 / 18%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 35%);
  pointer-events: none;
  transition: transform 0.25s ease, width 0.25s ease, opacity 0.15s ease;
}
#rf-ai-panel .rf-cap-dot {
  z-index: 1;
}
/* With the dots under the cards, the cover and sliders match the cards. */
.rf-cap-panel {
  grid-template-rows: auto auto calc(var(--cap-h) + 12px);
}
.rf-cap-cover {
  height: var(--cap-h);
  align-self: end;
  margin-bottom: 12px;
}
.rf-cap-head {
  margin-bottom: 10px;
}

@container rf-cap (max-width: 520px) {
  .rf-cap-panel {
    --cap-h: 120px;
    grid-template-columns: var(--cap-h) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 116px;
    grid-template-areas:
      "head head"
      "cover regenh"
      "cover regen"
      "pickh pickh"
      "pick pick";
    column-gap: 14px;
  }
  /* Square, about as tall as Get new captions beside it. */
  .rf-cap-panel .rf-cap-cover {
    align-self: center;
    margin-bottom: 0;
  }
  /* The sliders stay a comfortable width, not the whole row. */
  .rf-cap-regen,
  .rf-cap-regen-h {
    max-width: 280px;
  }
  .rf-cap-pick-h {
    margin-top: 10px;
  }
  .rf-cap-head {
    margin-bottom: 4px;
  }
  .rf-cap-regen-h {
    margin-top: 0;
  }
  .rf-cap-regen {
    margin-left: 0;
    padding-left: 0;
  }

  .rf-cap-regen .rf-ai-generate {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6px;
  }
  .rf-cap-card {
    flex-basis: 132px;
  }
  .rf-cap-text {
    -webkit-line-clamp: 2;
  }
  .rf-cap-cover .absolute,
  .rf-cap-cover .absolute * {
    font-size: 8px !important;
    letter-spacing: -0.02em;
  }
  .rf-cap-cover .absolute {
    left: 3px !important;
    bottom: 3px !important;
    padding: 1px 4px !important;
    gap: 3px !important;
  }
}
/* No cover yet: the cards take its place, under the heading. */
.rf-cap-panel:not(:has(.rf-cap-cover)) {
  grid-template-rows: auto auto calc(var(--cap-h) + 12px);
  grid-template-areas:
    "head head head"
    "pickh pickh regenh"
    "pick pick regen";
}
@container rf-cap (max-width: 520px) {
  .rf-cap-panel:not(:has(.rf-cap-cover)) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 116px;
    grid-template-areas:
      "head"
      "regenh"
      "regen"
      "pickh"
      "pick";
  }
}

/* The cards fade out at the edges they scroll past, only on a side with
   more cards, so they ease away instead of being cut off. Only the cards
   fade: nothing is drawn over the panel behind them. On the still frame
   around the strip, since some browsers skip a fade on a scrolling box. */
.rf-cap-clip {
  flex: 1;
  display: flex;
  min-width: 0;
  min-height: 0;
}
.rf-cap-clip > .rf-cap-strip {
  flex: 1;
  min-width: 0;
}
.rf-cap-stripwrap.has-next:not(.has-prev) .rf-cap-clip {
  -webkit-mask-image: linear-gradient(to left, rgb(0 0 0 / 62%) 0, rgb(0 0 0 / 82%) 9px, rgb(0 0 0 / 94%) 20px, #000 32px);
  mask-image: linear-gradient(to left, rgb(0 0 0 / 62%) 0, rgb(0 0 0 / 82%) 9px, rgb(0 0 0 / 94%) 20px, #000 32px);
}
.rf-cap-stripwrap.has-prev:not(.has-next) .rf-cap-clip {
  -webkit-mask-image: linear-gradient(to right, rgb(0 0 0 / 62%) 0, rgb(0 0 0 / 82%) 9px, rgb(0 0 0 / 94%) 20px, #000 32px);
  mask-image: linear-gradient(to right, rgb(0 0 0 / 62%) 0, rgb(0 0 0 / 82%) 9px, rgb(0 0 0 / 94%) 20px, #000 32px);
}
.rf-cap-stripwrap.has-prev.has-next .rf-cap-clip {
  -webkit-mask-image:
    linear-gradient(to right, rgb(0 0 0 / 62%) 0, rgb(0 0 0 / 82%) 9px, rgb(0 0 0 / 94%) 20px, #000 32px),
    linear-gradient(to left, rgb(0 0 0 / 62%) 0, rgb(0 0 0 / 82%) 9px, rgb(0 0 0 / 94%) 20px, #000 32px);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, rgb(0 0 0 / 62%) 0, rgb(0 0 0 / 82%) 9px, rgb(0 0 0 / 94%) 20px, #000 32px),
    linear-gradient(to left, rgb(0 0 0 / 62%) 0, rgb(0 0 0 / 82%) 9px, rgb(0 0 0 / 94%) 20px, #000 32px);
  mask-composite: intersect;
}

/* The round carousel arrows (the caption cards and the Nearby preview):
   the arrow centred in a clean white circle, red, with a soft lift. */
.rf-nbp-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 28px;
  height: 28px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 12%), 0 4px 12px rgb(0 0 0 / 18%);
  transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
/* Over the panel's blanket "inherit" on everything inside it. */
.rf-nbp-nav,
#rf-ai-panel button.rf-nbp-nav.rf-nbp-nav,
#rf-ai-panel button.rf-nbp-nav.rf-nbp-nav svg,
#rf-ai-panel button.rf-nbp-nav.rf-nbp-nav path {
  color: var(--color-primary, #bb0016);
}
.rf-nbp-nav svg {
  display: block;
  flex-shrink: 0;
  color: inherit;
}
.rf-nbp-nav:hover {
  box-shadow: 0 2px 4px rgb(0 0 0 / 14%), 0 6px 16px rgb(0 0 0 / 22%);
  transform: translateY(-50%) scale(1.06);
}

.rf-nbp-nav svg {
  width: 15px;
  height: 15px;
}
@media (max-width: 640px) {
  .rf-cap-stripwrap .rf-nbp-nav {
    width: 24px;
    height: 24px;
  }
  .rf-cap-stripwrap .rf-nbp-nav svg {
    width: 13px;
    height: 13px;
  }
  .rf-cap-prev { left: -12px; }
  .rf-cap-next { right: -12px; }
}

/* The arrow buttons keep their size whatever the site's own button rules
   (minimum sizes, padding) say. */
#rf-ai-panel button.rf-nbp-nav.rf-nbp-nav,
button.rf-nbp-nav.rf-nbp-nav {
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  min-width: 0;
  min-height: 0;
  max-width: none;
  padding: 0;
  margin: 0;
  line-height: 1;
  font-size: 0;
}
button.rf-nbp-nav.rf-nbp-nav svg {
  width: 12px;
  height: 12px;
}
.rf-cap-prev { left: -11px; }
.rf-cap-next { right: -11px; }
@media (max-width: 640px) {
  #rf-ai-panel .rf-cap-stripwrap button.rf-nbp-nav.rf-nbp-nav {
    width: 20px;
    height: 20px;
  }
  #rf-ai-panel .rf-cap-stripwrap button.rf-nbp-nav.rf-nbp-nav svg {
    width: 11px;
    height: 11px;
  }
  .rf-cap-prev { left: -10px; }
  .rf-cap-next { right: -10px; }
}

/* The spinner in the red circle while a caption is written: white, over
   the panel's blanket "inherit". */
#rf-ai-panel .rf-caption-wait.rf-caption-wait,
#rf-ai-panel .rf-caption-wait.rf-caption-wait svg {
  color: #fff;
}

/* Anchors for their styled tooltips. The title's wrapper is only as wide
   as its text, so the tip shows just where a click edits it. */
.rf-photo-name-tip {
  position: relative;
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  margin-right: auto;
}
.rf-post-views[data-tooltip] {
  position: relative;
}

/* "Making your post": centered across the screen on a phone. */
@media (max-width: 639.98px) {
  .rf-making-pop {
    left: 0;
    right: 0;
    margin-inline: auto;
  }
}