/** Shopify CDN: Minification failed

Line 5793:70 Unexpected "*"

**/
html {
  scroll-behavior: smooth;
}

/* =========================================
   LAYOUT
   ========================================= */

.latest-blog-products-wrap {
  max-width: 1520px;
  margin: 0 auto;
}

.latest-blog-products-head {
  margin-bottom: 24px;
}

.latest-blog-products-subtitle {
  max-width: 980px;
  font-size: 17px;
  line-height: 1.75;
  color: rgba(255,255,255,0.84);
}

/* =========================================
   TODAY PRODUCT ROW – HARD FALLBACK GLOW
   ========================================= */

.latest-product-row.is-today-row {
  --tier-rgb: 214, 162, 96;
  position: relative;
  z-index: 2;
  border-width: 1.5px;
  border-color: rgba(255, 224, 176, 0.98) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,214,150,0.12), transparent 68%),
    linear-gradient(180deg, rgba(36,30,24,0.98), rgba(27,25,29,0.95));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.10),
    inset 0 0 0 2px rgba(255,224,180,0.14),
    0 0 0 1px rgba(255,224,180,0.38),
    0 0 34px rgba(214,162,96,0.30),
    0 0 78px rgba(214,162,96,0.26),
    0 0 150px rgba(214,162,96,0.18),
    0 20px 50px rgba(0,0,0,0.24);
  animation: todayUnifiedBreath 1.45s ease-in-out infinite !important;
transform-origin: center;
}

.latest-product-row.is-today-row::before {
  opacity: 0.30;
}

.latest-product-row.is-today-row::after {
  opacity: 0.18;
  animation: none;
  transform: skewX(-16deg) translateX(12%);
  filter: blur(0.15px) saturate(1.08) brightness(1.06);
}

.latest-product-row.is-today-row .latest-product-reward-bg .bar-segments {
  opacity: 0.18;
  filter: saturate(1.04) brightness(0.92) contrast(1.04) grayscale(0.02);
}

.latest-product-row.is-today-row .latest-product-reward-bg::before {
  opacity: 0.52;
  filter: grayscale(0.02) brightness(0.98) contrast(1.06);
  transform: scale(1.02);
}

.latest-product-row.is-today-row .latest-product-reward-bg::after {
  opacity: 0.92;

  background:
    radial-gradient(circle at 50% 50%, rgba(255,214,150,0.14), transparent 70%),

    linear-gradient(
      180deg,
      rgba(255,255,255,0.18) 0%,
      rgba(255,255,255,0.06) 10%,
      rgba(255,255,255,0.015) 26%,
      rgba(255,255,255,0.00) 40%,
      rgba(0,0,0,0.02) 60%,
      rgba(0,0,0,0.14) 100%
    ),

    linear-gradient(
      102deg,
      rgba(255,255,255,0.00) 0%,
      rgba(255,240,220,0.05) 10%,
      rgba(255,232,200,0.14) 20%,
      rgba(255,220,180,0.22) 30%,
      rgba(255,230,205,0.06) 42%,
      rgba(255,255,255,0.00) 56%
    ),

    linear-gradient(
      90deg,
      rgba(8,10,15,0.20) 0%,
      rgba(8,10,15,0.08) 18%,
      rgba(255,255,255,0.03) 34%,
      rgba(255,255,255,0.04) 50%,
      rgba(8,10,15,0.06) 66%,
      rgba(8,10,15,0.18) 100%
    );

  background-size: 160% 160%, 140% 140%, 220% 220%, 160% 160%;

 animation: none !important;

  will-change: background-position;
}

.latest-product-row.is-today-row .latest-product-thumb-link {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 0 1px rgba(255,220,170,0.12),
    0 0 18px rgba(214,162,96,0.14),
    0 10px 24px rgba(0,0,0,0.12);
}

.latest-product-row.is-today-row .latest-product-price,
.latest-product-row.is-today-row .latest-product-name a {
  text-shadow:
    0 1px 2px rgba(0,0,0,0.30),
    0 0 14px rgba(255,220,180,0.10);
}

/* extra soft aura around today row */
.latest-product-row.is-today-row .latest-product-reward-bg {
  overflow: visible;
}

.latest-product-row.is-today-row .latest-product-reward-bg > .bar-segments::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(214,162,96,0.16), transparent 72%);
  filter: blur(20px);
  opacity: 0.9;
}

/* =========================================
   TODAY ROW – KEEP SPECIAL GLOW ON HOVER
   ========================================= */

.latest-product-row.is-today-row:hover,
.latest-product-row.is-today-row:focus-within {
  border-color: rgba(255, 232, 190, 1) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,210,150,0.10), transparent 68%),
    linear-gradient(180deg, rgba(34,29,24,0.97), rgba(26,25,29,0.94)) !important;
  filter: brightness(1.03) saturate(1.04) contrast(1.02);
  transform: translateY(-3px) scale(1.01);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.10),
    inset 0 0 0 2px rgba(255,224,180,0.16),
    0 0 0 1px rgba(255,224,180,0.40),
    0 0 34px rgba(214,162,96,0.28),
    0 0 72px rgba(214,162,96,0.24),
    0 0 140px rgba(214,162,96,0.16),
    0 22px 56px rgba(0,0,0,0.24) !important;
}

.latest-product-row.is-today-row:hover .latest-product-reward-bg .bar-segments,
.latest-product-row.is-today-row:focus-within .latest-product-reward-bg .bar-segments {
  opacity: 0.22;
  filter: saturate(1.08) brightness(0.96) contrast(1.05) grayscale(0);
}

.latest-product-row.is-today-row:hover .latest-product-reward-bg::before,
.latest-product-row.is-today-row:focus-within .latest-product-reward-bg::before {
  opacity: 0.58;
  filter: grayscale(0.01) brightness(1) contrast(1.08);
  transform: scale(1.022);
}

.latest-product-row.is-today-row:hover .latest-product-reward-bg::after,
.latest-product-row.is-today-row:focus-within .latest-product-reward-bg::after {
  opacity: 0.96;
}

.latest-product-row.is-today-row:hover::before,
.latest-product-row.is-today-row:focus-within::before {
  opacity: 0.34;
}

@keyframes todaySweep {
  0% { transform: translateX(-60%); }
  50% { transform: translateX(60%); }
  100% { transform: translateX(60%); }
}

@media (min-width: 1001px) {
  .latest-blog-products-wrap {
    padding-right: 250px;
  }

  .latest-date-nav {
    display: none;
  }
}

@media (min-width: 1001px) and (max-width: 1420px) {
  .latest-blog-products-wrap {
    padding-right: 215px;
  }

  .upload-timeline {
    right: 16px;
    max-width: 170px;
  }

  .timeline-date,
  .timeline-date:visited {
    min-width: 0;
    width: 100%;
    padding: 8px 10px;
    font-size: 11px;
  }
}

@media (min-width: 1001px) and (max-width: 1280px) {
  .latest-blog-products-wrap {
    padding-right: 195px;
  }

  .upload-timeline {
    right: 12px;
    max-width: 156px;
  }

  .timeline-date,
  .timeline-date:visited {
    font-size: 11px;
    padding: 7px 9px;
  }

  .timeline-month-separator {
    font-size: 10px;
  }
}

/* =========================================
   TIER TOKENS
   ========================================= */

.latest-dopamine-panel.is-bronze,
.latest-date-group.tier-bronze,
.latest-product-row.tier-bronze,
.timeline-date.tier-bronze,
.latest-date-nav-link.tier-bronze {
  --tier-rgb: 205,127,50;
  --tier-text: #ffd9ad;
  --tier-border-strong: rgba(236,166,98,0.88);
  --tier-glow-1: rgba(205,127,50,0.24);
  --tier-glow-2: rgba(205,127,50,0.20);
  --tier-glow-3: rgba(205,127,50,0.13);
}

.latest-dopamine-panel.is-silver,
.latest-date-group.tier-silver,
.latest-product-row.tier-silver,
.timeline-date.tier-silver,
.latest-date-nav-link.tier-silver {
  --tier-rgb: 214,224,236;
  --tier-text: #f4f9ff;
  --tier-border-strong: rgba(240,247,255,0.92);
  --tier-glow-1: rgba(214,224,236,0.24);
  --tier-glow-2: rgba(214,224,236,0.21);
  --tier-glow-3: rgba(214,224,236,0.14);
}

.latest-dopamine-panel.is-gold,
.latest-date-group.tier-gold,
.latest-product-row.tier-gold,
.timeline-date.tier-gold,
.latest-date-nav-link.tier-gold {
  --tier-rgb: 255,199,56;
  --tier-text: #ffe9a6;
  --tier-border-strong: rgba(255,226,110,0.94);
  --tier-glow-1: rgba(255,206,66,0.26);
  --tier-glow-2: rgba(255,206,66,0.23);
  --tier-glow-3: rgba(255,206,66,0.15);
}

.latest-dopamine-panel.is-platinum,
.latest-date-group.tier-platinum,
.latest-product-row.tier-platinum,
.timeline-date.tier-platinum,
.latest-date-nav-link.tier-platinum {
  --tier-rgb: 140,236,255;
  --tier-text: #eefdff;
  --tier-border-strong: rgba(186,246,255,0.95);
  --tier-glow-1: rgba(140,236,255,0.28);
  --tier-glow-2: rgba(140,236,255,0.25);
  --tier-glow-3: rgba(140,236,255,0.16);
}

/* =========================================
   DEFAULT LIVE GLOW TOKENS FOR NON-TIER DAYS
   ========================================= */

.latest-date-group,
.latest-product-row,
.timeline-date,
.latest-date-nav-link {
  --tier-rgb: 168, 180, 205;
  --tier-text: #f2f6ff;
  --tier-border-strong: rgba(210,220,240,0.88);
  --tier-glow-1: rgba(168,180,205,0.18);
  --tier-glow-2: rgba(168,180,205,0.14);
  --tier-glow-3: rgba(168,180,205,0.10);
}

/* =========================================
   SHARED TIER PULSE
   ========================================= */

.latest-date-group.is-live-glow .latest-date-divider-label,
.latest-dopamine-panel.is-bronze,
.latest-dopamine-panel.is-silver,
.latest-dopamine-panel.is-gold,
.latest-dopamine-panel.is-platinum,
.latest-library-reward.current-target.is-near-unlock {
  animation: dailyTierPulse 2.6s ease-in-out infinite;
}

@keyframes dailyTierPulse {
  0% {
    box-shadow:
      0 0 0 1px rgba(var(--tier-rgb), 0.30),
      0 0 8px rgba(var(--tier-rgb), 0.12),
      0 0 18px rgba(var(--tier-rgb), 0.11),
      0 0 30px rgba(var(--tier-rgb), 0.08),
      inset 0 0 8px rgba(255,255,255,0.02);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(var(--tier-rgb), 0.48),
      0 0 14px rgba(var(--tier-rgb), 0.20),
      0 0 28px rgba(var(--tier-rgb), 0.18),
      0 0 42px rgba(var(--tier-rgb), 0.13),
      inset 0 0 10px rgba(255,255,255,0.04);
  }
  100% {
    box-shadow:
      0 0 0 1px rgba(var(--tier-rgb), 0.34),
      0 0 10px rgba(var(--tier-rgb), 0.14),
      0 0 20px rgba(var(--tier-rgb), 0.12),
      0 0 32px rgba(var(--tier-rgb), 0.09),
      inset 0 0 8px rgba(255,255,255,0.025);
  }
}

/* =========================================
   BAR SEGMENTS
   ========================================= */

.bar-segments {
  position: absolute;
  inset: 0;
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.bar-segment {
  height: 100%;
  flex: 0 0 auto;
  position: relative;
  /* machined edges: light catch on top, shadow at the bottom, seam between segments */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.34),
    inset 0 3px 4px rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.44),
    inset 0 -4px 7px rgba(0,0,0,0.24),
    inset 1px 0 1px rgba(255,255,255,0.10),
    inset -1px 0 1px rgba(0,0,0,0.30);
}

/* travelling specular sheen: ONE shared light field over the whole bar (not per segment).
   The JS driver (av-sheen.js) sets --av-shn1/--av-shn2 from scroll parallax + slow drift
   + gyro on mobile, so the shine sweeps continuously through ALL rows of a day group. */

.bar-segments::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    linear-gradient(115deg,
      rgba(255,255,255,0.00) 0%,
      rgba(255,255,255,0.06) 30%,
      rgba(255,255,255,0.34) 46%,
      rgba(255,255,255,0.58) 50%,
      rgba(255,255,255,0.30) 54%,
      rgba(255,255,255,0.05) 70%,
      rgba(255,255,255,0.00) 100%),
    linear-gradient(115deg,
      rgba(255,255,255,0.00) 0%,
      rgba(255,255,255,0.09) 40%,
      rgba(255,255,255,0.20) 50%,
      rgba(255,255,255,0.08) 60%,
      rgba(255,255,255,0.00) 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: min(340px, 62%) 100%, min(760px, 140%) 100%;
  background-position: var(--av-shn1, -400px) 0, var(--av-shn2, -900px) 0;
  mix-blend-mode: screen;
}

/* layer 1: fine brushed-metal striations, layer 2: vertical polished-metal tonal curve */

.bar-bronze {
  background:
    repeating-linear-gradient(180deg,
      rgba(255,255,255,0.050) 0px, rgba(255,255,255,0.050) 1px,
      rgba(0,0,0,0.055) 2px, rgba(0,0,0,0.055) 3px,
      rgba(255,255,255,0.018) 4px, rgba(255,255,255,0.018) 5px),
    linear-gradient(180deg,
      #4a2410 0%,
      #8a4d1e 9%,
      #c97e36 20%,
      #eaa557 30%,
      #ffd9a0 38%,
      #f7bc72 44%,
      #c07a34 56%,
      #8f5120 70%,
      #6d3a14 82%,
      #9c5f28 92%,
      #3f1f0c 100%);
}

.bar-silver {
  background:
    repeating-linear-gradient(180deg,
      rgba(255,255,255,0.055) 0px, rgba(255,255,255,0.055) 1px,
      rgba(0,0,0,0.050) 2px, rgba(0,0,0,0.050) 3px,
      rgba(255,255,255,0.020) 4px, rgba(255,255,255,0.020) 5px),
    linear-gradient(180deg,
      #2b323d 0%,
      #5c6878 9%,
      #94a3b6 20%,
      #c6d2e0 30%,
      #f8fbff 38%,
      #d4dde9 44%,
      #97a4b4 56%,
      #6a7686 70%,
      #4c5663 82%,
      #7a8797 92%,
      #232932 100%);
}

.bar-gold {
  background:
    repeating-linear-gradient(180deg,
      rgba(255,255,255,0.050) 0px, rgba(255,255,255,0.050) 1px,
      rgba(0,0,0,0.055) 2px, rgba(0,0,0,0.055) 3px,
      rgba(255,255,255,0.018) 4px, rgba(255,255,255,0.018) 5px),
    linear-gradient(180deg,
      #4f320a 0%,
      #8a5c10 9%,
      #c78f1c 20%,
      #eab52e 30%,
      #ffe98e 38%,
      #f8c94e 44%,
      #c8891a 56%,
      #966410 70%,
      #6f480a 82%,
      #a5761a 92%,
      #402806 100%);
}

.bar-platinum {
  background:
    repeating-linear-gradient(180deg,
      rgba(255,255,255,0.050) 0px, rgba(255,255,255,0.050) 1px,
      rgba(0,0,0,0.045) 2px, rgba(0,0,0,0.045) 3px,
      rgba(255,255,255,0.020) 4px, rgba(255,255,255,0.020) 5px),
    linear-gradient(180deg,
      #143c50 0%,
      #2e6d8c 9%,
      #57a5c6 20%,
      #8ed3ea 30%,
      #eafbff 38%,
      #a9e2f4 44%,
      #5fa8c8 56%,
      #3d7d9c 70%,
      #2a5a74 82%,
      #4f92b2 92%,
      #10293a 100%);
}

/* =========================================
   DATE GROUPS / DAY PILLS
   ========================================= */

.latest-date-group {
  margin-top: 18px;
  margin-bottom: 4px;
}

.latest-date-group:first-child {
  margin-top: 4px;
}

.latest-date-divider {
  display: flex;
  align-items: center;
  gap: 14px;
}

.latest-date-divider-line {
  position: relative;
  flex: 1 1 auto;
  height: 1px;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.latest-date-divider-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  width: auto;
  max-width: 520px;
  min-height: 42px;
  padding: 10px 16px 10px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.90);
  text-shadow: 0 1px 2px rgba(0,0,0,0.58);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  box-shadow:
    0 6px 18px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.04);
  transition:
    max-width 0.34s ease,
    min-height 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease,
    transform 0.22s ease,
    color 0.22s ease;
}

.latest-date-divider-label::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
  transition: box-shadow 0.22s ease, opacity 0.22s ease;
}

.latest-date-divider-label:hover,
.latest-date-divider-label:focus-visible {
  transform: translateY(-1px) scale(1.02);
  max-width: 1120px;
  color: #ffffff;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.40),
    0 0 6px rgba(255,255,255,0.18);
  border-color: rgba(255,206,66,0.32);
  box-shadow:
    0 10px 30px rgba(0,0,0,0.45),
    0 0 18px rgba(255,206,66,0.24);
}

.latest-date-divider-label .bar-segments {
  z-index: 0;
  opacity: 0.36;
  filter: grayscale(0.28) brightness(0.74) saturate(0.82);
  transition: opacity 0.24s ease, filter 0.24s ease;
}

.latest-date-divider-label:hover .bar-segments,
.latest-date-divider-label:focus-visible .bar-segments,
.latest-date-divider-label.is-expanded .bar-segments {
  opacity: 0.96;
  filter: grayscale(0) brightness(1) saturate(1);
}

.latest-date-pill-media {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: auto;
  height: 100%;
  padding-right: 10px;
  overflow: visible;
}

.latest-date-pill-media img,
.timeline-date .latest-date-pill-media img,
.latest-date-nav-link .latest-date-pill-media img {
  display: block;
  width: auto;
  object-fit: contain;
  transform-origin: center center;
  will-change: transform, filter, opacity;
}

.latest-date-pill-media img {
  max-width: 78px;
  height: 18px;
}

.latest-date-pill-text-clip {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

.latest-date-pill-text-clip::-webkit-scrollbar {
  display: none;
}

.latest-date-pill-text-track {
  display: inline-flex;
  align-items: center;
  min-width: max-content;
  white-space: nowrap;
  will-change: transform;
  transform: translateX(0);
}

.latest-date-divider-label.is-expanded {
  max-width: min(96vw, 1180px);
  user-select: none;
}

.latest-date-divider-label.is-expanded .latest-date-pill-text-clip {
  overflow-x: hidden;
  overflow-y: hidden;
  cursor: grab;
}

.latest-date-divider-label.is-expanded .latest-date-pill-text-track {
  flex: 0 0 auto;
}

.latest-date-divider-label.is-dragging {
  cursor: grabbing;
}

.latest-date-pill-text {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
  color: inherit;
  flex: 0 0 auto;
}

.latest-date-pill-hover-text {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  margin-left: 0;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  flex: 0 0 auto;
  transition:
    max-width 0.36s ease,
    opacity 0.24s ease,
    margin-left 0.24s ease;
  color: rgba(255,255,255,0.82);
}

.latest-date-divider-label.has-archive-hover:hover .latest-date-pill-hover-text,
.latest-date-divider-label.has-archive-hover:focus-visible .latest-date-pill-hover-text,
.latest-date-divider-label.is-expanded .latest-date-pill-hover-text {
  max-width: 2000px;
  opacity: 1;
  margin-left: 14px;
}

.latest-date-group.tier-bronze .latest-date-pill-hover-text {
  color: #ffd9ad;
}

.latest-date-group.tier-silver .latest-date-pill-hover-text {
  color: #f4f9ff;
}

.latest-date-group.tier-gold .latest-date-pill-hover-text {
  color: #ffe9a6;
}

.latest-date-group.tier-platinum .latest-date-pill-hover-text {
  color: #eefdff;
}

/* tier pill contour */

.latest-date-group.tier-bronze .latest-date-divider-label,
.latest-date-group.tier-silver .latest-date-divider-label,
.latest-date-group.tier-gold .latest-date-divider-label,
.latest-date-group.tier-platinum .latest-date-divider-label {
  border-color: rgba(var(--tier-rgb), 0.35);
  color: var(--tier-text);
  box-shadow:
    0 6px 18px rgba(0,0,0,0.35);
}

.latest-date-divider-label:hover,
.latest-date-divider-label:focus-visible {
  box-shadow:
    0 10px 30px rgba(0,0,0,0.45);
}

/* =========================================
   TODAY / CURRENT DAY BOOST
   ========================================= */

.latest-date-group.is-live-glow .latest-date-divider-label {
  position: relative;
  transform-origin: center;
}

.latest-date-group.is-today-drop.is-live-glow .latest-date-divider-label {
  animation: todayUnifiedBreath 1.45s ease-in-out infinite !important;
}

.latest-date-group.is-live-glow .latest-date-divider-label::after {
  content: '';
  position: absolute;
  inset: -12%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(214,162,96,0.26), transparent 70%);
  filter: blur(24px);
  opacity: 0.95;
}

/* today pill + today row visual sync */
.latest-date-group.is-live-glow .latest-date-pill-text,
.latest-date-group.is-live-glow .latest-date-pill-hover-text {
  text-shadow:
    0 1px 2px rgba(0,0,0,0.30),
    0 0 10px rgba(255,224,180,0.10);
}

.latest-date-group.is-live-glow .latest-date-pill-media img {
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,0.20))
    drop-shadow(0 0 16px rgba(214,162,96,0.24))
    drop-shadow(0 0 30px rgba(214,162,96,0.16));
}

.latest-date-group.is-live-glow .latest-date-divider-line {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04),
    rgba(var(--tier-rgb), 0.36),
    rgba(255,255,255,0.04)
  );
}

.latest-date-group.is-live-glow .latest-date-pill-media img {
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,0.24))
    drop-shadow(0 0 18px rgba(var(--tier-rgb), 0.34))
    drop-shadow(0 0 34px rgba(var(--tier-rgb), 0.22));
  transform: scale(1.02);
}

