/* ============================================================
   UET Skin System — generated from uet-desktop-template.html
   Patch 1: tokens + 4 body.skin-* blocks (frontier, space, jungle, clubhouse)
   Scoped — no rules apply unless body.skin-* class is set.
   ============================================================ */

/* ============================================================
   FILE: assets/tokens.css
   ============================================================ */

/* ============================================================
   UET — Colors & Type
   Aesthetic: Tesla/SpaceX aerospace precision ×
              cyberpunk trading floor ×
              Kid Cudi "Man on the Moon" cosmic atmosphere
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Geist+Mono:wght@300;400;500;600;700&display=swap');

:root {
  /* ── Deep space base ─────────────────────────── */
  --void:        #05060a;   /* pure vacuum — outermost canvas */
  --space:       #0a0a0f;   /* primary background */
  --orbit:       #10111a;   /* elevated surface (topbar, sidebar) */
  --hull:        #161722;   /* card base */
  --hull-2:      #1c1d2b;   /* elevated card */
  --nebula:      #222336;   /* hover surface, input */
  --ridge:       #2a2c42;   /* borders on elevated surfaces */

  /* ── Nebula / cosmic accents (indigo + purple) ── */
  --nebula-indigo: #3b2f8f;
  --nebula-violet: #6d4aff;   /* primary nebula hue */
  --nebula-plasma: #8b5cf6;   /* lighter plasma */
  --nebula-deep:   #1a0f3d;

  /* ── Signal & semantic colors ───────────────── */
  --signal:      #1ce925;    /* signal green — wins, live signals ONLY */
  --signal-glow: rgba(28, 233, 37, 0.45);
  --signal-dim:  rgba(28, 233, 37, 0.08);
  --signal-edge: rgba(28, 233, 37, 0.20);

  --stock-red:   #e53030;    /* losses — stock-chart red, never used for UI emphasis */
  --red-glow:    rgba(229, 48, 48, 0.40);
  --red-dim:     rgba(229, 48, 48, 0.08);
  --red-edge:    rgba(229, 48, 48, 0.20);

  --cyan:        #00e5ff;    /* electric cyan — premium accents, tiers, labels */
  --cyan-glow:   rgba(0, 229, 255, 0.35);
  --cyan-dim:    rgba(0, 229, 255, 0.08);

  --gold:        #f5c542;    /* achievement / badges only */
  --gold-glow:   rgba(245, 197, 66, 0.45);

  /* ── Foreground / text ──────────────────────── */
  --fg1:         #f0f2fa;    /* primary — display, hero numerics */
  --fg2:         #c7cbdb;    /* secondary body */
  --fg3:         #8b90a8;    /* tertiary, metadata */
  --fg4:         #5c6079;    /* muted, labels, disabled */
  --fg-ghost:    #363a52;    /* hairline-only text */

  /* ── Stroke system ──────────────────────────── */
  --stroke-1:    rgba(255, 255, 255, 0.04);   /* card hairline */
  --stroke-2:    rgba(255, 255, 255, 0.08);   /* hover hairline */
  --stroke-3:    rgba(255, 255, 255, 0.14);   /* active / focus */
  --stroke-signal: rgba(28, 233, 37, 0.25);
  --stroke-cyan:   rgba(0, 229, 255, 0.25);
  --stroke-violet: rgba(109, 74, 255, 0.30);

  /* ── Elevation / glow ───────────────────────── */
  --shadow-1:    0 1px 2px rgba(0,0,0,0.4);
  --shadow-2:    0 4px 16px rgba(0,0,0,0.45);
  --shadow-3:    0 12px 40px rgba(0,0,0,0.55);
  --shadow-4:    0 24px 80px rgba(0,0,0,0.7);

  --glow-signal: 0 0 24px var(--signal-glow), 0 0 2px var(--signal);
  --glow-cyan:   0 0 24px var(--cyan-glow),   0 0 2px var(--cyan);
  --glow-violet: 0 0 32px rgba(109,74,255,0.40), 0 0 2px var(--nebula-plasma);
  --glow-red:    0 0 24px var(--red-glow),    0 0 2px var(--stock-red);

  /* Inset lift — card top-edge highlight */
  --lift-edge:   inset 0 1px 0 rgba(255,255,255,0.06);
  --lift-signal: inset 0 1px 0 rgba(28,233,37,0.25);

  /* ── Cosmic gradients ───────────────────────── */
  --grad-space:    radial-gradient(ellipse at 50% 0%,
                     rgba(109,74,255,0.18) 0%,
                     rgba(26,15,61,0.08)   35%,
                     var(--space)          70%);
  --grad-nebula:   linear-gradient(135deg,
                     #1a0f3d 0%,
                     #3b2f8f 40%,
                     #6d4aff 100%);
  --grad-signal:   linear-gradient(135deg,
                     rgba(28,233,37,0.12),
                     rgba(0,229,255,0.08));
  --grad-scanline: repeating-linear-gradient(
                     to bottom,
                     transparent 0px,
                     transparent 2px,
                     rgba(255,255,255,0.015) 2px,
                     rgba(255,255,255,0.015) 3px);
  --grad-topline:  linear-gradient(90deg,
                     var(--signal),
                     var(--nebula-plasma),
                     var(--cyan),
                     var(--signal));

  /* ── Radii ──────────────────────────────────── */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ── Spacing (4-step) ───────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* ── Type families ──────────────────────────── */
  --font-display: 'Space Grotesk', 'Neue Haas Grotesk Display', system-ui, sans-serif;
  --font-body:    'Space Grotesk', system-ui, sans-serif;
  --font-mono:    'Geist Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* ── Motion ─────────────────────────────────── */
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.30, 1);
  --ease-entry:  cubic-bezier(0.22, 1, 0.36, 1);  /* cosmic-dust reveal */
  --dur-fast:    120ms;
  --dur-mid:     240ms;
  --dur-slow:    480ms;
  --dur-cine:    1200ms;
}



