/**
 * design-system.css — shared design tokens + enforced styles for all
 * analysis pages (Skin / Body Fat / Color Season / Hair & Beard).
 *
 * 2026-04-28: created to fix layout/spacing/sizing inconsistency between
 * "Skin & Body" page and "Hair & Beard AI" page. Both pages MUST look
 * pixel-identical except for content.
 *
 * Strategy:
 *   • CSS custom properties define ONE source of truth for all tokens.
 *   • Elements are tagged via design-system-tagger.js with [data-dd-*]
 *     attributes so we can target them with !important rules that
 *     override React's inline styles.
 *   • Both React's native tabs AND hair-tabs-injector's overlay tabs
 *     wear the same data-dd-tab attributes → CSS treats them identically.
 *
 * NEVER hardcode these values in JS or other CSS — extend the tokens here.
 */

:root {
  /* ── Page / container ─────────────────────────────────────────────── */
  --dd-page-max-width:           480px;

  /* ── Vertical rhythm — spacing between sections ──────────────────── */
  /* 2026-04-28: tightened from 24/6/18/18 → 12/4/12/14 per "ขยับขึ้นไปดิ"
     so the page doesn't look so sparse on tall screens. */
  --dd-header-margin-top:        12px;
  --dd-header-to-subtitle:       4px;
  --dd-subtitle-to-tabs:         12px;
  --dd-tabs-to-card:             14px;
  --dd-card-to-bottom-nav:       80px;
  --dd-card-to-strip:            14px;

  /* ── Typography ───────────────────────────────────────────────────── */
  --dd-header-font-size:         28px;
  --dd-header-font-weight:       900;
  --dd-header-line-height:       1.15;
  --dd-header-color:             #f0eaff;
  --dd-header-letter-spacing:    -0.3px;

  --dd-subtitle-font-size:       14px;
  --dd-subtitle-font-weight:     500;
  --dd-subtitle-color:           #b6abc7;
  --dd-subtitle-line-height:     1.5;

  /* ── Tabs row ─────────────────────────────────────────────────────── */
  --dd-tabs-row-gap:             6px;
  --dd-tabs-row-padding-x:       16px;
  --dd-tabs-row-padding-y:       0px;

  /* ── Tab pill ─────────────────────────────────────────────────────── */
  --dd-tab-padding-y:            11px;
  --dd-tab-padding-x:            14px;
  --dd-tab-radius:               999px;
  --dd-tab-font-size:            14px;
  --dd-tab-font-weight:          800;
  --dd-tab-letter-spacing:       0.2px;
  --dd-tab-min-height:           42px;
  --dd-tab-transition:           all 0.15s ease;

  --dd-tab-inactive-bg:          #1a1530;
  --dd-tab-inactive-color:       #cbb8e5;
  --dd-tab-inactive-border:      1.5px solid transparent;
  --dd-tab-inactive-shadow:      none;

  --dd-tab-active-bg:            rgba(251,191,36,0.08);
  --dd-tab-active-color:         #fbbf24;
  --dd-tab-active-border:        1.5px solid #fbbf24;
  --dd-tab-active-shadow:        0 0 14px rgba(251,191,36,0.40),
                                 0 0 28px rgba(251,191,36,0.18);

  /* ── Upload card (v3 hero redesign 2026-04-28 — match mockup) ──────── */
  --dd-card-radius:              28px;
  --dd-card-min-height:          340px;
  --dd-card-padding:             24px 24px 22px;
  /* Multi-layer bg: radial gold glow on top + violet → black gradient */
  --dd-card-bg:                  radial-gradient(ellipse at 50% 0%, rgba(251,191,36,0.10) 0%, transparent 55%),
                                 radial-gradient(ellipse at 50% 100%, rgba(139,77,255,0.18) 0%, transparent 60%),
                                 linear-gradient(135deg, #1a0e2a 0%, #110820 60%, #0a0418 100%);
  --dd-card-border:              1.5px solid transparent;
  --dd-card-shadow:              0 12px 40px rgba(6,3,15,0.55),
                                 0 4px 18px rgba(139,77,255,0.18),
                                 0 0 0 1px rgba(207,107,255,0.18),
                                 inset 0 1px 0 rgba(255,255,255,0.06);

  --dd-card-icon-size:           48px;
  --dd-card-icon-color:          #fbbf24;
  --dd-card-icon-glow:           drop-shadow(0 0 16px rgba(251,191,36,0.55))
                                 drop-shadow(0 0 32px rgba(251,191,36,0.25));

  /* Icon halo — circular glow behind the icon */
  --dd-card-halo-size:           96px;
  --dd-card-halo-bg:             radial-gradient(circle, rgba(251,191,36,0.25) 0%, rgba(207,107,255,0.10) 50%, transparent 70%);
  --dd-card-halo-border:         1.5px solid rgba(251,191,36,0.40);

  --dd-card-title-font-size:     18px;
  --dd-card-title-font-weight:   900;
  --dd-card-title-color:         #f0eaff;
  --dd-card-title-margin-top:    18px;
  --dd-card-title-letter-spacing:-0.2px;

  --dd-card-subtitle-font-size:  12px;
  --dd-card-subtitle-color:      #9988bb;
  --dd-card-subtitle-margin-top: 8px;
}

/* ─────────────────────────────────────────────────────────────────────
   PAGE CONTAINER — same max-width across all analysis pages
   ───────────────────────────────────────────────────────────────────── */
[data-dd-analysis-page] {
  max-width: var(--dd-page-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative !important;
  overflow: visible !important;
}

/* (Viewport-centering for top bar / tabs / strip / tip banner is at the
    BOTTOM of this file so it wins source-order over individual rules.
    Upload-card centering is baked into the [data-dd-upload-card] rule
    around line ~401.) */

/* Ambient radial glow that sits BEHIND all content — fills the empty
   black space below the upload card with a subtle violet→gold halo so
   the page no longer feels sparse. Pointer-events:none keeps it inert. */
[data-dd-analysis-page]::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    radial-gradient(ellipse 70% 40% at 50% 12%, rgba(251,191,36,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 90% 50% at 50% 75%, rgba(139,77,255,0.12) 0%, transparent 65%),
    radial-gradient(ellipse 60% 30% at 15% 95%, rgba(207,107,255,0.06) 0%, transparent 70%);
}
/* Make sure direct children of the page wrapper float ABOVE the ambient bg */
[data-dd-analysis-page] > * {
  position: relative !important;
  z-index: 1 !important;
}

/* ─────────────────────────────────────────────────────────────────────
   TOP HEADER BAR — injected above analysis header (matches mockup)
   logo + token badge + notification bell
   ───────────────────────────────────────────────────────────────────── */
[data-dd-top-bar] {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 16px 20px 14px !important;
  margin: 0 auto !important;
  max-width: var(--dd-page-max-width) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 5 !important;
  /* Subtle bottom hairline so it visually anchors above the page */
  border-bottom: 1px solid rgba(207,107,255,0.10) !important;
  margin-bottom: 14px !important;
}

[data-dd-top-bar-logo] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  letter-spacing: -0.6px !important;
  line-height: 1 !important;
  background: linear-gradient(135deg, #ffffff 0%, #fde68a 60%, #fbbf24 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-decoration: none !important;
  text-shadow: 0 0 18px rgba(251,191,36,0.18) !important;
}
/* ─── 2026-04-28 — REMOVED AI pill (::after on logo), token badge, and
   bell button per "เอาพวกนี้ออก เอาอันอื่นมาแทน". Replaced below with
   streak-chip + profile-circle (functional, not decorative). */

[data-dd-top-bar-actions] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* ─── 🔥 STREAK CHIP — daily-engagement counter ───────────────────── */
[data-dd-streak-chip] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 5px 11px 5px 9px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(255,107,71,0.18) 0%, rgba(251,146,60,0.10) 100%) !important;
  border: 1px solid rgba(255,107,71,0.50) !important;
  color: #fed7aa !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 0 12px rgba(255,107,71,0.22),
              inset 0 1px 0 rgba(255,200,170,0.18) !important;
  cursor: default !important;
  transition: all 0.15s ease !important;
  user-select: none !important;
}
[data-dd-streak-chip]::before {
  content:'' !important;
  font-size: 14px !important;
  filter: drop-shadow(0 0 5px rgba(255,107,71,0.55)) !important;
  line-height: 1 !important;
}
[data-dd-streak-chip]::after {
  content: 'วัน' !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #fed7aa !important;
  opacity: 0.65 !important;
  margin-left: 1px !important;
  letter-spacing: 0.4px !important;
}
[data-dd-streak-chip]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 14px rgba(255,107,71,0.40),
              inset 0 1px 0 rgba(255,200,170,0.30) !important;
}

