/* ===== Trend 2025 – Neon Aurora Profit Card (matches the mockup) ===== */

/* palette */
.apnl-card{
  --bg:#0b0f19;
  --panel:#121727;
  --glass: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.10);
  --text:#f3f6ff;
  --muted:#b2bad6;
  --chip:#1a2135;

  --green:#16e38f;
  --red:#ff4d6d;
  --yellow:#f8c444;

  --ring-start:#24d1f4;
  --ring-mid:#7c5cff;
  --ring-end:#35f9a5;
}

/* card container */
.apnl-card{
  position: relative;
  color: var(--text);
  background: radial-gradient(120% 100% at 20% 0%, rgba(61,26,138,.35), transparent 60%),
              radial-gradient(120% 100% at 90% 10%, rgba(16,185,129,.25), transparent 60%),
              linear-gradient(180deg, #0b0f19 0%, #0b0f19 100%);
  border: 1px solid var(--stroke);
  border-radius: 28px;
  padding: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  overflow: hidden;
  isolation: isolate;
}
.apnl-card::before{
  /* soft aurora glow */
  content:"";
  position:absolute; inset:-30% -20% -20% -20%;
  background:
    radial-gradient(40% 35% at 25% 10%, rgba(124,92,255,.55), transparent 70%),
    radial-gradient(40% 35% at 85% 20%, rgba(36,209,244,.45), transparent 70%),
    radial-gradient(40% 35% at 60% 110%, rgba(53,249,165,.35), transparent 70%);
  filter: blur(40px);
  opacity: .65;
  z-index: -1;
}

/* header */
.apnl-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px;
}
.apnl-symbol{
  font-weight: 900; font-size: 22px; letter-spacing:.4px;
  color: #fff;
}
.apnl-badge{
  padding: 9px 14px; border-radius: 999px; font-weight: 800; font-size: 12px;
  background: linear-gradient(135deg, #ffeaa0, #f6b72d);
  color: #291a00; border: 0; box-shadow: 0 6px 20px rgba(246,183,45,.35);
}
.apnl-card[data-status="correct"] .apnl-badge{
  background: linear-gradient(135deg,#7dffcf,#1bd98a); color:#001a0f; box-shadow: 0 6px 20px rgba(27,217,138,.35);
}
.apnl-card[data-status="fail"] .apnl-badge{
  background: linear-gradient(135deg,#ffb3c1,#ff506d); color:#2b0011; box-shadow: 0 6px 20px rgba(255,80,109,.35);
}

/* stats pills */
.apnl-stats{
  display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:10px;
}
.apnl-stat{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--stroke);
  border-radius: 16px; padding: 12px 14px;
  backdrop-filter: blur(8px);
}
.apnl-stat span{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
.apnl-stat strong{ font-size:16px; font-weight:900; color:#ffffff; }

/* PnL row: number + neon ring */
.apnl-pnl{
  display:grid; grid-template-columns: 1fr 220px; align-items:center; gap:28px;
  margin: 12px 0 16px;
}
.apnl-pnl-label{ font-size:13px; color:#c9d0ea; margin-bottom:6px; }
.apnl-pnl-value{
  /* turn value into neon gauge */
  --val: 0; /* 0..100 (abs%) – set via JS */
  width: 220px; height: 220px; border-radius: 50%;
  display:grid; place-items:center;
  font-size: 44px; font-weight: 900; letter-spacing:.3px;
  color:#dbe3ff;
  background:
    /* inner plate */
    radial-gradient(closest-side, #0f1426 78%, transparent 79% 100%),
    /* neon ring */
    conic-gradient(#7b8aa4 0% 0%, rgba(255,255,255,.08) 0),
    /* subtle ring glow */
    radial-gradient(70% 70% at 50% 50%, rgba(124,92,255,.25), transparent 70%);
  border: 2px solid rgba(255,255,255,.06);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 30px 80px rgba(124,92,255,.16),
    0 18px 50px rgba(36,209,244,.12),
    0 10px 40px rgba(53,249,165,.12);
  position: relative;
  overflow: hidden;
}
.apnl-pnl-value.pos{ color:var(--green); }
.apnl-pnl-value.neg{ color:var(--red); }

/* dynamic ring (updated by JS via --val) */
.apnl-pnl-value{
  --ringA: var(--ring-start);
  --ringB: var(--ring-mid);
  --ringC: var(--ring-end);
  background:
    radial-gradient(closest-side, #0f1426 78%, transparent 79% 100%),
    conic-gradient(from 0turn,
      var(--ringA) calc(var(--val)*1%), rgba(255,255,255,.08) 0),
    radial-gradient(70% 70% at 50% 50%, rgba(124,92,255,.25), transparent 70%);
}

/* invest row: chips */
.apnl-invest{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.apnl-invest label{ color:#eaf0ff; font-weight: 700; }
.apnl-invest input{
  width: 120px; padding: 9px 12px; border-radius: 12px;
  background: var(--chip); color:#fff; border:1px solid rgba(255,255,255,.10);
  outline:none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.apnl-invest input:focus{ border-color:#7c5cff; box-shadow: 0 0 0 6px rgba(124,92,255,.25); }
.apnl-amount{
  background: var(--chip);
  border:1px solid rgba(255,255,255,.10);
  color:#c7d0ec; padding: 8px 12px; border-radius:12px;
}
.apnl-amount strong{ color:#ffffff; }

/* sparkline holder (optional) */
.apnl-sparkline{
  height: 72px; border-radius: 16px; margin-top: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--stroke);
}

/* responsive */
@media (max-width: 980px){
  .apnl-pnl{ grid-template-columns: 1fr 180px; gap:20px }
  .apnl-pnl-value{ width:180px; height:180px; font-size:38px }
}
@media (max-width: 720px){
  .apnl-stats{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .apnl-pnl{ grid-template-columns: 1fr; }
  .apnl-pnl-value{ justify-self: center; }
}
@media (max-width: 520px){
  .apnl-stats{ grid-template-columns: 1fr; }
  .apnl-pnl-value{ width:160px; height:160px; font-size:34px }
  .apnl-symbol{ font-size:20px }
}

.apnl-cta{
  margin-top:18px; padding:18px 20px; border-radius:18px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  display:grid; grid-template-columns: 1fr auto; gap:12px; align-items:center;
}
.apnl-cta__title{ font-weight:900; font-size:22px; color:#fff }
.apnl-cta__sub{ color:#c7d0ec; font-size:14px; grid-column:1 / -1 }
.apnl-cta__btn{
  justify-self:end; text-decoration:none; font-weight:800; color:#0b0f19;
  padding:12px 18px; border-radius:14px;
  background: linear-gradient(135deg,#5eead4,#60a5fa);
  box-shadow: 0 12px 30px rgba(96,165,250,.35);
}
@media (max-width:720px){
  .apnl-cta{ grid-template-columns: 1fr; }
  .apnl-cta__btn{ justify-self:start }
}