.latest-date-group.is-live-glow .latest-date-pill-text {
  text-shadow:
    0 1px 2px rgba(0,0,0,0.32),
    0 0 10px rgba(255,255,255,0.08);
}

.latest-product-row.is-live-glow,
.latest-product-row.is-live-glow {
  border-color: rgba(var(--tier-rgb), 0.82) !important;
  background: linear-gradient(180deg, rgba(24,26,31,0.94), rgba(30,33,38,0.92));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 0 0 1px rgba(var(--tier-rgb), 0.28),
    0 0 18px rgba(var(--tier-rgb), 0.14),
    0 0 42px rgba(var(--tier-rgb), 0.12),
    0 0 80px rgba(var(--tier-rgb), 0.08),
    0 16px 40px rgba(0,0,0,0.18);
}

.latest-product-row.is-live-glow::before,
.latest-product-row.is-live-glow::before {
  opacity: 0.26;
}

.latest-product-row.is-live-glow::after,
.latest-product-row.is-live-glow::after {
  opacity: 0;
  animation: none;
}

/* =========================================
   ACTIVE DATE PRODUCT WAKE-UP + SETTLE
   ========================================= */

.latest-product-row,
.latest-product-reward-bg .bar-segments,
.latest-product-reward-bg::before,
.latest-product-row::before,
.latest-product-row::after {
  will-change: opacity, transform;
}

.latest-product-reward-bg .bar-segments {
  transition:
    opacity 2.4s cubic-bezier(0.16, 1, 0.3, 1),
    filter 2.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.latest-product-reward-bg::before {
  transition:
    opacity 2.4s cubic-bezier(0.16, 1, 0.3, 1),
    filter 2.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 2.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.latest-product-reward-bg::after {
  transition:
    opacity 2.6s cubic-bezier(0.16, 1, 0.3, 1),
    background 2.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.latest-product-row::before {
  transition: opacity 2.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.latest-product-row::after {
  transition:
    opacity 2.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 2.6s cubic-bezier(0.16, 1, 0.3, 1),
    filter 2.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ⚡ FAST ENTER (paliekam greitą) */
.latest-product-row.is-live-glow-enter .latest-product-reward-bg .bar-segments,
.latest-product-row.is-live-glow-enter .latest-product-reward-bg::before,
.latest-product-row.is-live-glow-enter::before,
.latest-product-row.is-live-glow-enter::after {
  transition-duration: .5s !important;
}

/* =========================================
   ACTIVE DATE SETTLE PHASE
   ========================================= */

/* today glow fallback even when no milestone tier is unlocked */
.latest-date-group.is-today-drop:not(.tier-bronze):not(.tier-silver):not(.tier-gold):not(.tier-platinum) .latest-date-divider-label,
.latest-date-group.is-live-glow:not(.tier-bronze):not(.tier-silver):not(.tier-gold):not(.tier-platinum) .latest-date-divider-label {
  border-color: rgba(210,220,240,0.92) !important;
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(168,180,205,0.16), rgba(255,255,255,0.04)),
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.015));
  box-shadow:
    0 0 0 1px rgba(168,180,205,0.30),
    0 0 16px rgba(168,180,205,0.18),
    0 0 34px rgba(168,180,205,0.16),
    0 0 70px rgba(168,180,205,0.10);
}

.latest-date-group.is-live-glow:not(.tier-bronze):not(.tier-silver):not(.tier-gold):not(.tier-platinum) .latest-product-row {
  border-color: rgba(210,220,240,0.72) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 0 0 1px rgba(168,180,205,0.24),
    0 0 16px rgba(168,180,205,0.12),
    0 0 36px rgba(168,180,205,0.10),
    0 14px 36px rgba(0,0,0,0.18);
}

/* full kick-in */
.latest-product-reward-bg .bar-segments {
  opacity: 0.10;
  filter: saturate(0.52) brightness(0.52) contrast(0.94) grayscale(0.30);
}

.latest-product-reward-bg::before {
  opacity: 0.50;
  mix-blend-mode: soft-light;
  filter: grayscale(0.46) brightness(0.52) contrast(0.92);
}

.latest-product-reward-bg::after {
  opacity: 0.20;
}

.latest-product-row::before {
  opacity: 0.05;
}

/* SLOW SETTLE — čia yra tavo ieškomas ilgas perėjimas */
.latest-product-row.is-live-glow-settling .latest-product-reward-bg .bar-segments,
.latest-product-row.is-live-glow-settling .latest-product-reward-bg::before,
.latest-product-row.is-live-glow-settling .latest-product-reward-bg::after,
.latest-product-row.is-live-glow-settling::before,
.latest-product-row.is-live-glow-settling::after {
  transition-duration: 10s !important;
  transition-timing-function: cubic-bezier(0.12, 0.82, 0.18, 1) !important;
}

/* settle state – aktyvi data, bet ne hover */
.latest-product-row.is-live-glow .latest-product-reward-bg .bar-segments {
  opacity: 0;
  filter: saturate(0) brightness(0) contrast(1) grayscale(1);
}

.latest-product-row.is-live-glow .latest-product-reward-bg::before {
  opacity: 0;
  filter: grayscale(1) brightness(0.55) contrast(0.9);
  transform: scale(1.01);
}

.latest-product-row.is-live-glow .latest-product-reward-bg::after {
  opacity: 0;
  background: none;
}

.latest-product-row.is-live-glow::before {
  opacity: 0;
}

.latest-product-row.is-live-glow::after {
  opacity: 0;
  animation: none;
  transform: skewX(-16deg) translateX(8%);
  filter: blur(0.2px) saturate(1.02);
}

/* wake-up state – trumpas užsidegimas, tada grįžta į settle */
.latest-product-row.is-live-glow-enter .latest-product-reward-bg .bar-segments {
  opacity: 0.56;
  filter: saturate(1.06) brightness(0.98) contrast(1.04) grayscale(0);
}

.latest-product-row.is-live-glow-enter .latest-product-reward-bg::before {
  opacity: 0.82;
  filter: grayscale(0) brightness(1.02) contrast(1.04);
  transform: scale(1.024);
}

.latest-product-row.is-live-glow-enter .latest-product-reward-bg::after {
  opacity: 0.94;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.18) 0%,
      rgba(255,255,255,0.065) 10%,
      rgba(255,255,255,0.015) 24%,
      rgba(255,255,255,0.00) 36%,
      rgba(0,0,0,0.00) 56%,
      rgba(0,0,0,0.09) 100%
    ),
    linear-gradient(
      102deg,
      rgba(255,255,255,0.00) 0%,
      rgba(255,255,255,0.030) 12%,
      rgba(255,255,255,0.085) 22%,
      rgba(255,255,255,0.16) 31%,
      rgba(255,255,255,0.045) 42%,
      rgba(255,255,255,0.00) 54%
    ),
    linear-gradient(
      90deg,
      rgba(8,10,15,0.16) 0%,
      rgba(8,10,15,0.06) 18%,
      rgba(255,255,255,0.024) 34%,
      rgba(255,255,255,0.028) 50%,
      rgba(8,10,15,0.05) 66%,
      rgba(8,10,15,0.14) 100%
    );
}

.latest-product-row.is-live-glow-enter::before {
  opacity: 0.34;
}

.latest-product-row.is-live-glow-enter::after {
  opacity: 0;
  animation: none;
}

.timeline-date.active,
.timeline-date.active:visited {
  background:
    radial-gradient(circle at 18% 50%, rgba(255,255,255,0.18), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.09)),
    linear-gradient(135deg, rgba(var(--tier-rgb), 0.34), rgba(var(--tier-rgb), 0.14)) !important;
  border-color: rgba(var(--tier-rgb), 1) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.14),
    inset 0 0 0 3px rgba(var(--tier-rgb), 0.34),
    0 0 0 1px rgba(var(--tier-rgb), 0.30),
    0 0 14px rgba(var(--tier-rgb), 0.18),
    0 8px 22px rgba(0,0,0,0.24);
  transform: scale(1.03);
}

.timeline-date.active::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  background:
    linear-gradient(
      135deg,
      rgba(var(--tier-rgb), 0.18),
      rgba(255,255,255,0.03)
    );
  opacity: 0.50;
  pointer-events: none;
  z-index: 0;
}

.timeline-date.active .latest-date-pill-media,
.timeline-date.active .timeline-date-external,
.timeline-date.active span,
.timeline-date.active strong {
  position: relative;
  z-index: 2;
}

.timeline-date.active::before {
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.08),
    inset 0 0 0 4px rgba(var(--tier-rgb), 0.16);
}

.timeline-date.active .latest-date-pill-media img {
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,0.28))
    drop-shadow(0 0 16px rgba(var(--tier-rgb), 0.30))
    drop-shadow(0 0 28px rgba(var(--tier-rgb), 0.18));
  transform: scale(1.04);
}

.timeline-date.active .timeline-date-label,
.timeline-date.active .latest-date-pill-text,
.timeline-date.active .timeline-date-external {
  color: #ffffff !important;
  font-weight: 800;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.30),
    0 0 10px rgba(255,255,255,0.14);
}

/* =========================================
   REWARD INLINE ITEMS
   ========================================= */

.latest-reward-group-label {
  font-weight: 800;
  color: rgba(255,255,255,0.92);
}

.latest-reward-inline-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
  white-space: nowrap;
}

.latest-reward-inline-text {
  display: inline-block;
  vertical-align: middle;
}

.latest-reward-inline-icon {
  display: inline-block;
  width: 15px;
  height: 15px;
  object-fit: contain;
  vertical-align: middle;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.16));
}

.latest-reward-inline-item-bronze .latest-reward-inline-text {
  color: #ffd9ad;
}

.latest-reward-inline-item-silver .latest-reward-inline-text {
  color: #f4f9ff;
}

.latest-reward-inline-item-gold .latest-reward-inline-text {
  color: #ffe9a6;
}

.latest-reward-inline-item-platinum .latest-reward-inline-text {
  color: #eefdff;
}

.latest-reward-inline-sep {
  display: inline-block;
  margin: 0 8px;
  color: rgba(255,255,255,0.46);
  vertical-align: middle;
}

.latest-date-divider-label .latest-date-pill-hover-text .latest-reward-inline-item,
.latest-date-divider-label .latest-date-pill-hover-text .latest-reward-group-label,
.latest-date-divider-label .latest-date-pill-hover-text .latest-reward-inline-sep {
  transform: translateY(6px);
  opacity: 0;
  transition: transform 0.34s ease, opacity 0.30s ease;
}

.latest-date-divider-label.is-expanded .latest-date-pill-hover-text .latest-reward-inline-item,
.latest-date-divider-label.is-expanded .latest-date-pill-hover-text .latest-reward-group-label,
.latest-date-divider-label.is-expanded .latest-date-pill-hover-text .latest-reward-inline-sep,
.latest-date-divider-label:hover .latest-date-pill-hover-text .latest-reward-inline-item,
.latest-date-divider-label:hover .latest-date-pill-hover-text .latest-reward-group-label,
.latest-date-divider-label:hover .latest-date-pill-hover-text .latest-reward-inline-sep,
.latest-date-divider-label:focus-visible .latest-date-pill-hover-text .latest-reward-inline-item,
.latest-date-divider-label:focus-visible .latest-date-pill-hover-text .latest-reward-group-label,
.latest-date-divider-label:focus-visible .latest-date-pill-hover-text .latest-reward-inline-sep {
  transform: translateY(0);
  opacity: 1;
}

.latest-date-divider-label .latest-date-pill-hover-text .latest-reward-inline-item:nth-child(1) { transition-delay: 0.03s; }
.latest-date-divider-label .latest-date-pill-hover-text .latest-reward-inline-item:nth-child(2) { transition-delay: 0.06s; }
.latest-date-divider-label .latest-date-pill-hover-text .latest-reward-inline-item:nth-child(3) { transition-delay: 0.09s; }
.latest-date-divider-label .latest-date-pill-hover-text .latest-reward-inline-item:nth-child(4) { transition-delay: 0.12s; }
.latest-date-divider-label .latest-date-pill-hover-text .latest-reward-inline-item:nth-child(5) { transition-delay: 0.15s; }
.latest-date-divider-label .latest-date-pill-hover-text .latest-reward-inline-item:nth-child(6) { transition-delay: 0.18s; }
.latest-date-divider-label .latest-date-pill-hover-text .latest-reward-inline-item:nth-child(7) { transition-delay: 0.21s; }
.latest-date-divider-label .latest-date-pill-hover-text .latest-reward-inline-item:nth-child(8) { transition-delay: 0.24s; }

/* =========================================
   MEDAL PARTICLES / FLY FX
   ========================================= */

.medal-particle {
  position: fixed;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,216,107,0.95) 42%, rgba(255,216,107,0.22) 72%, transparent 100%);
  box-shadow:
    0 0 10px rgba(255,255,255,0.85),
    0 0 22px rgba(255,216,107,0.55);
  pointer-events: none;
  opacity: 1;
  transform: translate(0, 0) scale(1);
  transition: transform 0.7s ease-out, opacity 0.7s ease-out;
  z-index: 99999;
}

.latest-medal-fly-clone {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  object-fit: contain;
  will-change: transform, top, left, width, height, opacity, filter;
  transform-origin: center center;
  transition:
    top 0.95s cubic-bezier(0.18, 0.9, 0.24, 1),
    left 0.95s cubic-bezier(0.18, 0.9, 0.24, 1),
    width 0.95s cubic-bezier(0.18, 0.9, 0.24, 1),
    height 0.95s cubic-bezier(0.18, 0.9, 0.24, 1),
    transform 0.34s ease,
    opacity 0.34s ease,
    filter 0.4s ease;
  opacity: 0;
  filter:
    drop-shadow(0 0 20px rgba(255,255,255,0.28))
    drop-shadow(0 0 44px rgba(255,230,140,0.18));
}

.latest-date-pill-media::after {
  content: '';
  position: absolute;
  top: -40%;
  left: -60%;
  width: 80%;
  height: 180%;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-120%) rotate(25deg);
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.25) 30%,
    rgba(255,255,255,0.95) 50%,
    rgba(255,255,255,0.25) 70%,
    rgba(255,255,255,0) 100%
  );
  filter: blur(2px);
}

.latest-date-pill-media.is-shine img {
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,0.45))
    drop-shadow(0 0 22px rgba(255,215,120,0.45))
    brightness(1.12);
  transition: filter 0.3s ease;
}

.latest-date-pill-media.is-bounce-impact img {
  animation: medalTargetBounce 0.52s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center center;
}

@keyframes medalTargetBounce {
  0% {
    transform: scale(1);
  }
  28% {
    transform: scale(1.22);
  }
  52% {
    transform: scale(0.90);
  }
  74% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes shineSweep {
  0% {
    left: -60%;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    left: 120%;
    opacity: 0;
  }
}

.latest-date-pill-media.is-shine::after {
  animation: shineSweep 0.6s ease;
}

.latest-date-divider-label.is-fly-animating .latest-date-pill-media img {
  opacity: 0;
}

.latest-date-pill-media::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(0.2);
  background: radial-gradient(circle,
    rgba(255,255,255,0.95) 0%,
    rgba(255,228,140,0.75) 35%,
    rgba(255,200,90,0.28) 60%,
    rgba(255,200,90,0.00) 100%);
  opacity: 0;
  pointer-events: none;
}

.latest-date-pill-media.is-impact::before {
  animation: medalAuraBurst 0.95s ease-out;
}

@keyframes medalAuraBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
  }
  18% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(2.6);
  }
  55% {
    opacity: 0.38;
    transform: translate(-50%, -50%) scale(3.8);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(4.6);
  }
}

@keyframes medalImpact {
  0% {
    transform: scale(1);
    filter:
      drop-shadow(0 0 0 rgba(255,255,255,0))
      drop-shadow(0 0 0 rgba(255,215,120,0));
  }
  22% {
    transform: scale(1.18);
    filter:
      drop-shadow(0 0 12px rgba(255,255,255,0.72))
      drop-shadow(0 0 26px rgba(255,215,120,0.60))
      drop-shadow(0 0 54px rgba(255,215,120,0.32));
  }
  55% {
    transform: scale(1.08);
    filter:
      drop-shadow(0 0 10px rgba(255,255,255,0.45))
      drop-shadow(0 0 20px rgba(255,215,120,0.34));
  }
  100% {
    transform: scale(1);
    filter:
      drop-shadow(0 0 0 rgba(255,255,255,0))
      drop-shadow(0 0 0 rgba(255,215,120,0));
  }
}

/* =========================================
   PRODUCTS
   ========================================= */

.latest-products-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.latest-product-row {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(22,24,29,0.92), rgba(30,33,38,0.90));
  transition:
    transform 0.30s ease,
    background 0.30s ease,
    border-color 0.30s ease,
    box-shadow 0.30s ease,
    filter 0.30s ease;
  overflow: hidden;
  isolation: isolate;
  will-change: transform, box-shadow, border-color, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.latest-product-reward-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  opacity: 1;
    transform: translateZ(0);
  backface-visibility: hidden;
}

.latest-product-reward-bg .bar-segments {
  opacity: 0.16;
  filter: saturate(0.62) brightness(0.58) contrast(0.96) grayscale(0.22);
  transition: opacity 0.34s ease, filter 0.34s ease;
}

.latest-product-reward-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("/cdn/shop/files/metal.png?v=1773766729");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0.10;
  mix-blend-mode: soft-light;
  pointer-events: none;
  transform: scale(1.01);
  filter: grayscale(0.42) brightness(0.58) contrast(0.94);
  transition: opacity 0.34s ease, filter 0.34s ease, transform 0.34s ease;
  backface-visibility: hidden;
}

.latest-product-reward-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  backface-visibility: hidden;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.04) 0%,
      rgba(255,255,255,0.012) 10%,
      rgba(255,255,255,0.00) 24%,
      rgba(255,255,255,0.00) 36%,
      rgba(0,0,0,0.015) 56%,
      rgba(0,0,0,0.12) 100%
    ),
    linear-gradient(
      102deg,
      rgba(255,255,255,0.00) 0%,
      rgba(255,255,255,0.006) 12%,
      rgba(255,255,255,0.016) 22%,
      rgba(255,255,255,0.028) 31%,
      rgba(255,255,255,0.010) 42%,
      rgba(255,255,255,0.00) 54%
    ),
    linear-gradient(
      90deg,
      rgba(8,10,15,0.24) 0%,
      rgba(8,10,15,0.12) 18%,
      rgba(255,255,255,0.006) 34%,
      rgba(255,255,255,0.008) 50%,
      rgba(8,10,15,0.10) 66%,
      rgba(8,10,15,0.20) 100%
    );
  opacity: 0.18;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity 0.34s ease, background 0.34s ease;
}

.latest-product-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  will-change: opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.006) 0px,
      rgba(255,255,255,0.006) 1px,
      rgba(255,255,255,0.002) 2px,
      rgba(255,255,255,0.000) 4px,
      rgba(0,0,0,0.018) 5px,
      rgba(255,255,255,0.000) 7px
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.016) 0%,
      rgba(255,255,255,0.004) 24%,
      rgba(255,255,255,0.00) 100%
    );
  mix-blend-mode: soft-light;
  opacity: 0.06;
  transition: opacity 0.34s ease;
}

.latest-product-row.is-live-glow::before {
  opacity: 0;
}

.latest-product-row.is-live-glow:hover::before,
.latest-product-row.is-live-glow:focus-within::before {
  opacity: 0.34 !important;
}

.latest-product-row > .latest-product-thumb-link,
.latest-product-row > .latest-product-info,
.latest-product-row > .latest-product-action,
.latest-product-thumb-link,
.latest-product-thumb,
.latest-product-info,
.latest-product-name,
.latest-product-name a,
.latest-product-meta-row,
.latest-product-date,
.latest-product-dot,
.latest-product-price-wrap,
.latest-product-price,
.latest-product-price-compare,
.latest-product-discount-badge,
.latest-product-action,
.latest-product-view-btn {
  position: relative;
  z-index: 5;
}

/* =========================================
   PRODUCT TIER GLOW ONLY FOR ACTIVE DATE
   ========================================= */

/* neutral default visiems produktams */
.latest-product-row {
  border-color: rgba(255,255,255,0.09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.025),
    0 10px 24px rgba(0,0,0,0.14);
}

.latest-product-row:hover,
.latest-product-row:focus-within {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018));
  border-color: rgba(255,255,255,0.19);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 0 1px rgba(255,255,255,0.05),
    0 0 32px rgba(255,255,255,0.08),
    0 20px 52px rgba(0,0,0,0.14);
  transform: translateY(-3px) scale(1.012);
  filter: brightness(1.08) saturate(1.10) contrast(1.04);
}

/* 👇 ČIA ĮKLIJUOK */
.latest-product-row:hover .latest-product-reward-bg .bar-segments,
.latest-product-row:focus-within .latest-product-reward-bg .bar-segments,
.latest-product-row:hover .latest-product-reward-bg::before,
.latest-product-row:focus-within .latest-product-reward-bg::before,
.latest-product-row:hover .latest-product-reward-bg::after,
.latest-product-row:focus-within .latest-product-reward-bg::after,
.latest-product-row:hover::before,
.latest-product-row:focus-within::before,
.latest-product-row:hover::after,
.latest-product-row:focus-within::after {
  transition-duration: 1s !important;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.latest-product-row:not(:hover):not(:focus-within) .latest-product-reward-bg .bar-segments,
.latest-product-row:not(:hover):not(:focus-within) .latest-product-reward-bg::before,
.latest-product-row:not(:hover):not(:focus-within) .latest-product-reward-bg::after,
.latest-product-row:not(:hover):not(:focus-within)::before,
.latest-product-row:not(:hover):not(:focus-within)::after {
  transition-duration: 3.8s !important;
  transition-timing-function: cubic-bezier(0.08, 0.9, 0.12, 1) !important;
}

.latest-product-row:hover .latest-product-reward-bg .bar-segments,
.latest-product-row:focus-within .latest-product-reward-bg .bar-segments {
  opacity: 0.66;
  filter: saturate(1.14) brightness(1.03) contrast(1.04) grayscale(0);
}

.latest-product-row:hover .latest-product-reward-bg::before,
.latest-product-row:focus-within .latest-product-reward-bg::before {
  opacity: 0.80;
  filter: grayscale(0) brightness(1) contrast(1);
  transform: scale(1.02);
}

.latest-product-row:hover::before,
.latest-product-row:focus-within::before {
  opacity: 0.34;
}

.latest-product-row:hover .latest-product-reward-bg::after,
.latest-product-row:focus-within .latest-product-reward-bg::after {
  opacity: 1;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.20) 0%,
      rgba(255,255,255,0.07) 9%,
      rgba(255,255,255,0.018) 20%,
      rgba(255,255,255,0.00) 36%,
      rgba(0,0,0,0.00) 56%,
      rgba(0,0,0,0.10) 100%
    ),
    linear-gradient(
      102deg,
      rgba(255,255,255,0.00) 0%,
      rgba(255,255,255,0.028) 13%,
      rgba(255,255,255,0.09) 23%,
      rgba(255,255,255,0.18) 31%,
      rgba(255,255,255,0.05) 41%,
      rgba(255,255,255,0.00) 54%
    ),
    linear-gradient(
      90deg,
      rgba(8,10,15,0.15) 0%,
      rgba(8,10,15,0.05) 18%,
      rgba(255,255,255,0.028) 34%,
      rgba(255,255,255,0.03) 50%,
      rgba(8,10,15,0.04) 66%,
      rgba(8,10,15,0.14) 100%
    );
}