body.skin-frontier {
  --skin-bg:          #12100c;
  --skin-bg-2:        #1a160f;
  --skin-paper:       #201a12;       /* leather tan base for cards */
  --skin-paper-2:     #2a2218;
  --skin-parchment:   #ecddb8;       /* page color — used in parchment cards */
  --skin-parchment-2: #ddc896;

  --skin-ink:         #f2e8d6;       /* parchment ink */
  --skin-ink-2:       #cbbb95;
  --skin-ink-3:       #9e8e6c;
  --skin-ink-4:       #6a5c42;
  --skin-ink-paper:   #2b1e12;       /* ink on light parchment */
  --skin-ink-paper-2: #4a3620;

  --skin-hairline:    rgba(242, 232, 214, 0.08);
  --skin-edge:        rgba(200, 155, 74, 0.24);
  --skin-edge-strong: rgba(200, 155, 74, 0.55);

  --skin-accent:      #c89b4a;       /* bourbon amber / brass */
  --skin-accent-2:    #8a5a2b;       /* saddle brown */
  --skin-accent-3:    #5a3b1e;

  --skin-win:         #8ea85a;       /* moss / brass patina */
  --skin-win-glow:    rgba(142, 168, 90, 0.40);
  --skin-win-dim:     rgba(142, 168, 90, 0.12);

  --skin-loss:        #a8382a;       /* dried blood */
  --skin-loss-glow:   rgba(168, 56, 42, 0.42);
  --skin-loss-dim:    rgba(168, 56, 42, 0.12);

  --skin-gold:        #c89b4a;
  --skin-gold-glow:   rgba(200, 155, 74, 0.45);

  --skin-font-display: 'IM Fell English SC', 'Rye', Georgia, serif;
  --skin-font-title:   'IM Fell English SC', Georgia, serif;
  --skin-font-body:    'EB Garamond', Georgia, serif;
  --skin-font-mono:    'Special Elite', 'Courier Prime', ui-monospace, monospace;

  --skin-radius:       6px;
  --skin-shadow:       0 10px 28px rgba(0,0,0,0.45), 0 2px 0 rgba(0,0,0,0.3);
  --skin-tagline:      "UET · SIGNALS FROM THE FRONTIER";

  background: var(--skin-bg);
  color: var(--skin-ink);
}

/* Frontier backdrop: distant horizon, lantern wash, vignette */
.skin-frontier .skin-backdrop {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 80vw 60vh at 50% 110%, rgba(200, 155, 74, 0.22), transparent 55%),
    radial-gradient(ellipse 60vw 45vh at 20% -10vh, rgba(90, 59, 30, 0.35), transparent 55%),
    radial-gradient(ellipse 50vw 40vh at 85% 30%, rgba(168, 56, 42, 0.12), transparent 65%),
    linear-gradient(180deg, #0c0a07 0%, #12100c 40%, #1a160f 100%);
}
.skin-frontier .skin-backdrop::after {
  /* film grain — burlap noise */
  content: '';
  position: absolute; inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.73  0 0 0 0 0.6  0 0 0 0 0.33  0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
  opacity: 0.35;
  mix-blend-mode: overlay;
}
.skin-frontier .skin-vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  box-shadow: inset 0 0 200px 40px rgba(5, 3, 0, 0.75);
}

/* Dust motes drifting */
.skin-frontier .skin-ambient::before,
.skin-frontier .skin-ambient::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(242,232,214,0.7), transparent),
    radial-gradient(1px 1px at 72% 38%, rgba(242,232,214,0.5), transparent),
    radial-gradient(1px 1px at 46% 78%, rgba(242,232,214,0.6), transparent),
    radial-gradient(1.5px 1.5px at 88% 62%, rgba(242,232,214,0.35), transparent),
    radial-gradient(1px 1px at 22% 90%, rgba(242,232,214,0.5), transparent),
    radial-gradient(1px 1px at 60% 12%, rgba(242,232,214,0.45), transparent);
  animation: dust-drift 32s linear infinite;
  opacity: 0.55;
}
.skin-frontier .skin-ambient::after {
  animation-duration: 48s;
  animation-direction: reverse;
  opacity: 0.35;
  filter: blur(0.6px);
}
@keyframes dust-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-40vw, -10vh, 0); }
}


/* ============================================================
   🛰️  SPACE — Cactus Jack cosmic
   ============================================================ */
body.skin-space {
  --skin-bg:          #050309;
  --skin-bg-2:        #0a0618;
  --skin-paper:       rgba(18, 10, 38, 0.68);
  --skin-paper-2:     rgba(28, 16, 54, 0.78);
  --skin-holo:        rgba(255, 255, 255, 0.04);

  --skin-ink:         #f4f0ff;
  --skin-ink-2:       #bfb5e3;
  --skin-ink-3:       #8c7fbd;
  --skin-ink-4:       #5d5285;

  --skin-hairline:    rgba(255, 255, 255, 0.06);
  --skin-edge:        rgba(176, 132, 255, 0.30);
  --skin-edge-strong: rgba(210, 170, 255, 0.68);

  --skin-accent:      #b084ff;       /* dream purple */
  --skin-accent-2:    #38c9ff;       /* aurora cyan */
  --skin-accent-3:    #ff7038;       /* burnt sunset */
  --skin-magenta:     #ff4db8;

  --skin-win:         #7aff5c;       /* electric green */
  --skin-win-glow:    rgba(122, 255, 92, 0.55);
  --skin-win-dim:     rgba(122, 255, 92, 0.10);

  --skin-loss:        #ff3e6c;       /* hot magenta-red */
  --skin-loss-glow:   rgba(255, 62, 108, 0.55);
  --skin-loss-dim:    rgba(255, 62, 108, 0.10);

  --skin-gold:        #ffb84d;
  --skin-gold-glow:   rgba(255, 184, 77, 0.55);

  --skin-font-display: 'Unbounded', 'Syne', system-ui, sans-serif;
  --skin-font-title:   'Syne', system-ui, sans-serif;
  --skin-font-body:    'Syne', system-ui, sans-serif;
  --skin-font-mono:    'Chakra Petch', 'JetBrains Mono', ui-monospace, monospace;

  --skin-radius:       20px;
  --skin-shadow:       0 24px 60px rgba(0,0,0,0.7), 0 2px 0 rgba(255,255,255,0.04) inset;
  --skin-tagline:      "UET · SIGNALS FROM THE VOID";

  background: var(--skin-bg);
  color: var(--skin-ink);
}

