:root{
  --bg: #0b1220; --bg-soft: #0f1830; --card: #0f1a33; --card-2:#111f3b;
  --text:#e8eefb; --muted:#a5b0c3; --brand:#5a8cff; --brand-2:#7bd6ff;
  --ok:#00d08a; --bad:#ff6b6b; --ring: rgba(90,140,255, .35);
  --shadow: 0 10px 30px rgba(0,0,0,.35); --radius: 18px;
}

/* Solid base so nothing "peeks through" on mobile */
html, body {
  background: var(--bg) !important;
}

/* Mobile: unify background & disable particles that cause banding/offset */
@media (max-width: 640px) {
  .qfs-bg {
    /* Single smooth background for mobile; no bottom banding */
    background: linear-gradient(180deg, #0b1220 0%, #0b1220 100%) !important;
  }
  .qfs-bg::before { display: none !important; }  /* kill floating glow on mobile */
  footer { background: transparent !important; box-shadow: none !important; }
}


*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 10% -10%, rgba(90,140,255,.15), transparent 40%),
              radial-gradient(1200px 800px at 110% 10%, rgba(123,214,255,.12), transparent 40%),
              var(--bg);
  color: var(--text); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; letter-spacing:.1px;
}
a{color: var(--brand); text-decoration:none; font-size: 15px;}
.container{max-width:1200px; margin:0 auto; padding:24px}
header.app{position:sticky; top:0; z-index:50; backdrop-filter:saturate(130%) blur(16px);
  background:linear-gradient(to right, rgba(15,26,51,.85), rgba(17,31,59,.75));
  border-bottom:1px solid rgba(255,255,255,.06);}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 24px}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.3px}
.brand .logo {
  width: 50px;        /* adjust size */
  height: 50px;
  border-radius: 8px; /* optional if you want rounded corners */
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;   /* remove the gradient background */
  box-shadow: none;   /* remove old shadow if not needed */
padding: 0;         /* reset padding */
}
.brand .logo img {
  max-width: 100%; max-height: 100%;display: block;
}

.tabs{display:flex; flex-wrap:wrap; gap:8px}
.tabs a{padding:10px 14px; border-radius:12px; color:var(--muted); border:1px solid transparent}
.tabs a.active,.tabs a:hover{color:var(--text); background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.06)}
.profile{display:flex; align-items:center; gap:12px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  color:var(--text); cursor:pointer; box-shadow:var(--shadow); transition:transform .08s ease, box-shadow .3s ease, background .3s ease;}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#05122b; font-weight:700; border-color:transparent; box-shadow:0 10px 24px var(--ring); font-size: 15px;}
.grid{display:grid; gap:22px; grid-template-columns:repeat(12,1fr); margin-top:24px}
.card{background:linear-gradient(180deg, var(--card), var(--card-2)); border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:22px}
.card h3{margin:0 0 8px 0; font-size:14px; text-transform:uppercase; letter-spacing:.18em; color:var(--muted)}
.value{font-size:28px; font-weight:800; letter-spacing:.3px}
.muted{color:var(--muted)} .kicker{font-size:12px; color:var(--muted)} .row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.chip{padding:6px 10px; border-radius:999px; font-weight:600; font-size:12px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04)}
.chip.ok{color:var(--ok); border-color:rgba(0,208,138,.28); background:rgba(0,208,138,.08)}
.chip.bad{color:var(--bad); border-color:rgba(255,107,107,.28); background:rgba(255,255,255,.08)}
.connect{padding:6px 10px; border-radius:999px; font-weight:600; font-size:12px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04)}
.connect.ok {color:var(--ok); border-color:rgba(209, 18, 15, 0.28); background:rgba(172, 32, 32, 0.08); color: red;}
.quick-actions{grid-column:span 12; display:grid; gap:20px; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:start}
.quick-actions .btn{padding:18px 14px; font-weight:700}
.quick-actions .qa{display:flex; flex-direction:column; gap:12px}
.welcome{grid-column:1 / -1; font-weight:800; font-size: clamp(20px, 2.6vw, 28px); line-height:1.2; color: var(--text); margin-bottom: 4px}
.stat{grid-column:span 4; min-height:130px; display:flex; flex-direction:column; justify-content:space-between}
.stat .coin{display:flex; align-items:center; gap:12px}
.coin .icon{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-weight:800; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08)}
.price{font-size:22px; font-weight:800} .change{font-size:13px}
.skeleton{position:relative; overflow:hidden; background:rgba(255,255,255,.06); border-radius:10px; height:14px}
.skeleton::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); animation:shimmer 1.3s infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.holdings{margin-top:12px; padding-top:10px; border-top:1px dashed rgba(255,255,255,.12); display:grid; gap:8px}
.holdings-row{display:grid; grid-template-columns:60px 1fr auto; gap:10px; align-items:center; font-size:14px}
.holdings-row .ticker{color:var(--muted); font-weight:700}
.holdings-row .amt{color:var(--text); opacity:.9}
.holdings-row .fiat{font-weight:700}
.ref-card{grid-column:span 6}
.video-card{grid-column:span 6; min-height:160px; display:flex; align-items:center; justify-content:center}
.video-card .placeholder{width:100%; aspect-ratio:16/9; border-radius:14px; border:1px dashed rgba(255,255,255,.15);
  display:grid; place-items:center; color:var(--muted); background:repeating-linear-gradient(45deg, rgba(255,255,255,.02), rgba(255,255,255,.02) 12px, rgba(255,255,255,.035) 12px, rgba(255,255,255,.035) 24px)}
