:root{
  --qnt-bg: #0e0b1f;
  --qnt-card: rgba(255,255,255,0.06);
  --qnt-text: #f2ecff;
  --qnt-sub: #c9b8ff;
  --qnt-accent1: #8b5cf6; /* purple */
  --qnt-accent2: #ec4899; /* pink */
}
.qnt-wrap{ display:flex; justify-content:center; padding:24px; }
.qnt-card{
  width:min(780px,92vw); padding:28px 28px 32px;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.12);
  border-radius:18px; color:var(--qnt-text); backdrop-filter: blur(8px);
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
}
.qnt-title{ font-size:28px; margin:0 0 6px; }
.qnt-hello{ color:var(--qnt-sub); margin:0 0 18px; }
.qnt-balance{ font-size:20px; margin:10px 0 6px }
.qnt-balance span{ color:#fff; font-weight:700; }
.qnt-ids{ display:grid; grid-template-columns:1fr; gap:6px; margin:8px 0 18px; }
.qnt-qr{ display:flex; flex-direction:column; align-items:center; gap:10px; margin:10px 0 22px }
.qnt-topup{ margin-top:4px }
.qnt-topup-row{ display:flex; gap:10px; }
.qnt-label{ display:block; margin:0 0 8px; color:var(--qnt-sub) }
.qnt-btn{
  border:0; padding:12px 18px; border-radius:12px; color:white; font-weight:700; cursor:pointer;
  background: linear-gradient(90deg, var(--qnt-accent1), var(--qnt-accent2));
  box-shadow: 0 8px 24px rgba(236,72,153,.28);
}
.qnt-btn:hover{ filter: brightness(1.07); }
.qnt-btn-outline{
  border:1px solid rgba(255,255,255,.22); padding:10px 14px; border-radius:12px; color:#fff; text-decoration:none;
}
#qnt-amount{
  flex:1; min-width:120px; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08); color:#fff; outline:none;
}
code{ background: rgba(255,255,255,.08); padding:2px 6px; border-radius:6px }
<?php echo get_option('qantara_brand_css',''); ?>