/* SPACE backdrop: painterly nebulae + deep stars */
.skin-space .skin-backdrop {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 70vw 55vh at 20% 30%, rgba(255, 77, 184, 0.30), transparent 55%),
    radial-gradient(ellipse 60vw 50vh at 80% 60%, rgba(56, 201, 255, 0.22), transparent 60%),
    radial-gradient(ellipse 50vw 40vh at 50% 90%, rgba(176, 132, 255, 0.35), transparent 55%),
    radial-gradient(ellipse 40vw 35vh at 85% 10%, rgba(255, 112, 56, 0.20), transparent 55%),
    radial-gradient(ellipse 30vw 30vh at 10% 85%, rgba(122, 255, 92, 0.10), transparent 60%),
    linear-gradient(180deg, #030108 0%, #0a0520 50%, #050309 100%);
  filter: saturate(1.1);
}
.skin-space .skin-backdrop::before {
  /* painterly nebula wash — cloud layer */
  content: ''; position: absolute; inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='600'><filter id='cloud'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 0.7  0 0 0 0 0.3  0 0 0 0 1  0 0 0 1.2 -0.3'/></filter><rect width='100%25' height='100%25' filter='url(%23cloud)' opacity='0.55'/></svg>");
  mix-blend-mode: screen;
  opacity: 0.45;
  animation: nebula-breathe 18s ease-in-out infinite;
}
@keyframes nebula-breathe {
  0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.45; }
  50%      { transform: scale(1.05) translate(-2%, -1%); opacity: 0.6; }
}
.skin-space .skin-backdrop::after {
  /* deep starfield */
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 12%, #fff, transparent),
    radial-gradient(1px 1px at 22% 48%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 37% 18%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 55% 72%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 68% 22%, rgba(176,132,255,0.9), transparent),
    radial-gradient(1px 1px at 78% 88%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 90% 42%, rgba(56,201,255,0.9), transparent),
    radial-gradient(1px 1px at 14% 82%, rgba(255,255,255,0.7), transparent),
    radial-gradient(0.8px 0.8px at 43% 92%, #fff, transparent),
    radial-gradient(1px 1px at 30% 30%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 62% 50%, #fff, transparent),
    radial-gradient(1px 1px at 85% 70%, rgba(255,77,184,0.9), transparent);
  background-size: 100% 100%;
  opacity: 0.9;
}

/* Astronaut silhouette — drifts across the hero */
.skin-space .skin-astronaut {
  position: fixed;
  top: 18vh; right: 8vw;
  width: 320px; height: 320px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
  filter: drop-shadow(0 0 40px rgba(176, 132, 255, 0.55)) drop-shadow(0 0 80px rgba(56, 201, 255, 0.30));
  animation: astronaut-drift 24s ease-in-out infinite;
}
@keyframes astronaut-drift {
  0%, 100% { transform: translate(0, 0) rotate(-6deg); }
  33%      { transform: translate(-40px, 30px) rotate(-2deg); }
  66%      { transform: translate(20px, -20px) rotate(-10deg); }
}

/* Chromatic aberration edge effect on cards */
.skin-space .chroma-edge {
  position: relative;
}
.skin-space .chroma-edge::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,77,184,0.6), rgba(56,201,255,0.5) 50%, rgba(176,132,255,0.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.55;
}

/* Shooting stars overlay */
.skin-space .skin-ambient::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.7) 31%, transparent 32%) -200% 30% / 180px 2px no-repeat,
    linear-gradient(115deg, transparent 30%, rgba(176,132,255,0.6) 31%, transparent 32%) -200% 70% / 120px 1.5px no-repeat;
  animation: shooting-stars 9s ease-out infinite;
}
@keyframes shooting-stars {
  0%   { background-position: -200% 30%, -200% 70%; opacity: 0; }
  5%   { opacity: 1; }
  20%  { background-position: 120% 28%, -200% 70%; opacity: 0; }
  50%  { background-position: 120% 28%, 120% 68%; opacity: 1; }
  70%  { background-position: 120% 28%, 220% 68%; opacity: 0; }
  100% { background-position: 120% 28%, 220% 68%; opacity: 0; }
}


/* ============================================================
   🌴 JUNGLE — Orinoco lodge, canopy, macaw
   ============================================================ */
body.skin-jungle {
  --skin-bg:          #0a1410;
  --skin-bg-2:        #0e1b14;
  --skin-paper:       #14241c;
  --skin-paper-2:     #1a2f24;
  --skin-leaf:        #1d3a2a;

  --skin-ink:         #e8e3d0;       /* oiled parchment */
  --skin-ink-2:       #b8bfa8;
  --skin-ink-3:       #7d8672;
  --skin-ink-4:       #556055;

  --skin-hairline:    rgba(232, 227, 208, 0.06);
  --skin-edge:        rgba(218, 180, 70, 0.22);
  --skin-edge-strong: rgba(218, 180, 70, 0.58);

  --skin-accent:      #dab446;       /* sunset gold */
  --skin-accent-2:    #2aa69e;       /* peacock teal */
  --skin-accent-3:    #7d5a38;       /* wet bark */

  --skin-win:         #7db83a;       /* bamboo green */
  --skin-win-glow:    rgba(125, 184, 58, 0.50);
  --skin-win-dim:     rgba(125, 184, 58, 0.12);

  --skin-loss:        #d93b2e;       /* scarlet macaw */
  --skin-loss-glow:   rgba(217, 59, 46, 0.50);
  --skin-loss-dim:    rgba(217, 59, 46, 0.10);

  --skin-gold:        #dab446;
  --skin-gold-glow:   rgba(218, 180, 70, 0.45);

  --skin-font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --skin-font-title:   'Playfair Display', Georgia, serif;
  --skin-font-body:    'EB Garamond', Georgia, serif;
  --skin-font-mono:    'Kalam', 'Caveat', ui-monospace, monospace;

  --skin-radius:       10px;
  --skin-shadow:       0 14px 40px rgba(0, 12, 6, 0.55), inset 0 1px 0 rgba(218, 180, 70, 0.10);
  --skin-tagline:      "UET · SIGNALS FROM THE WILD";

  background: var(--skin-bg);
  color: var(--skin-ink);
}

/* JUNGLE backdrop: canopy light + humid haze */
.skin-jungle .skin-backdrop {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 90vw 60vh at 50% -20vh, rgba(218, 180, 70, 0.30), transparent 55%),
    radial-gradient(ellipse 60vw 50vh at 85% 40%, rgba(42, 166, 158, 0.16), transparent 55%),
    radial-gradient(ellipse 40vw 35vh at 10% 80%, rgba(125, 184, 58, 0.15), transparent 60%),
    linear-gradient(180deg, #08110d 0%, #0a1410 45%, #0e1b14 100%);
}
.skin-jungle .skin-backdrop::before {
  /* dappled canopy light — projected circles */
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle 80px at 15% 20%, rgba(218, 180, 70, 0.18), transparent 70%),
    radial-gradient(circle 120px at 70% 10%, rgba(218, 180, 70, 0.14), transparent 70%),
    radial-gradient(circle 60px at 40% 60%, rgba(218, 180, 70, 0.20), transparent 70%),
    radial-gradient(circle 100px at 85% 70%, rgba(218, 180, 70, 0.12), transparent 70%),
    radial-gradient(circle 70px at 25% 85%, rgba(218, 180, 70, 0.16), transparent 70%),
    radial-gradient(circle 90px at 58% 40%, rgba(125, 184, 58, 0.10), transparent 70%);
  animation: canopy-sway 14s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes canopy-sway {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.9; }
  50%      { transform: translate(20px, -10px) scale(1.04); opacity: 1; }
}
.skin-jungle .skin-backdrop::after {
  /* leaf pattern overlay */
  content: ''; position: absolute; inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><g fill='%231d3a2a' opacity='0.35'><path d='M50 80 Q65 40 90 50 Q95 80 70 95 Q55 90 50 80z'/><path d='M220 160 Q240 130 270 150 Q275 185 245 200 Q225 185 220 160z'/><path d='M120 280 Q145 250 170 265 Q180 300 150 315 Q125 305 120 280z'/><path d='M310 50 Q330 30 355 50 Q358 85 330 95 Q315 80 310 50z'/><path d='M40 220 Q60 200 85 215 Q90 250 65 265 Q45 250 40 220z'/><path d='M270 320 Q295 300 320 320 Q325 355 295 365 Q275 355 270 320z'/></g></svg>");
  background-size: 400px 400px;
  opacity: 0.4;
}