.table{grid-column:span 12; overflow:auto}
table{width:100%; border-collapse:collapse; font-size:14px}
th,td{padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.06); text-align:left}
th{color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.12em; font-size:12px}
tr:hover td{background:rgba(255,255,255,.03)}
footer{opacity:.8; font-size:12px; color:var(--muted); padding:20px 0 40px; text-align:center}
.right{margin-left:auto}
.copy{display:flex; gap:10px; align-items:center; margin-top:8px}
.input{flex:1; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); color:var(--text)}
.kyc-btn{white-space:nowrap; font-size: 13px; }
/* Balance expand animation & only Balance grows */
.stat.balance:has(details[open]){ grid-row: span 2; }
.stat.balance .breakdown .holdings{ max-height:0; overflow:hidden; opacity:0; transition:max-height .3s ease, opacity .2s ease }
.stat.balance .breakdown[open] .holdings{ max-height:480px; opacity:1 }
/* Stagger rows */
.stat.balance .breakdown[open] .holdings-row:nth-child(1){ transition:opacity .25s ease .02s, transform .3s ease .02s }
.stat.balance .breakdown[open] .holdings-row:nth-child(2){ transition:opacity .25s ease .04s, transform .3s ease .04s }
.stat.balance .breakdown[open] .holdings-row:nth-child(3){ transition:opacity .25s ease .06s, transform .3s ease .06s }
.stat.balance .breakdown[open] .holdings-row:nth-child(4){ transition:opacity .25s ease .08s, transform .3s ease .08s }
.stat.balance .breakdown[open] .holdings-row:nth-child(5){ transition:opacity .25s ease .10s, transform .3s ease .10s }
/* Auth pages */
.auth-wrap{ min-height: calc(100vh - 80px); display:grid; place-items:center; }
.auth-card{ width:100%; max-width: 420px; }
.auth-card h1{ margin:0 0 10px 0; }
.auth-form{ display:grid; gap:12px; }
.auth-footer{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; color:var(--muted); font-size:14px; }
.auth-footer a{ color: var(--brand); }
@media (max-width:1024px){ .stat{grid-column:span 6} .ref-card,.video-card{grid-column:span 12} }
@media (max-width:640px){ .tabs{display:none} .quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))} .stat{grid-column:span 12} }
/* QFS Card — centered layout + sample image */
.qfs-card { padding: 20px; }


.qfs-card .row:first-child { margin-bottom: 8px; }

.qcard-wrap{
  display: grid;
  place-items: center;
  margin: 16px 0 14px;
}



/* Image-only card layout */
.qcard-wrap {
  display: flex;
  justify-content: center;
  margin: 24px 0 16px;
}

.qfs-card-img {
  display: block;
  width: min(100%, 520px);
  height: auto;
  border-radius: 20px;
  box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.25));
}

/* Wallet gallery */
.wallet-row { margin-top: 8px; }
.wallet-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.wallet-item {
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .3s ease, background .3s ease;
}
.wallet-item:hover { transform: translateY(-1px); }
.wallet-item img {
  width: 55px;          /* force same box size */
  height: 55px;
  object-fit: contain;  /* preserve proportions inside the box */
  display: block;
  filter: drop-shadow(0 6px 14px rgba(90,140,255,.25));
}
.wallet-item span {
  font-size: 13px; color: var(--text); opacity: .9; text-align: center;
}

