:root { --safe-bottom: env(safe-area-inset-bottom); }
.wrap { padding-bottom: calc(80px + var(--safe-bottom)); }

.sticky-progress{
  position: sticky;
  top: 86px;
  z-index: 50;
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(21,25,33,.72);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  margin: 18px 0;
}
.progress-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.progress-bar>div{height:100%;width:0%;background:linear-gradient(90deg,var(--primary),#7c3aed);border-radius:999px}

.qcard{border-radius:22px;padding:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03)}
.qcard + .qcard{margin-top:14px}

.bottom-share{
  position: fixed; left: 0; right: 0; bottom: 0;
  padding: 12px 8%;
  padding-bottom: calc(12px + var(--safe-bottom));
  background: rgba(11,14,20,.72);
  border-top: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  z-index: 60;
}
.bottom-share .inner{
  max-width: 1400px;
  margin: 0 auto;
  display:flex; gap:12px; justify-content:space-between; align-items:center; flex-wrap:wrap
}
.smallbtn{
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: white;
  text-decoration: none;
  font-weight: 800;
}
.smallbtn:active{transform:scale(.98)}