/* thumb */

.latest-product-thumb-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.024));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.055),
    0 0 0 1px rgba(255,255,255,0.05),
    0 10px 22px rgba(0,0,0,0.08);
  text-decoration: none;
  overflow: hidden;
  grid-column: 1;
  grid-row: 1;
  backdrop-filter: blur(3px);
  transition: transform 0.24s ease, box-shadow 0.24s ease, background 0.24s ease;
}

.latest-product-row:hover .latest-product-thumb-link,
.latest-product-row:focus-within .latest-product-thumb-link {
  transform: translateY(-1px) scale(1.01);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 0 1px rgba(255,255,255,0.06),
    0 14px 26px rgba(0,0,0,0.10);
}

.latest-product-thumb {
  width: 82px;
  height: 82px;
  object-fit: contain;
  display: block;
  filter: contrast(1.08) brightness(1.04) drop-shadow(0 4px 12px rgba(0,0,0,0.18));
}

.latest-product-info {
  min-width: 0;
  grid-column: 2;
  grid-row: 1;
}

.latest-product-name {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 700;
}

.latest-product-name a,
.latest-product-name a:visited {
  color: #f5f5f5 !important;
  text-decoration: none !important;
}

.latest-product-name a:hover,
.latest-product-name a:focus {
  color: #ffffff !important;
  opacity: 0.96;
}

.latest-product-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
}

.latest-product-date {
  color: rgba(255,255,255,0.82);
}

.latest-product-dot {
  color: rgba(255,255,255,0.34);
}

.latest-product-price-wrap {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.latest-product-price-compare {
  color: rgba(255,255,255,0.58);
  text-decoration: line-through;
  font-weight: 500;
}

.latest-product-price {
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(255,255,255,0.05);
}

.latest-product-discount-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.96);
  color: #111111;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  box-shadow:
    0 2px 10px rgba(255,255,255,0.06),
    inset 0 1px 0 rgba(255,255,255,0.35);
}

.latest-product-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  margin-top: 0;
}

.latest-product-view-btn,
.latest-product-view-btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.038));
  border: 1px solid rgba(255,255,255,0.13);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(255,255,255,0.02);
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.latest-product-view-btn:hover,
.latest-product-view-btn:focus {
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
  border-color: rgba(255,255,255,0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 8px 20px rgba(0,0,0,0.10),
    0 0 14px rgba(255,255,255,0.05);
  transform: translateY(-1px);
}

/* =========================================
   PANELS
   ========================================= */

.latest-dopamine-panel,
.latest-streak-panel,
.latest-achievement-panel,
.latest-library-panel {
  margin: 0 0 24px;
  padding: 22px 22px 20px;
  border-radius: 18px;
  background-color: rgba(6,10,16,0.9);   /* dark base so the fixed 3D water behind (mobile / phone-desktop-mode) does not bleed through -> readable + uniform with the Library/intro block */
  background-image: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03),
    0 0 24px rgba(255,255,255,0.03);
}

.latest-dopamine-panel.is-idle {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02));
}

.latest-dopamine-panel.is-bronze,
.latest-dopamine-panel.is-silver,
.latest-dopamine-panel.is-gold,
.latest-dopamine-panel.is-platinum {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-image: linear-gradient(180deg, rgba(var(--tier-rgb), 0.11), rgba(255,255,255,0.03));
  border-color: rgba(var(--tier-rgb), 0.42);
}

.latest-dopamine-panel.is-bronze::before,
.latest-dopamine-panel.is-silver::before,
.latest-dopamine-panel.is-gold::before,
.latest-dopamine-panel.is-platinum::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.latest-dopamine-panel.is-bronze::after,
.latest-dopamine-panel.is-silver::after,
.latest-dopamine-panel.is-gold::after,
.latest-dopamine-panel.is-platinum::after {
  content: '';
  position: absolute;
  inset: -10%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  filter: blur(42px);
  opacity: 0.42;
}

.latest-dopamine-panel.is-bronze {
  border-color: rgba(236,166,98,0.86);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    inset 0 0 0 2px rgba(205,127,50,0.22),
    0 0 0 1px rgba(205,127,50,0.30),
    0 0 18px rgba(205,127,50,0.18),
    0 0 42px rgba(205,127,50,0.16),
    0 0 82px rgba(205,127,50,0.10),
    0 18px 42px rgba(0,0,0,0.18);
}

.latest-dopamine-panel.is-bronze::before {
  box-shadow:
    inset 0 0 0 2px rgba(236,166,98,0.72),
    inset 0 0 0 4px rgba(205,127,50,0.18),
    inset 0 0 26px rgba(205,127,50,0.10);
}

.latest-dopamine-panel.is-bronze::after {
  background: radial-gradient(circle at 16% 18%, rgba(205,127,50,0.26), transparent 55%);
}

.latest-dopamine-panel.is-silver {
  border-color: rgba(240,247,255,0.90);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    inset 0 0 0 2px rgba(214,224,236,0.24),
    0 0 0 1px rgba(214,224,236,0.32),
    0 0 20px rgba(214,224,236,0.20),
    0 0 46px rgba(214,224,236,0.18),
    0 0 88px rgba(214,224,236,0.12),
    0 18px 42px rgba(0,0,0,0.18);
}

.latest-dopamine-panel.is-silver::before {
  box-shadow:
    inset 0 0 0 2px rgba(224,235,248,0.76),
    inset 0 0 0 4px rgba(214,224,236,0.20),
    inset 0 0 28px rgba(214,224,236,0.12);
}

.latest-dopamine-panel.is-silver::after {
  background: radial-gradient(circle at 16% 18%, rgba(230,240,252,0.28), transparent 56%);
}

.latest-dopamine-panel.is-gold {
  border-color: rgba(255,226,110,0.92);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    inset 0 0 0 2px rgba(255,199,56,0.24),
    0 0 0 1px rgba(255,206,66,0.34),
    0 0 22px rgba(255,206,66,0.22),
    0 0 50px rgba(255,206,66,0.20),
    0 0 94px rgba(255,206,66,0.12),
    0 18px 42px rgba(0,0,0,0.18);
}

.latest-dopamine-panel.is-gold::before {
  box-shadow:
    inset 0 0 0 2px rgba(255,220,96,0.78),
    inset 0 0 0 4px rgba(255,199,56,0.20),
    inset 0 0 30px rgba(255,199,56,0.14);
}

.latest-dopamine-panel.is-gold::after {
  background: radial-gradient(circle at 16% 18%, rgba(255,228,120,0.30), transparent 56%);
}

.latest-dopamine-panel.is-platinum {
  border-color: rgba(186,246,255,0.94);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    inset 0 0 0 2px rgba(140,236,255,0.26),
    0 0 0 1px rgba(140,236,255,0.36),
    0 0 24px rgba(140,236,255,0.24),
    0 0 54px rgba(140,236,255,0.22),
    0 0 102px rgba(140,236,255,0.14),
    0 18px 44px rgba(0,0,0,0.19);
}

.latest-dopamine-panel.is-platinum::before {
  box-shadow:
    inset 0 0 0 2px rgba(168,242,255,0.80),
    inset 0 0 0 4px rgba(140,236,255,0.22),
    inset 0 0 32px rgba(140,236,255,0.16);
}

.latest-dopamine-panel.is-platinum::after {
  background: radial-gradient(circle at 16% 18%, rgba(196,248,255,0.32), transparent 56%);
}

.latest-dopamine-panel-head,
.latest-streak-panel-head,
.latest-achievement-panel-head,
.latest-library-panel-head {
  margin-bottom: 16px;
}

.latest-dopamine-kicker,
.latest-streak-kicker,
.latest-achievement-kicker,
.latest-library-kicker {
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.66);
}

.latest-dopamine-panel.is-bronze .latest-dopamine-kicker,
.latest-dopamine-panel.is-silver .latest-dopamine-kicker,
.latest-dopamine-panel.is-gold .latest-dopamine-kicker,
.latest-dopamine-panel.is-platinum .latest-dopamine-kicker {
  color: var(--tier-text);
}

.latest-dopamine-title,
.latest-streak-title,
.latest-achievement-title,
.latest-library-title {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 800;
  color: #ffffff;
}

.latest-dopamine-stats,
.latest-library-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.latest-dopamine-stat,
.latest-library-stat {
  padding: 14px 14px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
}

.latest-dopamine-panel.is-bronze .latest-dopamine-stat,
.latest-dopamine-panel.is-silver .latest-dopamine-stat,
.latest-dopamine-panel.is-gold .latest-dopamine-stat,
.latest-dopamine-panel.is-platinum .latest-dopamine-stat {
  background: rgba(var(--tier-rgb), 0.08);
  border-color: rgba(var(--tier-rgb), 0.24);
}

.latest-dopamine-stat-label,
.latest-library-stat-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 1.2;
  color: rgba(255,255,255,0.62);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.latest-dopamine-stat-value,
.latest-library-stat-value {
  display: block;
  font-size: 22px;
  line-height: 1.1;
  color: #ffffff;
  font-weight: 800;
}

.latest-dopamine-message,
.latest-streak-text,
.latest-library-message,
.latest-library-seo-text,
.latest-achievement-intro,
.latest-achievement-summary {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.82);
}

.latest-dopamine-message {
  margin-bottom: 10px;
}

.latest-dopamine-explainer {
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.80);
  max-width: 940px;
}

.latest-library-seo-text,
.latest-achievement-intro {
  margin: 8px 0 0;
  max-width: 900px;
}

.latest-achievement-summary {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}

/* dopamine badges */

.latest-dopamine-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.latest-dopamine-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.03em;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.48);
}

.latest-dopamine-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  line-height: 1;
  flex: 0 0 16px;
  opacity: 0.72;
}

.latest-dopamine-badge.unlocked .latest-dopamine-badge-icon {
  opacity: 1;
}

.latest-dopamine-badge[data-step="2"].unlocked {
  background: linear-gradient(135deg, rgba(205,127,50,0.22), rgba(205,127,50,0.10));
  border-color: rgba(205,127,50,0.40);
  color: #ffd9ad;
  box-shadow: 0 0 16px rgba(205,127,50,0.16);
}

.latest-dopamine-badge[data-step="4"].unlocked {
  background: linear-gradient(135deg, rgba(214,224,236,0.22), rgba(214,224,236,0.10));
  border-color: rgba(214,224,236,0.40);
  color: #f4f9ff;
  box-shadow: 0 0 16px rgba(214,224,236,0.18);
}

.latest-dopamine-badge[data-step="5"].unlocked {
  background: linear-gradient(135deg, rgba(255,199,56,0.22), rgba(255,199,56,0.10));
  border-color: rgba(255,199,56,0.40);
  color: #ffe9a6;
  box-shadow: 0 0 16px rgba(255,199,56,0.18);
}

.latest-dopamine-badge[data-step="7"].unlocked {
  background: linear-gradient(135deg, rgba(167,196,255,0.22), rgba(167,196,255,0.10));
  border-color: rgba(167,196,255,0.40);
  color: #edf4ff;
  box-shadow: 0 0 16px rgba(167,196,255,0.18);
}

/* active milestone icon glow */

.latest-title-icon-wrap {
  display: inline-flex;
  align-items: center;
  margin-right: 2px;
}

.latest-title-icon-img,
.latest-dopamine-badge-icon-img {
  display: inline-block;
  object-fit: contain;
  vertical-align: middle;
}

.latest-title-icon-img {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  position: relative;
  top: -1px;
}

.latest-dopamine-panel.is-bronze .latest-title-icon-img,
.latest-dopamine-panel.is-bronze .latest-dopamine-badge-icon-img,
.latest-dopamine-panel.is-bronze .latest-title-icon-wrap img,
.latest-dopamine-panel.is-bronze .latest-dopamine-badges img {
  filter:
    drop-shadow(0 0 8px rgba(255,240,220,0.34))
    drop-shadow(0 0 18px rgba(236,166,98,0.40))
    drop-shadow(0 0 34px rgba(205,127,50,0.28))
    brightness(1.12)
    saturate(1.16)
    contrast(1.06);
}

.latest-dopamine-panel.is-silver .latest-title-icon-img,
.latest-dopamine-panel.is-silver .latest-dopamine-badge-icon-img,
.latest-dopamine-panel.is-silver .latest-title-icon-wrap img,
.latest-dopamine-panel.is-silver .latest-dopamine-badges img {
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,0.38))
    drop-shadow(0 0 22px rgba(230,240,252,0.42))
    drop-shadow(0 0 40px rgba(214,224,236,0.28))
    brightness(1.13)
    saturate(1.10)
    contrast(1.05);
}

.latest-dopamine-panel.is-gold .latest-title-icon-img,
.latest-dopamine-panel.is-gold .latest-dopamine-badge-icon-img,
.latest-dopamine-panel.is-gold .latest-title-icon-wrap img,
.latest-dopamine-panel.is-gold .latest-dopamine-badges img {
  filter:
    drop-shadow(0 0 10px rgba(255,248,210,0.36))
    drop-shadow(0 0 24px rgba(255,220,96,0.44))
    drop-shadow(0 0 42px rgba(255,199,56,0.30))
    brightness(1.14)
    saturate(1.18)
    contrast(1.06);
}

.latest-dopamine-panel.is-platinum .latest-title-icon-img,
.latest-dopamine-panel.is-platinum .latest-dopamine-badge-icon-img,
.latest-dopamine-panel.is-platinum .latest-title-icon-wrap img,
.latest-dopamine-panel.is-platinum .latest-dopamine-badges img {
  filter:
    drop-shadow(0 0 10px rgba(235,255,255,0.38))
    drop-shadow(0 0 24px rgba(196,248,255,0.44))
    drop-shadow(0 0 44px rgba(140,236,255,0.30))
    brightness(1.14)
    saturate(1.10)
    contrast(1.06);
}

.latest-dopamine-panel.is-bronze .latest-dopamine-badge.unlocked,
.latest-dopamine-panel.is-silver .latest-dopamine-badge.unlocked,
.latest-dopamine-panel.is-gold .latest-dopamine-badge.unlocked,
.latest-dopamine-panel.is-platinum .latest-dopamine-badge.unlocked {
  position: relative;
  overflow: visible;
}

.latest-dopamine-panel.is-bronze .latest-dopamine-badge.unlocked::after,
.latest-dopamine-panel.is-silver .latest-dopamine-badge.unlocked::after,
.latest-dopamine-panel.is-gold .latest-dopamine-badge.unlocked::after,
.latest-dopamine-panel.is-platinum .latest-dopamine-badge.unlocked::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  pointer-events: none;
  z-index: -1;
  filter: blur(18px);
  opacity: 0.55;
}

.latest-dopamine-panel.is-bronze .latest-dopamine-badge.unlocked::after {
  background: radial-gradient(circle, rgba(205,127,50,0.30), transparent 72%);
}

.latest-dopamine-panel.is-silver .latest-dopamine-badge.unlocked::after {
  background: radial-gradient(circle, rgba(214,224,236,0.32), transparent 72%);
}

.latest-dopamine-panel.is-gold .latest-dopamine-badge.unlocked::after {
  background: radial-gradient(circle, rgba(255,199,56,0.34), transparent 72%);
}

.latest-dopamine-panel.is-platinum .latest-dopamine-badge.unlocked::after {
  background: radial-gradient(circle, rgba(140,236,255,0.36), transparent 72%);
}

.latest-dopamine-panel.is-bronze .latest-title-icon-img,
.latest-dopamine-panel.is-silver .latest-title-icon-img,
.latest-dopamine-panel.is-gold .latest-title-icon-img,
.latest-dopamine-panel.is-platinum .latest-title-icon-img {
  animation: activeMilestoneIconPulse 2.8s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes activeMilestoneIconPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* progress */

.latest-dopamine-progress,
.latest-library-progress {
  position: relative;
  width: 100%;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
  margin: 18px 0 14px;
}

.latest-dopamine-progress-bar,
.latest-library-progress-bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
}

.latest-dopamine-progress-bar {
  transition: width 0.4s ease;
}

.latest-dopamine-panel.is-idle .latest-dopamine-progress-bar {
  background: linear-gradient(90deg, rgba(255,255,255,0.18), rgba(255,255,255,0.10));
  box-shadow: none;
}

.latest-dopamine-panel.is-bronze .latest-dopamine-progress-bar {
  background: linear-gradient(90deg, #7e6758, #b8967d);
  box-shadow:
    0 0 12px rgba(205,127,50,0.42),
    0 0 28px rgba(205,127,50,0.18);
}

.latest-dopamine-panel.is-silver .latest-dopamine-progress-bar {
  background: linear-gradient(90deg, #aab4c7, #e7edf8);
  box-shadow:
    0 0 12px rgba(214,224,236,0.50),
    0 0 28px rgba(214,224,236,0.22);
}

.latest-dopamine-panel.is-gold .latest-dopamine-progress-bar {
  background: linear-gradient(90deg, #b78b2c, #f1d06c);
  box-shadow:
    0 0 12px rgba(255,199,56,0.55),
    0 0 28px rgba(255,199,56,0.24);
}

.latest-dopamine-panel.is-platinum .latest-dopamine-progress-bar {
  background: linear-gradient(90deg, #7ea5ff, #dce8ff);
  box-shadow:
    0 0 12px rgba(167,196,255,0.55),
    0 0 28px rgba(167,196,255,0.24);
}

.latest-library-progress-bar {
  background: linear-gradient(90deg, #7f8793, #aab2bf, #dbe2ec);
  box-shadow:
    0 0 10px rgba(158,168,184,0.22),
    0 0 24px rgba(217,226,239,0.12);
  transition: width 0.6s ease;
}

/* =========================================
   STREAK PANEL
   ========================================= */

.latest-streak-panel {
  position: relative;
}

.latest-streak-panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.latest-streak-power {
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.latest-streak-text {
  margin: 0 0 16px;
}

.latest-streak-track {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.latest-streak-node {
  position: relative;
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 16px 12px 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.018));
  border: 1px solid rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 0 0 1px rgba(255,255,255,0.02),
    0 10px 24px rgba(0,0,0,0.10);
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease,
    color 0.22s ease,
    opacity 0.22s ease;
  overflow: hidden;
  isolation: isolate;
}

.latest-streak-node::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
}

.latest-streak-node::after {
  z-index: 3;
}

.latest-streak-node > * {
  position: relative;
  z-index: 2;
}

.latest-streak-node.is-unlocked {
  transform: translateY(-1px);
  color: #ffffff;
}

.latest-streak-node.is-passed {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
  border-color: rgba(255,255,255,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 0 0 1px rgba(255,255,255,0.05),
    0 0 18px rgba(255,255,255,0.05),
    0 12px 28px rgba(0,0,0,0.12);
}

.latest-streak-node.is-unlocked::before {
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.10),
    inset 0 0 0 4px rgba(255,255,255,0.03);
}

.latest-streak-node[data-day="1"].is-unlocked {
  border-color: rgba(186,146,118,0.82);
  background: linear-gradient(180deg, rgba(205,127,50,0.13), rgba(255,255,255,0.02));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 0 0 2px rgba(205,127,50,0.20),
    0 0 0 1px rgba(205,127,50,0.26),
    0 0 16px rgba(205,127,50,0.16),
    0 0 36px rgba(205,127,50,0.14),
    0 0 66px rgba(205,127,50,0.08),
    0 14px 30px rgba(0,0,0,0.14);
}

.latest-streak-node[data-day="1"].is-unlocked::before {
  box-shadow:
    inset 0 0 0 2px rgba(186,146,118,0.74),
    inset 0 0 0 4px rgba(205,127,50,0.20),
    inset 0 0 18px rgba(205,127,50,0.10);
}

.latest-streak-node[data-day="2"].is-unlocked {
  border-color: rgba(240,247,255,0.88);
  background: linear-gradient(180deg, rgba(214,224,236,0.14), rgba(255,255,255,0.02));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 0 0 2px rgba(214,224,236,0.22),
    0 0 0 1px rgba(214,224,236,0.30),
    0 0 18px rgba(214,224,236,0.18),
    0 0 40px rgba(214,224,236,0.16),
    0 0 72px rgba(214,224,236,0.09),
    0 14px 30px rgba(0,0,0,0.14);
}

.latest-streak-node[data-day="2"].is-unlocked::before {
  box-shadow:
    inset 0 0 0 2px rgba(224,235,248,0.78),
    inset 0 0 0 4px rgba(214,224,236,0.22),
    inset 0 0 20px rgba(214,224,236,0.12);
}

.latest-streak-node[data-day="4"].is-unlocked {
  border-color: rgba(255,226,110,0.90);
  background: linear-gradient(180deg, rgba(255,199,56,0.15), rgba(255,255,255,0.02));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 0 0 2px rgba(255,199,56,0.22),
    0 0 0 1px rgba(255,206,66,0.30),
    0 0 20px rgba(255,206,66,0.20),
    0 0 44px rgba(255,206,66,0.18),
    0 0 78px rgba(255,206,66,0.10),
    0 14px 30px rgba(0,0,0,0.14);
}

.latest-streak-node[data-day="4"].is-unlocked::before {
  box-shadow:
    inset 0 0 0 2px rgba(255,220,96,0.80),
    inset 0 0 0 4px rgba(255,199,56,0.22),
    inset 0 0 22px rgba(255,199,56,0.14);
}

.latest-streak-node[data-day="7"].is-unlocked,
.latest-streak-node[data-day="10"].is-unlocked,
.latest-streak-node[data-day="20"].is-unlocked,
.latest-streak-node[data-day="30"].is-unlocked {
  border-color: rgba(186,246,255,0.90);
  background: linear-gradient(180deg, rgba(140,236,255,0.15), rgba(255,255,255,0.02));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 0 0 2px rgba(140,236,255,0.24),
    0 0 0 1px rgba(140,236,255,0.32),
    0 0 22px rgba(140,236,255,0.22),
    0 0 48px rgba(140,236,255,0.20),
    0 0 84px rgba(140,236,255,0.11),
    0 14px 30px rgba(0,0,0,0.14);
}

.latest-streak-node[data-day="7"].is-unlocked::before,
.latest-streak-node[data-day="10"].is-unlocked::before,
.latest-streak-node[data-day="20"].is-unlocked::before,
.latest-streak-node[data-day="30"].is-unlocked::before {
  box-shadow:
    inset 0 0 0 2px rgba(168,242,255,0.80),
    inset 0 0 0 4px rgba(140,236,255,0.24),
    inset 0 0 24px rgba(140,236,255,0.16);
}

.latest-streak-node.is-current {
  transform: translateY(-3px) scale(1.015);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border-color: rgba(255,255,255,0.26);
  color: #ffffff;
}

.latest-streak-node[data-day="1"].is-current {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 0 0 2px rgba(205,127,50,0.26),
    0 0 0 1px rgba(205,127,50,0.34),
    0 0 26px rgba(205,127,50,0.24),
    0 0 58px rgba(205,127,50,0.22),
    0 0 102px rgba(205,127,50,0.12),
    0 18px 38px rgba(0,0,0,0.18);
}

.latest-streak-node[data-day="2"].is-current {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 0 0 2px rgba(214,224,236,0.28),
    0 0 0 1px rgba(214,224,236,0.36),
    0 0 28px rgba(214,224,236,0.26),
    0 0 62px rgba(214,224,236,0.24),
    0 0 108px rgba(214,224,236,0.13),
    0 18px 40px rgba(0,0,0,0.19);
}

.latest-streak-node[data-day="4"].is-current {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 0 0 2px rgba(255,199,56,0.28),
    0 0 0 1px rgba(255,206,66,0.38),
    0 0 30px rgba(255,206,66,0.28),
    0 0 66px rgba(255,206,66,0.25),
    0 0 112px rgba(255,206,66,0.14),
    0 18px 40px rgba(0,0,0,0.18);
}

.latest-streak-node[data-day="7"].is-current,
.latest-streak-node[data-day="10"].is-current,
.latest-streak-node[data-day="20"].is-current,
.latest-streak-node[data-day="30"].is-current {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 0 0 2px rgba(140,236,255,0.30),
    0 0 0 1px rgba(140,236,255,0.40),
    0 0 32px rgba(140,236,255,0.30),
    0 0 70px rgba(140,236,255,0.28),
    0 0 118px rgba(140,236,255,0.16),
    0 18px 42px rgba(0,0,0,0.19);
}

.latest-streak-node.is-current::after {
  content: "ACTIVE";
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08));
  border: 1px solid rgba(255,255,255,0.26);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 0 14px rgba(255,255,255,0.10);
  color: #ffffff;
}

.latest-streak-node-day {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
}

.latest-streak-node-icon-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.08));
}

