:root{
  --bg:#0A0A23;
  --primary-start:#1E3A8A;
  --primary-end:#6D28D9;
  --primary-gradient: linear-gradient(90deg,var(--primary-start),var(--primary-end));
  --card-bg: rgba(255,255,255,0.02);
  --surface: rgba(255,255,255,0.03);
  --success:#10B981;
  --muted: rgba(255,255,255,0.6);
  --glass: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  --radius:12px;
}

/* Hero */
.signals-hero{
  padding:48px 0;
  background:
    radial-gradient(900px 300px at 10% 15%, rgba(30,58,138,0.12), transparent 10%),
    radial-gradient(700px 260px at 90% 85%, rgba(109,40,217,0.06), transparent 10%),
    var(--bg);
  border-bottom:1px solid rgba(255,255,255,0.03);
}
.hero-inner{display:grid;grid-template-columns:1fr 420px;gap:24px;align-items:center}
@media (max-width:1024px){ .hero-inner{grid-template-columns:1fr} }
.hero-title{font-size:1.6rem;font-weight:900;margin:0 0 6px;background:linear-gradient(90deg,#fff,rgba(255,255,255,0.95));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{color:var(--muted);margin:0 0 14px}

/* Signals grid */
.free-signals{padding:32px 0}
.signals-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
@media (max-width:1024px){ .signals-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:700px){ .signals-grid{grid-template-columns:1fr} }

.signal-card{
  background:var(--card-bg);
  border-radius:12px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  border:1px solid rgba(255,255,255,0.02);
  transition:transform .16s ease, box-shadow .16s ease;
  box-shadow:0 8px 30px rgba(0,0,0,0.6);
}
.signal-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(99,102,241,0.08);border-color:rgba(99,102,241,0.08)}

.signal-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.signal-pair{margin:0;font-weight:900}
.signal-meta{color:var(--muted);font-weight:700}
.signal-flag{padding:6px 10px;border-radius:10px;font-weight:900}
.signal-flag.Pnl-profit{direction:ltr;background:linear-gradient(90deg,#064e3b,#10B981);color:#fff;box-shadow:0 6px 18px rgba(16,185,129,0.08)}
.signal-flag.Pnl-lost{direction:ltr;background:linear-gradient(90deg,#4e0622,#b91040);color:#fff;box-shadow:0 6px 18px rgba(16,185,129,0.08)}
.signal-flag.Pnl-0{direction:ltr;background: linear-gradient(90deg, #6b7280, #d1d5db);color:#fff;box-shadow:0 6px 18px rgba(16,185,129,0.08)}
/* Chart container */
.signal-chart{height:120px;display:block}
.signal-chart canvas{width:100% !important;height:120px !important;display:block}

/* footer of card */
.signal-footer{display:flex;justify-content:space-between;align-items:center;gap:12px}

/* VIP teaser */
.vip-teaser{padding:32px 0;border-top:1px solid rgba(255,255,255,0.02);border-bottom:1px solid rgba(255,255,255,0.02)}
.vip-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px;align-items:center}
@media (max-width:900px){ .vip-grid{grid-template-columns:1fr} }
.vip-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:12px;display:flex;gap:16px;align-items:center;box-shadow:0 8px 30px rgba(0,0,0,0.6)}
.vip-lock{width:72px;height:72px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:linear-gradient(90deg,var(--primary-start),var(--primary-end));box-shadow:0 12px 36px rgba(99,102,241,0.08)}
.vip-body .vip-title{margin:0;font-weight:900}
.vip-stats{background:var(--card-bg);padding:16px;border-radius:12px;display:flex;flex-direction:column;gap:12px}

/* Analysis */
.analysis{padding:36px 0}
.analysis-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px;align-items:start}
@media (max-width:900px){ .analysis-grid{grid-template-columns:1fr} }

.card{background:var(--card-bg);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.02);box-shadow:0 8px 30px rgba(0,0,0,0.6)}
.main-chart canvas{width:100% !important;height:320px !important}

/* Metrics */
.metrics{display:flex;flex-direction:column;gap:14px}
.metric{display:flex;justify-content:space-between;align-items:center}
.metric-title{color:var(--muted)}
.metric-value{font-weight:900;color:#fff}

/* Fade-in util */
.fade-in{opacity:0;transform:translateY(10px);transition:opacity .64s ease, transform .64s ease}
.fade-in.show{opacity:1;transform:none}

/* Small responsive tweaks */
.small{font-size:0.9rem}
.muted{color:var(--muted)}
.signal-status{color: #ffc107!important; margin-top: 10px;}
.profit{color:#10B981;}
.lost{color:#b91040;}
.vip-style{color: #6D28D9;}
.btn-join{display: inline; text-align: center !important; margin-top: 15px;}
.metrics-nice-border{padding: 2px; border-radius: 12px;}
.side-LONG{color: green;}
.side-SHORT{color: rgb(133, 25, 38);}