/* Mobile */
@media (max-width: 900px)  { .wallet-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 520px)  { .wallet-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ==== QFS Registration Refresh ==== */

/* Background upgrade */
.qfs-bg{
  background:
    radial-gradient(1000px 600px at 20% -10%, rgba(90,140,255,.18), transparent 55%),
    radial-gradient(900px 700px at 120% 10%, rgba(123,214,255,.14), transparent 50%),
    radial-gradient(800px 800px at 50% 120%, rgba(20,40,100,.25), transparent 60%),
    var(--bg);
  position: relative;
  overflow-x: hidden;
}

/* Soft particles */
.qfs-bg::before{
  content:"";
  position:fixed; inset:-10% -10% auto -10%;
  height:140%;
  background:
    radial-gradient(12px 12px at 10% 20%, rgba(123,214,255,.2), transparent 60%),
    radial-gradient(10px 10px at 40% 80%, rgba(90,140,255,.18), transparent 60%),
    radial-gradient(8px 8px at 80% 30%, rgba(90,140,255,.15), transparent 60%);
  filter: blur(18px);
  pointer-events:none;
  animation: drift 18s linear infinite alternate;
}
@keyframes drift{ from{ transform: translateY(-2%)} to{ transform: translateY(2%)} }

/* Brand header tweaks */
.brand-text{ font-weight:800; letter-spacing:.2px; opacity:.9 }
.brand .logo{ width:44px; height:44px; border-radius:12px; box-shadow:none; padding:0 }
.brand .logo img{ max-width:100%; max-height:100%; display:block; filter: drop-shadow(0 8px 18px rgba(90,140,255,.35)); }

/* Hero */
.hero-wrap{ display:grid; place-items:center; margin-top: 18px; }
.hero{ text-align:center; max-width:820px; padding: 0 20px; }
.hero-kicker{ color:var(--brand-2); font-weight:700; letter-spacing:.18em; font-size:12px; opacity:.9 }
.hero-title{ margin:6px 0 6px; font-size: clamp(28px, 4.4vw, 44px); font-weight:800; letter-spacing:.2px }
.hero-sub{ color:var(--muted); font-size: clamp(14px, 1.6vw, 16px) }

/* Elevated glass card */
.elevated{
  background: linear-gradient(180deg, rgba(20,30,60,.7), rgba(17,31,59,.66));
  backdrop-filter: blur(14px) saturate(120%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow: 0 10px 30px rgba(5,15,35,.55);
}
.ringed{
  position: relative;
}
.ringed::after{
  content:"";
  position:absolute; inset:-2px; z-index:-1; border-radius: calc(var(--radius) + 6px);
  background: conic-gradient(from 90deg, rgba(90,140,255,.25), rgba(123,214,255,.2), rgba(90,140,255,.25));
  filter: blur(22px); opacity:.6;
}

/* Form sizing */
.auth-card{ width:100%; max-width:520px; padding: 28px 24px; }
.auth-card h1{ display:none } /* we use hero title instead */

/* Small verification badge */
.qfs-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700;
  border:1px solid rgba(255,255,255,.1); color:var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  margin-bottom: 10px;
}
.qfs-badge .dot{ width:7px; height:7px; border-radius:999px; background: var(--ok); box-shadow:0 0 0 6px rgba(0,208,138,.08) }

/* Fields */
.field{ display:grid; gap:8px }
.field span{ font-size:13px; color:var(--muted) }

.password-wrap{ position:relative; display:flex; align-items:center; }
.password-wrap .input{ padding-right:44px }
.ghost.eye{
  position:absolute; right:6px; height:38px; width:38px; border-radius:10px;
  border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03);
  cursor:pointer; display:grid; place-items:center; box-shadow:var(--shadow);
}

/* Strength meter */
.strength{
  margin-top:8px; height:6px; background:rgba(255,255,255,.06);
  border-radius:999px; overflow:hidden; border:1px solid rgba(255,255,255,.06);
}
.strength .bar{
  height:100%; width:0%; transition: width .25s ease;
  background: linear-gradient(90deg, #ff6b6b, #ffd166, #06d6a0, #00d08a);
}
.strength .bar[data-level="0"]{ width:6% }
.strength .bar[data-level="1"]{ width:25% }
.strength .bar[data-level="2"]{ width:50% }
.strength .bar[data-level="3"]{ width:75% }
.strength .bar[data-level="4"]{ width:100% }
.strength-hints{ color:var(--muted); font-size:12px; margin-top:6px }

/* Terms row */
.terms{ align-items:center; justify-content:space-between; gap:10px; margin-top:4px }
.check{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted) }
.check input{ width:16px; height:16px }