/* Macaw flyover (big SVG silhouette crosses occasionally) */
.skin-jungle .skin-macaw {
  position: fixed;
  top: 18vh; left: -200px;
  width: 180px; height: 120px;
  pointer-events: none;
  z-index: 2;
  animation: macaw-fly 26s linear infinite;
  animation-delay: 4s;
  filter: drop-shadow(0 0 18px rgba(217, 59, 46, 0.6));
}
@keyframes macaw-fly {
  0%   { left: -200px; top: 22vh; transform: scale(0.8) rotate(-5deg); }
  40%  { left: 55vw; top: 14vh; transform: scale(1.0) rotate(0deg); }
  80%  { left: 110vw; top: 26vh; transform: scale(0.9) rotate(8deg); }
  100% { left: 110vw; top: 26vh; opacity: 0; }
}

/* Rain ambience */
.skin-jungle .skin-ambient::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image:
    linear-gradient(transparent 80%, rgba(180, 210, 230, 0.15) 100%);
  background-size: 2px 18px;
  animation: jungle-rain 0.9s linear infinite;
  opacity: 0.25;
}
@keyframes jungle-rain {
  from { background-position: 0 0; }
  to   { background-position: 0 18px; }
}


/* ============================================================
   ⛳ CLUBHOUSE — Augusta, fairway, laurel, gold leaf
   ============================================================ */
body.skin-clubhouse {
  --skin-bg:          #0d1c14;
  --skin-bg-2:        #12271b;
  --skin-paper:       #f2ecd9;       /* clubhouse cream — cards ARE the paper */
  --skin-paper-2:     #eae3c7;
  --skin-paper-dark:  #173223;       /* fairway green card */
  --skin-felt:        #1a3d28;

  --skin-ink:         #f2ecd9;       /* on dark */
  --skin-ink-paper:   #1f3828;       /* on light */
  --skin-ink-paper-2: #3d5a42;
  --skin-ink-2:       #c3bfa7;
  --skin-ink-3:       #8a8872;
  --skin-ink-4:       #55553f;

  --skin-hairline:    rgba(31, 56, 40, 0.14);
  --skin-edge:        rgba(201, 164, 82, 0.45);
  --skin-edge-strong: rgba(201, 164, 82, 0.85);

  --skin-accent:      #c9a452;       /* tournament gold */
  --skin-accent-2:    #1a3d28;       /* fairway green */
  --skin-accent-3:    #1b2547;       /* blazer navy */

  --skin-win:         #4a7340;       /* laurel wreath */
  --skin-win-glow:    rgba(74, 115, 64, 0.40);
  --skin-win-dim:     rgba(74, 115, 64, 0.12);

  --skin-loss:        #a83825;       /* brick clay */
  --skin-loss-glow:   rgba(168, 56, 37, 0.40);
  --skin-loss-dim:    rgba(168, 56, 37, 0.10);

  --skin-gold:        #c9a452;
  --skin-gold-glow:   rgba(201, 164, 82, 0.55);

  --skin-font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --skin-font-title:   'Cinzel', 'Playfair Display', Georgia, serif;
  --skin-font-body:    'Libre Caslon Text', 'EB Garamond', Georgia, serif;
  --skin-font-mono:    'Courier Prime', 'JetBrains Mono', ui-monospace, monospace;

  --skin-radius:       4px;
  --skin-shadow:       0 10px 30px rgba(0, 20, 10, 0.45), 0 1px 0 rgba(255,255,255,0.4) inset;
  --skin-tagline:      "UET · THE MEMBERS CLUB";

  background: var(--skin-bg);
  color: var(--skin-ink);
}

/* CLUBHOUSE backdrop — felt surface + cut-grass stripes */
.skin-clubhouse .skin-backdrop {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    repeating-linear-gradient(100deg,
      rgba(26, 61, 40, 0.55) 0px,
      rgba(26, 61, 40, 0.55) 80px,
      rgba(23, 50, 35, 0.55) 80px,
      rgba(23, 50, 35, 0.55) 160px),
    radial-gradient(ellipse 70vw 50vh at 50% 10%, rgba(201, 164, 82, 0.10), transparent 55%),
    linear-gradient(180deg, #0b1a12 0%, #0d1c14 50%, #12271b 100%);
}
.skin-clubhouse .skin-backdrop::before {
  /* felt noise */
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='felt'><feTurbulence baseFrequency='1.4' numOctaves='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.24  0 0 0 0 0.14  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23felt)' opacity='0.35'/></svg>");
  opacity: 0.55;
  mix-blend-mode: multiply;
}
.skin-clubhouse .skin-vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  box-shadow: inset 0 0 240px 60px rgba(5, 12, 7, 0.7);
}

/* Tournament ribbon sway (ambient) */
.skin-clubhouse .skin-ambient::before {
  content: ''; position: fixed; top: 0; right: 6vw; width: 28px; height: 160px;
  background: linear-gradient(180deg, #c9a452 0%, #9e7a32 50%, #c9a452 100%);
  clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%);
  opacity: 0.22;
  transform-origin: top center;
  animation: ribbon-sway 6s ease-in-out infinite;
  pointer-events: none; z-index: 1;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.skin-clubhouse .skin-ambient::after {
  content: ''; position: fixed; top: 0; left: 6vw; width: 28px; height: 130px;
  background: linear-gradient(180deg, #1b2547 0%, #0d1530 50%, #1b2547 100%);
  clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%);
  opacity: 0.18;
  transform-origin: top center;
  animation: ribbon-sway 7.5s ease-in-out infinite reverse;
  pointer-events: none; z-index: 1;
}
@keyframes ribbon-sway {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(3deg); }
}




/* ============================================================
   UET HUB OVERRIDES — patch 2: visible application
   These rules remap the hub's existing CSS variables to skin tokens
   so the current Trading Hub takes on each skin's identity.
   Default (no body.skin-* class) leaves the hub untouched.
   ============================================================ */

/* Backdrop / vignette / ambient layers — injected by skins.js into <body> */
body[class*="skin-"] .skin-backdrop,
body[class*="skin-"] .skin-vignette,
body[class*="skin-"] .skin-ambient { position: fixed; inset: 0; pointer-events: none; }
body[class*="skin-"] .skin-backdrop { z-index: 0; }
body[class*="skin-"] .skin-vignette,
body[class*="skin-"] .skin-ambient { z-index: 1; }