.latest-streak-node.is-current .latest-streak-node-icon-img {
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,0.28))
    drop-shadow(0 0 22px rgba(255,255,255,0.12));
}

.latest-streak-node-bonus {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  color: rgba(255,255,255,0.92);
  text-align: center;
}

.latest-streak-node-multiplier {
  margin-top: -2px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  color: #ffffff;
}

.latest-streak-rewards {
  margin-top: 4px;
}

.latest-streak-rewards-label {
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}

.latest-streak-reward-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* DAILY MINI PILLS – unified active system */

.latest-streak-reward-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025));
  color: rgba(255,255,255,0.82);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  overflow: visible;
  isolation: isolate;
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease,
    color 0.24s ease,
    opacity 0.24s ease,
    filter 0.24s ease;
}

.latest-streak-reward-pill img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  position: relative;
  z-index: 2;
  transition:
    filter 0.24s ease,
    transform 0.24s ease,
    opacity 0.24s ease;
}

.latest-streak-reward-pill span,
.latest-streak-reward-pill strong {
  position: relative;
  z-index: 2;
  transition:
    text-shadow 0.24s ease,
    color 0.24s ease,
    opacity 0.24s ease;
}

/* inactive pills */
.latest-dopamine-panel .latest-streak-reward-pill:not(.is-active):not(.active):not([aria-current="true"]) {
  opacity: 0.52;
  filter: saturate(0.72) brightness(0.88);
  transform: scale(0.965);
}

/* shared active shell */
.latest-dopamine-panel .latest-streak-reward-pill.is-active,
.latest-dopamine-panel .latest-streak-reward-pill.active,
.latest-dopamine-panel .latest-streak-reward-pill[aria-current="true"] {
  color: #ffffff;
  opacity: 1;
  filter: none;
  transform: translateY(-1px) scale(1.05);
  animation: activeRewardPillLift 2.2s ease-in-out infinite;
  border-width: 2px;
}

.latest-dopamine-panel .latest-streak-reward-pill.is-active::before,
.latest-dopamine-panel .latest-streak-reward-pill.active::before,
.latest-dopamine-panel .latest-streak-reward-pill[aria-current="true"]::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
  filter: blur(18px);
  opacity: 0.95;
  animation: activeRewardAura 2.2s ease-in-out infinite;
}

.latest-dopamine-panel .latest-streak-reward-pill.is-active::after,
.latest-dopamine-panel .latest-streak-reward-pill.active::after,
.latest-dopamine-panel .latest-streak-reward-pill[aria-current="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
  z-index: 2;

  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.30),
    inset 0 0 0 5px rgba(255,210,175,0.55),
    0 0 0 2px rgba(255,210,175,0.42),
    0 0 14px rgba(255,210,175,0.18);
}

.latest-dopamine-panel .latest-streak-reward-pill.is-active span,
.latest-dopamine-panel .latest-streak-reward-pill.active span,
.latest-dopamine-panel .latest-streak-reward-pill[aria-current="true"] span,
.latest-dopamine-panel .latest-streak-reward-pill.is-active strong,
.latest-dopamine-panel .latest-streak-reward-pill.active strong,
.latest-dopamine-panel .latest-streak-reward-pill[aria-current="true"] strong {
  color: #ffffff;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.24),
    0 0 10px rgba(255,255,255,0.12);
}

.latest-dopamine-panel .latest-streak-reward-pill.is-active img,
.latest-dopamine-panel .latest-streak-reward-pill.active img,
.latest-dopamine-panel .latest-streak-reward-pill[aria-current="true"] img {
  transform: scale(1.12);
}

/* bronze active */
.latest-dopamine-panel.is-bronze .latest-streak-reward-pill.is-active,
.latest-dopamine-panel.is-bronze .latest-streak-reward-pill.active,
.latest-dopamine-panel.is-bronze .latest-streak-reward-pill[aria-current="true"] {
  color: #fffaf5;
  border-color: rgba(255,224,198,1);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.08)),
    linear-gradient(135deg, rgba(240,172,100,0.60), rgba(122,82,58,0.28));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.20),
    inset 0 0 0 3px rgba(255,214,185,0.70),
    inset 0 0 24px rgba(240,172,100,0.34),
    0 0 0 1px rgba(255,214,185,0.58),
    0 0 20px rgba(240,172,100,0.34),
    0 0 46px rgba(205,127,50,0.26);
}

.latest-dopamine-panel.is-bronze .latest-streak-reward-pill.is-active::before,
.latest-dopamine-panel.is-bronze .latest-streak-reward-pill.active::before,
.latest-dopamine-panel.is-bronze .latest-streak-reward-pill[aria-current="true"]::before {
  background: radial-gradient(circle, rgba(255,232,208,0.44) 0%, rgba(240,172,100,0.36) 34%, rgba(205,127,50,0.18) 62%, transparent 80%);
}

.latest-dopamine-panel.is-bronze .latest-streak-reward-pill.is-active::after,
.latest-dopamine-panel.is-bronze .latest-streak-reward-pill.active::after,
.latest-dopamine-panel.is-bronze .latest-streak-reward-pill[aria-current="true"]::after {
  box-shadow:
    inset 0 0 0 2px rgba(255,232,210,0.96),
    inset 0 0 0 5px rgba(240,172,100,0.34),
    0 0 0 2px rgba(255,214,185,0.55),
    0 0 16px rgba(240,172,100,0.22),
    inset 0 0 18px rgba(240,172,100,0.16);
}

.latest-dopamine-panel.is-bronze .latest-streak-reward-pill.is-active img,
.latest-dopamine-panel.is-bronze .latest-streak-reward-pill.active img,
.latest-dopamine-panel.is-bronze .latest-streak-reward-pill[aria-current="true"] img {
  filter:
    drop-shadow(0 0 10px rgba(255,240,224,0.46))
    drop-shadow(0 0 22px rgba(255,214,185,0.48))
    drop-shadow(0 0 40px rgba(240,172,100,0.30))
    brightness(1.18)
    saturate(1.22)
    contrast(1.08);
}

/* silver active */
.latest-dopamine-panel.is-silver .latest-streak-reward-pill.is-active,
.latest-dopamine-panel.is-silver .latest-streak-reward-pill.active,
.latest-dopamine-panel.is-silver .latest-streak-reward-pill[aria-current="true"] {
  color: #fbfdff;
  border-color: rgba(248,251,255,1);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.08)),
    linear-gradient(135deg, rgba(204,214,230,0.58), rgba(126,136,154,0.26));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.20),
    inset 0 0 0 3px rgba(236,242,252,0.72),
    inset 0 0 24px rgba(204,214,230,0.32),
    0 0 0 1px rgba(236,242,252,0.60),
    0 0 20px rgba(204,214,230,0.34),
    0 0 48px rgba(214,224,236,0.26);
}

.latest-dopamine-panel.is-silver .latest-streak-reward-pill.is-active::before,
.latest-dopamine-panel.is-silver .latest-streak-reward-pill.active::before,
.latest-dopamine-panel.is-silver .latest-streak-reward-pill[aria-current="true"]::before {
  background: radial-gradient(circle, rgba(255,255,255,0.46) 0%, rgba(224,234,248,0.36) 34%, rgba(214,224,236,0.18) 62%, transparent 80%);
}

.latest-dopamine-panel.is-silver .latest-streak-reward-pill.is-active::after,
.latest-dopamine-panel.is-silver .latest-streak-reward-pill.active::after,
.latest-dopamine-panel.is-silver .latest-streak-reward-pill[aria-current="true"]::after {
  box-shadow:
    inset 0 0 0 2px rgba(252,254,255,0.98),
    inset 0 0 0 5px rgba(204,214,230,0.34),
    0 0 0 2px rgba(236,242,252,0.58),
    0 0 18px rgba(204,214,230,0.24),
    inset 0 0 18px rgba(204,214,230,0.15);
}

.latest-dopamine-panel.is-silver .latest-streak-reward-pill.is-active img,
.latest-dopamine-panel.is-silver .latest-streak-reward-pill.active img,
.latest-dopamine-panel.is-silver .latest-streak-reward-pill[aria-current="true"] img {
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,0.46))
    drop-shadow(0 0 22px rgba(236,242,252,0.48))
    drop-shadow(0 0 40px rgba(204,214,230,0.30))
    brightness(1.18)
    saturate(1.10)
    contrast(1.08);
}

/* gold active */
.latest-dopamine-panel.is-gold .latest-streak-reward-pill.is-active,
.latest-dopamine-panel.is-gold .latest-streak-reward-pill.active,
.latest-dopamine-panel.is-gold .latest-streak-reward-pill[aria-current="true"] {
  color: #fffbed;
  border-color: rgba(255,238,170,1);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.08)),
    linear-gradient(135deg, rgba(246,202,88,0.60), rgba(144,100,28,0.26));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.20),
    inset 0 0 0 3px rgba(255,232,150,0.72),
    inset 0 0 24px rgba(246,202,88,0.34),
    0 0 0 1px rgba(255,232,150,0.60),
    0 0 22px rgba(246,202,88,0.36),
    0 0 50px rgba(255,199,56,0.28);
}

.latest-dopamine-panel.is-gold .latest-streak-reward-pill.is-active::before,
.latest-dopamine-panel.is-gold .latest-streak-reward-pill.active::before,
.latest-dopamine-panel.is-gold .latest-streak-reward-pill[aria-current="true"]::before {
  background: radial-gradient(circle, rgba(255,248,220,0.46) 0%, rgba(255,228,120,0.38) 34%, rgba(255,199,56,0.18) 62%, transparent 80%);
}

.latest-dopamine-panel.is-gold .latest-streak-reward-pill.is-active::after,
.latest-dopamine-panel.is-gold .latest-streak-reward-pill.active::after,
.latest-dopamine-panel.is-gold .latest-streak-reward-pill[aria-current="true"]::after {
  box-shadow:
    inset 0 0 0 2px rgba(255,242,182,0.98),
    inset 0 0 0 5px rgba(246,202,88,0.34),
    0 0 0 2px rgba(255,232,150,0.60),
    0 0 18px rgba(246,202,88,0.26),
    inset 0 0 18px rgba(246,202,88,0.16);
}

.latest-dopamine-panel.is-gold .latest-streak-reward-pill.is-active img,
.latest-dopamine-panel.is-gold .latest-streak-reward-pill.active img,
.latest-dopamine-panel.is-gold .latest-streak-reward-pill[aria-current="true"] img {
  filter:
    drop-shadow(0 0 10px rgba(255,248,220,0.46))
    drop-shadow(0 0 22px rgba(255,232,150,0.48))
    drop-shadow(0 0 42px rgba(246,202,88,0.32))
    brightness(1.18)
    saturate(1.20)
    contrast(1.08);
}

/* platinum active */
.latest-dopamine-panel.is-platinum .latest-streak-reward-pill.is-active,
.latest-dopamine-panel.is-platinum .latest-streak-reward-pill.active,
.latest-dopamine-panel.is-platinum .latest-streak-reward-pill[aria-current="true"] {
  color: #f4ffff;
  border-color: rgba(210,250,255,1);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.08)),
    linear-gradient(135deg, rgba(144,238,255,0.56), rgba(78,126,160,0.26));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.20),
    inset 0 0 0 3px rgba(198,248,255,0.72),
    inset 0 0 24px rgba(144,238,255,0.34),
    0 0 0 1px rgba(198,248,255,0.60),
    0 0 22px rgba(144,238,255,0.36),
    0 0 50px rgba(140,236,255,0.28);
}

.latest-dopamine-panel.is-platinum .latest-streak-reward-pill.is-active::before,
.latest-dopamine-panel.is-platinum .latest-streak-reward-pill.active::before,
.latest-dopamine-panel.is-platinum .latest-streak-reward-pill[aria-current="true"]::before {
  background: radial-gradient(circle, rgba(240,255,255,0.46) 0%, rgba(190,248,255,0.36) 34%, rgba(140,236,255,0.18) 62%, transparent 80%);
}

.latest-dopamine-panel.is-platinum .latest-streak-reward-pill.is-active::after,
.latest-dopamine-panel.is-platinum .latest-streak-reward-pill.active::after,
.latest-dopamine-panel.is-platinum .latest-streak-reward-pill[aria-current="true"]::after {
  box-shadow:
    inset 0 0 0 2px rgba(210,250,255,0.84),
    inset 0 0 0 4px rgba(144,238,255,0.24),
    inset 0 0 16px rgba(144,238,255,0.12);
}

.latest-dopamine-panel.is-platinum .latest-streak-reward-pill.is-active img,
.latest-dopamine-panel.is-platinum .latest-streak-reward-pill.active img,
.latest-dopamine-panel.is-platinum .latest-streak-reward-pill[aria-current="true"] img {
  filter:
    drop-shadow(0 0 10px rgba(240,255,255,0.46))
    drop-shadow(0 0 22px rgba(198,248,255,0.48))
    drop-shadow(0 0 42px rgba(140,236,255,0.32))
    brightness(1.18)
    saturate(1.10)
    contrast(1.08);
}

@keyframes activeRewardPillLift {
  0% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-1px) scale(1.04);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes activeRewardAura {
  0% {
    opacity: 0.72;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
  100% {
    opacity: 0.72;
    transform: scale(0.96);
  }
}

.latest-streak-note {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.72);
}

/* =========================================
   ACHIEVEMENT PANEL
   ========================================= */

.latest-achievement-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.latest-achievement-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  min-width: 0;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease;
}

.latest-achievement-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
}

.latest-achievement-card::after {
  content: '';
  position: absolute;
  inset: -18%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0.34;
  filter: blur(34px);
}

.latest-achievement-card > * {
  position: relative;
  z-index: 2;
}

.latest-achievement-card:hover,
.latest-achievement-card:focus-visible,
.latest-achievement-card.is-active {
  transform: translateY(-3px) scale(1.01);
}

.latest-achievement-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  flex: 0 0 62px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 0 0 1px rgba(255,255,255,0.03);
}

.latest-achievement-icon {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
}

.latest-achievement-content {
  min-width: 0;
}

.latest-achievement-label {
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  text-shadow: 0 0 10px rgba(0,0,0,0.18);
  margin-bottom: 8px;
}

.latest-achievement-value {
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
  color: #ffffff;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.18),
    0 0 14px rgba(255,255,255,0.06);
}

/* bronze */

.latest-achievement-card.bronze {
  border-color: rgba(186,146,118,0.82);
  background: linear-gradient(180deg, rgba(205,127,50,0.12), rgba(255,255,255,0.02));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    inset 0 0 0 2px rgba(205,127,50,0.24),
    0 0 0 1px rgba(205,127,50,0.28),
    0 0 18px rgba(205,127,50,0.18),
    0 0 42px rgba(205,127,50,0.16),
    0 0 76px rgba(205,127,50,0.09),
    0 14px 34px rgba(0,0,0,0.16);
}

.latest-achievement-card.bronze::before {
  box-shadow:
    inset 0 0 0 2px rgba(186,146,118,0.72),
    inset 0 0 0 4px rgba(205,127,50,0.22),
    inset 0 0 20px rgba(205,127,50,0.12);
}

.latest-achievement-card.bronze::after {
  background: radial-gradient(circle at 50% 50%, rgba(205,127,50,0.22), transparent 70%);
}

.latest-achievement-card.bronze .latest-achievement-icon {
  filter: drop-shadow(0 0 8px rgba(205,127,50,0.30));
}

.latest-achievement-card.bronze .latest-achievement-icon-wrap {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 0 0 1px rgba(205,127,50,0.18),
    0 0 18px rgba(205,127,50,0.14);
}

.latest-achievement-card.bronze:hover,
.latest-achievement-card.bronze:focus-visible,
.latest-achievement-card.bronze.is-active {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    inset 0 0 0 2px rgba(205,127,50,0.28),
    0 0 0 1px rgba(205,127,50,0.32),
    0 0 24px rgba(205,127,50,0.22),
    0 0 52px rgba(205,127,50,0.20),
    0 0 92px rgba(205,127,50,0.12),
    0 18px 42px rgba(0,0,0,0.18);
}

/* silver */

.latest-achievement-card.silver {
  border-color: rgba(240,247,255,0.88);
  background: linear-gradient(180deg, rgba(214,224,236,0.13), rgba(255,255,255,0.02));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    inset 0 0 0 2px rgba(214,224,236,0.26),
    inset 0 0 22px rgba(220,230,245,0.05),
    0 0 0 1px rgba(214,224,236,0.34),
    0 0 20px rgba(214,224,236,0.18),
    0 0 46px rgba(214,224,236,0.18),
    0 0 82px rgba(214,224,236,0.10),
    0 14px 34px rgba(0,0,0,0.17);
}

.latest-achievement-card.silver::before {
  box-shadow:
    inset 0 0 0 2px rgba(224,235,248,0.76),
    inset 0 0 0 4px rgba(214,224,236,0.24),
    inset 0 0 22px rgba(214,224,236,0.12);
}

.latest-achievement-card.silver::after {
  background: radial-gradient(circle at 50% 50%, rgba(214,224,236,0.24), transparent 72%);
}

.latest-achievement-card.silver .latest-achievement-icon {
  filter: drop-shadow(0 0 8px rgba(214,224,236,0.34));
}

.latest-achievement-card.silver .latest-achievement-icon-wrap {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(214,224,236,0.20),
    0 0 20px rgba(214,224,236,0.16);
}

.latest-achievement-card.silver:hover,
.latest-achievement-card.silver:focus-visible,
.latest-achievement-card.silver.is-active {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    inset 0 0 0 2px rgba(214,224,236,0.30),
    0 0 0 1px rgba(214,224,236,0.36),
    0 0 26px rgba(214,224,236,0.24),
    0 0 56px rgba(214,224,236,0.22),
    0 0 96px rgba(214,224,236,0.13),
    0 18px 42px rgba(0,0,0,0.19);
}

/* gold */

.latest-achievement-card.gold {
  border-color: rgba(255,226,110,0.90);
  background: linear-gradient(180deg, rgba(255,199,56,0.14), rgba(255,255,255,0.02));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    inset 0 0 0 2px rgba(255,199,56,0.26),
    0 0 0 1px rgba(255,206,66,0.34),
    0 0 22px rgba(255,206,66,0.20),
    0 0 48px rgba(255,206,66,0.20),
    0 0 90px rgba(255,206,66,0.11),
    0 14px 34px rgba(0,0,0,0.16);
}

.latest-achievement-card.gold::before {
  box-shadow:
    inset 0 0 0 2px rgba(255,220,96,0.80),
    inset 0 0 0 4px rgba(255,199,56,0.24),
    inset 0 0 24px rgba(255,199,56,0.14);
}

.latest-achievement-card.gold::after {
  background: radial-gradient(circle at 50% 50%, rgba(255,199,56,0.26), transparent 72%);
}