/* Primary CTA */
.btn.xl{ padding:14px 18px; font-size:16px; font-weight:800; letter-spacing:.2px }
.spinner{
  width:16px; height:16px; border-radius:999px; border:2px solid rgba(255,255,255,.7);
  border-top-color: transparent; margin-right:8px; display:inline-block;
  animation: spin .75s linear infinite;
}
@keyframes spin{ to{ transform: rotate(1turn) } }

/* Feedback */
.form-error, .form-success{ margin:12px 0 0; font-size:14px }
.form-error{ color:var(--bad) }
.form-success{ color:var(--ok) }

/* Trust strip */
.trust-strip{
  margin-top:18px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  color:var(--muted); font-size:12px;
}
.trust-item{
  padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03)
}

/* Footer */
footer{ opacity:.75; font-size:12px; color:var(--muted); padding:20px 0 40px; text-align:center }

/* Responsive */
@media (max-width:640px){
  .brand-text{ display:none }
  .auth-card{ margin: 0 12px }
}

/* Inputs: fully rounded & smoother */
.input {
  flex: 1;
  padding: 14px 16px;
  border-radius: 999px; /* full rounded pill */
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  color: var(--text);
  font-size: 15px;
  transition: border .2s ease, background .2s ease;
}
.input:focus {
  outline: none;
  border-color: var(--brand-2);
  background: rgba(255,255,255,.08);
}


.auth-card {
  width: 100%;
  max-width: 420px;
  text-align: center;   /* center all inside */
  padding: 28px 24px;
}
.auth-card h1 {
  margin: 0 0 16px 0;   /* less gap to form */
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
}

/* Form: smoother flow */
.auth-form {
  display: grid;
  gap: 16px;
  margin-top: 10px; /* reduced space between title and form */
}

.auth-footer {
  display: flex;
  justify-content: center; /* center footer links */
  margin-top: 14px;
  font-size: 14px;
}

/* ===== Background cleanup: consistent dark, no bottom glow ===== */

/* Remove the bottom glow by dropping the third radial and trimming particles */
.qfs-bg{
  background:
    radial-gradient(1000px 600px at 20% -10%, rgba(90,140,255,.18), transparent 55%),
    radial-gradient(900px 700px at 120% 10%, rgba(123,214,255,.14), transparent 50%),
    var(--bg) !important; /* removed bottom radial at 50% 120% */
  position: relative;
  overflow-x: hidden;
}

/* Keep subtle particles only in the top half so footer stays clean */
.qfs-bg::before{
  content:"";
  position:fixed; left:-10%; right:-10%; top:-10%;
  height:60vh;                 /* was ~140% height – now top-only */
  background:
    radial-gradient(12px 12px at 10% 20%, rgba(123,214,255,.18), transparent 60%),
    radial-gradient(10px 10px at 40% 40%, rgba(90,140,255,.14), transparent 60%),
    radial-gradient(8px 8px at 80% 30%, rgba(90,140,255,.12), transparent 60%);
  filter: blur(18px);
  pointer-events:none;
  animation: drift 18s linear infinite alternate;
}

/* Footer should not introduce any banding/glow */
footer{
  background: transparent !important;
  box-shadow: none !important;
}

/* ===== Spacing: bring the form card closer to the title ===== */

.hero-wrap{ 
  margin-top: 25px;         /* small top offset under navbar */
  margin-bottom: 10px;       /* tighter gap above the form */
}

.auth-wrap{
  min-height: unset;        /* let content size the page naturally */
  display: grid;
  place-items: center;
  padding-top: 15px;          /* remove extra top padding */
  margin-top: 0;            /* avoid pushing the card down */
  
}

.auth-card{
  border-radius: 20px;
  overflow: hidden;
  margin-top: 0;            /* right under the hero */
  text-align: center;
  padding: 26px 22px;
}


/* Login page polish (inherits register theme) */
.login-row { align-items:center; justify-content:space-between; gap:10px; }
.tiny-muted{ color:var(--muted); font-size:13px; }


/* Nice focus glow that matches QFS blue */
.input:focus {
  outline: none;
  border-color: var(--brand-2);
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 3px rgba(123,214,255,.12), 0 8px 22px rgba(90,140,255,.25);
}


/* Make the card image wrapper a positioning context */
.qcard-wrap { position: relative; }

/* When frozen, darken the card image */
.is-frozen .qfs-card-img {
  filter: brightness(0.6) grayscale(25%);
  position: relative;
}