/* --- Theme Variables --- */
 :root {
     /* Light Mode Default Values */
     --c-dark: #f8fafc;
     /* Slate 50 */
     --c-card: #ffffff;
     /* White */
     --c-text: #475569;
     /* Slate 600 */
     --c-heading: #0f172a;
     /* Slate 900 */
     --c-primary: #0d9488;
     /* Teal 600 (Darker for light bg) */
     --c-secondary: #d97706;
     /* Amber 600 */
     --c-accent: #e2e8f0;
     /* Slate 200 */

     --glass-bg: rgba(255, 255, 255, 0.7);
     --glass-border: rgba(0, 0, 0, 0.05);
     --shadow-color: rgba(0, 0, 0, 0.1);
     --hero-blob-opacity: 0.15;

     /* Radar Colors */
     --radar-line: rgba(13, 148, 136, 0.3);
     --radar-sweep: rgba(13, 148, 136, 0.1);

     /* Chart Colors */
     --candle-green: #10b981;
     --candle-red: #ef4444;

     /* Floating Candle Colors - Lowered to 5% */
     --float-candle-green: rgba(16, 185, 129, 0.05);
     --float-candle-red: rgba(239, 68, 68, 0.05);

     /* Background Grid */
     --grid-line: rgba(15, 23, 42, 0.05);

     /* Chart Line High Contrast */
     --c-line: #000000;
 }

 [data-theme="dark"] {
     /* Dark Mode Values */
     --c-dark: #0f172a;
     /* Deep Slate */
     --c-card: #1e293b;
     /* Lighter Slate */
     --c-text: #cbd5e1;
     /* Muted Silver */
     --c-heading: #f1f5f9;
     /* Off-white */
     --c-primary: #2dd4bf;
     /* Teal 400 (Brighter for dark bg) */
     --c-secondary: #d97706;
     /* Amber 600 */
     --c-accent: #334155;
     /* Slate 700 */

     --glass-bg: rgba(30, 41, 59, 0.7);
     --glass-border: rgba(255, 255, 255, 0.05);
     --shadow-color: rgba(0, 0, 0, 0.5);
     --hero-blob-opacity: 0.25;
     /* Increased to 25% for Dark Mode */

     --radar-line: rgba(45, 212, 191, 0.3);
     --radar-sweep: rgba(45, 212, 191, 0.1);

     --candle-green: #2dd4bf;
     --candle-red: #f87171;

     /* Floating Candle Colors - Lowered to 5% */
     --float-candle-green: rgba(45, 212, 191, 0.05);
     --float-candle-red: rgba(248, 113, 113, 0.05);

     /* Background Grid */
     --grid-line: rgba(45, 212, 191, 0.03);

     /* Chart Line High Contrast */
     --c-line: rgba(255, 255, 255, 0.5);
 }

 /* Base Transitions */
 body {
     background-color: var(--c-dark);
     color: var(--c-text);
     transition: background-color 0.3s ease, color 0.3s ease;
     position: relative;

     /* Technical Grid Background */
     background-image:
         linear-gradient(var(--grid-line) 1px, transparent 1px),
         linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
     background-size: 40px 40px;
     background-position: center top;
 }

 /* Glassmorphism Dynamic */
 .glass-panel {
     background: var(--glass-bg);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     border: 1px solid var(--glass-border);
     transition: background 0.3s ease, border-color 0.3s ease;
 }

 /* 3D Tilt Container */
 .tilt-container {
     perspective: 1000px;
     transform-style: preserve-3d;
 }

 .tilt-card {
     transition: transform 0.1s ease-out;
     transform-style: preserve-3d;
 }

 .tilt-content {
     transform: translateZ(50px);
 }

 .gradient-text {
     background: linear-gradient(to right, var(--c-primary), var(--c-secondary));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 /* Scrollbar */
 ::-webkit-scrollbar {
     width: 8px;
 }

 ::-webkit-scrollbar-track {
     background: var(--c-dark);
 }

 ::-webkit-scrollbar-thumb {
     background: var(--c-accent);
     border-radius: 4px;
 }

 ::-webkit-scrollbar-thumb:hover {
     background: #64748b;
 }

 .nav-link {
     position: relative;
 }

 .nav-link::after {
     content: '';
     position: absolute;
     width: 0;
     height: 2px;
     bottom: -4px;
     left: 0;
     background-color: var(--c-primary);
     transition: width 0.3s ease;
 }

 .nav-link:hover::after {
     width: 100%;
 }

 .custom-shadow {
     box-shadow: 0 25px 50px -12px var(--shadow-color);
 }

 /* Radar Scanner Animation */
 @keyframes spin {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 .radar-sweep {
     background: conic-gradient(from 0deg, transparent 0deg, var(--radar-sweep) 360deg);
     animation: spin 4s linear infinite;
 }

 /* Technical Analysis Visuals */
 .candle-body {
     width: 12px;
     border-radius: 2px;
 }

 .candle-wick {
     width: 2px;
     height: 100%;
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     background-color: currentColor;
     opacity: 0.5;
 }

 /* Youtube Thumbnail Overlay */
 .play-overlay {
     background: rgba(0, 0, 0, 0.5);
     transition: all 0.3s ease;
 }

 .group:hover .play-overlay {
     background: rgba(0, 0, 0, 0.3);
 }

 /* Rising Candle Animation - UPDATED */
 @keyframes rise {
     0% {
         transform: translateY(20vh) scale(var(--s, 1));
         opacity: 0;
     }

     10% {
         opacity: 1;
     }

     85% {
         opacity: 1;
     }

     100% {
         transform: translateY(-120vh) scale(var(--s, 1));
         opacity: 0;
     }
 }

 /* Falling Candle Animation (New) */
 @keyframes fall {
     0% {
         transform: translateY(-120vh) scale(var(--s, 1));
         opacity: 0;
     }

     10% {
         opacity: 1;
     }

     85% {
         opacity: 1;
     }

     100% {
         transform: translateY(20vh) scale(var(--s, 1));
         opacity: 0;
     }
 }

 .bg-candle {
     position: absolute;
     bottom: -50px;
     animation: rise linear infinite;
     z-index: -1;
 }

 .bg-candle.bullish {
     color: var(--float-candle-green);
 }

 .bg-candle.bearish {
     color: var(--float-candle-red);
     animation-name: fall;
     /* Override animation for red candles */
 }

  .bg-credo-red {
     background-color: var(--candle-red);
  }

 .bg-candle-body {
     background-color: currentColor;
     border: 1px solid currentColor;
 }

 .bg-candle-wick {
     background-color: currentColor;
 }