.latest-achievement-card.gold .latest-achievement-icon {
  filter: drop-shadow(0 0 8px rgba(255,199,56,0.34));
}

.latest-achievement-card.gold .latest-achievement-icon-wrap {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(255,199,56,0.20),
    0 0 22px rgba(255,199,56,0.18);
}

.latest-achievement-card.gold:hover,
.latest-achievement-card.gold:focus-visible,
.latest-achievement-card.gold.is-active {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    inset 0 0 0 2px rgba(255,199,56,0.30),
    0 0 0 1px rgba(255,206,66,0.36),
    0 0 28px rgba(255,206,66,0.26),
    0 0 60px rgba(255,206,66,0.24),
    0 0 102px rgba(255,206,66,0.14),
    0 18px 42px rgba(0,0,0,0.18);
}

/* platinum */

.latest-achievement-card.platinum {
  border-color: rgba(186,246,255,0.92);
  background: linear-gradient(180deg, rgba(140,236,255,0.14), rgba(255,255,255,0.02));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    inset 0 0 0 2px rgba(140,236,255,0.28),
    0 0 0 1px rgba(140,236,255,0.36),
    0 0 24px rgba(140,236,255,0.22),
    0 0 52px rgba(140,236,255,0.22),
    0 0 96px rgba(140,236,255,0.13),
    0 14px 36px rgba(0,0,0,0.17);
}

.latest-achievement-card.platinum::before {
  box-shadow:
    inset 0 0 0 2px rgba(168,242,255,0.82),
    inset 0 0 0 4px rgba(140,236,255,0.26),
    inset 0 0 26px rgba(140,236,255,0.16);
}

.latest-achievement-card.platinum::after {
  background: radial-gradient(circle at 50% 50%, rgba(140,236,255,0.28), transparent 72%);
}

.latest-achievement-card.platinum .latest-achievement-icon {
  filter: drop-shadow(0 0 10px rgba(140,236,255,0.44));
}

.latest-achievement-card.platinum .latest-achievement-icon-wrap {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(140,236,255,0.22),
    0 0 24px rgba(140,236,255,0.20);
}

.latest-achievement-card.platinum:hover,
.latest-achievement-card.platinum:focus-visible,
.latest-achievement-card.platinum.is-active {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    inset 0 0 0 2px rgba(140,236,255,0.32),
    0 0 0 1px rgba(140,236,255,0.38),
    0 0 30px rgba(140,236,255,0.28),
    0 0 64px rgba(140,236,255,0.26),
    0 0 108px rgba(140,236,255,0.16),
    0 18px 44px rgba(0,0,0,0.19);
}

.latest-achievement-detail {
  position: relative;
  margin-top: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.018));
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03),
    0 0 24px rgba(255,255,255,0.03);
  overflow: hidden;
  isolation: isolate;
}

.latest-achievement-detail.is-visible {
  animation: achievementDetailReveal 0.24s ease;
}

@keyframes achievementDetailReveal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.latest-achievement-detail-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 22px;
}

.latest-achievement-detail-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  border-radius: 24px;
  overflow: visible !important;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,0.05), rgba(255,255,255,0.015) 62%, rgba(255,255,255,0.00) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 0 0 1px rgba(255,255,255,0.04),
    0 0 24px rgba(255,255,255,0.04);
}

.latest-achievement-detail-icon-wrap::before {
  content: '';
  position: absolute;
  inset: -22px;
  border-radius: 34px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,210,120,0.18) 0%,
      rgba(255,255,255,0.12) 24%,
      rgba(255,210,120,0.08) 46%,
      rgba(255,210,120,0.00) 74%);
  filter: blur(22px);
  opacity: 1;
  transform: scale(1);
  animation: achievementMedalAura 2.8s ease-in-out infinite;
}

.latest-achievement-detail-icon-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  pointer-events: none;
  z-index: 1;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    inset 0 0 0 2px rgba(255,255,255,0.02);
}

.latest-achievement-detail-icon {
  position: relative;
  z-index: 2;
  width: 82px;
  height: 82px;
  object-fit: contain;
  display: block;
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,0.28))
    drop-shadow(0 0 24px rgba(255,220,150,0.24))
    drop-shadow(0 0 44px rgba(255,200,90,0.18))
    brightness(1.10)
    saturate(1.14)
    contrast(1.06) !important;
  transform: scale(1.05);
  animation: achievementMedalIconPulse 2.8s ease-in-out infinite;
}

.latest-achievement-detail.is-visible .latest-achievement-detail-icon-wrap::before {
  opacity: 1;
}

.latest-achievement-detail.is-visible .latest-achievement-detail-icon {
  filter:
    drop-shadow(0 0 12px rgba(255,255,255,0.34))
    drop-shadow(0 0 28px rgba(255,220,150,0.30))
    drop-shadow(0 0 52px rgba(255,200,90,0.22))
    brightness(1.13)
    saturate(1.18)
    contrast(1.07) !important;
}

@keyframes achievementMedalAura {
  0% {
    opacity: 0.68;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 0.68;
    transform: scale(0.96);
  }
}

@keyframes achievementMedalIconPulse {
  0% { transform: scale(1.03); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1.03); }
}

.latest-achievement-detail.is-bronze .latest-achievement-detail-icon-wrap::before,
.latest-achievement-detail[data-tier="bronze"] .latest-achievement-detail-icon-wrap::before {
  background: radial-gradient(circle at 50% 50%, rgba(255,210,170,0.22) 0%, rgba(236,166,98,0.18) 28%, rgba(205,127,50,0.10) 50%, rgba(205,127,50,0.00) 74%);
}

.latest-achievement-detail.is-bronze .latest-achievement-detail-icon,
.latest-achievement-detail[data-tier="bronze"] .latest-achievement-detail-icon {
  filter:
    drop-shadow(0 0 10px rgba(255,236,215,0.30))
    drop-shadow(0 0 26px rgba(236,166,98,0.34))
    drop-shadow(0 0 48px rgba(205,127,50,0.24))
    brightness(1.12)
    saturate(1.18)
    contrast(1.06) !important;
}

.latest-achievement-detail.is-silver .latest-achievement-detail-icon-wrap::before,
.latest-achievement-detail[data-tier="silver"] .latest-achievement-detail-icon-wrap::before {
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.24) 0%, rgba(230,240,252,0.20) 28%, rgba(214,224,236,0.12) 50%, rgba(214,224,236,0.00) 74%);
}

.latest-achievement-detail.is-silver .latest-achievement-detail-icon,
.latest-achievement-detail[data-tier="silver"] .latest-achievement-detail-icon {
  filter:
    drop-shadow(0 0 12px rgba(255,255,255,0.36))
    drop-shadow(0 0 28px rgba(230,240,252,0.36))
    drop-shadow(0 0 52px rgba(214,224,236,0.24))
    brightness(1.14)
    saturate(1.10)
    contrast(1.06) !important;
}

.latest-achievement-detail.is-gold .latest-achievement-detail-icon-wrap::before,
.latest-achievement-detail[data-tier="gold"] .latest-achievement-detail-icon-wrap::before {
  background: radial-gradient(circle at 50% 50%, rgba(255,246,190,0.24) 0%, rgba(255,220,96,0.22) 28%, rgba(255,199,56,0.12) 50%, rgba(255,199,56,0.00) 74%);
}

.latest-achievement-detail.is-gold .latest-achievement-detail-icon,
.latest-achievement-detail[data-tier="gold"] .latest-achievement-detail-icon {
  filter:
    drop-shadow(0 0 12px rgba(255,248,210,0.34))
    drop-shadow(0 0 30px rgba(255,220,96,0.38))
    drop-shadow(0 0 54px rgba(255,199,56,0.26))
    brightness(1.14)
    saturate(1.20)
    contrast(1.06) !important;
}

.latest-achievement-detail.is-platinum .latest-achievement-detail-icon-wrap::before,
.latest-achievement-detail[data-tier="platinum"] .latest-achievement-detail-icon-wrap::before {
  background: radial-gradient(circle at 50% 50%, rgba(235,255,255,0.24) 0%, rgba(196,248,255,0.22) 28%, rgba(140,236,255,0.12) 50%, rgba(140,236,255,0.00) 74%);
}

.latest-achievement-detail.is-platinum .latest-achievement-detail-icon,
.latest-achievement-detail[data-tier="platinum"] .latest-achievement-detail-icon {
  filter:
    drop-shadow(0 0 12px rgba(235,255,255,0.36))
    drop-shadow(0 0 30px rgba(196,248,255,0.38))
    drop-shadow(0 0 56px rgba(140,236,255,0.26))
    brightness(1.14)
    saturate(1.10)
    contrast(1.06) !important;
}

.latest-achievement-detail-kicker {
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.66);
}

.latest-achievement-detail-title {
  margin: 0 0 14px;
  font-size: 28px;
   line-height: 1.2;
  font-weight: 900;
  color: #ffffff;
}

.latest-achievement-detail-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.latest-achievement-detail-stat {
  padding: 12px 12px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
}

.latest-achievement-detail-stat-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  line-height: 1.2;
  color: rgba(255,255,255,0.58);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.latest-achievement-detail-stat-value {
  display: block;
  font-size: 22px;
  line-height: 1.1;
  color: #ffffff;
  font-weight: 900;
}

.latest-achievement-detail-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.82);
}

/* =========================================
   LIBRARY REWARD PANEL
   ========================================= */

.latest-library-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.latest-library-toggle:hover,
.latest-library-toggle:focus-visible {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-1px);
}

.latest-library-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 16px;
  font-weight: 900;
  transition: transform 0.22s ease;
}

.latest-library-toggle[aria-expanded="true"] .latest-library-toggle-icon {
  transform: rotate(45deg);
}

.latest-library-reward-wrap {
  margin-top: 16px;
}

.latest-library-reward-wrap.is-open {
  animation: libraryRewardReveal 0.24s ease;
}

@keyframes libraryRewardReveal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.latest-library-reward-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.latest-library-reward {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 120px 16px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.74);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease;
}

.latest-library-reward::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

.latest-library-reward::after {
  content: '';
  position: absolute;
  inset: -12%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  filter: blur(26px);
  transition: opacity 0.24s ease;
}

.latest-library-reward > * {
  position: relative;
  z-index: 2;
}

.latest-library-reward-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex: 0 0 28px;
  opacity: 0.90;
}

.latest-library-reward-body {
  min-width: 0;
}

.latest-library-reward-milestone {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.latest-library-reward-points {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
}

/* achieved */

.latest-library-reward.unlocked {
  border-color: rgba(120,255,180,0.45);
  background: linear-gradient(180deg, rgba(120,255,180,0.08), rgba(255,255,255,0.02));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(120,255,180,0.18),
    0 0 20px rgba(120,255,180,0.14);
}

.latest-library-reward.unlocked::before {
  box-shadow:
    inset 0 0 0 2px rgba(120,255,180,0.18),
    inset 0 0 0 4px rgba(120,255,180,0.06);
}

.latest-library-reward.unlocked::marker {
  content: '';
}

.latest-library-reward.unlocked::selection {
  background: transparent;
}

.latest-library-reward.unlocked::after {
  pointer-events: none;
}

.latest-library-reward.unlocked .latest-library-reward-icon {
  filter:
    drop-shadow(0 0 6px rgba(180,255,210,0.24))
    drop-shadow(0 0 16px rgba(120,255,180,0.22));
}


/* current target */

.latest-library-reward.current-target {
  border-color: rgba(255,255,255,0.22);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 0 1px rgba(255,255,255,0.08),
    0 0 26px rgba(255,255,255,0.08);
}

.latest-library-reward.current-target::before {
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.18),
    inset 0 0 0 4px rgba(255,255,255,0.06);
}

/* CLEAN library reward states */

.latest-library-reward.unlocked::before,
.latest-library-reward.current-target::before {
  content: '';
  opacity: 1;
}

.latest-library-reward.unlocked::selection,
.latest-library-reward.current-target::selection {
  background: transparent;
}

.latest-library-reward.current-target .latest-library-reward-icon {
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,0.18))
    drop-shadow(0 0 18px rgba(255,255,255,0.10));
}

/* tier-based current target glow */

.latest-library-reward.current-target.bronze {
  border-color: rgba(186,146,118,0.82);
  background: linear-gradient(180deg, rgba(205,127,50,0.14), rgba(255,255,255,0.025));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 0 0 2px rgba(205,127,50,0.22),
    0 0 0 1px rgba(205,127,50,0.28),
    0 0 18px rgba(205,127,50,0.18),
    0 0 38px rgba(205,127,50,0.16);
}

.latest-library-reward.current-target.bronze::before {
  box-shadow:
    inset 0 0 0 2px rgba(186,146,118,0.72),
    inset 0 0 0 4px rgba(205,127,50,0.18);
}

.latest-library-reward.current-target.bronze .latest-library-reward-icon {
  filter:
    drop-shadow(0 0 8px rgba(255,236,215,0.24))
    drop-shadow(0 0 16px rgba(205,127,50,0.22));
}

.latest-library-reward.current-target.silver {
  border-color: rgba(240,247,255,0.88);
  background: linear-gradient(180deg, rgba(214,224,236,0.15), rgba(255,255,255,0.025));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 0 0 2px rgba(214,224,236,0.22),
    0 0 0 1px rgba(214,224,236,0.32),
    0 0 20px rgba(214,224,236,0.20),
    0 0 42px rgba(214,224,236,0.18);
}

.latest-library-reward.current-target.silver::before {
  box-shadow:
    inset 0 0 0 2px rgba(224,235,248,0.74),
    inset 0 0 0 4px rgba(214,224,236,0.18);
}

.latest-library-reward.current-target.silver .latest-library-reward-icon {
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,0.28))
    drop-shadow(0 0 18px rgba(214,224,236,0.24));
}

.latest-library-reward.current-target.gold {
  border-color: rgba(255,226,110,0.90);
  background: linear-gradient(180deg, rgba(255,199,56,0.16), rgba(255,255,255,0.025));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 0 0 2px rgba(255,199,56,0.22),
    0 0 0 1px rgba(255,206,66,0.34),
    0 0 22px rgba(255,206,66,0.22),
    0 0 46px rgba(255,206,66,0.18);
}

.latest-library-reward.current-target.gold::before {
  box-shadow:
    inset 0 0 0 2px rgba(255,220,96,0.76),
    inset 0 0 0 4px rgba(255,199,56,0.18);
}

.latest-library-reward.current-target.gold .latest-library-reward-icon {
  filter:
    drop-shadow(0 0 8px rgba(255,248,210,0.28))
    drop-shadow(0 0 18px rgba(255,199,56,0.26));
}

.latest-library-reward.current-target.platinum {
  border-color: rgba(186,246,255,0.92);
  background: linear-gradient(180deg, rgba(140,236,255,0.16), rgba(255,255,255,0.025));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 0 0 2px rgba(140,236,255,0.24),
    0 0 0 1px rgba(140,236,255,0.36),
    0 0 24px rgba(140,236,255,0.24),
    0 0 50px rgba(140,236,255,0.20);
}

.latest-library-reward.current-target.platinum::before {
  box-shadow:
    inset 0 0 0 2px rgba(168,242,255,0.78),
    inset 0 0 0 4px rgba(140,236,255,0.20);
}

.latest-library-reward.current-target.platinum .latest-library-reward-icon {
  filter:
    drop-shadow(0 0 8px rgba(235,255,255,0.28))
    drop-shadow(0 0 20px rgba(140,236,255,0.26));
}

/* near unlock stronger pulse */

.latest-library-reward.current-target.is-near-unlock {
  transform: translateY(0);
}

.latest-library-reward.current-target.is-near-unlock .latest-library-reward-icon {
  animation: libraryTargetIconFloat 2.4s ease-in-out infinite;
}

@keyframes libraryTargetIconFloat {
  0% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-1px) scale(1.05);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes librarySilverAura {
  0% {
    box-shadow:
      0 0 0 1px rgba(214,224,236,0.18),
      0 0 14px rgba(214,224,236,0.12),
      0 0 32px rgba(214,224,236,0.08);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(214,224,236,0.30),
      0 0 24px rgba(214,224,236,0.22),
      0 0 58px rgba(214,224,236,0.14);
  }
  100% {
    box-shadow:
      0 0 0 1px rgba(214,224,236,0.18),
      0 0 14px rgba(214,224,236,0.12),
      0 0 32px rgba(214,224,236,0.08);
  }
}

@keyframes libraryGoldAura {
  0% {
    box-shadow:
      0 0 0 1px rgba(255,199,56,0.18),
      0 0 14px rgba(255,199,56,0.12),
      0 0 34px rgba(255,199,56,0.08);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255,199,56,0.32),
      0 0 26px rgba(255,199,56,0.24),
      0 0 62px rgba(255,199,56,0.15);
  }
  100% {
    box-shadow:
      0 0 0 1px rgba(255,199,56,0.18),
      0 0 14px rgba(255,199,56,0.12),
      0 0 34px rgba(255,199,56,0.08);
  }
}

@keyframes libraryPlatinumAura {
  0% {
    box-shadow:
      0 0 0 1px rgba(140,236,255,0.20),
      0 0 16px rgba(140,236,255,0.14),
      0 0 38px rgba(140,236,255,0.10);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(140,236,255,0.34),
      0 0 28px rgba(140,236,255,0.26),
      0 0 70px rgba(140,236,255,0.18);
  }
  100% {
    box-shadow:
      0 0 0 1px rgba(140,236,255,0.20),
      0 0 16px rgba(140,236,255,0.14),
      0 0 38px rgba(140,236,255,0.10);
  }
}

.latest-library-panel.is-near-unlock .latest-library-message {
  color: rgba(255,255,255,0.96);
}

.latest-library-panel.is-near-unlock .latest-library-stat-value {
  text-shadow: 0 0 10px rgba(255,255,255,0.08);
}

.latest-library-panel.is-near-unlock .latest-library-progress-bar {
  animation: libraryProgressGlow 2.4s ease-in-out infinite;
}

@keyframes libraryProgressGlow {
  0% { opacity: 0.92; }
  50% { opacity: 1; }
  100% { opacity: 0.92; }
}

.latest-library-reward.current-target.silver.is-near-unlock {
  border-color: rgba(214,224,236,0.58);
  background: linear-gradient(180deg, rgba(214,224,236,0.17), rgba(255,255,255,0.03));
  animation:
    dailyTierPulse 2.4s ease-in-out infinite,
    librarySilverAura 2.4s ease-in-out infinite;
}

.latest-library-reward.current-target.silver.is-near-unlock .latest-library-reward-icon {
  filter: drop-shadow(0 0 10px rgba(214,224,236,0.44));
}

.latest-library-panel.is-near-unlock.is-tier-silver .latest-library-progress-bar {
  box-shadow:
    0 0 12px rgba(214,224,236,0.34),
    0 0 26px rgba(214,224,236,0.18);
}

.latest-library-reward.current-target.gold.is-near-unlock {
  border-color: rgba(255,199,56,0.62);
  background: linear-gradient(180deg, rgba(255,199,56,0.18), rgba(255,255,255,0.03));
  animation:
    dailyTierPulse 2.4s ease-in-out infinite,
    libraryGoldAura 2.4s ease-in-out infinite;
}

.latest-library-reward.current-target.gold.is-near-unlock .latest-library-reward-icon {
  filter: drop-shadow(0 0 10px rgba(255,199,56,0.46));
}

.latest-library-panel.is-near-unlock.is-tier-gold .latest-library-progress-bar {
  box-shadow:
    0 0 12px rgba(255,199,56,0.36),
    0 0 28px rgba(255,199,56,0.20);
}

.latest-library-reward.current-target.platinum.is-near-unlock {
  border-color: rgba(140,236,255,0.64);
  background: linear-gradient(180deg, rgba(140,236,255,0.18), rgba(255,255,255,0.03));
  animation:
    dailyTierPulse 2.4s ease-in-out infinite,
    libraryPlatinumAura 2.4s ease-in-out infinite;
}

.latest-library-reward.current-target.platinum.is-near-unlock .latest-library-reward-icon {
  filter: drop-shadow(0 0 12px rgba(140,236,255,0.54));
}

.latest-library-panel.is-near-unlock.is-tier-platinum .latest-library-progress-bar {
  box-shadow:
    0 0 14px rgba(140,236,255,0.38),
    0 0 30px rgba(140,236,255,0.22);
}

/* =========================================
   FEATURED STRIP
   ========================================= */

.latest-featured-strip {
  margin: 34px 0 30px;
}

.latest-featured-strip-head {
  margin-bottom: 16px;
}

.latest-featured-strip-title {
  margin: 0 0 6px;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 800;
  color: #ffffff;
}

.latest-featured-strip-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.68);
}

.latest-featured-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.latest-featured-card,
.latest-featured-card:visited {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  text-decoration: none !important;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}

.latest-featured-card:hover,
.latest-featured-card:focus {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.14);
}

.latest-featured-card-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  background: rgba(255,255,255,0.012);
}

.latest-featured-card-body {
  padding: 12px 12px 14px;
}

.latest-featured-card-title {
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.latest-featured-card-date {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255,255,255,0.62);
}

/* =========================================
   DATE NAV
   ========================================= */

.latest-date-nav {
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  align-items: center;
}

.latest-date-nav-label {
  color: rgba(255,255,255,0.7);
  font-size: 16px;
  font-weight: 700;
}

.latest-date-nav-link,
.latest-date-nav-link:visited {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 38px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
  overflow: hidden;
  isolation: isolate;
}

.latest-date-nav-link::before,
.timeline-date::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

.latest-date-nav-link:hover,
.latest-date-nav-link:focus {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-1px);
}

.latest-date-nav-link.active,
.latest-date-nav-link.active:visited {
  background: #ffffff;
  border-color: #ffffff;
  color: #111111 !important;
}

.latest-date-nav-link.tier-bronze::before,
.timeline-date.tier-bronze::before {
  box-shadow:
    inset 0 0 0 2px rgba(205,127,50,0.58),
    inset 0 0 0 4px rgba(205,127,50,0.18);
}

.latest-date-nav-link.tier-silver::before,
.timeline-date.tier-silver::before {
  box-shadow:
    inset 0 0 0 2px rgba(224,235,248,0.62),
    inset 0 0 0 4px rgba(214,224,236,0.20);
}

