/* rstyle.css - mobile-first styles for dashboard + ticker (updated bottom-nav & spacing) */
:root{
  --bg:#f0f6fb;
  --phone-bg:#ffffff;
  --accent:#00c98a;
  --muted:#6b7280;
  --dark:#0b1220;
  --purple:#7b61ff;
  --danger:#ff5b5b;
  --card-shadow: 0 10px 30px rgba(11,18,32,0.06);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body{margin:0;background:linear-gradient(180deg,#eef6fb,#f6fbff);color:var(--dark)}
.phone-shell{
  max-width:420px;
  margin:18px auto 90px;
  border-radius:18px;
  background:var(--phone-bg);
  box-shadow:var(--card-shadow);
  overflow:hidden;
  border:1px solid rgba(10,10,10,0.03);
}
.phone-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 14px;
  border-bottom:1px solid rgba(15,15,15,0.03)
}
.top-left{background:transparent;border:none;font-size:20px}
.top-center{font-weight:800;color:var(--dark);font-size:16px}
.top-right{}
.withdraw-btn{
  background:linear-gradient(90deg,#ffb86b,#ff6b6b);
  color:white;padding:8px 12px;border-radius:10px;text-decoration:none;font-weight:700;font-size:13px
}

/* MAIN container */
.phone-main{padding:14px;padding-bottom:calc(64px + 40px)} /* ensure content not hidden by bottom nav */

/* Card */
.card{
  background:linear-gradient(180deg,#ffffff,#fbfdff);
  border-radius:12px;padding:12px;margin-bottom:12px;
  box-shadow:0 6px 18px rgba(9,10,14,0.02);
  border:1px solid rgba(0,0,0,0.03)
}

/* Balance card */
.earned-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.earned-left .label{font-size:13px;color:var(--muted)}
.earned-val{font-size:17px;color:var(--dark);font-weight:700}
.earned-right .support-link{
  background:linear-gradient(90deg,#7b61ff,#b795ff);
  padding:8px 10px;border-radius:10px;color:white;text-decoration:none;font-weight:700;font-size:13px
}

.big-balance{display:flex;flex-direction:column;align-items:center;padding:10px 0}
.tp-label{font-size:13px;color:var(--muted)}
.tp-value{font-size:44px;font-weight:800;color:var(--dark);margin-top:6px}

.daily-row{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:10px}
.daily-left .daily-text{font-size:13px;color:var(--muted)}
.daily-left .daily-amt{font-size:15px;color:var(--dark);font-weight:700}
.daily-amt .pct{color:#0aa65a;font-weight:800;margin-left:6px}

.settle-pill{
  display:flex;align-items:center;gap:8px;padding:8px;border-radius:10px;
  background:linear-gradient(90deg,#f7fbff,#f2fff8);border:1px solid rgba(0,0,0,0.02)
}
.settle-pill .clock{font-size:18px}
.settle-info .settle-title{font-size:12px;color:var(--muted)}
.settle-info .countdown-text{font-weight:800;color:var(--dark)}

.action-row{display:flex;gap:8px;margin-top:12px}
.action-btn{flex:1;padding:12px;border-radius:10px;text-align:center;text-decoration:none;font-weight:800;color:white;font-size:15px}
.action-btn.green{background:linear-gradient(90deg,var(--accent),#00e6b0)}
.action-btn.purple{background:linear-gradient(90deg,var(--purple),#a786ff)}

/* Tiers */
.card-head{display:flex;justify-content:space-between;align-items:center}
.card-head h3{margin:0;font-size:16px}
.hot{background:#ffeff0;color:var(--danger);padding:6px 8px;border-radius:8px;font-weight:800;font-size:12px}
.tiers{margin-top:8px}
.tier{
  display:flex;justify-content:space-between;padding:10px;border-radius:8px;
  background:linear-gradient(180deg,#fff,#fbfdff);margin-bottom:6px;border:1px solid rgba(0,0,0,0.02)
}
.t-left{font-weight:700;color:var(--muted)}
.t-right{font-weight:800;color:var(--accent)}
.tier.note{font-size:13px;color:var(--muted);background:transparent;border:none;padding-left:6px}

/* Market Ticker styles */
.market-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.market-head h4{margin:0;font-size:15px;color:#111827;font-weight:800}
.tick-refresh{background:#f3f4f6;border:1px solid rgba(0,0,0,0.04);padding:6px 8px;border-radius:8px;font-weight:700;cursor:pointer}

.ticker-list{display:flex;flex-direction:column;gap:8px}
.ticker-item{display:flex;align-items:center;justify-content:space-between;padding:10px;border-radius:10px;background:#fff;border:1px solid rgba(0,0,0,0.04)}
.ticker-left{display:flex;flex-direction:column;min-width:110px}
.pair{font-weight:800;color:#0f1724;font-size:14px}
.pair-sub{font-size:12px;color:var(--muted);margin-top:4px}
.ticker-mid{flex:1;text-align:center}
.price{font-weight:800;color:#111827;font-size:15px}
.ticker-right{text-align:right;min-width:90px}
.pct-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:10px;font-weight:800}
.pct-badge.up{color:#059669;background:rgba(5,150,105,0.08)}
.pct-badge.down{color:#dc2626;background:rgba(220,38,38,0.06)}
.ticker-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(0,0,0,0.04),transparent);margin:6px 0;border-radius:2px}
.ticker-loading,.ticker-error{text-align:center;color:var(--muted);padding:10px;font-size:13px}

/* Info row */
.info-row{display:flex;gap:10px}
.info-col{
  flex:1;padding:12px;border-radius:10px;background:linear-gradient(180deg,#fff,#fbfdff);
  text-align:center;border:1px solid rgba(0,0,0,0.02)
}
.info-title{font-size:13px;color:var(--muted)}
.info-value{font-size:15px;font-weight:800;margin-top:6px}

/* Transactions */
.tx-card h4{margin:0 0 8px 0;font-size:15px}
.tx-list{list-style:none;padding:0;margin:0}
.tx-list li{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dashed rgba(10,10,10,0.04)}
.tx-type{font-weight:800;color:var(--dark)}
.tx-meta{font-size:12px;color:var(--muted)}
.tx-right{font-weight:800;color:#2b7aee}

/* ---------------- Improved Bottom Navigation (mobile safe) ---------------- */
/* Replaces the original .bottom-nav block to avoid cut-off and align center */
.bottom-nav{
  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:9999;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  padding:10px;
  border-radius:16px;
  /* translucent panel for good contrast */
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,255,0.9));
  box-shadow: 0 12px 30px rgba(11,18,32,0.06);
  border: 1px solid rgba(0,0,0,0.04);

  /* iOS safe area support (if available) */
  padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
  min-height: 64px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

/* ensure main content has bottom padding so it's not hidden */
.phone-main {
  padding-bottom: calc(64px + 40px); /* nav height + breathing space */
}

/* nav item base */
.bottom-nav .nav-item{
  flex: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  color:var(--muted);
  font-weight:800;
  font-size:13px;
  background:transparent;
  border: 1px solid rgba(8,10,14,0.03);
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
  min-width:86px; /* helps keep items visible */
}

/* active tab style (bright gradient) */
.bottom-nav .nav-item.active{
  color: #fff;
  background: linear-gradient(90deg, #00d18a, #7b61ff);
  box-shadow: 0 10px 24px rgba(124,92,255,0.12);
  transform: translateY(-2px);
  border: none;
}

/* hover / tap feedback */
.bottom-nav .nav-item:active { transform: translateY(0); opacity:0.95; }

/* adjust label color if needed */
.bottom-nav .nav-item { color: #475569; }
.bottom-nav .nav-item.active { color: #ffffff; }

/* Responsive adjustments */
@media (max-width:420px){
  .phone-shell{margin:8px auto 110px;border-radius:14px}
  .tp-value{font-size:40px}
  .ticker-left{min-width:90px}
  .ticker-right{min-width:74px}
  .bottom-nav { left:8px; right:8px; bottom:10px; border-radius:14px; padding:8px; min-height:72px; }
  .phone-main { padding-bottom: calc(72px + 32px); }
  .bottom-nav .nav-item { font-size:13px; padding:10px 8px; }
}

/* Auth forms (dashboard style) */
.phone-shell { background:#f6f8fb; min-height:100vh; }
.phone-top { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; background:transparent; border-bottom:0; }
.phone-main { padding:12px; }
.auth-card input:focus { outline: none; border-color: #c6f0df; box-shadow: 0 4px 20px rgba(15,178,138,0.08); }
.small-link { color:#6b5df3; font-weight:600; text-decoration:none; }
/* ======================= */
/* 🔥 PREMIUM DARK THEME */
/* ======================= */

:root{
  --bg:#0b0f1a;
  --phone-bg:#121212;
  --card-bg:#1a1a1a;
  --accent:#00ffb3;
  --purple:#9b7bff;
  --muted:#9ca3af;
  --dark:#ffffff;
  --danger:#ff5b5b;
  --gold:#f7c046;
}

/* BODY BACKGROUND */
body{
  background:linear-gradient(180deg,#05070d,#0b0f1a);
  color:var(--dark);
}

/* PHONE FRAME */
.phone-shell{
  background:var(--phone-bg);
  border:1px solid rgba(255,255,255,0.05);
}

/* TOP HEADER */
.phone-top{
  background:#0f1724;
  border-bottom:1px solid rgba(255,255,255,0.05);
}

.top-center{ color:#ffffff; }

.withdraw-btn{
  background:linear-gradient(90deg,#f7c046,#ff9900);
  color:#000;
  font-weight:800;
}

/* CARDS */
.card{
  background:linear-gradient(180deg,#141414,#1b1b1b);
  box-shadow:0 6px 20px rgba(0,0,0,0.6);
  border:1px solid rgba(255,255,255,0.04);
}

/* TEXT COLORS */
.label,
.daily-text,
.settle-title,
.info-title,
.tx-meta,
.pair-sub{
  color:var(--muted);
}

.earned-val,
.big-balance,
.info-value,
.price{
  color:#ffffff;
}

/* BUTTONS */
.action-btn.green{
  background:linear-gradient(90deg,#00ffb3,#00c98a);
  color:#000;
}
.action-btn.purple{
  background:linear-gradient(90deg,#9b7bff,#6d4cff);
}

/* ROI LIST */
.tier{
  background:linear-gradient(180deg,#151515,#1e1e1e);
}
.t-right{
  color:var(--accent);
}

/* MARKET TICKER */
.ticker-item{
  background:#181818;
  border:1px solid rgba(255,255,255,0.05);
}

/* GREEN / RED BADGES */
.pct-badge.up{
  background:rgba(0,255,179,0.15);
  color:#00ffb3;
}
.pct-badge.down{
  background:rgba(255,91,91,0.15);
  color:#ff5b5b;
}

/* BOTTOM NAV BAR */
.bottom-nav{
  background:#0f1724;
  border:1px solid rgba(255,255,255,0.08);
}

.nav-item{
  background:#151515;
  color:#9ca3af;
  border:1px solid rgba(255,255,255,0.04);
}

.nav-item.active{
  background:linear-gradient(90deg,#00ffb3,#00c98a);
  color:#000;
  box-shadow:0 8px 20px rgba(0,255,179,0.25);
}

/* HISTORY / TRANSACTION */
.tx-right{
  color:#00ffb3;
}

/* SETTLEMENT PILL */
.settle-pill{
  background:linear-gradient(90deg,#0f1724,#141414);
  color:white;
}
/* ================================
   ROI PLAN – PREMIUM BLACK THEME
================================ */

.tiers-card {
  background: radial-gradient(circle at top, #020617, #000000 70%);
  border: 1px solid #1f2937;
}

.tiers-card .tier {
  background: linear-gradient(90deg, #020617, #020617);
  border: 1px solid rgba(34,197,94,0.25);
  box-shadow: 0 0 10px rgba(34,197,94,0.15);
  margin-bottom: 10px;
  padding: 14px 14px;
  border-radius: 12px;
}

.tiers-card .t-left {
  font-size: 15px;
  font-weight: 700;
  color: #e5e7eb;   /* pure silver white */
  letter-spacing: 0.4px;
}

.tiers-card .t-right {
  font-size: 16px;
  font-weight: 900;
  background: linear-gradient(90deg, #22c55e, #4ade80);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 12px rgba(34,197,94,0.55);
}

/* HOT badge glow */
.tiers-card .hot {
  background: linear-gradient(90deg, #ff512f, #dd2476);
  color: #fff;
  box-shadow: 0 0 12px rgba(255,80,80,0.6);
  border-radius: 10px;
}

/* settlement note */
.tiers-card .tier.note {
  background: transparent;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: #facc15;   /* premium gold yellow */
  text-shadow: 0 0 8px rgba(250,204,21,0.4);
  text-align: center;
  padding-top: 6px;
}
/* =====================================
   ROI PLAN – ANIMATED PREMIUM BLACK UI
===================================== */

.tiers-card {
  background: radial-gradient(circle at top, #020617, #000000 75%);
  border: 1px solid #1f2937;
  box-shadow: 0 0 25px rgba(0,0,0,0.9);
}

/* Each ROI row */
.tiers-card .tier {
  background: linear-gradient(90deg, #050b1a, #020617);
  border: 1px solid rgba(34,197,94,0.25);
  box-shadow: 0 0 14px rgba(34,197,94,0.18);
  margin-bottom: 12px;
  padding: 15px 14px;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Hover zoom + glow */
.tiers-card .tier:hover {
  transform: scale(1.02);
  box-shadow: 
    0 0 18px rgba(34,197,94,0.45),
    0 0 40px rgba(34,197,94,0.15);
}

/* Moving shine animation */
.tiers-card .tier::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 120%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(34,197,94,0.3), transparent);
  animation: roi-shine 3.5s infinite;
}

@keyframes roi-shine {
  0% { left: -120%; }
  50% { left: 120%; }
  100% { left: 120%; }
}

/* Left side text */
.tiers-card .t-left {
  font-size: 15px;
  font-weight: 700;
  color: #e5e7eb;
  letter-spacing: 0.4px;
}

/* Right side % with pulse glow */
.tiers-card .t-right {
  font-size: 17px;
  font-weight: 900;
  background: linear-gradient(90deg, #22c55e, #4ade80);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 14px rgba(34,197,94,0.6);
  animation: roi-pulse 2.5s infinite;
}

@keyframes roi-pulse {
  0%, 100% { text-shadow: 0 0 10px rgba(34,197,94,0.3); }
  50% { text-shadow: 0 0 20px rgba(34,197,94,0.9); }
}

/* HOT badge ultra glow */
.tiers-card .hot {
  background: linear-gradient(90deg, #ff512f, #dd2476);
  color: #fff;
  box-shadow: 0 0 14px rgba(255,80,80,0.8);
  border-radius: 10px;
}

/* Settlement gold line */
.tiers-card .tier.note {
  background: transparent;
  border: none;
  font-size: 13px;
  font-weight: 700;
  color: #facc15;
  text-shadow: 0 0 10px rgba(250,204,21,0.55);
  text-align: center;
  padding-top: 8px;
}

/* Mobile optimization */
@media (max-width: 420px) {
  .tiers-card .tier {
    padding: 13px 12px;
  }
  .tiers-card .t-left {
    font-size: 14px;
  }
  .tiers-card .t-right {
    font-size: 16px;
  }
}
/* =============================
   BALANCE ANIMATION + GLOW
============================= */

.anim-balance {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  position: relative;
  color: #e5f9ff;
  text-shadow: 0 0 10px rgba(56,189,248,0.65);
  transition: transform 0.3s ease, text-shadow 0.3s ease;
}

.anim-balance::after {
  content: "";
  position: absolute;
  inset: 60% -6px -4px -6px;
  background: radial-gradient(circle, rgba(56,189,248,0.25), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.anim-balance.anim-finished {
  text-shadow: 0 0 14px rgba(74,222,128,0.95);
}

.anim-balance.anim-finished::after {
  opacity: 1;
}
/* ===============================
   DAILY EARN % — NEON ANIMATION
================================ */

.anim-daily {
  font-weight: 900;
  color: #00ff9c;
  text-shadow: 0 0 10px rgba(0,255,156,0.45);
  display: inline-block;
  animation: dailyBounce 0.9s ease;
}

.anim-daily.glow {
  animation: dailyPulse 2.2s infinite;
}

/* First entry bounce */
@keyframes dailyBounce {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

/* Continuous pulse glow */
@keyframes dailyPulse {
  0%, 100% {
    text-shadow: 0 0 8px rgba(0,255,156,0.35);
  }
  50% {
    text-shadow: 0 0 18px rgba(0,255,156,0.95);
  }
}
/* Withdraw button inside You Earn */
.withdraw-mini-btn{
  background: linear-gradient(90deg,#ff9d00,#ff4e00);
  color:white;
  padding:7px 12px;
  font-size:12px;
  border-radius:10px;
  text-decoration:none;
  font-weight:800;
  text-align:center;
  box-shadow:0 0 14px rgba(255,120,0,0.6);
  animation: withdrawPulse 2s infinite;
}

@keyframes withdrawPulse{
  0% { box-shadow:0 0 8px rgba(255,120,0,0.4); }
  50%{ box-shadow:0 0 18px rgba(255,120,0,1); }
  100%{ box-shadow:0 0 8px rgba(255,120,0,0.4); }
}
/* ================= ROI SLIDER (Profit preview) ================ */

.roi-sim-card{
  background: radial-gradient(circle at top, #1f2933 0, #050816 55%, #02030a 100%);
  border-radius: 14px;
  padding: 14px 12px 16px;
  box-shadow: 0 14px 35px rgba(0,0,0,0.6);
  border: 1px solid rgba(148, 163, 184, 0.15);
}

.roi-sim-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.roi-sim-head h3{
  margin:0;
  font-size:15px;
  font-weight:700;
  color:#e5e7eb;
}

.roi-sim-tag{
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  background:linear-gradient(90deg,#22c55e,#16a6fa);
  color:#020617;
  font-weight:700;
}

/* top 4 boxes (Daily%, Daily, 7D, 30D) */
.roi-sim-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-bottom:10px;
}

.roi-sim-box{
  padding:8px 10px;
  border-radius:10px;
  background:radial-gradient(circle at top,#020617 0,#020617 55%,#020617 100%);
  border:1px solid rgba(55,65,81,0.9);
  box-shadow:0 6px 18px rgba(15,23,42,0.8) inset;
}

.roi-sim-label{
  font-size:11px;
  color:#9ca3af;
  margin-bottom:4px;
}

.roi-sim-value{
  font-size:14px;
  font-weight:700;
  color:#e5e7eb;
}

.roi-sim-percent{
  color:#22c55e;
}

/* slider + badge */
.roi-slider-wrap{
  position:relative;
  margin-top:10px;
  padding:20px 4px 6px;
}

.roi-amount-badge{
  position:absolute;
  top:0;
  left:0;
  transform:translateX(-50%);
  padding:4px 10px;
  font-size:11px;
  font-weight:700;
  border-radius:999px;
  background:radial-gradient(circle at top,#facc15,#f97316);
  color:#111827;
  box-shadow:0 10px 25px rgba(250,204,21,0.5);
  white-space:nowrap;
}

/* range input styling */
.roi-slider-wrap input[type="range"]{
  -webkit-appearance:none;
  width:100%;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,#0f172a,#111827);
  outline:none;
}

/* track (chrome / edge) */
.roi-slider-wrap input[type="range"]::-webkit-slider-runnable-track{
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,#0f172a,#111827);
}

/* thumb (chrome / edge) */
.roi-slider-wrap input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#facc15,#f97316);
  border:2px solid #111827;
  box-shadow:0 0 0 4px rgba(248,181,56,0.25);
  margin-top:-7px; /* center on track */
}

/* thumb (firefox) */
.roi-slider-wrap input[type="range"]::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#facc15,#f97316);
  border:2px solid #111827;
  box-shadow:0 0 0 4px rgba(248,181,56,0.25);
}

.roi-slider-wrap input[type="range"]::-moz-range-track{
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,#0f172a,#111827);
}

.roi-slider-scale{
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:#6b7280;
  margin-top:6px;
}

.roi-sim-note{
  margin-top:10px;
  font-size:11px;
  color:#9ca3af;
}

.roi-sim-note strong{
  color:#facc15;
}

/* ROI plan rows (jo tumne green highlighted chahiye the) */
.tier-plan{
  background:radial-gradient(circle at top,#020617 0,#020617 55%,#020617 100%);
  border:1px solid rgba(34,197,94,0.28);
  box-shadow:0 10px 30px rgba(16,185,129,0.12);
}

.tier-plan .t-left{
  color:#e5e7eb;
}

.tier-plan .t-right{
  color:#22c55e;
  text-shadow:0 0 8px rgba(34,197,94,0.5);
}
/* ==== SHRINK PROFIT PREVIEW CARD FOR ONE-SCREEN FIT ==== */

.roi-sim-card{
  padding: 10px 10px 12px !important;
}

.roi-sim-head h3{
  font-size: 13px !important;
}

.roi-sim-tag{
  font-size: 10px !important;
  padding: 3px 7px !important;
}

.roi-sim-grid{
  gap: 6px !important;
  margin-bottom: 6px !important;
}

.roi-sim-box{
  padding: 6px 8px !important;
}

.roi-sim-label{
  font-size: 10px !important;
}

.roi-sim-value{
  font-size: 13px !important;
}

/* Slider area compact */
.roi-slider-wrap{
  margin-top: 6px !important;
  padding: 14px 4px 4px !important;
}

.roi-amount-badge{
  font-size: 10px !important;
  padding: 3px 8px !important;
}

.roi-slider-wrap input[type="range"]{
  height: 3px !important;
}

.roi-slider-wrap input[type="range"]::-webkit-slider-thumb{
  width: 14px !important;
  height: 14px !important;
  margin-top: -6px !important;
}

.roi-slider-wrap input[type="range"]::-moz-range-thumb{
  width: 14px !important;
  height: 14px !important;
}

.roi-slider-scale{
  font-size: 10px !important;
  margin-top: 4px !important;
}

.roi-sim-note{
  font-size: 10px !important;
  margin-top: 6px !important;
}
/* ==== PROFIT PREVIEW ULTRA COMPACT (40% MORE SMALL) ==== */

.roi-sim-card{
  padding: 7px 8px 8px !important;
  border-radius: 14px !important;
}

.roi-sim-head{
  margin-bottom: 6px !important;
}

.roi-sim-head h3{
  font-size: 11px !important;
}

.roi-sim-tag{
  font-size: 9px !important;
  padding: 2px 6px !important;
}

/* 4 Stat Boxes */
.roi-sim-grid{
  gap: 5px !important;
  margin-bottom: 5px !important;
}

.roi-sim-box{
  padding: 5px 6px !important;
  border-radius: 8px !important;
}

.roi-sim-label{
  font-size: 9px !important;
}

.roi-sim-value{
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* Slider section */
.roi-slider-wrap{
  margin-top: 4px !important;
  padding: 10px 3px 3px !important;
}

.roi-amount-badge{
  font-size: 9px !important;
  padding: 2px 7px !important;
  top: -12px !important;
}

.roi-slider-wrap input[type="range"]{
  height: 2.5px !important;
}

.roi-slider-wrap input[type="range"]::-webkit-slider-thumb{
  width: 12px !important;
  height: 12px !important;
  margin-top: -5px !important;
}

.roi-slider-wrap input[type="range"]::-moz-range-thumb{
  width: 12px !important;
  height: 12px !important;
}

.roi-slider-scale{
  font-size: 9px !important;
  margin-top: 3px !important;
}

/* Bottom note */
.roi-sim-note{
  font-size: 9px !important;
  margin-top: 5px !important;
  line-height: 1.3 !important;
}
/* ==== REMOVE BLACK BACKGROUND FROM BOTTOM NAV ==== */

.bottom-nav{
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Nav buttons ka clean glass look */
.nav-item{
  background: rgba(255,255,255,0.08) !important;
  color: #aaa !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* Active item glow */
.nav-item.active{
  background: linear-gradient(90deg,#00e6b0,#7c5cff) !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(124,92,255,0.35) !important;
}
/* ===== MARKET TICKER TEXT COLOR FIX ===== */
.ticker-item,
.ticker-left,
.ticker-right,
.ticker-mid,
.ticker-item .pair,
.ticker-item .price,
.ticker-item .pct-badge,
.ticker-item .pair-sub {
    color: #ffffff !important;
}

/* Divider bhi light kar do */
.ticker-divider {
    background: rgba(255,255,255,0.15) !important;
}

/* Up/Down badge text white rahe */
.pct-badge.up,
.pct-badge.down {
    color: #ffffff
/* ===== NOTICE / MESSAGE CARD ===== */
.notice-card{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:16px;
  background:linear-gradient(
    135deg,
    rgba(34,197,94,0.10),
    rgba(99,102,241,0.10)
  );
  border:1px solid rgba(34,197,94,0.25);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,0.55);
}

.notice-icon{
  font-size:22px;
  background:linear-gradient(135deg,#22c55e,#6366f1);
  color:#020617;
  width:42px;
  height:42px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 20px rgba(99,102,241,0.6);
  flex-shrink:0;
}

.notice-title{
  font-size:15px;
  font-weight:800;
  color:#e5e7eb;
  margin-bottom:4px;
}

.notice-text{
  font-size:13px;
  line-height:1.6;
  color:#c7d2fe;
}