/* When any skin is active: make hub surfaces translucent so backdrops show through */
body[class*="skin-"] { background: var(--skin-bg) !important; color: var(--skin-ink); font-family: var(--skin-font-body) !important; }
body[class*="skin-"] .app { background: transparent; position: relative; z-index: 5; }
body[class*="skin-"] .sidebar { background: color-mix(in srgb, var(--skin-bg-2, #000) 78%, transparent) !important; backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1); border-right: 1px solid var(--skin-edge, rgba(255,255,255,0.08)) !important; }
body[class*="skin-"] .topbar-toggle { background: color-mix(in srgb, var(--skin-bg-2, #000) 80%, transparent) !important; border-bottom: 1px solid var(--skin-edge, rgba(255,255,255,0.08)) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* ── FRONTIER hub mapping ─────────────────────────────────── */
body.skin-frontier {
  --bg:        #12100c;
  --sidebar:   #1a160f;
  --card:      #201a12;
  --border:    rgba(200, 155, 74, 0.24);
  --green:     #c89b4a;            /* bourbon amber replaces signal green */
  --green-dim: rgba(200, 155, 74, 0.10);
  --text:      #f2e8d6;
  --muted:     #9e8e6c;
  --active:    rgba(200, 155, 74, 0.18);
  font-family: 'EB Garamond', Georgia, serif;
}
body.skin-frontier .sidebar-brand h1,
body.skin-frontier .topbar-toggle h1 { font-family: 'IM Fell English SC', Georgia, serif !important; background: none !important; -webkit-text-fill-color: #c89b4a !important; color: #c89b4a !important; }
body.skin-frontier .skin-backdrop { background-image: linear-gradient(rgba(18,16,12,0.55), rgba(18,16,12,0.7)), url('/app/skins/frontier-hero.jpg?v=3'); background-size: cover; background-position: center; }

/* ── SPACE hub mapping ────────────────────────────────────── */
body.skin-space {
  --bg:        #050309;
  --sidebar:   #0a0618;
  --card:      rgba(18, 10, 38, 0.78);
  --border:    rgba(176, 132, 255, 0.30);
  --green:     #b084ff;            /* dream purple replaces signal green */
  --green-dim: rgba(176, 132, 255, 0.12);
  --text:      #f4f0ff;
  --muted:     #8c7fbd;
  --active:    rgba(176, 132, 255, 0.18);
  font-family: 'Syne', system-ui, sans-serif;
}
body.skin-space .sidebar-brand h1,
body.skin-space .topbar-toggle h1 { font-family: 'Unbounded', system-ui, sans-serif !important; background: linear-gradient(135deg, #b084ff, #38c9ff) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
body.skin-space .skin-backdrop { background-image: linear-gradient(rgba(5,3,9,0.55), rgba(5,3,9,0.78)), url('/app/skins/space-hero.jpg'); background-size: cover; background-position: center; }

/* ── JUNGLE hub mapping ───────────────────────────────────── */
body.skin-jungle {
  --bg:        #0a1410;
  --sidebar:   #0e1b14;
  --card:      #14241c;
  --border:    rgba(218, 180, 70, 0.22);
  --green:     #dab446;            /* sunset gold replaces signal green */
  --green-dim: rgba(218, 180, 70, 0.10);
  --text:      #e8e3d0;
  --muted:     #7d8672;
  --active:    rgba(218, 180, 70, 0.18);
  font-family: 'EB Garamond', Georgia, serif;
}
body.skin-jungle .sidebar-brand h1,
body.skin-jungle .topbar-toggle h1 { font-family: 'Playfair Display', Georgia, serif !important; background: none !important; -webkit-text-fill-color: #dab446 !important; color: #dab446 !important; }
body.skin-jungle .skin-backdrop { background-image: linear-gradient(rgba(10,20,16,0.55), rgba(10,20,16,0.75)), url('/app/skins/jungle-hero.jpg?v=4'); background-size: cover; background-position: center; }

/* ── DESERT hub mapping ───────────────────────────────────── */
body.skin-desert {
  --bg:        #0e0a14;
  --sidebar:   #15101e;
  --card:      rgba(36, 22, 42, 0.78);
  --border:    rgba(232, 145, 84, 0.30);
  --green:     #e89154;            /* campfire copper replaces signal green */
  --green-dim: rgba(232, 145, 84, 0.12);
  --text:      #f4e8dc;
  --muted:     #9a8276;
  --active:    rgba(232, 145, 84, 0.20);
  font-family: 'IM Fell English', Georgia, serif;
}
body.skin-desert .sidebar-brand h1,
body.skin-desert .topbar-toggle h1 { font-family: 'IM Fell English SC', Georgia, serif !important; background: none !important; -webkit-text-fill-color: #e89154 !important; color: #e89154 !important; }
body.skin-desert .skin-backdrop { background-image: linear-gradient(rgba(14,10,20,0.55), rgba(14,10,20,0.75)), url('/app/skins/desert-hero.jpg?v=3'); background-size: cover; background-position: center; }

/* ── RIVER hub mapping ────────────────────────────────────── */
body.skin-river {
  --bg:        #061218;
  --sidebar:   #0a1d24;
  --card:      rgba(20, 40, 50, 0.78);
  --border:    rgba(108, 200, 220, 0.30);
  --green:     #6cc8dc;            /* river teal replaces signal green */
  --green-dim: rgba(108, 200, 220, 0.12);
  --text:      #e6f4f8;
  --muted:     #7a9aa6;
  --active:    rgba(108, 200, 220, 0.20);
  font-family: 'Spectral', Georgia, serif;
}
body.skin-river .sidebar-brand h1,
body.skin-river .topbar-toggle h1 { font-family: 'Cormorant Garamond', Georgia, serif !important; background: none !important; -webkit-text-fill-color: #6cc8dc !important; color: #6cc8dc !important; }
body.skin-river .skin-backdrop { background-image: linear-gradient(rgba(6,18,24,0.55), rgba(6,18,24,0.75)), url('/app/skins/river-hero.jpg?v=5'); background-size: cover; background-position: center; }

/* ── COASTAL hub mapping (hydrangeas + lighthouse at dusk) ─── */
body.skin-coastal {
  --bg:        #0d1424;
  --sidebar:   #141d33;
  --card:      rgba(24, 32, 54, 0.78);
  --border:    rgba(184, 150, 230, 0.32);
  --green:     #b896e6;            /* hydrangea lavender replaces signal green */
  --green-dim: rgba(184, 150, 230, 0.12);
  --text:      #ecdff7;
  --muted:     #8a92b4;
  --active:    rgba(184, 150, 230, 0.22);
  font-family: 'Cormorant Garamond', Georgia, serif;
}
body.skin-coastal .sidebar-brand h1,
body.skin-coastal .topbar-toggle h1 { font-family: 'Cormorant Garamond', Georgia, serif !important; background: none !important; -webkit-text-fill-color: #c9a8f0 !important; color: #c9a8f0 !important; letter-spacing: 1px; }
body.skin-coastal .skin-backdrop { background-image: linear-gradient(rgba(13,20,36,0.55), rgba(13,20,36,0.78)), url('/app/skins/coastal-hero.jpg?v=1'); background-size: cover; background-position: center; }

/* ── CONSERVATORY hub mapping (Victorian greenhouse) ───────── */
body.skin-conservatory {
  --bg:        #0a1410;
  --sidebar:   #0f1d16;
  --card:      rgba(18, 40, 28, 0.78);
  --border:    rgba(148, 196, 120, 0.30);
  --green:     #94c478;            /* conservatory leaf replaces signal green */
  --green-dim: rgba(148, 196, 120, 0.10);
  --text:      #e8f3dc;
  --muted:     #8aa084;
  --active:    rgba(148, 196, 120, 0.20);
  font-family: 'EB Garamond', Georgia, serif;
}
body.skin-conservatory .sidebar-brand h1,
body.skin-conservatory .topbar-toggle h1 { font-family: 'Cormorant Garamond', Georgia, serif !important; background: none !important; -webkit-text-fill-color: #b3d590 !important; color: #b3d590 !important; letter-spacing: 1px; }
body.skin-conservatory .skin-backdrop { background-image: linear-gradient(rgba(10,20,16,0.55), rgba(10,20,16,0.78)), url('/app/skins/conservatory-hero.jpg?v=1'); background-size: cover; background-position: center; }

/* ── CHALET hub mapping (alpine fireside lodge) ────────────── */
body.skin-chalet {
  --bg:        #14100c;
  --sidebar:   #1c1712;
  --card:      rgba(36, 28, 22, 0.78);
  --border:    rgba(220, 160, 90, 0.30);
  --green:     #dca05a;            /* hearth ember replaces signal green */
  --green-dim: rgba(220, 160, 90, 0.12);
  --text:      #f3e9d9;
  --muted:     #a89882;
  --active:    rgba(220, 160, 90, 0.22);
  font-family: 'Spectral', Georgia, serif;
}
body.skin-chalet .sidebar-brand h1,
body.skin-chalet .topbar-toggle h1 { font-family: 'EB Garamond', Georgia, serif !important; background: none !important; -webkit-text-fill-color: #e8b877 !important; color: #e8b877 !important; letter-spacing: 1px; }
body.skin-chalet .skin-backdrop { background-image: linear-gradient(rgba(20,16,12,0.55), rgba(20,16,12,0.78)), url('/app/skins/chalet-hero.jpg?v=1'); background-size: cover; background-position: center; }

/* ── BLACK HOLE hub mapping ───────────────────────────────── */
body.skin-blackhole {
  --bg:        #030106;
  --sidebar:   #060310;
  --card:      rgba(14, 8, 22, 0.78);
  --border:    rgba(255, 170, 68, 0.25);
  --green:     #ffaa44;            /* accretion gold replaces signal green */
  --green-dim: rgba(255, 170, 68, 0.10);
  --text:      #f0ecdd;
  --muted:     #8a8070;
  --active:    rgba(255, 170, 68, 0.18);
  font-family: 'Unbounded', 'Syne', system-ui, sans-serif;
}
body.skin-blackhole .sidebar-brand h1,
body.skin-blackhole .topbar-toggle h1 { font-family: 'Unbounded', system-ui, sans-serif !important; background: linear-gradient(135deg, #ffaa44, #ff5c2e) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; letter-spacing: 2px; }
body.skin-blackhole .skin-backdrop { background-image: linear-gradient(rgba(3,1,6,0.55), rgba(3,1,6,0.78)), url('/app/skins/blackhole-hero.jpg?v=1'); background-size: cover; background-position: center; }

/* ── CLUBHOUSE hub mapping ────────────────────────────────── */
body.skin-clubhouse {
  --bg:        #0d1c14;
  --sidebar:   #12271b;
  --card:      #f2ecd9;
  --border:    rgba(201, 164, 82, 0.45);
  --green:     #c9a452;            /* tournament gold replaces signal green */
  --green-dim: rgba(201, 164, 82, 0.12);
  --text:      #f2ecd9;
  --muted:     #8a8872;
  --active:    rgba(201, 164, 82, 0.20);
  font-family: 'Libre Caslon Text', 'EB Garamond', Georgia, serif;
}
body.skin-clubhouse .sidebar-brand h1,
body.skin-clubhouse .topbar-toggle h1 { font-family: 'Cinzel', 'Playfair Display', Georgia, serif !important; background: none !important; -webkit-text-fill-color: #c9a452 !important; color: #c9a452 !important; letter-spacing: 4px; }
body.skin-clubhouse .skin-backdrop { background-image: linear-gradient(rgba(13,28,20,0.6), rgba(13,28,20,0.78)), url('/app/skins/clubhouse-hero.jpg?v=3'); background-size: cover; background-position: center; }

/* Clubhouse cards are cream paper, but --text is also cream (for dark page bg).
   Force dark fairway ink on content that sits inside cream cards on the
   Auto Bot Results and Follow Trade Results pages. */
body.skin-clubhouse #page-autobot-results #ab-res-total,
body.skin-clubhouse #page-autobot-results #ab-res-avg,
body.skin-clubhouse #page-autobot-results #ab-res-pnl,
body.skin-clubhouse #page-autobot-results #ab-res-wr,
body.skin-clubhouse #page-follow-results #ft-res-total,
body.skin-clubhouse #page-follow-results #ft-res-avg,
body.skin-clubhouse #page-follow-results #ft-res-pnl,
body.skin-clubhouse #page-follow-results #ft-res-wr { color: #1f3828 !important; }

body.skin-clubhouse #ab-res-calendar > div > div:first-child,
body.skin-clubhouse #ft-res-calendar > div > div:first-child { color: #1f3828 !important; }

body.skin-clubhouse #page-autobot-results #ab-res-stats div[style*="color:var(--muted)"],
body.skin-clubhouse #page-follow-results #ft-res-stats div[style*="color:var(--muted)"],
body.skin-clubhouse #ab-res-calendar ~ * div[style*="color:var(--muted)"],
body.skin-clubhouse #page-autobot-results div[style*="color:var(--muted)"][style*="Inter"],
body.skin-clubhouse #page-follow-results div[style*="color:var(--muted)"][style*="Inter"] { color: #55553f !important; }

body.skin-clubhouse #ab-res-calendar > div > div:nth-child(3),
body.skin-clubhouse #ft-res-calendar > div > div:nth-child(3) { color: #55553f !important; }

/* ============================================================
   FLOATING SKIN SWITCHER (injected by skins.js)
   ============================================================ */
#uet-skin-switcher {
  position: fixed;
  top: 56px;
  right: 18px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: rgba(14, 15, 20, 0.85);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  font-family: 'Inter', system-ui, sans-serif;
  transition: opacity 0.3s, transform 0.3s;
}
#uet-skin-switcher.collapsed {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
#uet-skin-switcher.collapsed > button:not(.toggle) { display: none; }
#uet-skin-switcher .switcher-label {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  text-align: center;
  margin-bottom: 4px;
  font-weight: 600;
}
#uet-skin-switcher button {
  appearance: none;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #eaedf3;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  min-width: 130px;
}
#uet-skin-switcher button:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.18); }
#uet-skin-switcher button.active { background: rgba(28, 233, 37, 0.15); border-color: rgba(28, 233, 37, 0.40); color: #1ce925; }
#uet-skin-switcher button.toggle { min-width: 0; padding: 8px 10px; font-size: 16px; text-align: center; }

/* While a skin is active, color the active chip with that skin's accent */
body.skin-frontier  #uet-skin-switcher button.active { background: rgba(200,155,74,0.20); border-color: rgba(200,155,74,0.55); color: #e8c178; }
body.skin-space     #uet-skin-switcher button.active { background: rgba(176,132,255,0.20); border-color: rgba(176,132,255,0.55); color: #d4baff; }
body.skin-jungle    #uet-skin-switcher button.active { background: rgba(218,180,70,0.20); border-color: rgba(218,180,70,0.55); color: #f0d27a; }
body.skin-clubhouse #uet-skin-switcher button.active { background: rgba(201,164,82,0.20); border-color: rgba(201,164,82,0.55); color: #e8cc7c; }


/* ============================================================
   HOMEPAGE HERO — when a skin is active, #page-home gets the
   skin's hero JPG as its backdrop. Cards remain readable.
   ============================================================ */
body[class*="skin-"] #page-home {
  position: relative;
  overflow: hidden;
  background: transparent;
}
body[class*="skin-"] #page-home::before {
  content: '';
  position: fixed;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
  filter: saturate(1.05) contrast(1.04);
}
body[class*="skin-"] #page-home > * { position: relative; z-index: 1; }
body.skin-frontier  #page-home::before { background-image: linear-gradient(to bottom, rgba(18,16,12,0.18) 0%, rgba(18,16,12,0.42) 60%, rgba(18,16,12,0.68) 100%), url('/app/skins/frontier-hero.jpg?v=3'); }
body.skin-space     #page-home::before { background-image: linear-gradient(to bottom, rgba(5,3,9,0.12)    0%, rgba(5,3,9,0.38)    60%, rgba(5,3,9,0.62)    100%), url('/app/skins/space-hero.jpg?v=2'); }
body.skin-jungle    #page-home::before { background-image: linear-gradient(to bottom, rgba(10,20,16,0.18) 0%, rgba(10,20,16,0.42) 60%, rgba(10,20,16,0.65) 100%), url('/app/skins/jungle-hero.jpg?v=4'); }
body.skin-clubhouse #page-home::before { background-image: linear-gradient(to bottom, rgba(13,28,20,0.18) 0%, rgba(13,28,20,0.42) 60%, rgba(13,28,20,0.65) 100%), url('/app/skins/clubhouse-hero.jpg?v=3'); }
body.skin-river     #page-home::before { background-image: linear-gradient(to bottom, rgba(6,18,24,0.22)  0%, rgba(6,18,24,0.48)  60%, rgba(6,18,24,0.70)  100%), url('/app/skins/river-hero.jpg?v=5'); }
body.skin-desert    #page-home::before { background-image: linear-gradient(to bottom, rgba(14,10,20,0.22) 0%, rgba(14,10,20,0.48) 60%, rgba(14,10,20,0.70) 100%), url('/app/skins/desert-hero.jpg?v=3'); }
body.skin-blackhole #page-home::before { background-image: linear-gradient(to bottom, rgba(3,1,6,0.18)    0%, rgba(3,1,6,0.45)    60%, rgba(3,1,6,0.70)    100%), url('/app/skins/blackhole-hero.jpg?v=1'); }
body.skin-coastal   #page-home::before { background-image: linear-gradient(to bottom, rgba(13,20,36,0.22) 0%, rgba(13,20,36,0.48) 60%, rgba(13,20,36,0.70) 100%), url('/app/skins/coastal-hero.jpg?v=1'); }
body.skin-conservatory #page-home::before { background-image: linear-gradient(to bottom, rgba(10,20,16,0.22) 0%, rgba(10,20,16,0.48) 60%, rgba(10,20,16,0.70) 100%), url('/app/skins/conservatory-hero.jpg?v=1'); }
body.skin-chalet    #page-home::before { background-image: linear-gradient(to bottom, rgba(20,16,12,0.22) 0%, rgba(20,16,12,0.48) 60%, rgba(20,16,12,0.70) 100%), url('/app/skins/chalet-hero.jpg?v=1'); }


/* ============================================================
   Hide the homepage starry-field canvas when a skin is active —
   the hero JPG behind #page-home becomes the backdrop instead.
   ============================================================ */
body[class*="skin-"] #homeStars { display: none !important; }

/* ============================================================
   When a skin is active, make the bottom-nav fully opaque so
   the fixed hero image doesn't bleed through the backdrop-filter
   and create a bright/white strip on brighter skins (fish, desert).
   ============================================================ */
body[class*="skin-"] .bottom-nav {
  background: #0a0b0f !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ============================================================
   Inline skin picker — drops down right under the
   "UET Skins" button on the homepage.
   ============================================================ */
#uet-skin-inline {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 8px;
  margin: 10px auto 0;
  padding: 10px 12px;
  max-width: 460px;
  background: rgba(20, 18, 28, 0.78);
  border: 1px solid rgba(139, 92, 246, 0.28);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: uetSkinInlineIn 0.18s ease-out;
  box-shadow: 0 8px 28px rgba(0,0,0,0.4);
}
#uet-skin-inline .uet-skin-row {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
}
#uet-skin-inline .uet-skin-pick {
  flex: 1;
  text-align: center;
  font-size: 22px;
  line-height: 1;
  padding: 10px 6px;
  letter-spacing: 0;
}
#uet-skin-inline .uet-skin-fav {
  flex: 0 0 auto;
  min-width: 0;
  padding: 4px 0;
  font-size: 14px;
  color: #6c6680;
  background: rgba(255, 255, 255, 0.03);
  text-align: center;
}
#uet-skin-inline .uet-skin-fav:hover { color: #f5c542; background: rgba(245, 197, 66, 0.08); border-color: rgba(245, 197, 66, 0.3); }
#uet-skin-inline .uet-skin-fav.favorited {
  color: #f5c542;
  background: rgba(245, 197, 66, 0.12);
  border-color: rgba(245, 197, 66, 0.45);
  text-shadow: 0 0 8px rgba(245, 197, 66, 0.6);
}
@keyframes uetSkinInlineIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
#uet-skin-inline button {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #d8d6e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
#uet-skin-inline button:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.20);
}
#uet-skin-inline button.active {
  background: rgba(139, 92, 246, 0.20);
  border-color: rgba(139, 92, 246, 0.55);
  color: #d4baff;
}
body.skin-frontier  #uet-skin-inline button.active { background: rgba(200,155,74,0.20); border-color: rgba(200,155,74,0.55); color: #e8c178; }
body.skin-space     #uet-skin-inline button.active { background: rgba(176,132,255,0.20); border-color: rgba(176,132,255,0.55); color: #d4baff; }
body.skin-jungle    #uet-skin-inline button.active { background: rgba(218,180,70,0.20); border-color: rgba(218,180,70,0.55); color: #f0d27a; }
body.skin-clubhouse #uet-skin-inline button.active { background: rgba(201,164,82,0.20); border-color: rgba(201,164,82,0.55); color: #e8cc7c; }
body.skin-river     #uet-skin-inline button.active { background: rgba(108,200,220,0.20); border-color: rgba(108,200,220,0.55); color: #b0e8f3; }
body.skin-desert    #uet-skin-inline button.active { background: rgba(232,145,84,0.20); border-color: rgba(232,145,84,0.55); color: #f4b58a; }

/* ============================================================
   Homepage text legibility — when ANY skin is active, lift the
   greeting / heading / tagline / market-status into bright text
   with a strong drop-shadow so they stay readable on top of the
   hero photo regardless of which skin/color is selected.
   ============================================================ */
body[class*="skin-"] .home-greeting {
  color: #f3f5fb !important;
  opacity: 1 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.85), 0 0 4px rgba(0,0,0,0.6);
}
body[class*="skin-"] .welcome-content h2 {
  color: #ffffff !important;
  text-shadow: 0 2px 14px rgba(0,0,0,0.9), 0 0 4px rgba(0,0,0,0.7);
}
body[class*="skin-"] .welcome-content h2 span {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  background-clip: initial !important;
  color: #00E510 !important;
  text-shadow: 0 2px 14px rgba(0,0,0,0.9), 0 0 16px rgba(0,229,16,0.45);
  filter: drop-shadow(0 0 24px rgba(0,229,16,0.35));
}
body[class*="skin-"] .welcome-content .tagline {
  color: #eef0f8 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.85), 0 0 3px rgba(0,0,0,0.6);
}
body[class*="skin-"] .market-status {
  color: #eef0f8 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
body[class*="skin-"] .market-status #market-text {
  color: #eef0f8 !important;
}

/* ============================================================
   HOMEPAGE BUTTONS — when a skin is active, give the Launch Demo /
   UET Skins / Daily Brief buttons a translucent glass background +
   bright white text so the hero shows through but text stays
   legible. Accent color preserved via border only.
   ============================================================ */
body[class*="skin-"] #demo-start-btn,
body[class*="skin-"] #uet-skins-btn,
body[class*="skin-"] #brief-btn {
  background: rgba(10, 8, 16, 0.38) !important;
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 0 3px rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body[class*="skin-"] #demo-start-btn  { border: 1px solid rgba(0,229,16,0.55) !important; }
body[class*="skin-"] #uet-skins-btn   { border: 1px solid rgba(180,150,255,0.55) !important; }
body[class*="skin-"] #brief-btn       { border: 1px solid rgba(180,150,255,0.55) !important; }
body[class*="skin-"] #demo-start-btn:hover,
body[class*="skin-"] #uet-skins-btn:hover,
body[class*="skin-"] #brief-btn:hover {
  background: rgba(16, 12, 24, 0.55) !important;
}

/* ============================================================
   HOMEPAGE BALANCE CARDS — translucent glass when a skin is
   active so the hero image shows through behind the cards.
   Keep the text colors, values, and gold accents untouched.
   ============================================================ */
body[class*="skin-"] .home-card {
  background: rgba(10, 8, 16, 0.32) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}
body[class*="skin-"] .home-card:hover {
  background: rgba(14, 12, 22, 0.42) !important;
}

/* ============================================================
   MOBILE TUNING — narrow viewport adjustments for skins UI.
   ============================================================ */
@media (max-width: 640px) {
  /* Horizontal picker on mobile — 4 skins in one row so it doesn't
     push content down and force scrolling. */
  #uet-skin-inline {
    max-width: 94vw;
    padding: 8px 8px;
    margin: 8px auto 0;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 6px;
  }
  #uet-skin-inline .uet-skin-row {
    flex: 1 1 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-width: 0;
  }
  #uet-skin-inline .uet-skin-pick {
    font-size: 20px;
    padding: 8px 2px;
    letter-spacing: 0;
    text-align: center;
    line-height: 1;
  }
  #uet-skin-inline .uet-skin-fav {
    min-width: 0;
    padding: 4px 0;
    font-size: 13px;
    text-align: center;
  }

  /* Skins trigger button shrinks to match Launch Demo on mobile */
  #uet-skins-btn {
    padding: 10px 24px !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
  }

  /* Soften hero-text shadows slightly on small screens */
  body[class*="skin-"] .welcome-content h2 {
    text-shadow: 0 2px 10px rgba(0,0,0,0.9), 0 0 3px rgba(0,0,0,0.7);
  }
  body[class*="skin-"] .welcome-content h2 span {
    text-shadow: 0 2px 10px rgba(0,0,0,0.9), 0 0 12px rgba(0,229,16,0.45);
  }

  /* Per-skin hero crop for portrait phones — keep the subject in frame
     when the 21:9 hero gets aggressively cropped on tall narrow screens. */
  body.skin-space     #page-home::before { background-position: 55% center; }
  body.skin-frontier  #page-home::before { background-position: 78% center; }
  body.skin-jungle    #page-home::before { background-position: 42% center; }
  body.skin-clubhouse #page-home::before { background-position: 28% center; }
  body.skin-river     #page-home::before { background-position: 50% center; }
  body.skin-desert    #page-home::before { background-position: 55% center; }

  body.skin-space     .skin-backdrop { background-position: 55% center; }
  body.skin-frontier  .skin-backdrop { background-position: 78% center; }
  body.skin-jungle    .skin-backdrop { background-position: 42% center; }
  body.skin-clubhouse .skin-backdrop { background-position: 28% center; }
  body.skin-river     .skin-backdrop { background-position: 50% center; }
  body.skin-desert    .skin-backdrop { background-position: 55% center; }
}