.latest-date-nav-link.tier-gold::before,
.timeline-date.tier-gold::before {
  box-shadow:
    inset 0 0 0 2px rgba(255,220,96,0.68),
    inset 0 0 0 4px rgba(255,199,56,0.22);
}

.latest-date-nav-link.tier-platinum::before,
.timeline-date.tier-platinum::before {
  box-shadow:
    inset 0 0 0 2px rgba(168,242,255,0.70),
    inset 0 0 0 4px rgba(140,236,255,0.24);
}

.latest-date-nav-link .latest-date-pill-media {
  min-width: auto;
  height: auto;
  padding: 0;
}

.latest-date-nav-link .latest-date-pill-media img {
  max-width: 86px;
  height: 18px;
}

.latest-date-month-separator {
  display: block;
  width: 100%;
  margin: 12px 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  border-top: 1px dashed rgba(255,255,255,0.15);
  padding-top: 8px;
}

/* =========================================
   PAGINATION
   ========================================= */

.latest-pagination {
  margin-top: 30px;
}

.latest-pagination-top {
  margin-top: 30px;
  margin-bottom: 34px;
}

.latest-pagination-bottom {
  margin-top: 32px;
  margin-bottom: 48px;
}

.latest-pagination-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 14px;
}

.latest-pagination-current {
  font-size: 14px;
  color: rgba(255,255,255,0.76);
  padding: 0 4px;
}

.latest-pagination-btn,
.latest-pagination-btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.latest-pagination-btn:hover,
.latest-pagination-btn:focus {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-1px);
}

.latest-inline-date-pagination {
  margin-top: 0;
  margin-bottom: 14px;
  display: flex;
  justify-content: center;
}

.latest-inline-date-pagination-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.latest-inline-date-pagination-current {
  font-size: 14px;
  color: rgba(255,255,255,0.78);
  padding: 0 4px;
}

.latest-inline-date-pagination-btn,
.latest-inline-date-pagination-btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.latest-inline-date-pagination-btn:hover,
.latest-inline-date-pagination-btn:focus {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.20);
  transform: translateY(-1px);
}

/* =========================================
   BOTTOM NAV
   ========================================= */

.latest-blog-bottom-nav {
  margin-top: 72px;
  margin-bottom: 56px;
  text-align: center;
}

.latest-blog-bottom-nav-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.latest-blog-bottom-link,
.latest-blog-bottom-link:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #d7ff00 !important;
  text-decoration: none !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.latest-blog-bottom-link:hover,
.latest-blog-bottom-link:focus {
  opacity: 0.86;
  transform: translateY(-1px);
}

.latest-products-empty {
  color: rgba(255,255,255,0.75);
  font-size: 15px;
}

/* =========================================
   TIMELINE
   ========================================= */

.upload-timeline {
  position: fixed;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  z-index: 30;
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: visible;
  padding: 22px 26px 22px 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.22) transparent;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.28s ease,
    transform 0.28s ease,
    visibility 0.28s ease;
}

.upload-timeline.is-hidden-near-footer {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-50%) translateX(18px);
}

.upload-timeline::-webkit-scrollbar {
  width: 4px;
}

.upload-timeline::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.22);
  border-radius: 10px;
}

.timeline-month-separator {
  display: block;
  width: 100%;
  margin: 10px 0 4px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255,255,255,0.15);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  text-align: center;
  line-height: 1.2;
}

.timeline-date,
.timeline-date:visited {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 48px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.88);
  text-decoration: none !important;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
  backdrop-filter: blur(6px);
  overflow: hidden;
  isolation: isolate;
}

.timeline-date:hover,
.timeline-date:focus {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05)),
    linear-gradient(135deg, rgba(var(--tier-rgb), 0.20), rgba(var(--tier-rgb), 0.08));
  border-color: rgba(255,255,255,0.18);
  color: #ffffff;
  transform: translateY(-1px);
}

.timeline-date .latest-date-pill-media {
  min-width: auto;
  height: auto;
  padding: 0;
}

.timeline-date .latest-date-pill-media img {
  max-width: 92px;
  height: 18px;
}

.timeline-date-external {
  opacity: 0.72;
  position: relative;
}

.timeline-date-external::after {
  content: "↗";
  margin-left: 6px;
  font-size: 11px;
  opacity: 0.75;
  position: relative;
  top: -1px;
}

/* =========================================
   SEO INTRO BLOCK
   ========================================= */

.latest-seo-intro-block {
  margin: 0 0 28px;
  padding: 22px 22px 20px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03),
    0 0 24px rgba(255,255,255,0.03);
}

.latest-seo-intro-title {
  margin: 0 0 14px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 800;
  color: #ffffff;
}

.latest-seo-intro-text {
  margin: 0 0 14px;
  max-width: 980px;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255,255,255,0.84);
}

.latest-seo-intro-text:last-child {
  margin-bottom: 0;
}

.latest-seo-intro-text a,
.latest-seo-intro-text a:visited {
  color: #d7ff00 !important;
  text-decoration: none !important;
  font-weight: 700;
}

.latest-seo-intro-text a:hover,
.latest-seo-intro-text a:focus {
  opacity: 0.86;
}

/* =========================================
   PAGE FAQ
   ========================================= */

.latest-page-faq {
  margin: 56px 0 42px;
  padding: 24px 22px 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03),
    0 0 24px rgba(255,255,255,0.03);
}

.latest-page-faq-head {
  margin-bottom: 18px;
}

.latest-page-faq-title {
  margin: 0 0 10px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 800;
  color: #ffffff;
}

.latest-page-faq-intro {
  margin: 0;
  max-width: 980px;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255,255,255,0.82);
}

.latest-page-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.latest-page-faq-item {
  padding: 18px 18px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}

.latest-page-faq-question {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 800;
  color: #ffffff;
}

.latest-page-faq-answer {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255,255,255,0.80);
}

.latest-page-faq-answer a,
.latest-page-faq-answer a:visited {
  color: #d7ff00 !important;
  text-decoration: none !important;
  font-weight: 700;
}

.latest-page-faq-answer a:hover,
.latest-page-faq-answer a:focus {
  opacity: 0.86;
}

.latest-page-faq-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.latest-page-faq-link-btn,
.latest-page-faq-link-btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.latest-page-faq-link-btn:hover,
.latest-page-faq-link-btn:focus {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.20);
  transform: translateY(-1px);
}

/* =========================================
   RESPONSIVE
   ========================================= */

@media (hover: none), (pointer: coarse) {
  .latest-date-divider-label.is-expanded .latest-date-pill-text-clip {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  .latest-date-divider-label {
    max-width: min(92vw, 760px);
  }

  .latest-date-divider-label.is-expanded {
    max-width: min(96vw, 1100px);
    touch-action: pan-x pan-y;
  }
}

@media (max-width: 1100px) {
  .latest-achievement-grid,
  .latest-library-reward-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .latest-achievement-detail-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .latest-streak-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (max-width: 1000px) {
  .upload-timeline {
    display: none;
  }

  .latest-date-nav {
    display: flex;
  }
}

@media (max-width: 1000px) {
  html.desktop-mode .upload-timeline {
    display: block !important;
  }

  html.desktop-mode .latest-date-nav {
    display: none !important;
  }
}



@media (max-width: 900px) {
  .latest-product-row {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 16px;
  }

  .latest-product-action {
    grid-column: 2;
    grid-row: 2;
    justify-content: flex-start;
    margin-top: 4px;
  }

  .latest-product-thumb-link {
    width: 84px;
    height: 84px;
  }

  .latest-product-thumb {
    width: 74px;
    height: 74px;
  }

  .latest-featured-strip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .latest-achievement-detail-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .latest-date-divider-label {
    width: auto;
    max-width: 420px;
  }

  .latest-date-divider-label:hover,
  .latest-date-divider-label:focus-visible {
    max-width: min(92vw, 760px);
  }

  .latest-date-pill-media {
    min-width: 96px;
    padding: 0 14px;
  }

  .latest-date-pill-media img {
    max-width: 122px;
    height: 24px;
  }

  .latest-date-pill-text {
    font-size: 14px;
  }
}

@media (max-width: 640px) {
  .latest-seo-intro-block,
  .latest-page-faq {
    padding: 18px 16px;
  }

  .latest-seo-intro-title,
  .latest-page-faq-title {
    font-size: 22px;
  }

  .latest-seo-intro-text,
  .latest-page-faq-intro,
  .latest-page-faq-answer {
    font-size: 14px;
  }

  .latest-page-faq-grid {
    grid-template-columns: 1fr;
  }

  .latest-page-faq-question {
    font-size: 17px;
  }

  .latest-page-faq-links {
    flex-direction: column;
  }

  .latest-page-faq-link-btn {
    width: 100%;
  }

  .latest-blog-products {
    margin: 36px 0 30px;
  }

  .latest-streak-track {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .latest-streak-node {
    min-height: 140px;
    padding: 14px 10px 12px;
  }

  .latest-streak-node-bonus {
    font-size: 12px;
  }

  .latest-streak-node-multiplier {
    font-size: 13px;
  }

  .latest-blog-products-subtitle,
  .latest-featured-strip-text,
  .latest-library-seo-text,
  .latest-achievement-intro,
  .latest-streak-text,
  .latest-achievement-summary,
  .latest-dopamine-explainer {
    font-size: 14px;
  }

  .latest-featured-strip {
    margin: 26px 0 24px;
  }

  .latest-featured-strip-title {
    font-size: 20px;
  }

  .latest-featured-strip-grid,
  .latest-achievement-grid,
  .latest-library-reward-grid,
  .latest-streak-track,
  .latest-achievement-detail-stats,
  .latest-dopamine-stats,
  .latest-library-stats {
    grid-template-columns: 1fr;
  }

  .latest-dopamine-panel,
  .latest-streak-panel,
  .latest-achievement-panel,
  .latest-library-panel {
    padding: 18px 16px;
    margin-bottom: 22px;
  }

  .latest-dopamine-title,
  .latest-streak-title,
  .latest-achievement-title,
  .latest-library-title,
  .latest-achievement-detail-title {
    font-size: 22px;
  }

  .latest-date-divider {
    gap: 10px;
  }

  .latest-date-divider-label {
    min-height: 54px;
    border-radius: 18px;
  }

  .latest-date-divider-label.is-expanded {
    max-width: min(96vw, 1100px);
  }

  .latest-date-pill-media {
    min-width: 74px;
    padding: 0 12px;
  }

  .latest-date-pill-media img {
    max-width: 86px;
    height: 18px;
  }

  .latest-date-pill-text-clip {
    padding: 0 16px 0 4px;
  }

  .latest-date-pill-text {
    font-size: 12px;
  }

  .latest-product-row {
    grid-template-columns: 72px minmax(0, 1fr);
    padding: 15px;
    border-radius: 14px;
  }

  .latest-product-thumb-link {
    width: 72px;
    height: 72px;
  }

  .latest-product-thumb {
    width: 62px;
    height: 62px;
  }

  .latest-product-name {
    font-size: 16px;
  }

  .latest-product-meta-row {
    font-size: 13px;
    gap: 6px;
  }

  .latest-product-view-btn {
    min-width: 84px;
    padding: 10px 14px;
    font-size: 13px;
  }

  .latest-inline-date-pagination-inner {
    flex-direction: column;
    gap: 12px;
  }

  .latest-inline-date-pagination-btn {
    width: 100%;
    max-width: 220px;
  }

  .latest-streak-panel-head {
    grid-template-columns: 1fr;
  }

  .latest-streak-power {
    justify-self: start;
  }

  .latest-achievement-detail-inner {
    padding: 18px 16px;
  }

  .latest-date-nav-link .latest-date-pill-media img,
  .timeline-date .latest-date-pill-media img {
    max-width: 68px;
    height: 14px;
  }

  /* MOBILE – neutral product rows same clean darkness as desktop */
  .latest-product-row:not(.is-today-row):not(.is-live-glow) .latest-product-reward-bg .bar-segments {
    opacity: 0.04;
    filter: saturate(0.12) brightness(0.28) contrast(0.9) grayscale(0.65);
  }

  .latest-product-row:not(.is-today-row):not(.is-live-glow) .latest-product-reward-bg::before {
    opacity: 0.10;
    mix-blend-mode: soft-light;
    background-size: cover;
    background-position: center center;
    transform: scale(1.01);
    filter: grayscale(0.42) brightness(0.58) contrast(0.94);
  }

  .latest-product-row:not(.is-today-row):not(.is-live-glow) .latest-product-reward-bg::after {
    opacity: 0.16;
  }

  .latest-product-row:not(.is-today-row):not(.is-live-glow)::before {
    opacity: 0.05;
  }

  .latest-product-row:not(.is-today-row):not(.is-live-glow)::after {
    opacity: 0;
  }

  .latest-achievement-card.bronze,
  .latest-achievement-card.silver,
  .latest-achievement-card.gold,
  .latest-achievement-card.platinum,
  .latest-streak-node[data-day="1"].is-unlocked,
  .latest-streak-node[data-day="2"].is-unlocked,
  .latest-streak-node[data-day="4"].is-unlocked,
  .latest-streak-node[data-day="7"].is-unlocked,
  .latest-streak-node[data-day="10"].is-unlocked,
  .latest-streak-node[data-day="20"].is-unlocked,
  .latest-streak-node[data-day="30"].is-unlocked {
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.04),
      0 0 0 1px rgba(255,255,255,0.05),
      0 0 16px rgba(255,255,255,0.06),
      0 10px 24px rgba(0,0,0,0.16);
  }

  .latest-achievement-card.bronze.is-active,
  .latest-achievement-card.silver.is-active,
  .latest-achievement-card.gold.is-active,
  .latest-achievement-card.platinum.is-active,
  .latest-streak-node.is-current {
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.05),
      0 0 0 1px rgba(255,255,255,0.08),
      0 0 22px rgba(255,255,255,0.10),
      0 12px 28px rgba(0,0,0,0.18);
  }

  .latest-dopamine-panel.is-bronze .latest-title-icon-img,
  .latest-dopamine-panel.is-silver .latest-title-icon-img,
  .latest-dopamine-panel.is-gold .latest-title-icon-img,
  .latest-dopamine-panel.is-platinum .latest-title-icon-img,
  .latest-dopamine-panel.is-bronze .latest-dopamine-badge-icon-img,
  .latest-dopamine-panel.is-silver .latest-dopamine-badge-icon-img,
  .latest-dopamine-panel.is-gold .latest-dopamine-badge-icon-img,
  .latest-dopamine-panel.is-platinum .latest-dopamine-badge-icon-img {
    animation: none;
  }
}

/* CURRENT ACTIVE CREATOR MILESTONE */

.latest-dopamine-badge.is-active {
  position: relative;
  opacity: 1 !important;
  transform: translateY(-1px) scale(1.03);
  border-width: 1px;
}

.latest-dopamine-badge:not(.is-active) {
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease,
    color 0.24s ease,
    opacity 0.24s ease,
    filter 0.24s ease;
}

.latest-dopamine-badge.is-active::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
}

.latest-dopamine-badge.is-active > * {
  position: relative;
  z-index: 1;
}

/* bronze current */
.latest-dopamine-badge[data-step="2"].unlocked.is-active {
  border-color: rgba(255,228,205,0.92);
  color: #fff6ef;
  background: linear-gradient(135deg, rgba(205,127,50,0.30), rgba(205,127,50,0.12));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.14),
    inset 0 0 0 2px rgba(255,224,198,0.58),
    0 0 0 1px rgba(255,224,198,0.34),
    0 0 12px rgba(240,172,100,0.16),
    0 0 26px rgba(205,127,50,0.14);
}

.latest-dopamine-badge[data-step="2"].unlocked.is-active::before {
  box-shadow:
    inset 0 0 0 2px rgba(255,236,220,0.6);
}


/* silver current */
.latest-dopamine-badge[data-step="4"].unlocked.is-active {
  border-color: rgba(248,251,255,0.9);
  color: #ffffff;
  background: linear-gradient(135deg, rgba(214,224,236,0.28), rgba(214,224,236,0.10));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.14),
    inset 0 0 0 2px rgba(236,242,252,0.55),
    0 0 0 1px rgba(236,242,252,0.32),
    0 0 10px rgba(204,214,230,0.14),
    0 0 24px rgba(214,224,236,0.12);
}

.latest-dopamine-badge[data-step="4"].unlocked.is-active::before {
  box-shadow:
    inset 0 0 0 2px rgba(252,254,255,0.6);
}


/* gold current */
.latest-dopamine-badge[data-step="5"].unlocked.is-active {
  border-color: rgba(255,240,176,0.9);
  color: #fffdf2;
  background: linear-gradient(135deg, rgba(255,199,56,0.30), rgba(255,199,56,0.12));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.14),
    inset 0 0 0 2px rgba(255,232,150,0.60),
    0 0 0 1px rgba(255,232,150,0.34),
    0 0 12px rgba(246,202,88,0.16),
    0 0 26px rgba(255,199,56,0.14);
}

.latest-dopamine-badge[data-step="5"].unlocked.is-active::before {
  box-shadow:
    inset 0 0 0 2px rgba(255,244,190,0.6);
}


/* platinum current */
.latest-dopamine-badge[data-step="7"].unlocked.is-active {
  border-color: rgba(214,252,255,0.9);
  color: #f6ffff;
  background: linear-gradient(135deg, rgba(167,196,255,0.28), rgba(167,196,255,0.10));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.14),
    inset 0 0 0 2px rgba(210,250,255,0.60),
    0 0 0 1px rgba(210,250,255,0.34),
    0 0 12px rgba(167,196,255,0.16),
    0 0 26px rgba(167,196,255,0.14);
}

.latest-dopamine-badge[data-step="7"].unlocked.is-active::before {
  box-shadow:
    inset 0 0 0 2px rgba(235,255,255,0.6);
}

/* =========================================
   DATE TIER HELPER TEXT – FINAL WORKING VERSION
   ========================================= */

@media (min-width: 641px) {

  .latest-date-divider-line {
    position: relative;
    min-width: 0;
    overflow: visible;
  }

  .latest-date-divider-line .tier-text {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: calc(100% - 16px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
    pointer-events: none;
    z-index: 3;

    font-size: 10px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    opacity: 0.5;
    text-shadow: 0 1px 3px rgba(0,0,0,0.35);

    background: rgba(16,18,24,0.72);
    padding: 2px 10px;
    border-radius: 999px;
  }

  .latest-date-divider-line .tier-text.left,
  .latest-date-divider-line .tier-text.right {
    left: auto;
    transform: none;
    text-align: center;
  }

  .latest-date-group.tier-bronze .tier-text {
    color: rgba(186,146,118,0.54);
  }

  .latest-date-group.tier-silver .tier-text {
    color: rgba(214,224,236,0.58);
  }

  .latest-date-group.tier-gold .tier-text {
    color: rgba(255,206,66,0.60);
  }

  .latest-date-group.tier-platinum .tier-text {
    color: rgba(140,236,255,0.62);
  }

  .mobile-tier-note {
    display: none !important;
  }
}

@media (max-width: 640px) {

  .latest-date-divider-line .tier-text {
    display: none !important;
  }

  .mobile-tier-note {
    display: block;
    margin-top: 8px;
    text-align: center;
    font-size: 10px;
    line-height: 1.45;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.34;
    white-space: normal;
    text-shadow: 0 1px 2px rgba(0,0,0,0.20);
  }

  .latest-date-group.tier-bronze .mobile-tier-note {
    color: rgba(186,146,118,0.54);
  }

  .latest-date-group.tier-silver .mobile-tier-note {
    color: rgba(214,224,236,0.58);
  }

  .latest-date-group.tier-gold .mobile-tier-note {
    color: rgba(255,206,66,0.60);
  }

  .latest-date-group.tier-platinum .mobile-tier-note {
    color: rgba(140,236,255,0.62);
  }
}

/* =========================================
   CURRENT CENTER DATE PILL ACTIVE STATE
   ========================================= */

.latest-date-divider-label.is-current-date {
  max-width: min(96vw, 1180px);
  color: #ffffff;
  border-color: rgba(var(--tier-rgb), 0.96) !important;
  background:
    radial-gradient(circle at 14% 50%, rgba(255,255,255,0.12), transparent 36%),
    linear-gradient(135deg, rgba(var(--tier-rgb), 0.18), rgba(255,255,255,0.04)),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  box-shadow:
    0 0 0 1px rgba(var(--tier-rgb), 0.28),
    0 0 16px rgba(var(--tier-rgb), 0.18),
    0 0 34px rgba(var(--tier-rgb), 0.14),
    0 10px 28px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

.latest-date-divider-label.is-current-date::before {
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.08),
    inset 0 0 0 4px rgba(var(--tier-rgb), 0.18),
    inset 0 0 18px rgba(var(--tier-rgb), 0.10);
}

.latest-date-divider-label.is-current-date .latest-date-pill-text,
.latest-date-divider-label.is-current-date .latest-date-pill-hover-text {
  color: #ffffff;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.28),
    0 0 8px rgba(255,255,255,0.10);
}

.latest-date-divider-label.is-current-date .latest-date-pill-media img {
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,0.18))
    drop-shadow(0 0 16px rgba(var(--tier-rgb), 0.22))
    drop-shadow(0 0 28px rgba(var(--tier-rgb), 0.14));
}

/* =========================================
   TODAY ROW + ACTIVE DATE
   keep today premium glow even when active
   ========================================= */

.latest-product-row.is-today-row.is-live-glow,
.latest-product-row.is-live-glow.is-today-row {

  border-color: rgba(255, 224, 176, 0.98) !important;

  background:
    radial-gradient(circle at 50% 50%, rgba(255,214,150,0.12), transparent 68%),
    linear-gradient(180deg, rgba(36,30,24,0.98), rgba(27,25,29,0.95)) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.10),
    inset 0 0 0 2px rgba(255,224,180,0.14),
    0 0 0 1px rgba(255,224,180,0.38),
    0 0 34px rgba(214,162,96,0.30),
    0 0 78px rgba(214,162,96,0.26),
    0 0 150px rgba(214,162,96,0.18),
    0 20px 50px rgba(0,0,0,0.24) !important;

  /* 🔥 NAUJAS – gyvybė */
  animation: todayUnifiedBreath 1.45s ease-in-out infinite !important;
}

