/* Theme: dark navy -> gold (AmritaExchange style) */
/* Import Poppins font as fallback; if your site uses different font this will be similar */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

:root{
  --navy-1:#0f2b4a;
  --navy-2:#1a3e67;
  --gold:#f1c40f;
  --muted:#9fb1c9;
  --card-bg:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}

.nexgen-ref-card.themed{font-family:'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  max-width:940px;margin:20px auto;background:var(--card-bg);border-radius:14px;overflow:hidden;box-shadow:0 12px 40px rgba(10,20,40,0.4);
  color:#fff;border:1px solid rgba(255,255,255,0.04);
  background: radial-gradient(800px 200px at 10% 0%, rgba(255,255,255,0.02), transparent), linear-gradient(180deg,var(--navy-1), var(--navy-2));
}

/* header */
.nexgen-ref-card .header{display:flex;align-items:center;gap:20px;padding:22px 28px;border-bottom:1px solid rgba(255,255,255,0.03);}
.nexgen-ref-card .header .title h2{margin:0;font-size:20px;font-weight:700;color:#fff;}
.nexgen-ref-card .header .title p{margin:4px 0 0;color:var(--muted);font-size:13px;}
.nexgen-ref-card .header .banner-graphic{flex:0 0 80px;height:56px;border-radius:8px;background:linear-gradient(135deg,var(--gold),#f7d86b);box-shadow:0 6px 18px rgba(0,0,0,0.3);}

/* link row */
.link-row{display:flex;gap:10px;padding:18px;border-bottom:1px solid rgba(255,255,255,0.03);align-items:center;}
.link-row input{flex:1;padding:12px 14px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:#fff;font-size:14px;}
.link-row .btn{padding:10px 14px;border-radius:8px;border:none;cursor:pointer;background:transparent;color:#0f2b4a;font-weight:600;border:2px solid rgba(255,255,255,0.06);}
.link-row .btn.gold{background:var(--gold);color:var(--navy-1);box-shadow:0 8px 20px rgba(241,196,15,0.12)}

/* actions and stats */
actions-and-stats{display:flex;gap:18px;padding:18px;align-items:flex-start;flex-wrap:wrap;}
.actions{display:flex;gap:10px;flex:0 0 auto;}
.icon-btn{width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.02);text-decoration:none;}
.icon-btn svg{width:22px;height:22px;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3));}
.icon-btn:hover{background:var(--gold);transform:translateY(-4px);transition:all .18s ease;}

/* stats */
.stats{display:flex;gap:12px;flex:1;align-items:stretch;flex-wrap:wrap;}
.stat-card{flex:1;min-width:120px;background:rgba(255,255,255,0.03);padding:12px;border-radius:10px;text-align:center;border:1px solid rgba(255,255,255,0.03);}
.stat-card .label{font-size:12px;color:var(--muted)}
.stat-card .value{font-size:18px;font-weight:700;margin-top:6px}
.gold-fill{background:linear-gradient(90deg,#fff2c7, #f7e49b);color:var(--navy-1);border:1px solid rgba(0,0,0,0.06)}

/* history */
.history{padding:18px;border-top:1px solid rgba(255,255,255,0.03);}
.history h3{margin:0 0 12px 0;font-size:16px;color:#fff}
.muted{color:var(--muted)}

/* table */
.table-wrap{overflow-x:auto;border-radius:8px;}
.history-table{width:100%;border-collapse:collapse;background:transparent;color:#eaf3ff}
.history-table thead th{font-size:12px;text-align:left;padding:10px 12px;color:var(--muted);border-bottom:1px solid rgba(255,255,255,0.03);}
.history-table tbody td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,0.03);font-size:13px;color:#fff}

/* toast */
.nexgen-toast{position:fixed;right:20px;bottom:20px;background:rgba(15,43,74,0.96);color:#fff;padding:10px 14px;border-radius:8px;box-shadow:0 8px 24px rgba(10,20,40,0.6);opacity:0;transform:translateY(8px);transition:all .28s ease;z-index:99999}
.nexgen-toast.show{opacity:1;transform:translateY(0);}

/* responsive */
@media (max-width:720px){
  .nexgen-ref-card.themed{margin:12px;padding:0}
  .actions-and-stats{flex-direction:column}
  .actions{justify-content:flex-start}
  .stat-card{width:100%}
  .link-row{flex-direction:column;align-items:stretch}
  .link-row .btn{width:100%}
}