/* ─── 👤 PROFILE CIRCLE — user initial, click → profile tab ──────── */
[data-dd-profile-btn] {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(251,191,36,0.30) 0%, rgba(207,107,255,0.25) 100%) !important;
  border: 1.5px solid rgba(251,191,36,0.55) !important;
  color: #fde68a !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  font-family: inherit !important;
  padding: 0 !important;
  box-shadow: 0 0 10px rgba(251,191,36,0.20),
              inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
[data-dd-profile-btn]:hover {
  border-color: rgba(251,191,36,0.95) !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(251,191,36,0.50),
              inset 0 1px 0 rgba(255,255,255,0.18) !important;
  transform: translateY(-1px) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   HEADER — title + subtitle row
   ───────────────────────────────────────────────────────────────────── */
[data-dd-header] {
  font-size: var(--dd-header-font-size) !important;
  font-weight: var(--dd-header-font-weight) !important;
  line-height: var(--dd-header-line-height) !important;
  color: var(--dd-header-color) !important;
  letter-spacing: var(--dd-header-letter-spacing) !important;
  margin-top: var(--dd-header-margin-top) !important;
  text-align: center !important;
}

[data-dd-subtitle] {
  font-size: var(--dd-subtitle-font-size) !important;
  font-weight: var(--dd-subtitle-font-weight) !important;
  color: var(--dd-subtitle-color) !important;
  line-height: var(--dd-subtitle-line-height) !important;
  margin-top: var(--dd-header-to-subtitle) !important;
  text-align: center !important;
}

/* ─────────────────────────────────────────────────────────────────────
   TABS ROW — same container layout for React's native + injected
   ───────────────────────────────────────────────────────────────────── */
[data-dd-tabs-row] {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: var(--dd-tabs-row-gap) !important;
  padding-left: var(--dd-tabs-row-padding-x) !important;
  padding-right: var(--dd-tabs-row-padding-x) !important;
  padding-top: var(--dd-tabs-row-padding-y) !important;
  padding-bottom: var(--dd-tabs-row-padding-y) !important;
  margin-top: var(--dd-subtitle-to-tabs) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: var(--dd-page-max-width) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ─────────────────────────────────────────────────────────────────────
   TAB PILL — same shape, font, padding for ALL tabs everywhere
   ───────────────────────────────────────────────────────────────────── */
[data-dd-tab] {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: var(--dd-tab-min-height) !important;
  padding: var(--dd-tab-padding-y) var(--dd-tab-padding-x) !important;
  border-radius: var(--dd-tab-radius) !important;
  font-size: var(--dd-tab-font-size) !important;
  font-weight: var(--dd-tab-font-weight) !important;
  letter-spacing: var(--dd-tab-letter-spacing) !important;
  font-family: inherit !important;
  cursor: pointer !important;
  transition: var(--dd-tab-transition) !important;
  white-space: nowrap !important;
  text-align: center !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

[data-dd-tab="inactive"] {
  background: var(--dd-tab-inactive-bg) !important;
  color: var(--dd-tab-inactive-color) !important;
  border: var(--dd-tab-inactive-border) !important;
  box-shadow: var(--dd-tab-inactive-shadow) !important;
}

[data-dd-tab="active"] {
  background: var(--dd-tab-active-bg) !important;
  color: var(--dd-tab-active-color) !important;
  border: var(--dd-tab-active-border) !important;
  box-shadow: var(--dd-tab-active-shadow) !important;
}

/* Force inner text color so React's nested span doesn't override the pill */
[data-dd-tab="active"] *,
[data-dd-tab="active"] > * {
  color: var(--dd-tab-active-color) !important;
}
[data-dd-tab="inactive"] *,
[data-dd-tab="inactive"] > * {
  color: var(--dd-tab-inactive-color) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   UPLOAD CARD — same dimensions / padding / look on all pages
   ───────────────────────────────────────────────────────────────────── */
/* ─── PREMIUM UPLOAD CARD v2 ─────────────────────────────────────────
   Multi-layer composition:
   1. Outer wrapper: gradient border (purple → gold) via ::before
   2. Inner card: dark gradient + multi-radial glow
   3. Icon halo: pulsing circle behind the icon
   4. Icon: gold w/ strong drop-shadow
   5. Title: gradient text (white → gold tint)
   6. Subtle sheen on hover
   ─────────────────────────────────────────────────────────────────── */
[data-dd-upload-card] {
  position: relative !important;
  border-radius: var(--dd-card-radius) !important;
  height: var(--dd-card-min-height) !important;
  min-height: var(--dd-card-min-height) !important;
  max-height: var(--dd-card-min-height) !important;
  /* Viewport-relative width so Hair page (narrower React wrapper) and
     Skin & Body page (wider React wrapper) end up the SAME card width. */
  width: min(calc(var(--dd-page-max-width) - 32px), calc(100vw - 32px)) !important;
  max-width: calc(var(--dd-page-max-width) - 32px) !important;
  padding: var(--dd-card-padding) !important;
  background: var(--dd-card-bg) !important;
  background-image: var(--dd-card-bg) !important;
  border: var(--dd-card-border) !important;
  box-shadow: var(--dd-card-shadow) !important;
  margin-top: var(--dd-tabs-to-card) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* Center in VIEWPORT regardless of React-parent width */
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: transform 0.25s ease, box-shadow 0.3s ease !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

/* Animated gradient border via ::before */
[data-dd-upload-card]::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: var(--dd-card-radius) !important;
  padding: 1.5px !important;
  background: linear-gradient(135deg,
              rgba(251,191,36,0.55) 0%,
              rgba(207,107,255,0.45) 35%,
              rgba(139,77,255,0.30) 65%,
              rgba(251,191,36,0.50) 100%) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  mask-composite: exclude !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Subtle radial sheen on top — adds depth */
[data-dd-upload-card]::after {
  content: "" !important;
  position: absolute !important;
  top: -50% !important;
  left: -10% !important;
  right: -10% !important;
  height: 80% !important;
  background: radial-gradient(ellipse at 50% 80%, rgba(255,255,255,0.05) 0%, transparent 60%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

[data-dd-upload-card]:hover {
  /* Combine translateX(-50%) (viewport-centering) with translateY(-2px)
     (hover lift) so the card doesn't jump horizontally on hover. */
  transform: translateX(-50%) translateY(-2px) !important;
  box-shadow: 0 16px 48px rgba(6,3,15,0.65),
              0 6px 24px rgba(139,77,255,0.35),
              0 0 0 1px rgba(251,191,36,0.40),
              inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

/* All children sit above the ::before/::after gradient border */
[data-dd-upload-card] > * {
  position: relative !important;
  z-index: 3 !important;
}

/* ─── Icon — wrapped in glowing halo circle ──────────────────────── */
[data-dd-upload-card] svg,
[data-dd-upload-card] [data-dd-upload-icon] {
  position: relative !important;
  width: var(--dd-card-icon-size) !important;
  height: var(--dd-card-icon-size) !important;
  color: var(--dd-card-icon-color) !important;
  fill: var(--dd-card-icon-color) !important;
  stroke: var(--dd-card-icon-color) !important;
  filter: var(--dd-card-icon-glow) !important;
  z-index: 4 !important;
}
[data-dd-upload-card] svg path,
[data-dd-upload-card] svg circle,
[data-dd-upload-card] svg rect,
[data-dd-upload-card] svg polygon,
[data-dd-upload-card] svg g {
  fill: var(--dd-card-icon-color) !important;
  stroke: var(--dd-card-icon-color) !important;
}

/* Halo circle wrapper — added by tagger as a dd-upload-icon-halo div
   surrounding the icon. Pulses subtly. */
[data-dd-upload-icon-halo] {
  position: relative !important;
  width: var(--dd-card-halo-size) !important;
  height: var(--dd-card-halo-size) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: var(--dd-card-halo-bg) !important;
  border: var(--dd-card-halo-border) !important;
  box-shadow: 0 0 24px rgba(251,191,36,0.30),
              inset 0 0 16px rgba(251,191,36,0.10) !important;
  animation: dd-halo-pulse 3s ease-in-out infinite !important;
  z-index: 3 !important;
}
@keyframes dd-halo-pulse {
  0%, 100% { box-shadow: 0 0 24px rgba(251,191,36,0.30), inset 0 0 16px rgba(251,191,36,0.10); }
  50%      { box-shadow: 0 0 36px rgba(251,191,36,0.50), inset 0 0 24px rgba(251,191,36,0.18); }
}
@media (pointer: coarse) {
  /* Disable halo pulse on touch devices (battery-friendly) */
  [data-dd-upload-icon-halo] { animation: none !important; }
}

[data-dd-upload-title] {
  font-size: var(--dd-card-title-font-size) !important;
  font-weight: var(--dd-card-title-font-weight) !important;
  color: var(--dd-card-title-color) !important;
  margin-top: var(--dd-card-title-margin-top) !important;
  text-align: center !important;
  letter-spacing: var(--dd-card-title-letter-spacing) !important;
  background: linear-gradient(135deg, #fff 0%, #fde68a 50%, #f0eaff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

[data-dd-upload-subtitle] {
  font-size: 12.5px !important;
  color: #b6abc7 !important;
  margin-top: 8px !important;
  text-align: center !important;
  line-height: 1.55 !important;
  max-width: 320px !important;
  padding: 0 8px !important;
}

/* ─── AI ANALYSIS badge (injected by tagger as a child of upload card) ─ */
[data-dd-ai-badge] {
  position: relative !important;
  z-index: 4 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(251,191,36,0.18) 0%, rgba(207,107,255,0.10) 100%) !important;
  border: 1px solid rgba(251,191,36,0.50) !important;
  color: #fde68a !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  box-shadow: 0 0 12px rgba(251,191,36,0.30),
              inset 0 1px 0 rgba(255,215,106,0.20) !important;
  margin-bottom: 14px !important;
}
[data-dd-ai-badge]::before {
  content:'' !important;
  font-size: 12px !important;
}

/* ─── CTA button at bottom (injected by tagger) ───────────────────── */
[data-dd-cta-button] {
  position: relative !important;
  z-index: 4 !important;
  margin-top: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 12px 22px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #fbbf24 100%) !important;
  color: #1a0f00 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 6px 20px rgba(251,191,36,0.45),
              0 2px 6px rgba(245,158,11,0.30),
              inset 0 1px 0 rgba(255,255,255,0.40) !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.2s ease !important;
  white-space: nowrap !important;
}
[data-dd-cta-button]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 26px rgba(251,191,36,0.60),
              0 3px 8px rgba(245,158,11,0.40),
              inset 0 1px 0 rgba(255,255,255,0.55) !important;
}
[data-dd-cta-button]::before {
  content:'' !important;
  font-size: 16px !important;
}

/* Override the title sizing inside the new larger card */
[data-dd-upload-card] [data-dd-upload-title] {
  font-size: 22px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
}

/* ─────────────────────────────────────────────────────────────────────
   FEATURE STRIP — 3 chips below upload card. Fills the empty space
   below the card with brand-reinforcing AI feature highlights.
   2026-04-28: per "มันโล่งไป" — make the page feel substantial.
   ───────────────────────────────────────────────────────────────────── */
[data-dd-feature-strip] {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 10px !important;
  max-width: var(--dd-page-max-width) !important;
  width: 100% !important;
  margin: var(--dd-card-to-strip) auto 0 !important;
  padding: 0 18px !important;
  box-sizing: border-box !important;
}

[data-dd-feature-chip] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 14px 8px 12px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(251,191,36,0.10) 0%, transparent 60%),
    linear-gradient(135deg, #1a1530 0%, #14102a 100%) !important;
  border: 1px solid rgba(207,107,255,0.18) !important;
  box-shadow:
    0 4px 14px rgba(6,3,15,0.45),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
  text-align: center !important;
  min-height: 84px !important;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
[data-dd-feature-chip]:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(251,191,36,0.45) !important;
  box-shadow:
    0 6px 18px rgba(6,3,15,0.55),
    0 0 14px rgba(251,191,36,0.18),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

[data-dd-feature-icon] {
  font-size: 22px !important;
  line-height: 1 !important;
  filter: drop-shadow(0 0 8px rgba(251,191,36,0.35)) !important;
  margin-bottom: 2px !important;
}

[data-dd-feature-label] {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: #f0eaff !important;
  letter-spacing: 0.1px !important;
  line-height: 1.15 !important;
}

[data-dd-feature-sub] {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: #9988bb !important;
  letter-spacing: 0.2px !important;
  line-height: 1.15 !important;
}

/* ─────────────────────────────────────────────────────────────────────
   TIP BANNER — single row below feature strip. Reassuring micro-copy.
   ───────────────────────────────────────────────────────────────────── */
[data-dd-tip-banner] {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  max-width: var(--dd-page-max-width) !important;
  width: 100% !important;
  margin: 14px auto 0 !important;
  padding: 12px 16px !important;
  box-sizing: border-box !important;
  border-radius: 14px !important;
  background:
    linear-gradient(135deg, rgba(251,191,36,0.08) 0%, rgba(207,107,255,0.06) 100%) !important;
  border: 1px solid rgba(251,191,36,0.22) !important;
  color: #cbb8e5 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}
[data-dd-tip-banner]::before {
  content:'' !important;
  font-size: 16px !important;
  filter: drop-shadow(0 0 6px rgba(251,191,36,0.45)) !important;
  flex-shrink: 0 !important;
}
[data-dd-tip-banner] strong {
  color: #fde68a !important;
  font-weight: 800 !important;
}

/* ─────────────────────────────────────────────────────────────────────
   END-OF-FILE: VIEWPORT-CENTERING OVERRIDE (2026-04-28)
   React renders Skin & Body vs Hair pages in DIFFERENT-WIDTH wrappers
   (Hair is narrower), causing identical injected elements to display at
   different sizes. This rule forces every injected element to a fixed
   viewport-relative width, centered in the viewport via the classic
   position:relative + left:50% + translateX(-50%) pattern. Placed at
   end-of-file so it wins source-order against earlier individual rules.
   ───────────────────────────────────────────────────────────────────── */
[data-dd-top-bar],
[data-dd-tabs-injected],
[data-dd-feature-strip],
[data-dd-tip-banner] {
  width: min(var(--dd-page-max-width), calc(100vw - 24px)) !important;
  max-width: var(--dd-page-max-width) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  box-sizing: border-box !important;
}