.latest-product-row.is-today-row.is-live-glow .latest-product-reward-bg .bar-segments,
.latest-product-row.is-live-glow.is-today-row .latest-product-reward-bg .bar-segments {
  opacity: 0.18 !important;
  filter: saturate(1.04) brightness(0.92) contrast(1.04) grayscale(0.02) !important;
}

.latest-product-row.is-today-row.is-live-glow .latest-product-reward-bg::before,
.latest-product-row.is-live-glow.is-today-row .latest-product-reward-bg::before {
  opacity: 0.52 !important;
  filter: grayscale(0.02) brightness(0.98) contrast(1.06) !important;
  transform: scale(1.02) !important;
}

.latest-product-row.is-today-row.is-live-glow .latest-product-reward-bg::after {

  opacity: 0.88 !important;

  background:
    radial-gradient(circle at 50% 50%, rgba(255,214,150,0.10), transparent 72%),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.16) 0%,
      rgba(255,255,255,0.05) 10%,
      rgba(255,255,255,0.015) 24%,
      rgba(255,255,255,0.00) 38%,
      rgba(0,0,0,0.01) 58%,
      rgba(0,0,0,0.12) 100%
    ),
    linear-gradient(
      102deg,
      rgba(255,255,255,0.00) 0%,
      rgba(255,240,220,0.035) 12%,
      rgba(255,232,200,0.09) 22%,
      rgba(255,220,180,0.16) 31%,
      rgba(255,230,205,0.04) 42%,
      rgba(255,255,255,0.00) 54%
    ),
    linear-gradient(
      90deg,
      rgba(8,10,15,0.18) 0%,
      rgba(8,10,15,0.08) 18%,
      rgba(255,255,255,0.02) 34%,
      rgba(255,255,255,0.025) 50%,
      rgba(8,10,15,0.06) 66%,
      rgba(8,10,15,0.16) 100%
    ) !important;

background-size: 170% 170%, 150% 150%, 260% 260%, 170% 170%;
  background-position: 50% 50%, 50% 0%, -45% 50%, 50% 50%;
  animation: none !important;
  will-change: background-position, opacity;
}

.latest-product-row.is-today-row.is-live-glow::before,
.latest-product-row.is-live-glow.is-today-row::before {
  opacity: 0.30 !important;
}

.latest-product-row.is-today-row.is-live-glow::after,
.latest-product-row.is-live-glow.is-today-row::after {
  opacity: 0.18 !important;
  animation: none;
  transform: skewX(-16deg) translateX(12%) !important;
  filter: blur(0.15px) saturate(1.08) brightness(1.06) !important;
}

/* today row should not shine unless it is the active row */
.latest-product-row.is-today-row:not(.is-live-glow)::after {
  opacity: 0.18 !important;
  animation: none !important;
  transform: skewX(-16deg) translateX(12%) !important;
}

/* =========================================
   TODAY ROW – STRONG HOVER SHINE FINAL FIX
   ========================================= */

.latest-product-row.is-today-row:hover,
.latest-product-row.is-today-row:focus-within,
.latest-product-row.is-today-row.is-live-glow:hover,
.latest-product-row.is-today-row.is-live-glow:focus-within,
.latest-product-row.is-live-glow.is-today-row:hover,
.latest-product-row.is-live-glow.is-today-row:focus-within {
  filter: brightness(1.06) saturate(1.08) contrast(1.03) !important;
  transform: translateY(-3px) scale(1.01) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.12),
    inset 0 0 0 2px rgba(255,232,190,0.18),
    0 0 0 1px rgba(255,232,190,0.42),
    0 0 40px rgba(214,162,96,0.34),
    0 0 88px rgba(214,162,96,0.30),
    0 0 170px rgba(214,162,96,0.22),
    0 24px 60px rgba(0,0,0,0.26) !important;
}

.latest-product-row.is-today-row:hover .latest-product-reward-bg .bar-segments,
.latest-product-row.is-today-row:focus-within .latest-product-reward-bg .bar-segments,
.latest-product-row.is-today-row.is-live-glow:hover .latest-product-reward-bg .bar-segments,
.latest-product-row.is-today-row.is-live-glow:focus-within .latest-product-reward-bg .bar-segments,
.latest-product-row.is-live-glow.is-today-row:hover .latest-product-reward-bg .bar-segments,
.latest-product-row.is-live-glow.is-today-row:focus-within .latest-product-reward-bg .bar-segments {
  opacity: 0.26 !important;
  filter: saturate(1.12) brightness(0.98) contrast(1.06) grayscale(0) !important;
}

.latest-product-row.is-today-row:hover .latest-product-reward-bg::before,
.latest-product-row.is-today-row:focus-within .latest-product-reward-bg::before,
.latest-product-row.is-today-row.is-live-glow:hover .latest-product-reward-bg::before,
.latest-product-row.is-today-row.is-live-glow:focus-within .latest-product-reward-bg::before,
.latest-product-row.is-live-glow.is-today-row:hover .latest-product-reward-bg::before,
.latest-product-row.is-live-glow.is-today-row:focus-within .latest-product-reward-bg::before {
  opacity: 0.66 !important;
  filter: grayscale(0) brightness(1.03) contrast(1.08) !important;
  transform: scale(1.026) !important;
}

.latest-product-row.is-today-row:hover .latest-product-reward-bg::after,
.latest-product-row.is-today-row:focus-within .latest-product-reward-bg::after,
.latest-product-row.is-today-row.is-live-glow:hover .latest-product-reward-bg::after,
.latest-product-row.is-today-row.is-live-glow:focus-within .latest-product-reward-bg::after,
.latest-product-row.is-live-glow.is-today-row:hover .latest-product-reward-bg::after,
.latest-product-row.is-live-glow.is-today-row:focus-within .latest-product-reward-bg::after {
  opacity: 1 !important;
}

.latest-product-row.is-today-row:hover::before,
.latest-product-row.is-today-row:focus-within::before,
.latest-product-row.is-today-row.is-live-glow:hover::before,
.latest-product-row.is-today-row.is-live-glow:focus-within::before,
.latest-product-row.is-live-glow.is-today-row:hover::before,
.latest-product-row.is-live-glow.is-today-row:focus-within::before {
  opacity: 0.38 !important;
}

/* =========================================
   TIMELINE INTRO DEMO
   ========================================= */

.upload-timeline.is-intro-spotlight {
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,0.10))
    drop-shadow(0 0 26px rgba(255,210,120,0.14))
    drop-shadow(0 0 52px rgba(255,210,120,0.10));
}

.upload-timeline .timeline-date.is-intro-hover,
.upload-timeline .timeline-date.is-intro-hover:visited {
  background:
    radial-gradient(circle at 18% 50%, rgba(255,255,255,0.18), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.08)),
    linear-gradient(135deg, rgba(255,210,120,0.24), rgba(255,210,120,0.08)) !important;
  border-color: rgba(255,224,160,0.95) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.12),
    inset 0 0 0 3px rgba(255,220,150,0.22),
    0 0 0 1px rgba(255,220,150,0.28),
    0 0 14px rgba(255,210,120,0.16),
    0 0 34px rgba(255,210,120,0.14),
    0 10px 24px rgba(0,0,0,0.18);
  transform: scale(1.04);
}

.upload-timeline .timeline-date.is-intro-hover .latest-date-pill-media img {
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,0.22))
    drop-shadow(0 0 18px rgba(255,210,120,0.24));
  transform: scale(1.04);
}

/* =========================================
   TIMELINE INTRO FAKE CURSOR – VISUAL POLISH
   ========================================= */

.latest-fake-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 72px;
  height: 72px;
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.88);
  transition:
    opacity 0.28s ease,
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.28s ease;
  will-change: transform, opacity, left, top;
}

.latest-fake-cursor.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.latest-fake-cursor::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 30%,
      rgba(255,255,255,0.48) 0%,
      rgba(255,255,255,0.18) 34%,
      rgba(255,255,255,0.08) 56%,
      rgba(255,255,255,0.02) 74%,
      transparent 100%);
  border: 1px solid rgba(255,255,255,0.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    0 0 0 1px rgba(255,255,255,0.05),
    0 0 18px rgba(255,255,255,0.14),
    0 0 40px rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.latest-fake-cursor::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 72%);
  filter: blur(10px);
  opacity: 0.9;
}

.latest-fake-cursor img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  object-fit: contain;
  transform: translate(-42%, -42%) rotate(-8deg);
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,0.7))
    drop-shadow(0 0 10px rgba(255,255,255,0.18))
    drop-shadow(0 0 18px rgba(255,255,255,0.10));
  user-select: none;
  -webkit-user-drag: none;
}

.latest-fake-cursor.is-clicking {
  transform: translate(-50%, -50%) scale(0.84);
  filter:
    drop-shadow(0 0 14px rgba(255,255,255,0.22))
    drop-shadow(0 0 34px rgba(255,255,255,0.14));
}

.latest-fake-cursor.is-clicking::before {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.42),
    0 0 0 1px rgba(255,255,255,0.12),
    0 0 28px rgba(255,255,255,0.30),
    0 0 64px rgba(255,255,255,0.18),
    0 0 96px rgba(255,255,255,0.10);
  background:
    radial-gradient(circle at 35% 30%,
      rgba(255,255,255,0.82) 0%,
      rgba(255,255,255,0.32) 24%,
      rgba(255,255,255,0.14) 48%,
      rgba(255,255,255,0.05) 68%,
      transparent 100%);
}

.latest-fake-cursor.is-clicking img {
  transform: translate(-38%, -36%) rotate(-8deg) scale(0.86);
  filter:
    drop-shadow(0 0 6px rgba(255,255,255,1))
    drop-shadow(0 0 18px rgba(255,255,255,0.34))
    drop-shadow(0 0 34px rgba(255,255,255,0.20));
}

.latest-fake-cursor-pulse {
  position: fixed;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%) scale(0.28);
  background:
    radial-gradient(circle,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,0.56) 28%,
      rgba(255,255,255,0.16) 52%,
      rgba(255,255,255,0.00) 74%);
  box-shadow:
    0 0 0 0 rgba(255,255,255,0.62),
    0 0 22px rgba(255,255,255,0.42),
    0 0 56px rgba(255,255,255,0.22),
    0 0 90px rgba(255,255,255,0.12);
  animation: latestFakeCursorPulse 0.82s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes latestFakeCursorPulse {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.24);
  }
  32% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }
  68% {
    opacity: 0.66;
    transform: translate(-50%, -50%) scale(2.15);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3.25);
  }
}

@keyframes todayUnifiedBreath {
  0% {
    transform: scale(1);
    filter: brightness(1) saturate(1);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.10),
      inset 0 0 0 2px rgba(255,224,180,0.14),
      0 0 0 1px rgba(255,224,180,0.38),
      0 0 36px rgba(214,162,96,0.34),
      0 0 82px rgba(214,162,96,0.28),
      0 0 155px rgba(214,162,96,0.20),
      0 20px 50px rgba(0,0,0,0.24);
  }

  50% {
    transform: scale(1.018);
    filter: brightness(1.16) saturate(1.22) contrast(1.05);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.16),
      inset 0 0 0 2px rgba(255,232,190,0.24),
      0 0 0 1px rgba(255,232,190,0.62),
      0 0 58px rgba(214,162,96,0.58),
      0 0 125px rgba(214,162,96,0.48),
      0 0 240px rgba(214,162,96,0.34),
      0 24px 60px rgba(0,0,0,0.28);
  }

  100% {
    transform: scale(1);
    filter: brightness(1) saturate(1);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.10),
      inset 0 0 0 2px rgba(255,224,180,0.14),
      0 0 0 1px rgba(255,224,180,0.38),
      0 0 36px rgba(214,162,96,0.34),
      0 0 82px rgba(214,162,96,0.28),
      0 0 155px rgba(214,162,96,0.20),
      0 20px 50px rgba(0,0,0,0.24);
  }
}

.upload-timeline .timeline-date {
  width: 170px;
  max-width: 170px;
  min-height: 42px;
  padding: 7px 12px;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  gap: 7px;
}

.upload-timeline .timeline-date-label {
  text-align: center;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.upload-timeline .timeline-date .latest-date-pill-media img {
  width: 24px;
  height: 24px;
}

/* ============================================================================
   AutoVectors — Film-Flow hero styles  (namespaced .av-hero* — no theme collisions)
   Append this block to assets/latest-templates.css (or add as its own asset).
   ============================================================================ */
.av-hero{
  position:relative;
  height:clamp(500px,78vh,840px);
  overflow:hidden;
  isolation:isolate;
  /* graceful fallback gradient if WebGL is unavailable (canvas stays blank then) */
  background:radial-gradient(90% 130% at 72% 42%,#0b2030 0%,#06101a 42%,#04050a 75%);
}
.av-hero__canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;
  touch-action:none;
}
/* contrast scrim — guarantees the white headline reads over bright fluid crests */
.av-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(72% 95% at 24% 50%,rgba(4,5,10,.62) 0%,rgba(4,5,10,.24) 42%,rgba(4,5,10,0) 72%),
    linear-gradient(180deg,rgba(4,5,10,.40) 0%,rgba(4,5,10,0) 24% 76%,rgba(4,5,10,.60) 100%);
}
/* engineered diagram chrome */
.av-hero__chrome{position:absolute;inset:0;z-index:2;pointer-events:none}
.av-hero__reg{position:absolute;width:26px;height:26px;opacity:.40}
.av-hero__reg::before,.av-hero__reg::after{content:"";position:absolute;background:#78e6ff}
.av-hero__reg::before{width:100%;height:1px;top:0}
.av-hero__reg::after{height:100%;width:1px;left:0}
.av-hero__reg--tl{top:20px;left:20px}
.av-hero__reg--tr{top:20px;right:20px;transform:scaleX(-1)}
.av-hero__reg--bl{bottom:20px;left:20px;transform:scaleY(-1)}
.av-hero__reg--br{bottom:20px;right:20px;transform:scale(-1)}
.av-hero__frame{position:absolute;inset:20px;border:1px solid rgba(140,236,255,.13);border-radius:9px}
.av-hero__caliper{
  position:absolute;right:32px;bottom:26px;z-index:3;text-align:right;
  font:600 11px/1.2 "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.14em;color:rgba(140,236,255,.6);
}
.av-hero__caliper small{display:block;color:rgba(214,224,236,.42);letter-spacing:.22em;font-weight:500;margin-top:4px}
.av-hero__hint{
  position:absolute;left:32px;bottom:26px;z-index:3;
  font:600 11px/1.2 "JetBrains Mono",ui-monospace,Menlo,monospace;
  letter-spacing:.16em;color:rgba(140,236,255,.5);
}
/* real DOM text (SEO-preserved) on top of the canvas */
.av-hero__inner{
  position:absolute;inset:0;z-index:3;display:flex;align-items:center;
  max-width:1180px;margin:0 auto;left:0;right:0;padding:0 24px;
}
.av-hero__content{max-width:60%;padding-left:clamp(8px,3vw,40px);position:relative}
.av-hero__content::before{content:"";position:absolute;left:-10%;top:-26%;width:122%;height:158%;z-index:-1;pointer-events:none;background:radial-gradient(68% 58% at 34% 52%,rgba(3,6,12,.88) 0%,rgba(3,6,12,.62) 44%,rgba(3,6,12,0) 78%)}
.av-hero__eyebrow{
  margin:0 0 18px;display:flex;align-items:center;gap:10px;
  font:700 12px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.34em;color:#78e6ff;opacity:.9;
}
.av-hero__eyebrow::before{content:"";width:26px;height:1px;background:#78e6ff;opacity:.7}
.av-hero__title{
  margin:0;font-weight:800;line-height:1.03;letter-spacing:-.015em;
  font-size:clamp(32px,4.6vw,58px);text-wrap:balance;color:#fff;
  text-shadow:0 2px 40px rgba(0,0,0,.6);
}
.av-hero__title .av-hl{color:#78e6ff}
.av-hero__subtitle{
  margin:20px 0 0;max-width:46ch;color:#c0c8d6;
  font-size:clamp(14px,1.15vw,16px);line-height:1.6;text-shadow:0 1px 20px rgba(0,0,0,.65);
}
@media (max-width:768px){
  .av-hero{height:clamp(380px,52vh,520px)}
  .av-hero__content{max-width:100%}
  .av-hero__frame{inset:12px}
  .av-hero__reg{width:18px;height:18px}
  .av-hero__hint{display:none}
}
/* respect reduced motion: the JS already renders a single static frame; nothing spins */

/* ============================================================================
   AV-DEPTHFLOW -- page-wide scroll-driven depth / 3D reveal continuum
   Namespaced .av-df-* -- coexists with the engine (latest-*/timeline-*/upload-*)
   and the hero (av-hero-*). Compositor-only (transform/opacity). No 2nd WebGL.
   Append this block to assets/latest-templates.css.
   ============================================================================ */

/* host = the .latest-blog-products section (relative is SAFE for the timeline's
   fixed right-rail; only transform/perspective/filter would break it). */
.av-df-host{position:relative}
.av-df-raise{position:relative}  /* lift content above the backdrop via tree order (no z-index => no stacking cap) */

/* ---- scoped depth backdrop (inside the host, behind content, never intercepts) ---- */
.av-df-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  opacity:1;transition:opacity .5s ease}
.av-df-bg .av-df-layer{position:absolute;inset:-10% -5%;will-change:transform}
/* L1: deep radial wash, cool top glow melting to void */
.av-df-l1{background:
  radial-gradient(120% 80% at 72% -10%, #0c2230 0%, #081019 38%, #04050a 72%),
  linear-gradient(180deg,#05070c 0%,#04050a 100%);
  transform:translate3d(0,calc(var(--av-df-p1,0)*1px),0)}
/* L2: tiling cyan registration-tick measurement grid (echoes .av-hero__reg) */
.av-df-l2{opacity:.5;
  background-image:
    linear-gradient(rgba(140,236,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(140,236,255,.05) 1px,transparent 1px),
    radial-gradient(rgba(140,236,255,.10) 1px,transparent 1.4px);
  background-size:96px 96px,96px 96px,96px 96px;
  background-position:0 0,0 0,0 0;
  transform:translate3d(0,calc(var(--av-df-p2,0)*1px),0)}
/* L3: faint drifting horizon glow */
.av-df-l3{background:radial-gradient(60% 40% at 28% 64%, rgba(140,236,255,.06) 0%, transparent 60%),
  radial-gradient(50% 36% at 82% 30%, rgba(150,120,255,.05) 0%, transparent 60%);
  transform:translate3d(0,calc(var(--av-df-p3,0)*1px),0)}

/* ---- left-gutter "measurement thread": a scan line with a lit head (scoped to host) ---- */
.av-df-thread{position:absolute;top:0;bottom:0;left:max(14px,calc((100% - 1180px)/2 - 14px));
  width:1px;z-index:2;pointer-events:none;opacity:.9;transition:opacity .5s ease;
  background:linear-gradient(180deg,transparent 0,rgba(140,236,255,.18) 6%,rgba(140,236,255,.18) 94%,transparent 100%)}
.av-df-thread::before{content:"";position:absolute;left:-3px;width:7px;height:7px;border-radius:50%;
  top:calc(var(--av-df-scroll,0)*100%);transform:translateY(-50%);
  background:#78e6ff;box-shadow:0 0 10px 2px rgba(140,236,255,.55)}
/* tick marks along the thread */
.av-df-thread::after{content:"";position:absolute;left:-3px;top:0;bottom:0;width:7px;
  background-image:linear-gradient(rgba(140,236,255,.35) 1px,transparent 1px);
  background-size:100% 64px;background-position:0 calc(var(--av-df-p2,0)*1px)}

/* ---- 3D reveals on the cool upper half (self-contained perspective:
        NO parent perspective => cannot break the timeline's fixed right-rail) ---- */
@media (prefers-reduced-motion: no-preference){
  .av-df-reveal{opacity:0;transform:perspective(1200px) translateY(26px) rotateX(7deg);
    transform-origin:50% 100%;
    transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1);
    transition-delay:calc(var(--av-df-i,0) * 70ms)}
  .av-df-reveal.av-df-in{opacity:1;transform:perspective(1200px) translateY(0) rotateX(0)}

  /* featured cards: scattered in Z, then "register" flat onto the cutting bed */
  .av-df-card{opacity:0;
    transform:perspective(1100px) translateY(34px) translateZ(-46px) rotateY(calc(var(--av-df-dir,1) * 9deg));
    transition:opacity .7s ease,transform .9s cubic-bezier(.16,1,.3,1);
    transition-delay:calc(var(--av-df-i,0) * 90ms)}
  .av-df-card.av-df-in{opacity:1;transform:perspective(1100px) translateY(0) translateZ(0) rotateY(0)}

  /* h2 caliper underline draws L->R on reveal */
  .av-df-uline{position:relative}
  .av-df-uline::after{content:"";position:absolute;left:0;bottom:-8px;height:1px;width:0;
    background:linear-gradient(90deg,#78e6ff,rgba(140,236,255,0));transition:width .9s ease .2s}
  .av-df-uline.av-df-in::after{width:min(220px,60%)}
}

/* fine-pointer hover tilt, scoped strictly to featured cards (never the timeline) */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion: no-preference){
  .av-df-card{transition:opacity .7s ease,transform .25s ease}
  .av-df-card.av-df-in:hover{transform:perspective(1100px) translateY(-4px) translateZ(8px)}
}

/* ---- calm contract: when the gamified timeline is in view, the whole add-on
        recedes to a faint static backdrop so the warm reward zone owns the light --- */
html.av-df-calm .av-df-bg{opacity:.22}
html.av-df-calm .av-df-thread{opacity:.10}
html.av-df-calm .av-df-l2{opacity:.18}

/* ---- fallbacks: reduced-motion + coarse pointer => static, zero motion ---- */
@media (prefers-reduced-motion: reduce){
  .av-df-thread::before{display:none}
  .av-df-bg .av-df-layer{transform:none !important}
}
@media (max-width:768px),(hover:none),(pointer:coarse){
  .av-df-thread{display:none}
  .av-df-bg{opacity:.7}
  .av-df-bg .av-df-layer{transform:none !important}
  /* reveals already settle via JS adding av-df-in immediately on small screens */
}

/* ============================================================================
   AV-SCENE -- full-bleed WebGL fluid scene behind the cool section.
   Text floats on translucent cards above the living fluid (Editions-style).
   Append to assets/latest-templates.css. Pairs with av-scene.js.
   ============================================================================ */
.av-scene-host{
  position:relative;
  margin:clamp(72px,11vh,150px) 0 64px;
  padding:clamp(40px,6vw,90px) 0;
  border-radius:18px;
  overflow:hidden;
  isolation:isolate;
  background:#05070c;                 /* fallback before WebGL paints */
}
.av-scene__canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;touch-action:none;
}
/* contrast scrim so text always reads over bright fluid crests */
.av-scene-host::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(80% 70% at 26% 42%,rgba(5,7,12,.66) 0%,rgba(5,7,12,.30) 40%,rgba(5,7,12,0) 72%),
    linear-gradient(180deg,rgba(5,7,12,.5) 0%,rgba(5,7,12,0) 18% 82%,rgba(5,7,12,.55) 100%);
}
.av-scene__content{position:relative;z-index:2}

/* engineered corner ticks echo the hero, framing the scene as a "cut bed" */
.av-scene-host::before{
  content:"";position:absolute;z-index:2;pointer-events:none;
  inset:16px;border:1px solid rgba(140,236,255,.12);border-radius:12px;
}

/* ---- text blocks float on translucent dark cards (readable over the fluid) ---- */
.av-scene-host .latest-blog-products-subtitle{
  background:rgba(6,10,16,.34);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border:1px solid rgba(140,236,255,.10);border-radius:14px;padding:18px 22px;
  text-shadow:0 1px 3px rgba(0,0,0,.95),0 1px 18px rgba(0,0,0,.7);
}
/* glassy: the revealed logo on the floor shows through; strong text halo keeps it readable */
.av-scene-host .latest-seo-intro-block{
  background:rgba(6,10,16,.32) !important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(140,236,255,.12) !important;
}
.av-scene-host .latest-seo-intro-title{text-shadow:0 2px 4px rgba(0,0,0,.95),0 2px 22px rgba(0,0,0,.7)}
.av-scene-host .latest-seo-intro-text{text-shadow:0 1px 3px rgba(0,0,0,.92),0 1px 14px rgba(0,0,0,.6)}
.av-scene-host .latest-featured-strip-title,
.av-scene-host .latest-featured-strip-text{text-shadow:0 1px 16px rgba(0,0,0,.7)}
/* featured cards: SAME dark glassy backing as the intro block -> consistent dimmed scrim + shadow under each card */
.av-scene-host .latest-featured-card,
.av-scene-host .latest-featured-card:visited{
  background:rgba(6,10,16,.32) !important;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(140,236,255,.12) !important;
  box-shadow:0 10px 40px rgba(0,0,0,.45);
}
.av-scene-host .latest-featured-card:hover,
.av-scene-host .latest-featured-card:focus{
  background:rgba(10,16,24,.42) !important;border-color:rgba(140,236,255,.2) !important;
}

/* @supports fallback: where backdrop-blur is unavailable use a more opaque fill */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .av-scene-host .latest-blog-products-subtitle{background:rgba(6,10,16,.82)}
  .av-scene-host .latest-seo-intro-block{background:rgba(6,10,16,.86) !important}
  .av-scene-host .latest-featured-card{background:rgba(6,10,16,.86) !important}
}

/* ---- mobile / coarse / reduced-motion: static single frame, calmer scrim ---- */
@media (max-width:768px),(hover:none),(pointer:coarse){
  .av-scene-host{padding:clamp(28px,7vw,54px) 0;margin:28px 0 40px}
  .av-scene-host::before{inset:10px}
}
@media (prefers-reduced-motion: reduce){
  .av-scene-host::after{background:radial-gradient(90% 80% at 30% 40%,rgba(5,7,12,.55),rgba(5,7,12,.2) 60%,rgba(5,7,12,.6))}
}

/* the scene fluid replaces the depthflow CSS-grid backdrop + thread; suppress
   those (they would clutter / sit under the fluid). Depthflow's 3D entrance
   reveals + calm-contract stay active on the blocks. */
.av-df-bg,.av-df-thread{display:none !important}

/* ---- HERO spans the FULL browser width (breaks out of the .page-width wrap) ---- */
.av-hero{border-radius:0}
@media (min-width:1280px){.av-hero__frame{inset:24px}}
html,body{overflow-x:clip}

/* ===== AV scene layout fixes (2026-06-24) ===== */
/* Cut the empty framed band above "Live PPF Template Release Feed":
   shrink the scene-host TOP padding while keeping the bottom roomy.
   Appended last -> overrides the earlier .av-scene-host padding by source order. */
.av-scene-host{padding:clamp(16px,2vw,30px) 0 clamp(40px,6vw,90px)}
@media (max-width:768px),(hover:none),(pointer:coarse){
  .av-scene-host{padding:clamp(14px,4vw,26px) 0 clamp(28px,7vw,54px)}
}
/* pull the scene's first block flush to the top (no extra gap inside the frame) */
.av-scene-host .av-scene__content>:first-child{margin-top:0 !important}

/* The "Browse the latest AutoVectors..." subtitle sits in the gap ABOVE the
   scene, so it inherits no scene styling -- give it a matching glass card. */
.latest-blog-products-head .latest-blog-products-subtitle{
  max-width:64ch;margin:14px 0 0;padding:18px 22px;
  color:#c6d1e0;font-size:clamp(15px,1.15vw,17px);line-height:1.62;
  background:rgba(10,16,24,.45);border:1px solid rgba(140,236,255,.10);
  border-left:2px solid rgba(140,236,255,.55);border-radius:12px;
}

/* ===== "Browse the latest..." subtitle -> full-width stylish lead-in (2026-06-24 b) =====
   The earlier version was max-width:64ch (narrow -> looked orphaned in the dark gap).
   Make it span the full content column like the "Live PPF Template Release Feed" card,
   bigger font, designed chrome (eyebrow tag + corner tick) echoing the hero. */
.latest-blog-products-head{margin:6px 0 0}
.latest-blog-products-head .latest-blog-products-subtitle{
  max-width:none;width:100%;box-sizing:border-box;
  margin:0;padding:clamp(28px,3.2vw,46px) clamp(26px,3.4vw,52px);
  color:#dbe4f1;font-size:clamp(17px,1.5vw,23px);line-height:1.62;font-weight:500;
  letter-spacing:.004em;
  border:1px solid rgba(140,236,255,.14);border-left:3px solid rgba(140,236,255,.62);
  border-radius:18px;
  background:
    linear-gradient(135deg,rgba(14,22,36,.72),rgba(8,12,20,.5)),
    radial-gradient(130% 170% at 0% 0%,rgba(40,120,170,.18),transparent 60%);
  box-shadow:0 20px 60px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04);
  position:relative;overflow:hidden;
}
/* emphasise the opening line so it reads as a lead-in, not a flat paragraph */
.latest-blog-products-head .latest-blog-products-subtitle::first-line{
  color:#eef4fb;font-weight:600;
}
/* stylish eyebrow tag echoing the hero "AUTOVECTORS // RELEASE FEED" */
.latest-blog-products-head .latest-blog-products-subtitle::before{
  content:"LIBRARY // LATEST ADDITIONS";
  display:block;margin:0 0 14px;
  font-size:12px;font-weight:700;letter-spacing:.22em;
  color:#7fe3ff;text-transform:uppercase;
}
/* faint engineered corner tick (matches hero / scene chrome) */
.latest-blog-products-head .latest-blog-products-subtitle::after{
  content:"";position:absolute;top:14px;right:16px;width:26px;height:26px;
  border-top:1px solid rgba(140,236,255,.4);border-right:1px solid rgba(140,236,255,.4);
  border-radius:0 8px 0 0;pointer-events:none;
}
@media (max-width:768px){
  .latest-blog-products-head .latest-blog-products-subtitle{
    padding:22px 20px;font-size:16px;border-radius:14px;
  }
  .latest-blog-products-head .latest-blog-products-subtitle::after{display:none}
}

/* ===== balance the vertical gaps around the "Browse the latest..." subtitle (2026-06-24 c) =====
   Measured at vw1895: gap above = 6px (crammed under hero), gap below = 150px (big void).
   Even them out so the card sits with matching breathing room top & bottom. */
.latest-blog-products-head{margin-top:clamp(44px,5vh,72px)}
.av-scene-host{margin-top:clamp(44px,5vh,72px)}

/* ===== GALAXY HERO -> WATER (2026-06-29): the #av-hero is now wrapped INTO the av-scene water host.
   Its own 3D/canvas/scrim/frame are dropped so the headline reads over the gel water; the host
   provides the scrim + frame. The host now starts at the top of the page, so kill its top margin. ===== */
.av-scene-host{margin-top:0 !important}
.av-scene-host .av-hero{background:transparent !important;height:clamp(380px,52vh,560px)}
.av-scene-host .av-hero::after,
.av-scene-host .av-hero__canvas,
.av-scene-host .av-hero__frame,
.av-scene-host .av-hero__reg{display:none !important}
/* keep the hero headline readable over bright water crests */
.av-scene-host .av-hero__title{text-shadow:0 2px 4px rgba(0,0,0,.95),0 2px 26px rgba(0,0,0,.72)}
.av-scene-host .av-hero__subtitle{text-shadow:0 1px 3px rgba(0,0,0,.92),0 1px 16px rgba(0,0,0,.6)}

/* ============================================================================
   AV-SPACE -- full-bleed 3D perspective particle field behind the FAQ section.
   A THIRD distinct effect (fly-through depth space). Append to latest-templates.css.
   Pairs with av-space.js (which wraps .latest-page-faq in .av-space-host + full-bleed).
   ============================================================================ */
.av-space-host{
  position:relative;
  margin:clamp(56px,7vh,110px) 0 0;                /* gap above; runs to page bottom */
  padding:clamp(50px,6vw,100px) 0 clamp(56px,7vw,104px);
  overflow:hidden; isolation:isolate;
  background:radial-gradient(120% 95% at 50% 0%, #0a1422 0%, #05080f 46%, #03050a 100%);
}
.av-space__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;touch-action:none}
/* contrast scrim so the FAQ text always reads over the starfield */
.av-space-host::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(72% 64% at 50% 46%,rgba(3,5,10,.58) 0%,rgba(3,5,10,.20) 56%,rgba(3,5,10,0) 82%);
}
.av-space__content{position:relative;z-index:2}
/* engineered corner frame echoing the hero / aurora chrome */
.av-space-host::before{
  content:"";position:absolute;z-index:2;pointer-events:none;
  inset:18px;border:1px solid rgba(140,236,255,.10);border-radius:16px;
}
/* let the depth space glow THROUGH the FAQ card, but keep text crisp (blur+dim) */
.av-space-host .latest-page-faq{
  background:rgba(7,11,20,.5) !important;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  border:1px solid rgba(140,236,255,.10);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .av-space-host .latest-page-faq{background:rgba(7,11,20,.82) !important}
}
@media (max-width:768px),(hover:none),(pointer:coarse){
  .av-space-host{padding:clamp(30px,7vw,56px) 0;margin-top:40px}
  .av-space-host::before{inset:10px}
}
@media (prefers-reduced-motion: reduce){
  .av-space-host::after{background:radial-gradient(80% 70% at 50% 45%,rgba(3,5,10,.5),rgba(3,5,10,.15) 60%,rgba(3,5,10,.55))}
}

/* ===== av-space BLACK-HOLE tuning (2026-06-24): the vortex is opaque + bright,
   so replace the centered dark scrim (which muted it) with a soft top/bottom fade,
   and tune the FAQ card to a violet-tinted glass that reads over the vortex. ===== */
.av-space-host::after{
  background:linear-gradient(180deg,rgba(3,4,12,.32) 0%,rgba(3,4,12,0) 15% 85%,rgba(3,4,12,.42) 100%) !important;
}
.av-space-host .latest-page-faq{
  background:rgba(8,9,20,.46) !important;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border:1px solid rgba(150,130,255,.16) !important;
}
.av-space-host::before{border-color:rgba(150,130,255,.14) !important}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .av-space-host .latest-page-faq{background:rgba(8,9,20,.8) !important}
}

/* ============================================================================
   AV-TODAY -- one shared aurora behind ALL of today's product rows.
   Replaces the per-row gold glow; gold "tier" reward is gated behind a 3s dwell.
   Append to latest-templates.css. Pairs with av-today.js.
   ============================================================================ */
.latest-products-list{position:relative}
.av-today__canvas{
  position:absolute;z-index:0;display:block;pointer-events:none;border-radius:14px;
}

/* today rows float ABOVE the shared field; translucent so it shines through,
   with a cyan glowing frame instead of the per-row gold glow. */
.latest-products-list .latest-product-row.is-today-row{
  position:relative;z-index:1;
  background:rgba(7,12,20,.5) !important;
  box-shadow:
    0 0 0 1px rgba(140,236,255,.24),
    0 0 22px rgba(80,180,255,.16),
    inset 0 0 26px rgba(80,160,255,.07) !important;
  transition:box-shadow .55s ease, background .55s ease;
}
/* the shared aurora replaces any per-row pulsing live-glow animation */
.latest-products-list .latest-product-row.is-today-row.is-live-glow{animation:none !important}
/* hide the per-row gold reward background by default (revealed on dwell) */
.latest-products-list .latest-product-row.is-today-row .latest-product-reward-bg{
  opacity:0 !important;transition:opacity .9s ease;
}

/* ---- TIER reveal: dwell steadily on one row >=3s -> its gold tier gently fades in ---- */
.latest-products-list .latest-product-row.is-today-row.av-tier-reveal{
  background:rgba(16,12,6,.52) !important;
  box-shadow:
    0 0 0 1px rgba(255,224,180,.55),
    0 0 26px rgba(255,200,120,.30),
    inset 0 0 26px rgba(255,210,150,.13) !important;
}
.latest-products-list .latest-product-row.is-today-row.av-tier-reveal .latest-product-reward-bg{
  opacity:1 !important;
}

/* reduced-motion / touch: no dwell reveal needed; keep a calm cyan frame */
@media (prefers-reduced-motion: reduce){
  .latest-products-list .latest-product-row.is-today-row{transition:none}
}

/* ===== av-today REWORK overrides (2026-06-24): aurora now masked to the product
   boxes, more visible through them, and the off-theme GOLD hover/reveal recolored
   to the cyan/violet theme. Appended after the base av-today block -> later wins. ===== */
/* rows a touch more translucent so the masked aurora reads clearly through them */
.latest-products-list .latest-product-row.is-today-row{
  background:rgba(8,12,20,.34) !important;
  box-shadow:
    0 0 0 1px rgba(140,236,255,.26),
    0 0 24px rgba(80,180,255,.18),
    inset 0 0 30px rgba(80,160,255,.06) !important;
}
/* recolor the instant GOLD hover glow -> cyan/blue (on theme) */
.latest-products-list .latest-product-row.is-today-row:hover{
  background:rgba(10,14,24,.30) !important;
  box-shadow:
    0 0 0 1px rgba(150,205,255,.52),
    0 0 30px rgba(110,150,255,.30),
    inset 0 0 30px rgba(120,170,255,.10) !important;
}
/* dwell >=3s reveal: a vivid VIOLET tier glow-up (replaces the off-theme gold) */
.latest-products-list .latest-product-row.is-today-row.av-tier-reveal{
  background:rgba(10,14,24,.30) !important;
  box-shadow:
    0 0 0 1px rgba(150,205,255,.52),
    0 0 30px rgba(110,150,255,.30),
    inset 0 0 30px rgba(120,170,255,.10) !important;
}

/* ===== av-today glow v2 (2026-06-24) =====
   - FIX: the gamification leaves a GOLD border (rgba(255,224,176)) on today rows --
     my earlier override only touched box-shadow. Recolor the BORDER to cyan too.
   - Coordinate with the PAST-days card look: they use a soft dark depth shadow
     (0 10px 24px rgba(0,0,0,.14)) + a thin border. Keep that depth, add a cyan accent.
   - Kill the hover transform (translateY(-3px) scale(1.01)) so the box no longer grows
     away from the masked aurora (no empty niche). */
.latest-products-list .latest-product-row.is-today-row{
  border:0.8px solid rgba(120,225,255,.42) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    0 0 0 1px rgba(140,236,255,.22),
    0 0 22px rgba(80,180,255,.15) !important;
}
.latest-products-list .latest-product-row.is-today-row:hover{
  transform:none !important;
  border-color:rgba(150,225,255,.62) !important;
  box-shadow:
    0 12px 26px rgba(0,0,0,.20),
    0 0 0 1px rgba(150,210,255,.5),
    0 0 28px rgba(110,160,255,.26) !important;
}
.latest-products-list .latest-product-row.is-today-row.av-tier-reveal{
  transform:none !important;
  border-color:rgba(150,225,255,.62) !important;
  box-shadow:
    0 12px 26px rgba(0,0,0,.20),
    0 0 0 1px rgba(150,210,255,.5),
    0 0 28px rgba(110,160,255,.26) !important;
}

/* ===== av-today fixes v3 (2026-06-24) ===== */
/* A) Kill the JS-driven "breathing" (grow/shrink) on today PRODUCT rows entirely.
      It is triggered when hovering OTHER (e.g. yesterday) rows -> not just :hover,
      so blanket transform/animation:none on every today row, all states. */
.latest-products-list .latest-product-row.is-today-row{
  transform:none !important;
  animation:none !important;
}
/* B) Recolor the date-badge ("Today/Yesterday/<date> -- N templates added") GOLD glow
      to the cyan theme (was rgba(255,224,180) / rgba(214,162,96) / rgb(255,240,189)). */
.latest-date-divider-label{
  box-shadow:rgba(255,255,255,.10) 0 0 0 1px inset, rgba(120,210,255,.17) 0 0 18px !important;
}
.latest-date-divider-label::after{
  background-image:radial-gradient(circle, rgba(110,200,255,.26), rgba(0,0,0,0) 70%) !important;
}
.latest-date-pill-media::before{
  background-image:radial-gradient(circle, rgba(225,245,255,.95) 0%, rgba(130,205,255,.75) 55%, rgba(0,0,0,0) 100%) !important;
}
.latest-reward-inline-text{
  border-color:rgba(150,210,255,.85) !important;
}

/* ===== av-today emphasis polish v4 (2026-06-24) =====
   TODAY's rows must be the MOST prominent on the page -- a brighter/stronger frame +
   glow than any past-days row (past rows were out-glowing today on hover, which read
   backwards). Plus a brighter "Today -- N templates added" badge for attention. */
.latest-products-list .latest-product-row.is-today-row{
  border:1px solid rgba(150,240,255,.9) !important;
  box-shadow:
    0 10px 26px rgba(0,0,0,.22),
    0 0 0 1px rgba(150,240,255,.45),
    0 0 38px rgba(95,195,255,.42),
    inset 0 0 28px rgba(95,175,255,.07) !important;
}
.latest-products-list .latest-product-row.is-today-row:hover{
  border-color:rgba(190,250,255,1) !important;
  box-shadow:
    0 12px 30px rgba(0,0,0,.26),
    0 0 0 1.5px rgba(190,250,255,.7),
    0 0 52px rgba(110,205,255,.52),
    inset 0 0 32px rgba(115,195,255,.11) !important;
}
.latest-products-list .latest-product-row.is-today-row.av-tier-reveal{
  border-color:rgba(150,240,255,.96) !important;
  box-shadow:
    0 12px 30px rgba(0,0,0,.26),
    0 0 0 1.5px rgba(190,250,255,.7),
    0 0 52px rgba(110,205,255,.5),
    inset 0 0 32px rgba(115,195,255,.13) !important;
}
/* the "Today -- N templates added" badge glows brighter (cyan) */
.latest-date-group.is-today-drop .latest-date-divider-label{
  box-shadow:rgba(255,255,255,.14) 0 0 0 1px inset, rgba(128,224,255,.5) 0 0 28px, rgba(120,210,255,.26) 0 0 62px !important;
}
.latest-date-group.is-today-drop .latest-date-divider-label::after{
  background-image:radial-gradient(circle, rgba(125,214,255,.5), rgba(0,0,0,0) 74%) !important;
}

/* ===== subtitle CTA buttons (2026-06-24) =====
   Two links inside the "LIBRARY // LATEST ADDITIONS" subtitle card:
   primary -> pre-cut-auto-patterns, secondary -> pre-cut-motorcycle-patterns.
   Theme-matched (cyan glass), responsive (stack on narrow). Append to latest-templates.css. */
.latest-blog-products-subtitle .latest-subtitle-cta{
  display:flex;flex-wrap:wrap;gap:14px;margin-top:24px;
}
.latest-blog-products-subtitle .latest-subtitle-btn{
  display:inline-flex;align-items:center;gap:.55em;
  padding:12px 22px;border-radius:12px;
  font-weight:700;font-size:clamp(14px,1vw,16px);letter-spacing:.015em;line-height:1;
  text-decoration:none;white-space:nowrap;
  color:#dffafe;border:1px solid rgba(140,236,255,.42);
  background:rgba(10,18,28,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
}
.latest-blog-products-subtitle .latest-subtitle-btn::after{
  content:"\2192";font-size:1.05em;opacity:.85;transition:transform .18s ease;   /* -> arrow */
}
.latest-blog-products-subtitle .latest-subtitle-btn:hover{
  transform:translateY(-2px);
  border-color:rgba(150,240,255,.9);
  box-shadow:0 10px 30px rgba(95,195,255,.34);
}
.latest-blog-products-subtitle .latest-subtitle-btn:hover::after{transform:translateX(3px)}
.latest-blog-products-subtitle .latest-subtitle-btn--primary{
  color:#06121b;border-color:transparent;
  background:linear-gradient(135deg,rgba(140,236,255,.95),rgba(150,200,255,.92));
  box-shadow:0 8px 26px rgba(95,195,255,.4);
}
.latest-blog-products-subtitle .latest-subtitle-btn--primary:hover{
  box-shadow:0 12px 36px rgba(110,205,255,.55);
}
.latest-blog-products-subtitle .latest-subtitle-btn:focus-visible{
  outline:2px solid rgba(150,240,255,.9);outline-offset:2px;
}
@media (max-width:600px){
  .latest-blog-products-subtitle .latest-subtitle-cta{flex-direction:column}
  .latest-blog-products-subtitle .latest-subtitle-btn{justify-content:center}
}